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