Call Us: +7.906.229.2627
Follow Us:
HTML5 template

Docs - Boxes

Connect boxes.css to use boxes styles.

box

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

<div class="pi-box">
  <h6>box</h6>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
    rem aperiam, eaque ipsa</p>
</div>
box with border

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

<div class="pi-box pi-border">
  <h6>box with border</h6>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
    rem aperiam, eaque ipsa</p>
</div>
box slave

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

<div class="pi-box pi-box-slave pi-border">
  <h6>box slave</h6>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
    rem aperiam, eaque ipsa</p>
</div>
box round

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

<div class="pi-box pi-border pi-round">
  <h6>box round</h6>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
    rem aperiam, eaque ipsa</p>
</div>
border left

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

<div class="pi-box pi-border pi-border-left">
  <h6>border left</h6>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
    rem aperiam, eaque ipsa</p>
</div>
border top

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

<div class="pi-box pi-border pi-border-top">
  <h6>border top</h6>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
    rem aperiam, eaque ipsa</p>
</div>
box shadow

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

<div class="pi-box pi-border">
  <h6>box shadow + box border</h6>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
    rem aperiam, eaque ipsa</p>
</div>
shadow effect 1

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

<div class="pi-shadow-effect1">
  <div class="pi-box pi-border">
    <h6>shadow effect 1</h6>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
      totam rem aperiam, eaque ipsa</p>
  </div>
</div>
shadow effect 2

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

<div class="pi-shadow-effect2">
  <div class="pi-box pi-border">
    <h6>shadow effect 2</h6>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
      totam rem aperiam, eaque ipsa</p>
  </div>
</div>
shadow effect 3

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

<div class="pi-shadow-effect3">
  <div class="pi-box pi-border">
    <h6>shadow effect 3</h6>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
      totam rem aperiam, eaque ipsa</p>
  </div>
</div>
shadow effect 4

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

<div class="pi-shadow-effect4">
  <div class="pi-box pi-border">
    <h6>shadow effect 4</h6>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
      totam rem aperiam, eaque ipsa</p>
  </div>
</div>
shadow effect 5

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

<div class="pi-shadow-effect5">
  <div class="pi-box pi-border">
    <h6>shadow effect 5</h6>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
      totam rem aperiam, eaque ipsa</p>
  </div>
</div>
shadow effect 6

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

<div class="pi-shadow-effect6">
  <div class="pi-box pi-border">
    <h6>shadow effect 6</h6>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
      totam rem aperiam, eaque ipsa</p>
  </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
Say Hey

© 2014. «Aura HTML Theme». All right reserved.