Smarty - Multipurpose + Admin

Transparent Section [extra small]

Transparent section, 30px top/bottom paddings.


<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>

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="p-md parallax parallax-2 p-0" style="background-image: url('demo_files/images/1200x800/1-min.jpg');">

	<div class="overlay dark-8"><!-- dark overlay [1 to 9 opacity] --></div>



	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;margin:0;display:block; z-index:100; position:relative;"><path d="M0 0 C55 180 100 0 100 0 Z"></path></svg>





	<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>



	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;margin:0;display:block; z-index:100; position:relative;"><path d="M0 100 C40 0 60 0 100 100 Z"></path></svg>



</section>

6000+

Happy Returning Customers

More +

100%

Money back gurantee

More +

235%

Average customer growth

More +

250000

Work hours saved last 12 months

More +

Show Code


<!--   

AVAILABLE COLORS:

.cart-visual-default

.cart-visual-success

.cart-visual-danger

.cart-visual-warning

.cart-visual-info

-->

<section>

	<div class="cart-visual cart-visual-default">



		<svg id="cart-visual-svg-1" height="0" width="100%" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1096 131.25" style="height: 140px;" xml:space="preserve">

			<path d="M782,49.418c-58.667-24.667-118.602-46-249.334-46s-159.43,36.157-209.333,62.207C259.04,99.186,0,131.25,0,131.25h1096C1096,131.25,840.667,74.085,782,49.418z"></path>

		</svg>



		<svg id="cart-visual-svg-2" height="0" width="100%" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1133.338 144.499" style="height: 195px;" xml:space="preserve">

			<path d="M948.868,144.499H0V72.249c26.67-9.407,66.707-19.582,119.535-19.582c133.999,0,227.999,39.333,332.665,39.333c80,0,142.667-36.666,174.667-52.666S716.201,0,804.201,0s144.667,20,144.667,20c44.173,10.997,122.713,47.543,184.47,78.215v46.284H948.868z"></path>

		</svg>



		<div class="container">



			<div class="row">



				<div class="col-6 col-md-3 mt--30 pb-150">

					<div class="cart-visual-pin"><div class="cart-visual-pin-ball"> </div></div>

					<div class="pl-20 pr-20">

						<h2><i class="countTo" data-speed="1600">6000</i>+</h2>

						<p class="fw--300">Happy Returning Customers</p>

						<a href="#" class="marker-more">More +</a>

					</div>

				</div>



				<div class="col-6 col-md-3 mt-80">

					<div class="cart-visual-pin"><div class="cart-visual-pin-ball"> </div></div>

					<div class="pl-20 pr-20">

						<h2><i class="countTo" data-speed="1300">100</i>%</h2>

						<p class="fw--300">Money back gurantee</p>

						<a href="#" class="marker-more">More +</a>

					</div>

				</div>



				<div class="col-6 col-md-3 mt-60">

					<div class="cart-visual-pin"><div class="cart-visual-pin-ball"> </div></div>

					<div class="pl-20 pr-20">

						<h2><i class="countTo" data-speed="900">235</i>%</h2>

						<p class="fw--300">Average customer growth</p>

						<a href="#" class="marker-more">More +</a>

					</div>

				</div>



				<div class="col-6 col-md-3 mt-0">

					<div class="cart-visual-pin"><div class="cart-visual-pin-ball"> </div></div>

					<div class="pl-20 pr-20">

						<h2><i class="countTo" data-speed="2000">250000</i></h2>

						<p class="fw--300">Work hours saved last 12 months</p>

						<a href="#" class="marker-more">More +</a>

					</div>

				</div>



			</div>



		</div>



	</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>

WHY SMARTY?

RECENTLY VISITED

CONTACT INFO

SECTIONS

Transparent Section [extra small]

Transparent Section [small]

Transparent Section [medium/default]

Transparent Section [large]

Transparent Section [extra large]

Alternate Section

Dark Section

Alternate Dark Section

Theme Color Section

Parallax Section

6000+

100%

235%

250000

Parallax Section

HTML5 VIDEO SECTION