WHY SMARTY?

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.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

SECTIONS

  1. Home
  2. Shortcodes
  3. Sections

Transparent Section [extra small]

Transparent section, 30px top/bottom paddings.

Show Code 
<section class="section-xs">
	<div class="container">
	
		Section Content Here

	</div>
</section>

Transparent Section [small]

Transparent section, 60px top/bottom paddings.

Show Code 
<section class="section-sm">
	<div class="container">
	
		Section Content Here

	</div>
</section>

Transparent Section [medium/default]

Transparent section, 80px top/bottom paddings.

Show Code 
<section>
	<div class="container">
	
		Section Content Here

	</div>
</section>

Transparent Section [large]

Transparent section, 120px top/bottom paddings.

Show Code 
<section class="section-lg">
	<div class="container">
	
		Section Content Here

	</div>
</section>

Transparent Section [extra large]

Transparent section, 140px top/bottom paddings.

Show Code 
<section class="section-xlg">
	<div class="container">
	
		Section Content Here

	</div>
</section>

Alternate Section

Show Code 
<section class="alternate">
	<div class="container">
	
		Section Content Here

	</div>
</section>

Alternate Section 2

Show Code 
<section class="alternate-2">
	<div class="container">
	
		Section Content Here

	</div>
</section>

Alternate Section 3

Show Code 
<section class="alternate-3">
	<div class="container">
	
		Section Content Here

	</div>
</section>

Lightblue Section

Show Code 
<section class="lightblue">
	<div class="container">
	
		Section Content Here

	</div>
</section>

Lightgreen Section

Show Code 
<section class="lightgreen">
	<div class="container">
	
		Section Content Here

	</div>
</section>

Dark Section

Show Code 
<section class="dark">
	<div class="container">
	
		Section Content Here

	</div>
</section>

Alternate Dark Section

Show Code 
<section class="dark alternate">
	<div class="container">
	
		Section Content Here

	</div>
</section>

Theme Color Section

Show Code 
<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.

Show Code 
<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="m-0">Parallax Section</h3>
			<p class="font-lato fw-300 lead mt-0">We can't solve problems by using the same kind of thinking we used when we created them.</p>
		</div>

		<ul class="mt-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.

Show Code 
<section class="section-video section-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="m-0">HTML5 VIDEO SECTION</h3>
			<p class="font-lato fw-300 lead mt-0">We can't solve problems by using the same kind of thinking we used when we created them.</p>
		</div>

		<div class="text-center mt-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="fs-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="fs-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="fs-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="fs-30">
					<span class="countTo" data-speed="2000">76</span>
				%</span>
			</div>

		</div>

	</div>

</section>