ICONS & BOXES
<!--
LTR INFO: box-icon-left or box-icon-right - are the same on LTR
-->
<div class="row">
<div class="col-md-3">
<div class="box-icon box-icon-left box-icon-round">
<a class="box-icon-title" href="#">
<i class="fa fa-tablet"></i>
<h2>Fully Reposnive</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<a class="box-icon-more font-lato weight-300" href="#">Learn More</a>
</div>
</div>
<div class="col-md-3">
<div class="box-icon box-icon-left box-icon-round">
<a class="box-icon-title" href="#">
<i class="fa fa-random"></i>
<h2>Clean Design</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<a class="box-icon-more font-lato weight-300" href="#">Learn More</a>
</div>
</div>
<div class="col-md-3">
<div class="box-icon box-icon-left box-icon-round">
<a class="box-icon-title" href="#">
<i class="fa fa-tint"></i>
<h2>Reusable Elements</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<a class="box-icon-more font-lato weight-300" href="#">Learn More</a>
</div>
</div>
<div class="col-md-3">
<div class="box-icon box-icon-left box-icon-round">
<a class="box-icon-title" href="#">
<i class="fa fa-cogs"></i>
<h2>Multipurpose</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<a class="box-icon-more font-lato weight-300" href="#">Learn More</a>
</div>
</div>
</div>
<!--
LTR INFO: box-icon-left or box-icon-right - are the same on LTR
-->
<div class="row">
<div class="col-md-3">
<div class="box-icon box-icon-left">
<a class="box-icon-title" href="#">
<i class="fa fa-tablet"></i>
<h2>Fully Reposnive</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<a class="box-icon-more font-lato weight-300" href="#">Learn More</a>
</div>
</div>
<div class="col-md-3">
<div class="box-icon box-icon-left">
<a class="box-icon-title" href="#">
<i class="fa fa-random"></i>
<h2>Clean Design</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<a class="box-icon-more font-lato weight-300" href="#">Learn More</a>
</div>
</div>
<div class="col-md-3">
<div class="box-icon box-icon-left">
<a class="box-icon-title" href="#">
<i class="fa fa-tint"></i>
<h2>Reusable Elements</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<a class="box-icon-more font-lato weight-300" href="#">Learn More</a>
</div>
</div>
<div class="col-md-3">
<div class="box-icon box-icon-left">
<a class="box-icon-title" href="#">
<i class="fa fa-cogs"></i>
<h2>Multipurpose</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<a class="box-icon-more font-lato weight-300" href="#">Learn More</a>
</div>
</div>
</div>
<div class="row"> <div class="col-md-4"> <div class="box-icon box-icon-side box-icon-round"> <i class="fa fa-tablet"></i> <a class="box-icon-title" href="#"> <h2>Fully Reposnive</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-4"> <div class="box-icon box-icon-side box-icon-round"> <i class="fa fa-tint"></i> <a class="box-icon-title" href="#"> <h2>Reusable Elements</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-4"> <div class="box-icon box-icon-side box-icon-round"> <i class="fa fa-cogs"></i> <a class="box-icon-title" href="#"> <h2>Multipurpose</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> </div>
<div class="row"> <div class="col-md-4"> <div class="box-icon box-icon-side box-icon-color box-icon-round"> <i class="fa fa-tablet"></i> <a class="box-icon-title" href="#"> <h2>Fully Reposnive</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-4"> <div class="box-icon box-icon-side box-icon-color box-icon-round"> <i class="fa fa-tint"></i> <a class="box-icon-title" href="#"> <h2>Reusable Elements</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-4"> <div class="box-icon box-icon-side box-icon-color box-icon-round"> <i class="fa fa-cogs"></i> <a class="box-icon-title" href="#"> <h2>Multipurpose</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> </div>
<div class="row"> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-round"> <a class="box-icon-title" href="#"> <i class="fa fa-tablet"></i> <h2>Fully Reposnive</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-round"> <a class="box-icon-title" href="#"> <i class="fa fa-random"></i> <h2>Clean Design</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-round"> <a class="box-icon-title" href="#"> <i class="fa fa-tint"></i> <h2>Reusable Elements</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-round"> <a class="box-icon-title" href="#"> <i class="fa fa-cogs"></i> <h2>Multipurpose</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> </div>
<div class="row"> <div class="col-md-3"> <div class="box-icon box-icon-center"> <a class="box-icon-title" href="#"> <i class="fa fa-tablet"></i> <h2>Fully Reposnive</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center"> <a class="box-icon-title" href="#"> <i class="fa fa-random"></i> <h2>Clean Design</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center"> <a class="box-icon-title" href="#"> <i class="fa fa-tint"></i> <h2>Reusable Elements</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center"> <a class="box-icon-title" href="#"> <i class="fa fa-cogs"></i> <h2>Multipurpose</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> </div>
<div class="row"> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large"> <a class="box-icon-title" href="#"> <i class="fa fa-tablet"></i> <h2>Fully Reposnive</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large"> <a class="box-icon-title" href="#"> <i class="fa fa-random"></i> <h2>Clean Design</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large"> <a class="box-icon-title" href="#"> <i class="fa fa-tint"></i> <h2>Reusable Elements</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large"> <a class="box-icon-title" href="#"> <i class="fa fa-cogs"></i> <h2>Multipurpose</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> </div>
<div class="row"> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-transparent box-icon-large"> <a class="box-icon-title" href="#"> <i class="fa fa-tablet"></i> <h2>Fully Reposnive</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-transparent box-icon-large"> <a class="box-icon-title" href="#"> <i class="fa fa-random"></i> <h2>Clean Design</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-transparent box-icon-large"> <a class="box-icon-title" href="#"> <i class="fa fa-tint"></i> <h2>Reusable Elements</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-transparent box-icon-large"> <a class="box-icon-title" href="#"> <i class="fa fa-cogs"></i> <h2>Multipurpose</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> </div>
<div class="row"> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-transparent box-icon-large"> <a class="box-icon-title" href="#"> <i class="noborder fa fa-tablet" style="background-color:#ee7954; color:#fff;"></i> <h2>Fully Reposnive</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-transparent box-icon-large"> <a class="box-icon-title" href="#"> <i class="noborder fa fa-random" style="background-color:#f06793; color:#fff;"></i> <h2>Clean Design</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-transparent box-icon-large"> <a class="box-icon-title" href="#"> <i class="noborder fa fa-tint" style="background-color:#ebba63; color:#fff;"></i> <h2>Reusable Elements</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-transparent box-icon-large"> <a class="box-icon-title" href="#"> <i class="noborder fa fa-cogs" style="background-color:#ab71bd; color:#fff;"></i> <h2>Multipurpose</h2> </a> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <a class="box-icon-more font-lato weight-300" href="#">Learn More</a> </div> </div> </div>
8165
HAPPY CUSTOMERS
1033
FACIALS
24567
MASSAGES
68
MOTHERS TO BE
<!-- .box-pink .box-blue .box-orange .box-yellow .box-purple .box-red .box-brown .box-green .box-black .box-gray .box-teal CREATE YOUR OWN COLORS - CSS EXAMPLE: .box-pink>div:nth-child(1) { background-color:#e2476b; } .box-pink>div:nth-child(2) { background-color:#e9738f; } .box-pink>div:nth-child(3) { background-color:#f09fb2; } .box-pink>div:nth-child(4) { background-color:#f7cbd5; } --> <div class="row box-gradient box-pink"> <div class="col-xs-6 col-sm-3"> <i class="fa fa-child fa-4x"></i> <h2 class="countTo font-raleway" data-speed="3000">8165</h2> <p>HAPPY CUSTOMERS</p> </div> <div class="col-xs-6 col-sm-3"> <i class="fa fa-smile-o fa-4x"></i> <h2 class="countTo font-raleway" data-speed="3000">1033</h2> <p>FACIALS</p> </div> <div class="col-xs-6 col-sm-3"> <i class="fa fa-heart fa-4x"></i> <h2 class="countTo font-raleway" data-speed="3000">24567</h2> <p>MASSAGES</p> </div> <div class="col-xs-6 col-sm-3"> <i class="fa fa-female fa-4x"></i> <h2 class="countTo font-raleway" data-speed="3000">68</h2> <p>MOTHERS TO BE</p> </div> </div>
<div class="row"> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large"> <div class="box-icon-title"> <i class="noborder fa fa-tablet"></i> <h2>Fully Reposnive</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large"> <div class="box-icon-title"> <i class="noborder fa fa-random"></i> <h2>Clean Design</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large"> <div class="box-icon-title"> <i class="noborder fa fa-tint"></i> <h2>Reusable Elements</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large"> <div class="box-icon-title"> <i class="noborder fa fa-cogs"></i> <h2>Multipurpose</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> </div>
<div class="row"> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large"> <div class="box-icon-title"> <i class="fa fa-tablet"></i> <h2>Fully Reposnive</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large"> <div class="box-icon-title"> <i class="fa fa-random"></i> <h2>Clean Design</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large"> <div class="box-icon-title"> <i class="fa fa-tint"></i> <h2>Reusable Elements</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> <div class="col-md-3"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large"> <div class="box-icon-title"> <i class="fa fa-cogs"></i> <h2>Multipurpose</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> </div>
<div class="row"> <div class="col-md-4"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large box-icon-content"> <div class="box-icon-title"> <i class="fa">1</i> <h2>PRODUCT VIEW</h2> </div> </div> </div> <div class="col-md-4"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large box-icon-content"> <div class="box-icon-title"> <i class="fa">2</i> <h2>SHOP CART</h2> </div> </div> </div> <div class="col-md-4"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large box-icon-content"> <div class="box-icon-title"> <i class="fa">3</i> <h2>CHECKOUT</h2> </div> </div> </div> </div>
<div class="row"> <div class="col-md-6"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large box-icon-content"> <div class="box-icon-title"> <i class="fa fa-tablet"></i> <h2>Fully Reposnive</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> <div class="col-md-6"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large box-icon-content"> <div class="box-icon-title"> <i class="fa fa-random"></i> <h2>Clean Design</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> </div>
<div class="row"> <div class="col-md-12"> <div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large box-icon-content"> <div class="box-icon-title"> <i class="fa fa-tablet"></i> <h2>Fully Reposnive</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> </div>
<div class="row"> <div class="col-md-4"> <div class="box-video text-center"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="http://player.vimeo.com/video/8408210" width="800" height="450"></iframe> </div> <a class="box-video-title" href="#"> <h2>VIMEO EMBED VIDEO</h2> </a> <p class="font-lato weight-300">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <a class="btn btn-default" href="#">Learn More</a> </div> </div> <div class="col-md-4"> <div class="box-video text-center"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/watch?v=W7Las-MJnJo"></iframe> </div> <a class="box-video-title" href="#"> <h2>YOUTUBE EMBED VIDEO</h2> </a> <p class="font-lato weight-300">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <a class="btn btn-default" href="#">Learn More</a> </div> </div> <div class="col-md-4"> <div class="box-video text-center"> <iframe width="100%" height="197" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/154936822&color=a94545&auto_play=false&hide_related=false&visual=true"></iframe> <a class="box-video-title" href="#"> <h2>AUDIO EMBED MUSIC</h2> </a> <p class="font-lato weight-300">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <a class="btn btn-default" href="#">Learn More</a> </div> </div> </div>
<div class="row">
<div class="col-md-4">
<div class="box-image text-center">
<a class="image-hover lightbox" href="assets/images/demo/1200x800/15-min.jpg" data-plugin-options='{"type":"image"}'>
<img class="img-responsive" src="assets/images/demo/600x400/15-min.jpg" alt="" />
</a>
<a class="box-image-title" href="#">
<h2>IMAGE LIGHTBOX</h2>
</a>
<p class="font-lato weight-300">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="col-md-4">
<div class="box-image text-center">
<a class="image-hover" href="#">
<img class="img-responsive" src="assets/images/demo/600x400/20-min.jpg" alt="" />
</a>
<a class="box-image-title" href="#">
<h2>LINK IMAGE</h2>
</a>
<p class="font-lato weight-300">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="col-md-4">
<div class="box-image text-center">
<a class="image-hover lightbox" href="http://vimeo.com/56624256" href="" data-plugin-options='{"type":"iframe"}'>
<img class="img-responsive" src="assets/images/demo/600x400/25-min.jpg" alt="" />
</a>
<a class="box-image-title">
<h2>VIDEO LIGHTBOX</h2>
</a>
<p class="font-lato weight-300">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
Flip Boxes
<div class="row"> <div class="col-md-4"> <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center"> <div class="front"> <div class="box1"> <div class="box-icon-title"> <i class="fa fa-tint"></i> <h2>Fully Reposnive</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> <div class="back"> <div class="box2"> <h4>BACK SIDE</h4> <hr /> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> <a href="#" class="btn btn-translucid btn-lg btn-block">PURCHASE NOW</a> </div> </div> </div> </div> <div class="col-md-4"> <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center"> <div class="front"> <div class="box1"> <div class="box-icon-title"> <i class="fa fa-random"></i> <h2>Clean Design</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> <div class="back"> <div class="box2"> <h4>BACK SIDE</h4> <hr /> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> <a href="#" class="btn btn-translucid btn-lg btn-block">PURCHASE NOW</a> </div> </div> </div> </div> <div class="col-md-4"> <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center"> <div class="front"> <div class="box1"> <div class="box-icon-title"> <i class="fa fa-cogs"></i> <h2>Multipurpose</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> <div class="back"> <div class="box2"> <h4>BACK SIDE</h4> <hr /> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> <a href="#" class="btn btn-translucid btn-lg btn-block">PURCHASE NOW</a> </div> </div> </div> </div> </div>
Color Flip Boxes
Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus.
Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis.
<div class="row"> <div class="col-md-3"> <div class="box-static box-border-top"> <div class="box-title"> <h4>Color Flip Boxes</h4> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus.</p> <p><small>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis.</small></p> </div> </div> <div class="col-md-3"> <div class="box-flip box-color box-icon box-icon-center box-icon-round box-icon-large text-center"> <div class="front"> <div class="box1" style="background-color:#a0ce4e;"> <div class="box-icon-title"> <i class="fa fa-refresh fa-spin"></i> <h2>Fully Reposnive</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> <div class="back"> <div class="box2" style="background-color:#a0ce4e;"> <h4>BACK SIDE</h4> <hr /> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> <a href="#" class="btn btn-translucid btn-lg btn-block">PURCHASE NOW</a> </div> </div> </div> </div> <div class="col-md-3"> <div class="box-flip box-color box-icon box-icon-center box-icon-round box-icon-large text-center"> <div class="front"> <div class="box1" style="background-color:#cb9536;"> <div class="box-icon-title"> <i class="fa fa-random"></i> <h2>Clean Design</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> <div class="back"> <div class="box2" style="background-color:#cb9536;"> <h4>BACK SIDE</h4> <hr /> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> <a href="#" class="btn btn-translucid btn-lg btn-block">PURCHASE NOW</a> </div> </div> </div> </div> <div class="col-md-3"> <div class="box-flip box-color box-icon box-icon-center box-icon-round box-icon-large text-center"> <div class="front"> <div class="box1" style="background-color:#73b9dc;"> <div class="box-icon-title"> <i class="fa fa-cogs"></i> <h2>Multipurpose</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> <div class="back"> <div class="box2" style="background-color:#73b9dc;"> <h4>BACK SIDE</h4> <hr /> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> <a href="#" class="btn btn-translucid btn-lg btn-block">PURCHASE NOW</a> </div> </div> </div> </div> </div>
Image Flip Boxes
Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus.
Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis.
<div class="row"> <div class="col-md-3"> <div class="box-static box-border-top"> <div class="box-title"> <h4>Image Flip Boxes</h4> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus.</p> <p><small>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis.</small></p> </div> </div> <div class="col-md-3"> <div class="box-flip box-color box-icon box-icon-center box-icon-round box-icon-large text-center"> <div class="front"> <div class="box1 box-danger"> <div class="box-icon-title"> <img class="img-responsive" src="assets/images/demo/600x400/16-min.jpg" alt="" /> <h2>Fully Reposnive</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> <div class="back"> <div class="box2 box-danger"> <h4>BACK SIDE</h4> <hr /> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> <a href="#" class="social-icon social-facebook"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-icon social-twitter"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-icon social-linkedin"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> </div> </div> </div> </div> <div class="col-md-3"> <div class="box-flip box-color box-icon box-icon-center box-icon-round box-icon-large text-center"> <div class="front"> <div class="box1 box-warning"> <div class="box-icon-title"> <img class="img-responsive" src="assets/images/demo/600x400/19-min.jpg" alt="" /> <h2>Clean Design</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> <div class="back"> <div class="box2 box-warning"> <h4>BACK SIDE</h4> <hr /> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> <a href="#" class="social-icon social-facebook"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-icon social-twitter"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-icon social-linkedin"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> </div> </div> </div> </div> <div class="col-md-3"> <div class="box-flip box-color box-icon box-icon-center box-icon-round box-icon-large text-center"> <div class="front"> <div class="box1 box-info"> <div class="box-icon-title"> <img class="img-responsive" src="assets/images/demo/600x400/31-min.jpg" alt="" /> <h2>Multipurpose</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> <div class="back"> <div class="box2 box-info"> <h4>BACK SIDE</h4> <hr /> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> <a href="#" class="social-icon social-facebook"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-icon social-twitter"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-icon social-linkedin"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> </div> </div> </div> </div> </div>
Image Flip Boxes
Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus.
Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis.
<div class="row"> <div class="col-md-3"> <div class="box-static box-border-top"> <div class="box-title"> <h4>Image Flip Boxes</h4> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus.</p> <p><small>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis.</small></p> </div> </div> <div class="col-md-9"> <div class="row"> <div class="col-md-6"> <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center"> <div class="front"> <div class="box1"> <div class="box-icon-title"> <img class="img-responsive" src="assets/images/demo/600x400/27-min.jpg" alt="" /> <h2>Jessica Doe</h2> </div> </div> </div> <div class="back"> <div class="box2"> <h4>Jessica Doe</h4> <hr /> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere.</p> <a href="#" class="social-icon social-facebook"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-icon social-twitter"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-icon social-linkedin"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> </div> </div> </div> </div> <div class="col-md-6"> <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center"> <div class="front"> <div class="box1"> <div class="box-icon-title"> <img class="img-responsive" src="assets/images/demo/600x400/26-min.jpg" alt="" /> <h2>Felicia Doe</h2> </div> </div> </div> <div class="back"> <div class="box2"> <h4>Felica Doe</h4> <hr /> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere.</p> <a href="#" class="social-icon social-facebook"> <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-icon social-twitter"> <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-icon social-linkedin"> <i class="fa fa-linkedin"></i> <i class="fa fa-linkedin"></i> </a> </div> </div> </div> </div> </div> </div> </div>
Full Flip Box
Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus.
Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis.
<div class="row"> <div class="col-md-3"> <div class="box-static box-border-top"> <div class="box-title"> <h4>Image Flip Boxes</h4> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus.</p> <p><small>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis.</small></p> </div> </div> <div class="col-md-9"> <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center"> <div class="front"> <div class="box1"> <div class="box-icon-title"> <i class="fa fa-check"></i> <h2>Full Width</h2> </div> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p> </div> </div> <div class="back"> <div class="box2"> <h4>BACK SIDE</h4> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque.</p> </div> </div> </div> </div> </div>
Box 1
Box 2
Box 3
POPULAR
Box 4
Box 5
Box 6
<!-- BOX 1 --> <div class="box-static box-border-top padding-30"> <div class="box-title margin-bottom-30"> <h2 class="size-20">Box 1</h2> </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium. </div> <!-- /BOX 1 --> <!-- BOX 2 --> <div class="box-static box-transparent box-border-top padding-30"> <div class="box-title margin-bottom-30"> <h2 class="size-20">Box 2</h2> </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium. </div> <!-- /BOX 2 --> <!-- BOX 3 --> <div class="box-static box-transparent padding-30"> <div class="box-title margin-bottom-30"> <h2 class="size-20">Box 3</h2> </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium. </div> <!-- /BOX 3 --> <!-- BOX 4 --> <div class="box-static box-transparent box-bordered padding-30 relative"> <div class="ribbon"><!-- ribbon inside relative box --> <div class="ribbon-inner">POPULAR</div> </div><!-- /ribbon --> <div class="box-title margin-bottom-30"> <h2 class="size-20">Box 4</h2> </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium. </div> <!-- /BOX 4 --> <!-- BOX 5 --> <div class="box-static box-border-top box-dark padding-30"> <div class="box-title margin-bottom-30"> <h2 class="size-20">Box 5</h2> </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium. </div> <!-- /BOX 5 --> <!-- BOX 6 --> <div class="box-static box-border-top box-color padding-30"> <div class="box-title margin-bottom-30"> <h2 class="size-20">Box 6</h2> </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium. </div> <!-- /BOX 6 -->