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

HEADINGS

  1. Home
  2. Shortcodes
  3. Headings

H1 Heading Line Single

H2 Heading Line Single

H3 Heading Line Single

H4 Heading Line Single

H5 Heading Line Single
H6 Heading Line Single
Show Code 
<!-- 
.text-right = align text to right
.text-center = align text to center
 -->


<!-- H1 -->
<div class="heading-title heading-line-single">
	<h1>H1 Heading <span>Line Single</span></h1>
</div>

<!-- H2 -->
<div class="heading-title heading-line-single">
	<h2>H2 Heading <span>Line Single</span></h2>
</div>

<!-- H3 -->
<div class="heading-title heading-line-single">
	<h3>H3 Heading <span>Line Single</span></h3>
</div>

<!-- H4 -->
<div class="heading-title heading-line-single">
	<h4>H4 Heading <span>Line Single</span></h4>
</div>

<!-- H5 -->
<div class="heading-title heading-line-single">
	<h5>H5 Heading <span>Line Single</span></h5>
</div>

<!-- H6 -->
<div class="heading-title heading-line-single">
	<h6>H6 Heading <span>Line Single</span></h6>
</div>

H1 Heading Line Double

H2 Heading Line Double

H3 Heading Line Double

H4 Heading Line Double

H5 Heading Line Double
H6 Heading Line Double
Show Code 
<!-- 
.text-right = align text to right
.text-center = align text to center
 -->


<!-- H1 -->
<div class="heading-title heading-line-double">
	<h1>H1 Heading <span>Line Double</span></h1>
</div>

<!-- H2 -->
<div class="heading-title heading-line-double">
	<h2>H2 Heading <span>Line Double</span></h2>
</div>

<!-- H3 -->
<div class="heading-title heading-line-double">
	<h3>H3 Heading <span>Line Double</span></h3>
</div>

<!-- H4 -->
<div class="heading-title heading-line-double">
	<h4>H4 Heading <span>Line Double</span></h4>
</div>

<!-- H5 -->
<div class="heading-title heading-line-double">
	<h5>H5 Heading <span>Line Double</span></h5>
</div>

<!-- H6 -->
<div class="heading-title heading-line-double">
	<h6>H6 Heading <span>Line Double</span></h6>
</div>

H1 Heading Border Bottom

H2 Heading Border Bottom

H3 Heading Border Bottom

H4 Heading Border Bottom

H5 Heading Border Bottom
H6 Heading Border Bottom
Show Code 
<!-- 
.text-right = align text to right
.text-center = align text to center
 -->


<!-- H1 -->
<div class="heading-title heading-border-bottom">
	<h1>H1 Heading <span>Border Bottom</span></h1>
</div>

<!-- H2 -->
<div class="heading-title heading-border-bottom">
	<h2>H2 Heading <span>Border Bottom</span></h2>
</div>

<!-- H3 -->
<div class="heading-title heading-border-bottom">
	<h3>H3 Heading <span>Border Bottom</span></h3>
</div>

<!-- H4 -->
<div class="heading-title heading-border-bottom">
	<h4>H4 Heading <span>Border Bottom</span></h4>
</div>

<!-- H5 -->
<div class="heading-title heading-border-bottom">
	<h5>H5 Heading <span>Border Bottom</span></h5>
</div>

<!-- H6 -->
<div class="heading-title heading-border-bottom">
	<h6>H6 Heading <span>Border Bottom</span></h6>
</div>

H1 Heading Border Bottom

H2 Heading Border Bottom

H3 Heading Border Bottom

H4 Heading Border Bottom

H5 Heading Border Bottom
H6 Heading Border Bottom
Show Code 
<!-- 
.text-right = align text to right
.text-center = align text to center
 -->


<!-- H1 -->
<div class="heading-title heading-border-bottom heading-color">
	<h1>H1 Heading <span>Border Bottom</span></h1>
</div>

<!-- H2 -->
<div class="heading-title heading-border-bottom heading-color">
	<h2>H2 Heading <span>Border Bottom</span></h2>
</div>

<!-- H3 -->
<div class="heading-title heading-border-bottom heading-color">
	<h3>H3 Heading <span>Border Bottom</span></h3>
</div>

