SECTIONS
Transparent Section [extra small]
Transparent section, 30px top/bottom paddings.
<section class="padding-xxs"> <div class="container"> Section Content Here </div> </section>
Transparent Section [small]
Transparent section, 60px top/bottom paddings.
<section class="padding-xs"> <div class="container"> Section Content Here </div> </section>
Transparent Section [medium/default]
Transparent section, 80px top/bottom paddings.
<section> <div class="container"> Section Content Here </div> </section>
Transparent Section [large]
Transparent section, 120px top/bottom paddings.
<section class="padding-lg"> <div class="container"> Section Content Here </div> </section>
Transparent Section [extra large]
Transparent section, 140px top/bottom paddings.
<section class="padding-xlg"> <div class="container"> Section Content Here </div> </section>
Alternate Section
<section class="alternate"> <div class="container"> Section Content Here </div> </section>
Alternate Section 2
<section class="alternate-2"> <div class="container"> Section Content Here </div> </section>
Alternate Section 3
<section class="alternate-3"> <div class="container"> Section Content Here </div> </section>
Lightblue Section
<section class="lightblue"> <div class="container"> Section Content Here </div> </section>
Lightgreen Section
<section class="lightgreen"> <div class="container"> Section Content Here </div> </section>
Dark Section
<section class="dark"> <div class="container"> Section Content Here </div> </section>
Alternate Dark Section
<section class="dark alternate"> <div class="container"> Section Content Here </div> </section>
Theme Color Section
<section class="theme-color"> <div class="container"> Section Content Here </div> </section>
Parallax Section
We can't solve problems by using the same kind of thinking we used when we created them.
<section class="parallax parallax-2" style="background-image: url('demo_files/images/1200x800/20-min.jpg');">
<div class="overlay dark-8"><!-- dark overlay [1 to 9 opacity] --></div>
<div class="container">
<div class="text-center">
<h3 class="nomargin">Parallax Section</h3>
<p class="font-lato weight-300 lead nomargin-top">We can't solve problems by using the same kind of thinking we used when we created them.</p>
</div>
<ul class="margin-top-80 social-icons list-unstyled list-inline">
<li>
<a target="_blank" href="#">
<i class="fa fa-facebook"></i>
<h4>Facebook</h4>
<span>Be Our Friend</span>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-twitter"></i>
<h4>Twitter</h4>
<span>Follow Us</span>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-youtube"></i>
<h4>Youtube</h4>
<span>Our Videos</span>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-instagram"></i>
<h4>Instagram</h4>
<span>See Our Images</span>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-linkedin"></i>
<h4>Linkedin</h4>
<span>Check Our Identity</span>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-pinterest"></i>
<h4>Pinterest</h4>
<span>Visual Discovery</span>
</a>
</li>
</ul>
</div>
</section>
HTML5 VIDEO SECTION
We can't solve problems by using the same kind of thinking we used when we created them.
<section class="section-video padding-xlg"> <div class="overlay dark-6"><!-- dark overlay [1 to 9 opacity] --></div> <div class="section-container-video"> <video poster="demo_files/images/video/back.jpg" preload="auto" loop autoplay muted> <source src='demo_files/images/video/back.webm' type='video/webm' /> <source src='demo_files/images/video/back.mp4' type='video/mp4' /> </video> </div> <div class="container"> <div class="text-center"> <h3 class="nomargin">HTML5 VIDEO SECTION</h3> <p class="font-lato weight-300 lead nomargin-top">We can't solve problems by using the same kind of thinking we used when we created them.</p> </div> <div class="text-center margin-top-100"> <!-- Counter --> <div class="piechart" data-color="#ffffff" data-trackcolor="rgba(255,255,255,0.2)" data-size="150" data-percent="87" data-width="2" data-animate="1700"> <span class="size-30"> <span class="countTo" data-speed="2000">87</span> %</span> </div> <!-- Counter --> <div class="piechart" data-color="#ffffff" data-trackcolor="rgba(255,255,255,0.2)" data-size="150" data-percent="66" data-width="2" data-animate="1700"> <span class="size-30"> <span class="countTo" data-speed="2000">66</span> %</span> </div> <!-- Counter --> <div class="piechart" data-color="#ffffff" data-trackcolor="rgba(255,255,255,0.2)" data-size="150" data-percent="97" data-width="2" data-animate="1700"> <span class="size-30"> <span class="countTo" data-speed="2000">97</span> %</span> </div> <!-- Counter --> <div class="piechart" data-color="#ffffff" data-trackcolor="rgba(255,255,255,0.2)" data-size="150" data-percent="76" data-width="2" data-animate="1700"> <span class="size-30"> <span class="countTo" data-speed="2000">76</span> %</span> </div> </div> </div> </section>