Call Us: +7.906.229.2627

Docs - Sections

Website page consists of sections. So we have special section element. It consists from wrapper and child element, wrapper is used for make people think that section takes 100% width of the page, and child element used for centering content and adds some paddings at the top and bottom.

There are 4 color schemes for our sections. Section could has parallax background and the second background with pattern as well. It could have top and bottom borders and internal shadows.

All of that could be contolled by css

We did so each element have it's own color scheme for each section color scheme. So you shouldn't care about how it will look on white/black background.

Connect sections.css to use sections.

.pi-section-w - section wrapper
.pi-section - section container

Section wrapper modifyers:

.pi-section-white - white section color scheme
.pi-section-grey - grey section color scheme
.pi-section-base - base color section color scheme
.pi-section-dark - dark section color scheme
.pi-section-parallax - parallax image in section wrapper background, actually it just sets background to be fixed and cover all the element.
.pi-borders - section has top and bottom border.
.pi-border-top - section has top border.
.pi-border-bottom - section has bottom border.
.pi-borders-light - section has top and bottom border.
.pi-borders-light-top - section has top border.
.pi-borders-light-bottom - section has bottom border.
.pi-shadow-inside - section has inside shadows.
.pi-shadow-inside-top - section has inside top shadow.
.pi-shadow-inside-bottom - section has inside bottom shadow.

Section has top and bottom paddings, bottom padding is shorter then top, because each content element has it's own bottom margin.

Section white

<div class="pi-section-w pi-section-white">
  <div class="pi-section">
    <h2>Section white</h2>
  </div>
</div>

Section grey

<div class="pi-section-w pi-section-grey">
  <div class="pi-section">
    <h2>Section grey</h2>
  </div>
</div>

Section base

<div class="pi-section-w pi-section-base">
  <div class="pi-section">
    <h2>Section base</h2>
  </div>
</div>

Section dark

<div class="pi-section-w pi-section-dark">
  <div class="pi-section">
    <h2>Section dark</h2>
  </div>
</div>

Section with parallax

<div class="pi-section-w pi-section-parallax">
  <div class="pi-section">
    <h2>Section with parallax</h2>
  </div>
</div>

Section grey - with borders

<div class="pi-section-w pi-section-grey pi-borders">
  <div class="pi-section">
    <h2>Section grey - with borders</h2>
  </div>
</div>

Section grey - with inside shadows

<div class="pi-section-w pi-section-grey pi-shadow-inside">
  <div class="pi-section">
    <h2>Section grey - with inside shadows</h2>
  </div>
</div>

Latest Tweet

Contact Us

Address: 557 Cyan Avenue, Suite 65,
New York, CA 9008
Phone: (123) 456-7890
Email: hello@pitheme.com
Monday - Friday: 9:00 am - 10:00 pm
Saturday - Sunday: Closed