<!-- H4 -->
<div class="heading-title heading-border-bottom heading-color">
	<h4>H4 Heading <span>Border Bottom</span></h4>
</div>

<!-- H5 -->
<div class="heading-title heading-border-bottom heading-color">
	<h5>H5 Heading <span>Border Bottom</span></h5>
</div>

<!-- H6 -->
<div class="heading-title heading-border-bottom heading-color">
	<h6>H6 Heading <span>Border Bottom</span></h6>
</div>

H1 Heading Center Dotted

H2 Heading Center Dotted

H3 Heading Center Dotted

H4 Heading Center Dotted

H5 Heading Center Dotted
H6 Heading Center Dotted
Show Code 
<!-- 
.text-right = align text to right
.text-center = align text to center
 -->


<!-- H1 -->
<div class="heading-title heading-dotted text-center">
	<h1>H1 Heading <span>Center Dotted</span></h1>
</div>

<!-- H2 -->
<div class="heading-title heading-dotted text-center">
	<h2>H2 Heading <span>Center Dotted</span></h2>
</div>

<!-- H3 -->
<div class="heading-title heading-dotted text-center">
	<h3>H3 Heading <span>Center Dotted</span></h3>
</div>

<!-- H4 -->
<div class="heading-title heading-dotted text-center">
	<h4>H4 Heading <span>Center Dotted</span></h4>
</div>

<!-- H5 -->
<div class="heading-title heading-dotted text-center">
	<h5>H5 Heading <span>Center Dotted</span></h5>
</div>

<!-- H6 -->
<div class="heading-title heading-dotted text-center">
	<h6>H6 Heading <span>Center Dotted</span></h6>
</div>

H1 Heading Left Dotted

H2 Heading Left Dotted

H3 Heading Left Dotted

H4 Heading Left Dotted

H5 Heading Left Dotted
H6 Heading Left Dotted
Show Code 
<!-- H1 -->
<div class="heading-title heading-dotted">
	<h1>H1 Heading <span>Left Dotted</span></h1>
</div>

<!-- H2 -->
<div class="heading-title heading-dotted">
	<h2>H2 Heading <span>Left Dotted</span></h2>
</div>

<!-- H3 -->
<div class="heading-title heading-dotted">
	<h3>H3 Heading <span>Left Dotted</span></h3>
</div>

<!-- H4 -->
<div class="heading-title heading-dotted">
	<h4>H4 Heading <span>Left Dotted</span></h4>
</div>

<!-- H5 -->
<div class="heading-title heading-dotted">
	<h5>H5 Heading <span>Left Dotted</span></h5>
</div>

<!-- H6 -->
<div class="heading-title heading-dotted">
	<h6>H6 Heading <span>Left Dotted</span></h6>
</div>

H1 Heading Right Dotted

H2 Heading Right Dotted

H3 Heading Right Dotted

H4 Heading Right Dotted

H5 Heading Right Dotted
H6 Heading Right Dotted
Show Code 
<!-- H1 -->
<div class="heading-title heading-dotted text-right">
	<h1>H1 Heading <span>Right Dotted</span></h1>
</div>

<!-- H2 -->
<div class="heading-title heading-dotted text-right">
	<h2>H2 Heading <span>Right Dotted</span></h2>
</div>

<!-- H3 -->
<div class="heading-title heading-dotted text-right">
	<h3>H3 Heading <span>Right Dotted</span></h3>
</div>

<!-- H4 -->
<div class="heading-title heading-dotted text-right">
	<h4>H4 Heading <span>Right Dotted</span></h4>
</div>

<!-- H5 -->
<div class="heading-title heading-dotted text-right">
	<h5>H5 Heading <span>Right Dotted</span></h5>
</div>

<!-- H6 -->
<div class="heading-title heading-dotted text-right">
	<h6>H6 Heading <span>Right Dotted</span></h6>
</div>

H1 Heading Border Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H2 Heading Border Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H3 Heading Border Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H4 Heading Border Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H5 Heading Border Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H6 Heading Border Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Show Code 
<!-- H1 -->
<div class="heading-title heading-border">
	<h1>H1 Heading <span>Border Left</span></h1>
	<p class="font-lato size-19">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H2 -->
<div class="heading-title heading-border">
	<h2>H2 Heading <span>Border Left</span></h2>
	<p class="font-lato size-18">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H3 -->
