Animated Columns
Click to preview the Animated Columns demo. View demo
Richer Interface
Code:
html
<ul class="animat-col01">
<li>
<div class="box"><span class="animat01_icon"><img src="/Portals/13/Features-Images/AnimatedColumns01.png" alt=""></span>
<h3>Elegant Design</h3>
<div class="cont">
<p>Cras dapibus arcu a neque laoreet condimentum. In in rhoncus leo. Sed mattis feugiat odio, sit amet.</p>
<a class="btn" href="#" title="view more">VIEW MORE</a></div>
</div>
</li>
<li class="color-01">
<div class="box"><span class="animat01_icon"><img src="/Portals/13/Features-Images/AnimatedColumns02.png" alt=""></span>
<h3>Great Flexibility</h3>
<div class="cont">
<p>Cras dapibus arcu a neque laoreet condimentum. In in rhoncus leo. Sed mattis feugiat odio, sit amet.</p>
<a class="btn" href="#" title="view more">VIEW MORE</a></div>
</div>
</li>
<li>
<div class="box"><span class="animat01_icon"><img src="/Portals/13/Features-Images/AnimatedColumns03.png" alt=""></span>
<h3>Easy Operation</h3>
<div class="cont">
<p>Cras dapibus arcu a neque laoreet condimentum. In in rhoncus leo. Sed mattis feugiat odio, sit amet.</p>
<a class="btn" href="#" title="view more">VIEW MORE</a></div>
</div>
</li>
<li class="color-02">
<div class="box"><span class="animat01_icon"><img src="/Portals/13/Features-Images/AnimatedColumns04.png" alt=""></span>
<h3>Richer Interface</h3>
<div class="cont">
<p>Cras dapibus arcu a neque laoreet condimentum. In in rhoncus leo. Sed mattis feugiat odio, sit amet.</p>
<a class="btn" href="#" title="view more">VIEW MORE</a></div>
</div>
</li>
</ul>Simple Formsfluid
Code:
html
<ul class="animat-col02 clearfix">
<li class="color-01">
<div class="box"><span class="animat02_icon"><img src="/Portals/13/Features-Images/AnimatedColumns05.png" alt=""></span>
<h3>Icon Fonts<span>fluid</span></h3>
<a class="dg-btn-1 btn-white radius-3px" href="#" title="view more">view more</a></div>
</li>
<li class="color-02">
<div class="box"><span class="animat02_icon"><img src="/Portals/13/Features-Images/AnimatedColumns06.png" alt=""></span>
<h3>Clean Code<span>fluid</span></h3>
<a class="dg-btn-1 btn-white radius-3px" href="#" title="view more">view more</a></div>
</li>
<li class="color-03">
<div class="box"><span class="animat02_icon"><img src="/Portals/13/Features-Images/AnimatedColumns07.png" alt=""></span>
<h3>Site Layout<span>fluid</span></h3>
<a class="dg-btn-1 btn-white radius-3px" href="#" title="view more">view more</a></div>
</li>
<li class="color-04">
<div class="box"><span class="animat02_icon"><img src="/Portals/13/Features-Images/AnimatedColumns08.png" alt=""></span>
<h3>Free Updates<span>fluid</span></h3>
<a class="dg-btn-1 btn-white radius-3px" href="#" title="view more">view more</a></div>
</li>
<li class="color-05">
<div class="box"><span class="animat02_icon"><img src="/Portals/13/Features-Images/AnimatedColumns09.png" alt=""></span>
<h3>Simple Forms<span>fluid</span></h3>
<a class="dg-btn-1 btn-white radius-3px" href="#" title="view more">view more</a></div>
</li>
</ul>Extensive documentation
Code:
html
<ul class="animat-col03 clearfix">
<li class="color-01">
<div class="box"><span class="animat03_icon"><img src="/Portals/13/Features-Images/AnimatedColumns10.png" alt=""></span>
<h3>Responsive Framework</h3>
<div class="cont">
<p>Spice up any boring content with this beautiful and fluid animated contents.</p>
<a class="btn" href="#" title="view more">+Read More</a></div>
</div>
</li>
<li class="color-02">
<div class="box"><span class="animat03_icon"><img src="/Portals/13/Features-Images/AnimatedColumns11.png" alt=""></span>
<h3>Advanced Typography</h3>
<div class="cont">
<p>Spice up any boring content with this beautiful and fluid animated contents.</p>
<a class="btn" href="#" title="view more">+Read More</a></div>
</div>
</li>
<li class="color-03">
<div class="box"><span class="animat03_icon"><img src="/Portals/13/Features-Images/AnimatedColumns12.png" alt=""></span>
<h3>Extensive documentation</h3>
<div class="cont">
<p>Spice up any boring content with this beautiful and fluid animated contents.</p>
<a class="btn" href="#" title="view more">+Read More</a></div>
</div>
</li>
</ul>Endlessly Customizable
Code:
html
<div class="row">
<div class="col-sm-6">
<div class="animat-col04 bg-left">
<div class="box"><span class="fa fa-link"></span>
<h3>Matching Containers</h3>
<a class="dg-btn-1 btn-white" href="#" title="view more">purchase</a></div>
</div>
</div>
<div class="col-sm-6">
<div class="animat-col04 bg-right">
<div class="box"><span class="fa fa-star-o"></span>
<h3>Endlessly Customizable</h3>
<a class="dg-btn-1 btn-white" href="#" title="view more">purchase</a></div>
</div>
</div>
</div>Unlimited Colors
Code:
html
<ul class="animat-col05 clearfix">
<li>
<div class="box"> <span class="fa fa-tag"></span>
<h3>Unlimited Colors</h3>
</div>
</li>
<li>
<div class="box"> <span class="fa fa-microphone"></span>
<h3>Unlimited Colors</h3>
</div>
</li>
<li>
<div class="box"> <span class="fa fa-battery-full"></span>
<h3>Unlimited Colors</h3>
</div>
</li>
<li>
<div class="box"> <span class="fa fa-mobile-phone"></span>
<h3>Unlimited Colors</h3>
</div>
</li>
<li>
<div class="box"> <span class="fa fa-power-off"></span>
<h3>Unlimited Colors</h3>
</div>
</li>
<li>
<div class="box"> <span class="fa fa-laptop"></span>
<h3>Unlimited Colors</h3>
</div>
</li>
</ul>5 Start Support
Code:
html
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="animat-col06">
<div class="box"><span class="fa fa-tachometer"></span>
<h3>User Friendly</h3>
<div class="cont">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa</p>
<a class="btn" href="#" title="view more">Read More ></a></div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="animat-col06">
<div class="box"><span class="fa fa-camera-retro"></span>
<h3>Layout Options</h3>
<div class="cont">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa</p>
<a class="btn" href="#" title="view more">Read More ></a></div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="animat-col06">
<div class="box"><span class="fa fa-bar-chart-o"></span>
<h3>Fluid Animation</h3>
<div class="cont">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa</p>
<a class="btn" href="#" title="view more">Read More ></a></div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="animat-col06">
<div class="box"><span class="fa fa-power-off"></span>
<h3>Unlimited Colors</h3>
<div class="cont">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa</p>
<a class="btn" href="#" title="view more">Read More ></a></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="animat-col06">
<div class="box"><span class="fa fa-tags"></span>
<h3>Standard Demos</h3>
<div class="cont">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa</p>
<a class="btn" href="#" title="view more">Read More ></a></div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="animat-col06">
<div class="box"><span class="fa fa-internet-explorer"></span>
<h3>network</h3>
<div class="cont">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa</p>
<a class="btn" href="#" title="view more">Read More ></a></div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="animat-col06">
<div class="box"><span class="fa fa-support "></span>
<h3>Versatile Module</h3>
<div class="cont">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa</p>
<a class="btn" href="#" title="view more">Read More ></a></div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="animat-col06">
<div class="box"><span class="fa fa-gear"></span>
<h3>5 Start Support</h3>
<div class="cont">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa</p>
<a class="btn" href="#" title="view more">Read More ></a></div>
</div>
</div>
</div>
</div>