<div class="heading-title heading-border">
	<h3>H3 Heading <span>Border Left</span></h3>
	<p class="font-lato size-17">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H4 -->
<div class="heading-title heading-border">
	<h4>H4 Heading <span>Border Left</span></h4>
	<p class="font-lato size-16">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H5 -->
<div class="heading-title heading-border">
	<h5>H5 Heading <span>Border Left</span></h5>
	<p class="font-lato size-15">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H6 -->
<div class="heading-title heading-border">
	<h6>H6 Heading <span>Border Left</span></h6>
	<p class="font-lato size-14">Lorem ipsum dolor sit amet.</p>
</div>

H1 Heading Border Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H2 Heading Border Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H3 Heading Border Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H4 Heading Border Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H5 Heading Border Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H6 Heading Border Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Show Code 
<!-- H1 -->
<div class="heading-title heading-border heading-inverse">
	<h1>H1 Heading <span>Border Right</span></h1>
	<p class="font-lato size-19">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H2 -->
<div class="heading-title heading-border heading-inverse">
	<h2>H2 Heading <span>Border Right</span></h2>
	<p class="font-lato size-18">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H3 -->
<div class="heading-title heading-border heading-inverse">
	<h3>H3 Heading <span>Border Right</span></h3>
	<p class="font-lato size-17">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H4 -->
<div class="heading-title heading-border heading-inverse">
	<h4>H4 Heading <span>Border Right</span></h4>
	<p class="font-lato size-16">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

<!-- H5 -->
<div class="heading-title heading-border heading-inverse">
	<h5>H5 Heading <span>Border Right</span></h5>
	<p class="font-lato size-15">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H6 -->
<div class="heading-title heading-border heading-inverse">
	<h6>H6 Heading <span>Border Right</span></h6>
	<p class="font-lato size-14">Lorem ipsum dolor sit amet.</p>
</div>

H1 Heading Border Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H2 Heading Border Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H3 Heading Border Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H4 Heading Border Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H5 Heading Border Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H6 Heading Border Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Show Code 
<!-- H1 -->
<div class="heading-title heading-border heading-color">
	<h1>H1 Heading <span>Border Left</span></h1>
	<p class="font-lato size-19">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H2 -->
<div class="heading-title heading-border heading-color">
	<h2>H2 Heading <span>Border Left</span></h2>
	<p class="font-lato size-18">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H3 -->
<div class="heading-title heading-border heading-color">
	<h3>H3 Heading <span>Border Left</span></h3>
	<p class="font-lato size-17">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H4 -->
<div class="heading-title heading-border heading-color">
	<h4>H4 Heading <span>Border Left</span></h4>
	<p class="font-lato size-16">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H5 -->
<div class="heading-title heading-border heading-color">
	<h5>H5 Heading <span>Border Left</span></h5>
	<p class="font-lato size-15">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H6 -->
<div class="heading-title heading-border heading-color">
	<h6>H6 Heading <span>Border Left</span></h6>
	<p class="font-lato size-14">Lorem ipsum dolor sit amet.</p>
</div>

H1 Heading Border Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H2 Heading Border Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H3 Heading Border Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H4 Heading Border Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H5 Heading Border Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H6 Heading Border Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Show Code 
<!-- H1 -->
<div class="heading-title heading-border heading-inverse heading-color">
	<h1>H1 Heading <span>Border Right</span></h1>
	<p class="font-lato size-19">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H2 -->
<div class="heading-title heading-border heading-inverse heading-color">
	<h2>H2 Heading <span>Border Right</span></h2>
	<p class="font-lato size-18">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H3 -->
<div class="heading-title heading-border heading-inverse heading-color">
	<h3>H3 Heading <span>Border Right</span></h3>
	<p class="font-lato size-17">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H4 -->
<div class="heading-title heading-border heading-inverse heading-color">
	<h4>H4 Heading <span>Border Right</span></h4>
	<p class="font-lato size-16">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

<!-- H5 -->
<div class="heading-title heading-border heading-inverse heading-color">
	<h5>H5 Heading <span>Border Right</span></h5>
	<p class="font-lato size-15">Lorem ipsum dolor sit amet.</p>
</div>

<!-- H6 -->
<div class="heading-title heading-border heading-inverse heading-color">
	<h6>H6 Heading <span>Border Right</span></h6>
	<p class="font-lato size-14">Lorem ipsum dolor sit amet.</p>
</div>

Word Rotator Simple Clean Precise

Word Rotator Simple Clean Precise

Word Rotator Simple Clean Precise

Word Rotator Simple Clean Precise

Word Rotator Simple Clean Precise
Word Rotator Simple Clean Precise

Lorem ipsum dolor sit amet, consectetur adipisicing elit lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit lorem ipsum dolor sit amet.

Show Code 
<!-- 
.text-right = align text to right
 -->


<!-- H1 -->
<div class="heading-title">
	<h1>
		Word Rotator 
		<span class="word-rotator" data-delay="2000">
			<span class="items">
				<span>Simple</span>
				<span>Clean</span>
				<span>Precise</span>
			</span>
		</span><!-- /word rotator -->
	</h1>
</div>

<!-- H2 -->
<div class="heading-title">
	<h2>
		Word Rotator 
		<span class="word-rotator" data-delay="2000">
			<span class="items">
				<span>Simple</span>
				<span>Clean</span>
				<span>Precise</span>
			</span>
		</span><!-- /word rotator -->
	</h2>
</div>

<!-- H3 -->
<div class="heading-title">
	<h3>
		Word Rotator 
		<span class="word-rotator" data-delay="2000">
			<span class="items">
				<span>Simple</span>
				<span>Clean</span>
				<span>Precise</span>
			</span>
		</span><!-- /word rotator -->
	</h3>
</div>

<!-- H4 -->
<div class="heading-title">
	<h4>
		Word Rotator 
		<span class="word-rotator" data-delay="2000">
			<span class="items">
				<span>Simple</span>
				<span>Clean</span>
				<span>Precise</span>
			</span>
		</span><!-- /word rotator -->
	</h4>
</div>

<!-- H5 -->
<div class="heading-title">
	<h5>
		Word Rotator 
		<span class="word-rotator" data-delay="2000">
			<span class="items">
				<span>Simple</span>
				<span>Clean</span>
				<span>Precise</span>
			</span>
		</span><!-- /word rotator -->
	</h5>
</div>

<!-- H6 -->
<div class="heading-title">
	<h6>
		Word Rotator 
		<span class="word-rotator" data-delay="2000">
			<span class="items">
				<span>Simple</span>
				<span>Clean</span>
				<span>Precise</span>
			</span>
		</span><!-- /word rotator -->
	</h6>
</div>



<!-- Paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit 
	<span class="word-rotator text-red" data-delay="2000">
		<span class="items">
			<span>lorem</span>
			<span>ipsum</span>
			<span>dolor sit amet.</span>
		</span>
	</span><!-- /word rotator -->
</p>


<!-- Lead Paragraph -->
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit 
	<span class="word-rotator text-red" data-delay="2000">
		<span class="items">
			<span>lorem</span>
			<span>ipsum</span>
			<span>dolor sit amet.</span>
		</span>
	</span><!-- /word rotator -->
</p>

Parallax Heading

We can't solve problems by using the same kind of thinking we used when we created them.

Show Code 
<section class="heading-title parallax parallax-2" style="background-image: url('assets/images/demo/1200x800/6-min.jpg');">
	<div class="overlay dark-8"><!-- dark overlay [1 to 9 opacity] --></div>

	<div class="container">

		<div class="text-center">
			<h2>Parallax <span>Heading</span></h2>
			<p>We can't solve problems by using the same kind of thinking we used when we created them.</p>
		</div>

	</div>

</section>

Arrow Bottom

We can't solve problems by using the same kind of thinking we used when we created them.

Show Code 
<section class="heading-title heading-arrow-bottom">
	<div class="container">

		<div class="text-center">
			<h3>Arrow <span>Heading</span></h3>
			<p>We can't solve problems by using the same kind of thinking we used when we created them.</p>
		</div>

	</div>
</section>

Arrow Top

We can't solve problems by using the same kind of thinking we used when we created them.

Show Code 
<section class="heading-title heading-arrow-top">
	<div class="container">

		<div class="text-center">
			<h3>Arrow <span>Heading</span></h3>
			<p>We can't solve problems by using the same kind of thinking we used when we created them.</p>
		</div>

	</div>
</section>