LinGeo Extras


Here are a few ideas to get you started on designing an eye-appealing and information website. See the LinGeo Template, LinGeo Blog, Shopper Template, Slick-Slider and pgwSlideshow as well as the LinGeo Forms for more innovative ideas. In the Bonus Folder you'll find additional pages for images and carousels.

Accordions

Accordions Style 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec

Accordion Style 2

  • Lorem ipsum dolor sit amet
  • Facilisis id fringilla ut ligula vitae
  • Donec laoreet ultricies rhoncus
  • Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec

View code example
	
		<h3 class="header-title">Accordions Style 1</h3>
		<span class="line"></span>
		<div class="panel-group" id="accordion1">
			<div class="panel">
			<div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#accordion1collapseOne">
			<h4 class="panel-title accordion-toggle">
				List of Links
			</h4>
			</div>
	<div id="accordion1collapseOne" class="panel-collapse collapse">
			<div class="panel-body">
				<ul class="product-list-unstyled">
					<li><a href="">Nike</a></li>
					<li><a href="">Rebok</a></li>
					<li><a href="">Adidas</a></li>
					<li><a href="">Converse</a></li>
					<li><a href="">Puma</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="panel">
		<div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#accordion1collapseTwo">
			<h4 class="panel-title accordion-toggle">
				Numbered List Links
			</h4>
			</div>
	<div id="accordion1collapseTwo" class="panel-collapse collapse">
			<div class="panel-body">
				<ol class="product-list-unstyled">
					<li><a href="">Ford</a></li>
					<li><a href="">Chevrolet</a></li>
					<li><a href="">Ram</a></li>
					<li><a href="">Honda</a></li>
					<li><a href="">Toyota</a></li>
				</ol>
			</div>
		</div>
	</div>
	<div class="panel">
		<div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#accordion1collapseThree">
			<h4 class="panel-title accordion-toggle">
				Text Only
			</h4>
			</div>
	<div id="accordion1collapseThree" class="panel-collapse collapse">
			<div class="panel-body">
			<h4>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec
			</h4>
			</div>
		</div>
	</div></div>
	</div>

<!-- Accordion Style 2-->
	<div class="col-sm-6">
		<h3 class="header-title">Accordion Style 2</h3>
		<span class="line"></span>
		<div class="panel-group" id="accordion2">
			<div class="panel">
				<div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion2" data-target="#accordion2collapseOne">
				<h4 class="panel-title accordion-toggle">
					List with Icons
				</h4>
				</div>
	<div id="accordion2collapseOne" class="panel-collapse collapse">
		<div class="panel-body">
			<ul class="product-list-unstyled">
				<li><i class="fa fa-check fa-lg"></i> Lorem ipsum dolor sit amet</li>
				<li><i class="fa fa-cog fa-lg"></i> Facilisis id fringilla ut ligula vitae </li>
				<li><i class="fa fa-star fa-lg"></i> Donec laoreet ultricies rhoncus</li>
				<li><i class="fa fa-arrow-down fa-lg"></i> Lorem ipsum dolor sit amet</li>
			</ul>
			</div>
		</div>
	</div>
	<div class="panel">
		<div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion2" data-target="#accordion2collapseTwo">
			<h4 class="panel-title accordion-toggle">
				Text with Image
			</h4>
			</div>
	<div id="accordion2collapseTwo" class="panel-collapse collapse">
		<div class="panel-body">
			<div class="right-image-text">
				<img src="assets/img/site-images/img-01.jpg" title="Image Title" alt=""/>
			<h4>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec
			</h4>
			</div>
		</div>
	</div>
	<div class="panel">
		<div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion2" data-target="#accordion2collapseThree">
			<h4 class="panel-title accordion-toggle">
				Full-Width Image with Text
			</h4>
			</div>
	<div id="accordion2collapseThree" class="panel-collapse collapse">
		<div class="panel-body">
			<div class="left-image-text">
				<img src="assets/img/site-images/img-02.jpg" title="Image Title"  alt=""class="img-fluid" />
			<h4>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec
			</h4>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	

Audio / Video

Audio and Video files can be stored locally or linked from an outside source.

Local Audio

Locally Hosted Audio

Outside Audio

Outside Source Audio

Local Video

Locally Hosted Video

Outside Video

Outside Source Video

View code example
	
	<div class="audio-div">
		<audio class="fluid-audio" id="player2" src="assets/av/audio-thunder.mp3" type="audio/mp3"
		controls="controls"></audio>
	</div>

	<div class="audio-div">
		<audio class="fluid-audio" id="player2" src="http://www.mfiles.co.uk/mp3-downloads/brahms-lullaby-wiegenlied-guitar.mp3" type="audio/mp3"
		controls="controls"></audio>
	</div>

	<div class="audio-div">
		<video class="fluid-video" id="player2" controls="controls">
		<source src="assets/av/clouds.mp4" type="video/mp4">
			<source src="assets/av/clouds.mp4" type="video/mp4"></source>
		</source>
		</video>
	</div>

	<div class="audio-div">
		<iframe width="100%" height="250" src="https://www.youtube.com/embed/OJhrjMQV6CU" frameborder="0" allowfullscreen></iframe>
	</div>
	
	

Calendar (google)

To imbed a calendar put link to calendar in an iframe

Countdown Timers

There are more in the LinGeo Template

Minimalist Theme Coordinated

Time Remaining Until Christmas 2020

View code example
	
	<div class="lingeo"></div>
	//
	jQuery(document).ready(function($){
		$('.lingeo').dsCountDown({
			endDate: new Date("December 24, 2020 23:59:00"),
			theme: 'lingeo'
		});
	});
	
	

Minimalist Default

Time Remaining Until Christmas 2020

View code example
	
	<div class="black"></div>
	//
	jQuery(document).ready(function($){
		$('.black').dsCountDown({
			endDate: new Date("December 24, 2020 23:59:00"),
			theme: 'black'
		});
	});
	
	

Dividers

In lieu of the html .hr style divider which produces a faint line with 1rem top and bottom, we came up with a few unique ideas.

Solid Theme Color Horizontal Divider
This gives a solid color divider between containers.
Use div class="hr2"

Gradient Theme Color Horizontal Divider
This gives a gradiant theme color divider between containers.
See the instructions for how to make the gradient divider for your color scheme.
Use div class="hr3"

Gray Gradient Horizontal Divider
This gives a gray gradiant bar between containers.
Use div class="hr4"

Solid Vertical Divider between Columns in a Row
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Use div class="row solidvdivide"

Theme Color Gradient Vertical Divider between Columns in a Row
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Use div class="row themegradiantvdivide"

Gray Gradient Vertical Divider between Columns in a Row
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Use div class="row gradiantvdivide"

Just for Fun

Theme Color Horizontal Raduis Divider
Use div class="hr5"

Event Cards

Lorem ipsum dolor sit amet

At sit mutat nobis


Id tota decore qui, pro et augue audire albucius. Mea nihil viderer patrioque an, illum tibique vel te. Duo te hinc graeco, putant persecuti conceptam eos at, corpora salutatus efficiendi pro eu. Prompta sapientem an per, ius cu tota incorrupte repudiandae. Vel ut ridens copiosae, ex nec elit laudem graece. Ipsum doctus volumus te his.


LOREM IPSUM
Eos at viris noster
Sit an vide maiorum
Ei melius petentium consetetur nec, te qui iisque quaerendum accommodare. Nec ex tempor volutpat inciderint, et mei ignota eligendi. Eos dico officiis adipiscing ex, eu cum quod meliore, vis accusamus assueverit no.
SIT AMET
Vero noster at mei
Id pro elit copiosae oporteat. Duo te eruditi imperdiet
Expetendis disputando ei vim, enim sadipscing at usu, no brute petentium eum. Eius doming per an, in possim vituperatoribus sea. Cu hinc mucius aeterno qui, ex facer intellegam nec, phaedrum referrentur his et. Ea sale lorem eam, mel ei intellegat argumentum.

Mei ei apeirian facilisis. Lorem reprimique eloquentiam eam et, idque salutandi his ad, eam singulis elaboraret et. Viris appetere no usu, ut error delenit has. Inermis definitionem eu quo. Illud malis ad nam.

Mea offendit ocurreret consequat at. Altera impedit lucilius an sit. Natum dicit impedit eum cu, in mel nonumy praesent. Cu quas dolores vix, te fugit epicurei nec. Per in purto error.
Mei habeo regione persius cu, solum eligendi recteque eum id. Patrioque instructior ei eum, ex pri oblique menandri. Sed modus dicam in. His eu verear prodesset, molestie sententiae qui eu, ne dico recusabo efficiantur sit. Veritus corpora repudiare cum id, etiam commodo assueverit cu vix.
View code example
	
	<div class="container mt-3 mb-5">
		<div class="row justify-content-center align-items-center">
			<div class="col-sm-12">
				<div class="event-card1">
					<h2 class="text-center">Lorem ipsum dolor sit amet</h2>
					<h2 class="text-center">At sit mutat nobis</h2>
					</br>
					<h4>Id tota decore qui, pro et augue audire albucius. Mea nihil viderer patrioque an, illum tibique vel te. Duo te hinc graeco, putant persecuti conceptam eos at, corpora salutatus efficiendi pro eu. Prompta sapientem an per, ius cu tota incorrupte repudiandae. Vel ut ridens copiosae, ex nec elit laudem graece. Ipsum doctus volumus te his.</h4>
	<hr>
				
		<div class="row">
			<div class="col-6">
			<img  class="mx-auto d-block" src="assets/img/lingeo/user.png" class="img-fluid" />
			<h5 class="text-center"><strong>LOREM IPSUM
			</br>Eos at viris noster
			</br>Sit an vide maiorum</strong></h5>
			<h5>Ei melius petentium consetetur nec, te qui iisque quaerendum accommodare. Nec ex tempor volutpat inciderint, et mei ignota eligendi. Eos dico officiis adipiscing ex, eu cum quod meliore, vis accusamus assueverit no.</h5>
			</div>
			
			<div class="col-6">
			<img  class="mx-auto d-block" src="assets/img/lingeo/user.png" class="img-fluid" />
			<h5 class="text-center"><strong>SIT AMET
			</br>Vero noster at mei
			</br>Id pro elit copiosae oporteat. Duo te eruditi imperdiet</strong></h5>
			<h5>Expetendis disputando ei vim, enim sadipscing at usu, no brute petentium eum. Eius doming per an, in possim vituperatoribus sea. Cu hinc mucius aeterno qui, ex facer intellegam nec, phaedrum referrentur his et. Ea sale lorem eam, mel ei intellegat argumentum.</h5>
			</div>
	
	<hr>
		<div class="row">
			<div class="col ml-5 mr-5 mt-2 mb-2">
		<h5>Mei ei apeirian facilisis. Lorem reprimique eloquentiam eam et, idque salutandi his ad, eam singulis elaboraret et. Viris appetere no usu, ut error delenit has. Inermis definitionem eu quo. Illud malis ad nam.
	</br></br>
			Mea offendit ocurreret consequat at. Altera impedit lucilius an sit. Natum dicit impedit eum cu, in mel nonumy praesent. Cu quas dolores vix, te fugit epicurei nec. Per in purto error.</h5>
			</div>
		</div>

		<div class="row">
			<div class="col ml-3 mr-3 mt-2 mb-2">
		<h5><strong>Mei habeo regione persius cu, solum eligendi recteque eum id. Patrioque instructior ei eum, ex pri oblique menandri. Sed modus dicam in. His eu verear prodesset, molestie sententiae qui eu, ne dico recusabo efficiantur sit. Veritus corpora repudiare cum id, etiam commodo assueverit cu vix.</strong></h5>
			</div>
		</div>
			
	

Sed et natum congue

Vim liber electram argumentum ea

An quo ipsum comprehensam


duo dicit graeci ad

Vero noster at mei, id mel meliore lobortis, tale saperet iudicabit eu mea. Harum zril nam no. Id pro elit copiosae oporteat. Duo te eruditi imperdiet, has ad rebum summo sapientem, at essent scripserit pro. Consequat theophrastus et ius, his ancillae consectetuer ex. Novum molestiae te sit, ea vide labores scaevola mea. Malis falli interpretaris vim in, vel nibh oporteat verterem in.


Expetendis disputando ei vim, enim sadipscing at usu, no brute petentium eum. Eius doming per an, in possim vituperatoribus sea. Cu hinc mucius aeterno qui, ex facer intellegam nec, phaedrum referrentur his et. Ea sale lorem eam, mel ei intellegat argumentum. Vis elit ocurreret constituto ea. Mea suavitate inciderint ea, essent impetus usu in. Facer libris per et, vero iudico labores duo ex, qui ex altera adipisci imperdiet.

Sit an vide maiorum, melius splendide conceptam cu qui. Ut vix etiam facilisis, vix antiopam reprehendunt eu. Movet maiestatis sed ei, verear inimicus mea at. Ne his labitur omittantur.
View code example
	
	<div class="container mt-3 mb-5">
		<div class="row justify-content-center align-items-center">
			<div class="col-sm-12">
				<div class="event-card2">
					<h2 class="text-center">Sed et natum congue</h2>
					<h2 class="text-center">Vim liber electram argumentum ea</h2>
					<h2 class="text-center">An quo ipsum comprehensam</h2>
					</br>
		<div class="container">
                    <!--Used to highlight key points of post-->
                    <div class="focus-box float-md-right col-md-6 p-3 m-3">
				<img src="assets/img/lingeo/user.png" class="img-fluid" />
                      <h5>duo dicit graeci ad</h5>
                    </div>
                    <h3>
					Vero noster at mei, id mel meliore lobortis, tale saperet iudicabit eu mea. Harum zril nam no. Id pro elit copiosae oporteat. Duo te eruditi imperdiet, has ad rebum summo sapientem, at essent scripserit pro. Consequat theophrastus et ius, his ancillae consectetuer ex. Novum molestiae te sit, ea vide labores scaevola mea. Malis falli interpretaris vim in, vel nibh oporteat verterem in.  
				 </h3>
                </div>
	<hr>
		<div class="row">
			<div class="col ml-5 mr-5 mt-2 mb-2">
		<div class="event-card">
		<h4>
			Expetendis disputando ei vim, enim sadipscing at usu, no brute petentium eum. Eius doming per an, in possim vituperatoribus sea. Cu hinc mucius aeterno qui, ex facer intellegam nec, phaedrum referrentur his et. Ea sale lorem eam, mel ei intellegat argumentum. Vis elit ocurreret constituto ea. Mea suavitate inciderint ea, essent impetus usu in. Facer libris per et, vero iudico labores duo ex, qui ex altera adipisci imperdiet.
		</h4>
			</div>
		</div>
		</div>

		<div class="row">
			<div class="col ml-3 mr-3 mt-2 mb-2">
		<h5><strong>Sit an vide maiorum, melius splendide conceptam cu qui. Ut vix etiam facilisis, vix antiopam reprehendunt eu. Movet maiestatis sed ei, verear inimicus mea at. Ne his labitur omittantur.</strong></h5>
			</div>
		</div>
			
	

Footers

Five Column

Contact Us

Arkansas Widgets
555 Bubba Avenue
Oil Trough, AR 72564

eMail Us
AR Widgets

Keep in Touch

View code example
	
            <h4><strong><u>Contact Us</u></strong></h4>
		  <h5>Arkansas Widgets</br>555 Bubba Avenue</br>Oil Trough, AR 72564
		  </h5>
        </div>
        <div class="col">
            <h4><strong><u>eMail Us</u></strong>
		  </br><a class="btn btn-default-drk btn-xs" href="">AR Widgets</a>
        </div>
        <div class="col">
            <h4><strong><u>Menu</u></strong>
		  </br>
        <div class="dropup">
            <div id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default-drk btn btn-xs" data-target="#" href="/page.html">
                Menu <i class="fa fa-chevron-up"></i>
            </div >
    		<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
              <li><a href="#">Credits</a></li>
              <li><a href="#">Policy</a></li>
              <li><a href="#">Pages</a></li>
              <li><a href="#">Features</a></li>
              <li><a href="#">Home</a></li>
		</ul>
		</div>
        </div>
        <div class="col">
            <h4><strong><u>Links</u></strong>
		  </br>
		<a class="btn btn-success btn-xs" href="#">Login</a>
		  </br>
		<a class="btn btn-danger btn-xs" href="#">Join the Club</a>
        </div>
        <div class="col">
            <h4><strong><u>Keep in Touch</u></strong>
		  </br>
		<ul class="social-icons">
			<li class="facebook"><a href="">facebook</a>
			</li>
			<li class="googleplus"><a href="#">googleplus</a>
			</li>
			<li class="linkedin"><a href="#">linkedin</a>
			</li>
		</ul>
	
	

Information

View code example
	
	<div class="footer-links">
		<div class="container">
		<div class="row">
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
		  <h5><i class="fa fa-info"></i> Information</h5>
                <ul class="list-unstyled">
                    <li><a href="#">About Us</a>
                    </li>
                    <li><a href="#">Delivery</a>
                    </li>
                    <li><a href="#">Privacy</a>
                    </li>
                    <li><a href="#">Terms</a>
                    </li>
                </ul>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
		  <h5><i class="fa fa-comment"></i> Service</h5>
                <ul class="list-unstyled">
                    <li><a href="#">Contact Us</a>
                    </li>
                    <li><a href="#">Returns</a>
                    </li>
                    <li><a href="#">Delivery</a>
                    </li>
                    <li><a href="#">Site Map</a>
                    </li>
                </ul>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
		  <h5><i class="fa fa-folder-open"></i> Extras</h5>
                <ul class="list-unstyled">
                    <li><a href="#">Brands</a>
                    </li>
                    <li><a href="#">Gift Vouchers</a>
                    </li>
                    <li><a href="#">Affiliates</a>
                    </li>
                    <li><a href="#">Specials</a>
                    </li>
                </ul>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
		  <h5><i class="fa fa-folder-open"></i> My Account</h5>
                <ul class="list-unstyled">
                    <li><a href="#">Account</a>
                    </li>
                    <li><a href="#">History</a>
                    </li>
                    <li><a href="#">Wish List</a>
                    </li>
                    <li><a href="#">Newsletter</a>
                    </li>
                </ul>
            </div>
			</div>
		</div>
	</div>
	
	

Minimalist

View code example
	
	<div class="footer-links">
		<div class="container">
		<div class="row">
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
		  <h5><i class="fa fa-info"></i> Information</h5>
                <ul class="list-unstyled">
                    <li><a href="#">About Us</a>
                    </li>
                    <li><a href="#">Delivery</a>
                    </li>
                    <li><a href="#">Privacy</a>
                    </li>
                    <li><a href="#">Terms</a>
                    </li>
                </ul>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
		  <h5><i class="fa fa-comment"></i> Service</h5>
                <ul class="list-unstyled">
                    <li><a href="#">Contact Us</a>
                    </li>
                    <li><a href="#">Returns</a>
                    </li>
                    <li><a href="#">Delivery</a>
                    </li>
                    <li><a href="#">Site Map</a>
                    </li>
                </ul>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
		  <h5><i class="fa fa-folder-open"></i> Extras</h5>
                <ul class="list-unstyled">
                    <li><a href="#">Brands</a>
                    </li>
                    <li><a href="#">Gift Vouchers</a>
                    </li>
                    <li><a href="#">Affiliates</a>
                    </li>
                    <li><a href="#">Specials</a>
                    </li>
                </ul>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
		  <h5><i class="fa fa-folder-open"></i> My Account</h5>
                <ul class="list-unstyled">
                    <li><a href="#">Account</a>
                    </li>
                    <li><a href="#">History</a>
                    </li>
                    <li><a href="#">Wish List</a>
                    </li>
                    <li><a href="#">Newsletter</a>
                    </li>
                </ul>
            </div>
			</div>
		</div>
	</div>
	
	

Headers

Header with Info on Right

View code example
	
	<div class="header">
        <div class="container mt-3">
            <div class="row">
                <div class="col-sm-6">
					<a href="http://www.gandlconsultants.com/gandl-home.html"><img src="assets/img/lingeo/lingeo-addon-logo.png" alt=""class="img-fluid" /></a>
                </div>
                <div class="col-sm-6">
                    <div class="float-right">
                        <!-- Spacer -->
		<a href="#"><img src="assets/img/misc-images/fb_button-lgt.jpg" style="PADDING-TOP: 20px; PADDING-RIGHT: 10px; PADDING-BOTTOM: 6px;" class="img-fluid" /></a>
		<a href="#"><img src="assets/img/misc-images/twitter_button-lgt.png" style="PADDING-TOP: 20px; PADDING-RIGHT: 10px; PADDING-BOTTOM: 6px;" class="img-fluid" /></a>
                    </div>
                </div>
            </div>
        </div>
	</div></div>	
	

Header with Social Icons

View code example
	
          <div class="row mt-2">
            <div class="col-md-12">
				<a href="http://www.gandlconsultants.com/gandl-home.html"><img src="assets/img/lingeo/lingeo-addon-logo.png" alt=""class="img-fluid" /></a>
			</div>
		</div>
	<div class="col-md-12">
		<ul class="social-icons">
			<li class="facebook"><a href="#">facebook</a>
			</li>
			<li class="googleplus"><a href="#">googleplus</a>
			</li>
			<li class="linkedin"><a href="#">linkedin</a>
			</li>
			<li class="twitter"><a href="#">twitter</a>
			</li>
		</ul>
			</div>
          </div>
	
	

eCommerce Header

View code example
	
	<div class="logo">
		<div class="container">
			<div class="row">
				<div class="col-sm-4">
					<a href="http://www.gandlconsultants.com/gandl-home.html"><img src="assets/img/lingeo/lingeo-shop-logo.png" class="img-fluid" /></a>
					</div>
				</div>
			<div class="col-sm-12">
				<div class="header-menu">
	<ul class="nav">
		<li><a href="#" data-toggle="modal" data-target="#login-modal"><i class="fa fa-sign-in"></i> <span class>Login</span></a></li>
	<!-- *** LOGIN MODAL *** -->
        <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="Login">Customer Login</h4>
                    </div>
                    <div class="modal-body">
                        <form action="customer-orders.html" method="post">
                            <div class="form-group">
                                <input type="text" class="form-control" id="email_modal" placeholder="email">
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control" id="password_modal" placeholder="password">
                            </div>
                            <p class="text-center">
                                <button class="btn btn-default-drk btn-sm"><i class="fa fa-sign-in"></i> Log in</button>
                            </p>
                        </form>
                        <p class="text-center text-muted">Not registered yet?</p>
                        <p class="text-center text-muted"><a href="http://www.gandlconsultants.com/LinGeo/shop-reg-login.html"><strong>Register now</strong></a>! It is easy and done in 1&nbsp;minute and gives you access to special discounts and much more!</p>
                    </div>
                </div>
            </div>
        </div>
	<!-- *** LOGIN MODAL END *** -->
		<li><a href="http://www.gandlconsultants.com/LinGeo/shop-login-reg.html"><i class="fa fa-user"></i> Register</a></li>
		<li><a href="http://www.gandlconsultants.com/LinGeo/shop-acct-info.html"><i class="fa fa-lock"></i> Account</a></li>
		<li><a href="http://www.gandlconsultants.com/LinGeo/shop-wishlist.html"><i class="fa fa-star"></i> Wishlist</a></li>
		<li><a href="http://www.gandlconsultants.com/LinGeo/shop-cart.html"><i class="fa fa-shopping-basket"></i> Cart</a></li>
		<li><a href="http://www.gandlconsultants.com/LinGeo/shop-home.html"><i class="fa fa-sign-out"></i> Logout</a></li>
	</ul>
				</div>
			</div>
		</div>
	</div>
	
	

Header with Sub-Headers

Morbi dapibus, enim quis luctus interdum

View code example
	
	<div class="logo">
		<div class="container">
			<div class="row">
				<div class="col-sm-4">
					<a href="http://www.gandlconsultants.com/gandl-home.html"><img src="assets/img/lingeo/lingeo-shop-logo.png" class="img-fluid" /></a>
					</div>
				</div>
			<div class="col-sm-12">
				<div class="header-menu">
	<ul class="nav">
		<li><a href="#" data-toggle="modal" data-target="#login-modal"><i class="fa fa-sign-in"></i> <span class>Login</span></a></li>
	<!-- *** LOGIN MODAL *** -->
        <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="Login">Customer Login</h4>
                    </div>
                    <div class="modal-body">
                        <form action="customer-orders.html" method="post">
                            <div class="form-group">
                                <input type="text" class="form-control" id="email_modal" placeholder="email">
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control" id="password_modal" placeholder="password">
                            </div>
                            <p class="text-center">
                                <button class="btn btn-default-drk btn-sm"><i class="fa fa-sign-in"></i> Log in</button>
                            </p>
                        </form>
                        <p class="text-center text-muted">Not registered yet?</p>
                        <p class="text-center text-muted"><a href="http://www.gandlconsultants.com/LinGeo/shop-reg-login.html"><strong>Register now</strong></a>! It is easy and done in 1&nbsp;minute and gives you access to special discounts and much more!</p>
                    </div>
                </div>
            </div>
        </div>
	<!-- *** LOGIN MODAL END *** -->
		<li><a href="http://www.gandlconsultants.com/LinGeo/shop-login-reg.html"><i class="fa fa-user"></i> Register</a></li>
		<li><a href="http://www.gandlconsultants.com/LinGeo/shop-acct-info.html"><i class="fa fa-lock"></i> Account</a></li>
		<li><a href="http://www.gandlconsultants.com/LinGeo/shop-wishlist.html"><i class="fa fa-star"></i> Wishlist</a></li>
		<li><a href="http://www.gandlconsultants.com/LinGeo/shop-cart.html"><i class="fa fa-shopping-basket"></i> Cart</a></li>
		<li><a href="http://www.gandlconsultants.com/LinGeo/shop-home.html"><i class="fa fa-sign-out"></i> Logout</a></li>
	</ul>
				</div>
			</div>
		</div>
	</div>
	
	

Icons

Social Media

Vertical animation & Color change when hovered

Changes to circle when hovered

Changes location when hovered

Large Circle changes from gray to colored

Small Circle changes from gray to colored

Colored Social Media Icons

Small Gray Social Media Icons

View code example
	
\\ Vertical animation & color change when hovered
		<ul class="social-icons">
			<li class="facebook"><a href="">facebook</a>
			</li>
			<li class="googleplus"><a href="#">googleplus</a>
			</li>
			<li class="linkedin"><a href="#">linkedin</a>
			</li>
			<li class="twitter"><a href="#">twitter</a>
			</li>
			</li>
			<li class="rss"><a href="#">rss</a>
			</li>
		</ul>
\\ Changes to circle when hovered
		<ul class="social-icons-2">
			<li class="facebook"><a href="#">facebook</a>
			</li>
			<li class="twitter"><a href="#">twitter</a>
			</li>
			<li class="instagram"><a href="#">instagram</a>
			</li>
			<li class="email"><a href="#">email</a>
			</li>
		</ul>
\\ Changes location when hovered
			<a href="#"><img class="s-icon" src="assets/img/icons/socials/facebook.png"/></a>
			<a href="#"><img class="s-icon" src="assets/img/icons/socials/twitter.png"/></a>
			<a href="#"><img class="s-icon" src="assets/img/icons/socials/instagram.png"/></a>
			<a href="#"><img class="s-icon" src="assets/img/icons/socials/bloggr.png"/></a>
			<a href="#"><img class="s-icon" src="assets/img/icons/socials/email_blue.png"/></a>
\\ Large Circle changes from gray to color
            <ul class="social-grid">
                <li>
                    <div class="social-item">
                        <div class="social-info-wrap">
                            <div class="social-info">
                                <div class="social-info-front social-facebook">	<a href="http://facebook.com"></a>
                                </div>
                                <div class="social-info-back social-facebook-hover">	<a href="http://facebook.com"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="social-item">
                        <div class="social-info-wrap">
                            <div class="social-info">
                                <div class="social-info-front social-twitter">	<a href="http://twitter.com"></a>
                                </div>
                                <div class="social-info-back social-twitter-hover">	<a href="http://twitter.com"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="social-item">
                        <div class="social-info-wrap">
                            <div class="social-info">
                                <div class="social-info-front social-linkedin">	<a href="http://linkedin.com"></a>
                                </div>
                                <div class="social-info-back social-linkedin-hover">	<a href="http://linkedin.com"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
\\ Small circle changed from gray to color
                    <div id="social-links">
                        <ul class="social-small-grid">
                            <li>
                                <div class="social-small-item">
                                    <div class="social-small-info-wrap">
                                        <div class="social-small-info">
                                            <div class="social-small-info-front social-small-facebook">	<a href="http://facebook.com"></a>
                                            </div>
                                            <div class="social-small-info-back social-small-facebook-hover">	<a href="http://facebook.com"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="social-small-item">
                                    <div class="social-small-info-wrap">
                                        <div class="social-small-info">
                                            <div class="social-small-info-front social-small-flickr">	<a href="http://flickr.com"></a>
                                            </div>
                                            <div class="social-small-info-back social-small-flickr-hover">	<a href="http://flickr.com"></a>
	</div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="social-small-item">
                                    <div class="social-small-info-wrap">
                                        <div class="social-small-info">
                                            <div class="social-small-info-front social-small-dribbble">	<a href="http://dribbble.com"></a>
                                            </div>
                                            <div class="social-small-info-back social-small-dribbble-hover">	<a href="http://dribbble.com"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="social-small-item">
                                    <div class="social-small-info-wrap">
                                        <div class="social-small-info">
                                            <div class="social-small-info-front social-small-twitter">	<a href="http://twitter.com"></a>
                                            </div>
                                            <div class="social-small-info-back social-small-twitter-hover">	<a href="http://twitter.com"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="social-small-item">
                                    <div class="social-small-info-wrap">
                                        <div class="social-small-info">
                                            <div class="social-small-info-front social-small-linkedin">	<a href="http://linkedin.com"></a>
                                            </div>
                                            <div class="social-small-info-back social-small-linkedin-hover">	<a href="http://linkedin.com"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="social-small-item">
                                    <div class="social-small-info-wrap">
                                        <div class="social-small-info">
                                            <div class="social-small-info-front social-small-youtube">	<a href="http://youtube.com"></a>
                                            </div>
                                            <div class="social-small-info-back social-small-youtube-hover">	<a href="http://youtube.com"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
\\ Colored social media icons
		<img src="assets/img/icons/socials/bloggr.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/deviantart.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/digg.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/dribbble_dark.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/dribbble.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/email_blue.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/email.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/evernote.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/facebook_dark.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/facebook.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/flickr.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/forrst.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/google_dark.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/googleplus.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/instagram.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/linkedin.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/pinterest.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/rss.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/share_dark.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/share.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/skype.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/stumbleupon.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/tumblr.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/twitter_dark.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/twitter.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/vimeo_dark.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/vimeo.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/socials/youtube.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
\\ Small gray social media icons
		<img src="assets/img/icons/dark-socials/blogger.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/deviantart.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/digg.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/dribbble.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/evernote.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/facebook.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/flickr.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/forrst.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/google.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/googleplus.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/icloud.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/linkedin.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/pinterest.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/rss.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/skype.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/stumbleupon.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/tumblr.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/twitter.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/vimeo.png" style="PADDING-RIGHT: 10px;"</>
		<img src="assets/img/icons/dark-socials/youtube.png" style="PADDING-RIGHT: 10px;"</>
	
	

Back to the Top

View code example
	
		<img src="assets/img/icons/to-top/bt01.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt02.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt03.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt04.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt05.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt06.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt07.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt08.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt09.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt10.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt11.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt12.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt13.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt14.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt15.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt16.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt17.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt18.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt19.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt20.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
		<img src="assets/img/icons/to-top/bt21.png" style="PADDING-RIGHT: 10px; PADDING-BOTTOM: 10PX;"</>
	
	

Icons by Micon

Micon Icons offer an option to the Fontawesome icons built into Bootstrap 4 without having to add a color to each icon using css within your stylesheet and they have many unique icons that Fontawesome doesn't offer.
Changing the icon's color is done in the separate stylesheet (assets/micon-fonts/micon.css).

Buttons With Micon Icons

View code example
	
		<button type="button" class="btn btn-primary">
		  <i class="mi mi-AirplaneSolid"></i>
		</button>
		<button type="button" class="btn btn-secondary">
		  <i class="mi mi-ActionCenterQuietNotification"></i>
		</button>
		<button type="button" class="btn btn-default">
		  <i class="mi mi-Audio"></i>
		</button>
		<button type="button" class="btn btn-success">
		  <i class="mi mi-CalendarSolid"></i>
		</button>
		<button type="button" class="btn btn-danger">
		  <i class="mi mi-HeartFill"></i>
		</button>
		<button type="button" class="btn btn-warning">
		  <i class="mi mi-Brightness"></i>
		</button>
		<button type="button" class="btn btn-info">
		  <i class="mi mi-FavoriteLegacy"></i>
		</button>
		<button type="button" class="btn btn-outline-primary">
		  <i class="mi mi-EmojiTabFoodPlants"></i>
		</button>
		<button type="button" class="btn btn-outline-secondary">
		  <i class="mi mi-Emoji2"></i>
		</button>
		<button type="button" class="btn btn-outline-default">
		  <i class="mi mi-Education"></i>
		</button>
		<button type="button" class="btn btn-outline-success">
		  <i class="mi mi-DefenderApp"></i>
		</button>
		<button type="button" class="btn btn-outline-danger">
		  <i class="mi mi-ContactSolid"></i>
		</button>
		<button type="button" class="btn btn-outline-warning">
		  <i class="mi mi-Color"></i>
		</button>
		<button type="button" class="btn btn-outline-info">
		  <i class="mi mi-Cloud"></i>
		</button>
	
	

Some Micon Icons

Best viewed on a desktop

  • EA01 Accept
  • EA02 Accident
  • EA03 AccidentSolid
  • EA04 Accounts
  • EA05 ActionCenter
  • EA06 ActionCenterAsterisk
  • EA07 ActionCenterMirrored
  • EA08 ActionCenterNotification
  • EA09 ActionCenterNotificationMirrored
  • EA0A ActionCenterQuiet
  • EA0B ActionCenterQuietNotification
  • EA0C Add
  • EA0D AddFriend
  • EA0E AddRemoteDevice
  • EA0F AddSurfaceHub
  • EA10 AddTo
  • EA11 AdjustHologram
  • EDE4 facebook-official
  • EDE5 facebook
  • EE33 twitter
  • EDFA instagram
  • EDFD joomla
  • EDFE jsfiddle
  • EE01 linkedin
  • EE04 maxcdn
  • EE06 medium
  • EE08 mixcloud
  • EE10 paypal
  • EE13 pinterest-p
  • EE14 product-hunt
  • EE18 rebel
  • EE19 reddit-alien
  • EE1D sellsy
  • EE1F simplybuilt
  • EE20 skyatlas
  • EE21 skype
  • EE22 slack
  • EE24 snapchat-ghost
  • EE25 soundcloud
  • EE26 spotify
View code example

                  <ul class="glyphs list-unstyled">
                    <li>
                      <span class="glyph">
                        <i class="mi mi-Accept"></i>
                      </span>
                      <span class="glyph-codepoint">EA01</span>
                      <span class="glyph-name">Accept</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-Accident"></i>
                      </span>
                      <span class="glyph-codepoint">EA02</span>
                      <span class="glyph-name">Accident</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-AccidentSolid"></i>
                      </span>
                      <span class="glyph-codepoint">EA03</span>
                      <span class="glyph-name">AccidentSolid</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-Accounts"></i>
                      </span>
                      <span class="glyph-codepoint">EA04</span>
                      <span class="glyph-name">Accounts</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-ActionCenter"></i>
                      </span>
                      <span class="glyph-codepoint">EA05</span>
                      <span class="glyph-name">ActionCenter</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-ActionCenterAsterisk"></i>
                      </span>
                      <span class="glyph-codepoint">EA06</span>
                      <span class="glyph-name">ActionCenterAsterisk</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-ActionCenterMirrored"></i>
                      </span>
                      <span class="glyph-codepoint">EA07</span>
                      <span class="glyph-name">ActionCenterMirrored</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-ActionCenterNotification"></i>
                      </span>
                      <span class="glyph-codepoint">EA08</span>
                      <span class="glyph-name">ActionCenterNotification</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-ActionCenterNotificationMirrored"></i>
                      </span>
                      <span class="glyph-codepoint">EA09</span>
                      <span class="glyph-name">ActionCenterNotificationMirrored</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-ActionCenterQuiet"></i>
                      </span>
                      <span class="glyph-codepoint">EA0A</span>
                      <span class="glyph-name">ActionCenterQuiet</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-ActionCenterQuietNotification"></i>
                      </span>
                      <span class="glyph-codepoint">EA0B</span>
                      <span class="glyph-name">ActionCenterQuietNotification</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-Add"></i>
                      </span>
                      <span class="glyph-codepoint">EA0C</span>
                      <span class="glyph-name">Add</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-AddFriend"></i>
                      </span>
                      <span class="glyph-codepoint">EA0D</span>
                      <span class="glyph-name">AddFriend</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-AddRemoteDevice"></i>
                      </span>
                      <span class="glyph-codepoint">EA0E</span>
                      <span class="glyph-name">AddRemoteDevice</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-AddSurfaceHub"></i>
                      </span>
                      <span class="glyph-codepoint">EA0F</span>
                      <span class="glyph-name">AddSurfaceHub</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-AddTo"></i>
                      </span>
                      <span class="glyph-codepoint">EA10</span>
                      <span class="glyph-name">AddTo</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-AdjustHologram"></i>
                      </span>
                      <span class="glyph-codepoint">EA11</span>
                      <span class="glyph-name">AdjustHologram</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-facebook-official"></i>
                      </span>
                      <span class="glyph-codepoint">EDE4</span>
                      <span class="glyph-name">facebook-official</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-facebook"></i>
                      </span>
                      <span class="glyph-codepoint">EDE5</span>
                      <span class="glyph-name">facebook</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-twitter"></i>
                      </span>
                      <span class="glyph-codepoint">EE33</span>
                      <span class="glyph-name">twitter</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-instagram"></i>
                      </span>
                      <span class="glyph-codepoint">EDFA</span>
                      <span class="glyph-name">instagram</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-joomla"></i>
                      </span>
                      <span class="glyph-codepoint">EDFD</span>
                      <span class="glyph-name">joomla</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-jsfiddle"></i>
                      </span>
                      <span class="glyph-codepoint">EDFE</span>
                      <span class="glyph-name">jsfiddle</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-linkedin"></i>
                      </span>
                      <span class="glyph-codepoint">EE01</span>
                      <span class="glyph-name">linkedin</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-maxcdn"></i>
                      </span>
                      <span class="glyph-codepoint">EE04</span>
                      <span class="glyph-name">maxcdn</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-medium"></i>
                      </span>
                      <span class="glyph-codepoint">EE06</span>
                      <span class="glyph-name">medium</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-mixcloud"></i>
                      </span>
                      <span class="glyph-codepoint">EE08</span>
                      <span class="glyph-name">mixcloud</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-paypal"></i>
                      </span>
                      <span class="glyph-codepoint">EE10</span>
                      <span class="glyph-name">paypal</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-pinterest-p"></i>
                      </span>
                      <span class="glyph-codepoint">EE13</span>
                      <span class="glyph-name">pinterest-p</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-product-hunt"></i>
                      </span>
                      <span class="glyph-codepoint">EE14</span>
                      <span class="glyph-name">product-hunt</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-rebel"></i>
                      </span>
                      <span class="glyph-codepoint">EE18</span>
                      <span class="glyph-name">rebel</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-reddit-alien"></i>
                      </span>
                      <span class="glyph-codepoint">EE19</span>
                      <span class="glyph-name">reddit-alien</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-sellsy"></i>
                      </span>
                      <span class="glyph-codepoint">EE1D</span>
                      <span class="glyph-name">sellsy</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-simplybuilt"></i>
                      </span>
                      <span class="glyph-codepoint">EE1F</span>
                      <span class="glyph-name">simplybuilt</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-skyatlas"></i>
                      </span>
                      <span class="glyph-codepoint">EE20</span>
                      <span class="glyph-name">skyatlas</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-skype"></i>
                      </span>
                      <span class="glyph-codepoint">EE21</span>
                      <span class="glyph-name">skype</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-slack"></i>
                      </span>
                      <span class="glyph-codepoint">EE22</span>
                      <span class="glyph-name">slack</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-snapchat-ghost"></i>
                      </span>
                      <span class="glyph-codepoint">EE24</span>
                      <span class="glyph-name">snapchat-ghost</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-soundcloud"></i>
                      </span>
                      <span class="glyph-codepoint">EE25</span>
                      <span class="glyph-name">soundcloud</span>
                    </li>
                    <li>
                      <span class="glyph">
                        <i class="mi mi-spotify"></i>
                      </span>
                      <span class="glyph-codepoint">EE26</span>
                      <span class="glyph-name">spotify</span>
                    </li>
                  </ul>
                    
                  

Map (google)

To imbed a map put link to map in an iframe

News Tickers

Breaking News

Continuous horizontal scroll without User control.

    Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis.            Lorem ipsum dolor sit amet, consectetur adipiscing elit.            Aliquam adipiscing, erat ac scelerisque convallis, sapien mauris egestas diam.            Lorem ipsum dolor sit amet, consectetur adipiscing elit.            Aenean augue dolor, facilisis id fringilla ut.       
View code example
	
	<div class="scrollbar">
		<marquee class="scrollbar" direction="left" scrollamount="5" behavior="scroll">
		<i class="fa fa-info" style="color:white"></i>&nbsp;&nbsp;&nbsp;
		Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis.</h4>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<i class="fa fa-info" style="color:white"></i>&nbsp;&nbsp;&nbsp;
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<i class="fa fa-info" style="color:white"></i>&nbsp;&nbsp;&nbsp;
		Aliquam adipiscing, erat ac scelerisque convallis, sapien mauris egestas diam.
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<i class="fa fa-info" style="color:white"></i>&nbsp;&nbsp;&nbsp;
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<i class="fa fa-info" style="color:white"></i>&nbsp;&nbsp;&nbsp;
		Aenean augue dolor, facilisis id fringilla ut.
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		</marquee>
	</div>
	
	

Carousel Ticker

Runs automatically until the user hovers an item or uses the navigation arrows.

View code example
	
		<div id="carousel-testimonial" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
	<div class="carousel-inner" role="listbox">
	<div class="active carousel-item">
		<h3>Aliquam adipiscing, erat ac scelerisque convallis, sapien mauris egestas diam.
		&nbsp;Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis.
		&nbsp;Aenean augue dolor, facilisis id fringilla ut.
		&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
		</br></br></h3>
		</div>
	<div class="carousel-item">
		<h3>Aliquam adipiscing, erat ac scelerisque convallis, sapien mauris egestas diam.
		&nbsp;Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis.
		&nbsp;Aenean augue dolor, facilisis id fringilla ut.
		&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</br></br></h3>
	</div>
                        
	<div class="carousel-item">
		<h3>Aliquam adipiscing, erat ac scelerisque convallis, sapien mauris egestas diam.
		&nbsp;Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis.
		&nbsp;Aenean augue dolor, facilisis id fringilla ut.
		&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</br></br></h3>
	</div>
					   
	<div class="carousel-item">
		<h3>Aliquam adipiscing, erat ac scelerisque convallis, sapien mauris egestas diam.
		&nbsp;Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis.
		&nbsp;Aenean augue dolor, facilisis id fringilla ut.
		&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</br></br></h3>
	</div>
                        
	<div class="carousel-item">
		<h3>Aliquam adipiscing, erat ac scelerisque convallis, sapien mauris egestas diam.
		&nbsp;Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis.
		&nbsp;Aenean augue dolor, facilisis id fringilla ut.
		&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</br></br></h3>
	</div>
                        
	<div class="carousel-item">
		<h3>Aliquam adipiscing, erat ac scelerisque convallis, sapien mauris egestas diam.
		&nbsp;Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis.
		&nbsp;Aenean augue dolor, facilisis id fringilla ut.
		&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</br></br></h3>
	</div>

<!-- Controls -->
	<div class="btns">
		<a class="btn btn btn-default-drk" href="#carousel-testimonial" role="button" data-slide="prev">
			<span class="fa fa-angle-left" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="btn btn-default-drk" href="#carousel-testimonial" role="button" data-slide="next">
			<span class="fa fa-angle-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
			</div>
	
	

Vertical News Tickers

The one on the left includes images, rolls upward and can be controlled by the user. The middle one rolls downward and runs automatically. The right one is totally controlled by the user and has the lead text in bold.

News
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
News
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
News
  • Curabitur porttitor
    ante eget hendrerit adipiscing. Maecenas at magna accumsan, rhoncus neque id, fringilla dolor. Read more...
  • Praesent ornare
    nisl lorem, ut condimentum lectus gravida ut. Ut velit nunc, vehicula volutpat laoreet vel, consequat eu mauris. Read more...
  • Nunc ultrices tortor
    eu massa placerat posuere. Vivamus viverra sagittis nunc. Nunc et imperdiet magna. Mauris sed eros nulla. Read more...
  • Morbi sodales tellus
    sit amet leo congue bibendum. Ut non mauris eu neque fermentum pharetra. Read more...
  • In pharetra suscipit
    orci sed viverra. Praesent at sollicitudin tortor, id sagittis magna. Fusce massa sem, bibendum id. Read more...
  • Maecenas nec ligula
    sed est suscipit aliquet sed eget ipsum. Suspendisse id auctor nibh. Ut porttitor volutpat augue, non sodales odio dignissi id. Read more...
  • Onec bibendum
    consectetur diam, nec euismod urna venenatis eget. Cras consequat convallis leo. Read more...
  • Curabitur porttitor
    ante eget hendrerit adipiscing. Maecenas at magna accumsan, rhoncus neque id, fringilla dolor. Read more...
View code example
	
	<div class="container mt-3">
		<div class="row">
			<div class="col-sm-4">
				<div class="panel panel-default">
					<div class="header-title">
						<span class="fa fa-list"></span><b>News</b></div>
					<div class="panel-body">
						<div class="row">
							<div class="col-xs-12">
								<ul class="demo1">
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="assets/img/site-images/img-01.jpg" width="60" class="rounded-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="assets/img/site-images/img-02.jpg" width="60" class="rounded-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="assets/img/site-images/img-03.jpg" width="60" class="rounded-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="assets/img/site-images/img-04.jpg" width="60" class="rounded-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="assets/img/site-images/img-05.jpg" width="60" class="rounded-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="assets/img/site-images/img-06.jpg" width="60" class="rounded-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="assets/img/site-images/img-07.jpg" width="60" class="rounded-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="panel-footer">

					</div>
				</div>
			</div>
			
			<div class="col-sm-4">
				<div class="panel panel-default">
					<div class="header-title">
						<span class="fa fa-list"></span><b>News</b></div>
					<div class="panel-body">
						<div class="row">
							<div class="col-xs-12">
								<ul class="demo2">
									<li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
									<li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
									<li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
									<li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
									<li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
									<li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
									
								</ul>
							</div>
						</div>
					</div>
					<div class="panel-footer">

					</div>
				</div>
			</div>
			
			<div class="col-sm-4">
				<div class="panel panel-default">
					<div class="header-title">
						<span class="fa fa-list"></span><b>News</b></div>
					<div class="panel-body">
						<div class="row">
							<div class="col-xs-12">
								<ul id="demo3">
									<li class="news-item"><strong>Curabitur porttitor</strong></br> ante eget hendrerit adipiscing. Maecenas at magna accumsan,
										rhoncus neque id, fringilla dolor. <a href="#">Read more...</a></li>
									<li class="news-item"><strong>Praesent ornare</strong></br> nisl lorem, ut condimentum lectus gravida ut. Ut velit nunc, vehicula
										volutpat laoreet vel, consequat eu mauris. <a href="#">Read more...</a></li>
									<li class="news-item"><strong>Nunc ultrices tortor</strong></br> eu massa placerat posuere. Vivamus viverra sagittis nunc. Nunc
										et imperdiet magna. Mauris sed eros nulla. <a href="#">Read more...</a></li>
									<li class="news-item"><strong>Morbi sodales tellus</strong></br> sit amet leo congue bibendum. Ut non mauris eu neque fermentum
										pharetra. <a href="#">Read more...</a></li>
									<li class="news-item"><strong>In pharetra suscipit</strong></br> orci sed viverra. Praesent at sollicitudin tortor, id sagittis
										magna. Fusce massa sem, bibendum id. <a href="#">Read more...</a> </li>
									<li class="news-item"><strong>Maecenas nec ligula</strong></br> sed est suscipit aliquet sed eget ipsum. Suspendisse id auctor
										nibh. Ut porttitor volutpat augue, non sodales odio dignissi id. <a href="#">Read more...</a></li>
									<li class="news-item"><strong>Onec bibendum</strong></br> consectetur diam, nec euismod urna venenatis eget. Cras consequat
										convallis leo. <a href="#">Read more...</a> </li>
									<li class="news-item"><strong>Curabitur porttitor</strong></br> ante eget hendrerit adipiscing. Maecenas at magna accumsan,
										rhoncus neque id, fringilla dolor. <a href="#">Read more...</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="panel-footer">
					</div>
				</div>
			</div>
		</div>
	</div>
	
	

Notice Unit

One more way to draw attention to an item. The vertical bar on the left is unique to the Notice Unit. The vertical bar is wider than the bar used on Tagline Boxes shown below.

Use class="notice-unit">

Overlay

Ole Mill

View
 Somewhere, USA
View code example
	
          <div class="card product-card overlay-hover">
            <!-- Hover content -->
            <div class="overlay-hover-content overlay-op-5">
              <h4 class="text-white">
                Nike
              </h4>
              <a href="javascript: void(0)" class="btn btn-default-lgt text-uppercase font-weight-bold mb-2"><i class="fa fa-eye mr-2"></i> View</a>
            </div>
            <!-- Image & price content -->
            <div class="pos-relative">
              <img class="card-img-top img-fluid" src="assets/img/site-images/img-01.jpg" alt=" ">
              <span class="badge badge-primary pos-absolute pos-t pos-l mt-2 ml-2">
                <op-5>Somewhere, USA</op>
            </div>
          </div>
	
	

Tagline Boxes (Top, Right, Bottom & Left)

Donec iaculis metus vitae ligula elementum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec diam risus. Donec laoreet ultricies rhoncus. Aliquam adipiscing, erat ac scelerisque convallis, sapien mauris egestas diam

Donec iaculis metus vitae ligula elementum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec diam risus. Donec laoreet ultricies rhoncus. Aliquam adipiscing, erat ac scelerisque convallis, sapien mauris egestas diam

Donec iaculis metus vitae ligula elementum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec diam risus. Donec laoreet ultricies rhoncus. Aliquam adipiscing, erat ac scelerisque convallis, sapien mauris egestas diam

Donec iaculis metus vitae ligula elementum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec diam risus. Donec laoreet ultricies rhoncus. Aliquam adipiscing, erat ac scelerisque convallis, sapien mauris egestas diam

View Code Example
		
		<div class="container page-content">
			<div class="fullwidth">
			<div class="row">
				<div class="col-sm-6">
					<div class="tag-box black-text-color tag-box-version1">
						<h4>Donec iaculis metus vitae ligula elementum</h4>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec diam risus. Donec laoreet ultricies rhoncus. Aliquam adipiscing, erat ac scelerisque convallis, sapien mauris egestas diam
						</p>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="tag-box black-text-color tag-box-version2">
						<h4>Donec iaculis metus vitae ligula elementum</h4>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec diam risus. Donec laoreet ultricies rhoncus. Aliquam adipiscing, erat ac scelerisque convallis, sapien mauris egestas diam
						</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6">
					<div class="tag-box black-text-color tag-box-version3">
						<h4>Donec iaculis metus vitae ligula elementum</h4>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec diam risus. Donec laoreet ultricies rhoncus. Aliquam adipiscing, erat ac scelerisque convallis, sapien mauris egestas diam
						</p>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="tag-box black-text-color tag-box-version4">
						<h4>Donec iaculis metus vitae ligula elementum</h4>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec diam risus. Donec laoreet ultricies rhoncus. Aliquam adipiscing, erat ac scelerisque convallis, sapien mauris egestas diam
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
		
			

Testimonial Carousel

View code example
	
                    <div id="carousel-testimonial" class="carousel slide" data-ride="carousel">
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <div class="active carousel-item">
                                <h4><strong>M. O'Brient</strong></br>
				1. I have gotten so many compliments on my website </h4>
				</div>
                            <div class="carousel-item">
                                <h4><strong>Harold White</strong></br>
				2. We want to thank you for going above and beyond our expectations.</h4>
				</div>
                            <div class="carousel-item">
                                <h4><strong>S. Harris</strong></br>
				3. After just a few weeks of our new site was up and running, </h4>
				</div>
                            <div class="carousel-item">
                                <h4><strong>R. Jackson</strong></br>
				4. G &amp; L WebDesign totally re-did my website, which was pre-historic and very limited.
					</h4>
                            </div>
                        </div>
				<!-- Controls -->
                        <div class="btns mt-3">
                            <a class="btn btn btn-default-drk" href="#carousel-testimonial" role="button" data-slide="prev">
                                <span class="fa fa-angle-left" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="btn btn-default-drk" href="#carousel-testimonial" role="button" data-slide="next">
                                <span class="fa fa-angle-right" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
	
	

Text Highlights

Drop Caps

Website ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


Website ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


Website ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Use <span class="dropcap">W</span>

Paragraph Blocks

Dec
1

Ipsum Dolor
Commodo consequat consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero. In ante velit, cursus ut, ultrices vitae, tempor ut, risus.

View code example
	
	<div class="row mt-3">
	<div class="col-md-12">
	<div class="para-block">
	<div class="para-block-text1">Dec</br>1</div>	
	<div class="para-block-text2">
		<h3>
			<strong>Ipsum Dolor</strong>
		</br>
			Commodo consequat consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero. In ante velit, cursus ut, ultrices vitae, tempor ut, risus.
		</h3>
				</div>
			</div>
		</div>
	</div>
	
	

Text Indent

Commodo consequat consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero. In ante velit, cursus ut, ultrices vitae, tempor ut, risus.

Use <h3 class="indent">

Strip Block Title

Use <div class="divider-strip block-title">

Header Title

Use <h2 class="header-title">Header Title</h2>

Header Title Centered

Use<div class="header-block">

Header Block

Use<h2><span>Header Block</span></h2>

Key Points

Key Points

  • Jugis metuo rusticus sit valetudo veniam vulputate.
  • Eu genitus haero iaceo jugis molior nibh singularis sino.
  • Exerci metuo nobis sino turpis.

Abigo aliquip aptent esse immitto jugis magna plaga volutpat. Consectetuer decet gilvus quibus singularis ut.

Abluo aptent facilisis gilvus ideo obruo pala utrum venio vereor. Aliquam aliquip antehabeo conventio iusto jumentum refero sudo. Eros eu loquor luptatum meus sed singularis. Abico acsi bene feugiat hendrerit premo qui scisco typicus usitas. Eligo facilisi ille iusto ludus.
Augue damnum metuo patria valetudo.Abdo enim occuro pertineo. Aliquip elit fere obruo tamen. Iustum nimis nisl odio paratus ulciscor. Acsi aliquam caecus huic loquor molior refoveo sudo tincidunt uxor. Decet distineo genitus jugis quidne tation.
Exputo immitto meus ratis tum. Fere iustum luptatum paulatim quae sudo velit vicis. Brevitas eros haero ymo. Abdo capto duis nisl ullamcorper valde. Decet facilisis illum interdico odio pecus tation. Ad facilisi gilvus humo iustum lenis praesent. Consectetuer dignissim ideo imputo metuo praesent roto saluto venio.
Eligo exputo gemino rusticus te. Abigo blandit esca exputo facilisis huic luptatum premo singularis sit. Iaceo nulla quia quidem ymo. Accumsan comis nobis rusticus si. Augue diam esse ideo mos quidne.

View code example
	
		<div class="container">
                    <!--Used to highlight key points of post-->
                    <div class="focus-box float-md-right col-md-6 p-3 m-3">
                      <h4>
                        Key Points
                      </h4>
                      <ul class="list-unstyled list-lg">
                        <li><i class="fa fa-check"></i> Jugis metuo rusticus sit valetudo veniam vulputate.</li>
                        <li><i class="fa fa-check"></i> Eu genitus haero iaceo jugis molior nibh singularis sino.</li>
                        <li><i class="fa fa-check"></i> Exerci metuo nobis sino turpis.</li>
                      </ul>
                      <h3>Abigo aliquip aptent esse immitto jugis magna plaga volutpat. Consectetuer decet gilvus quibus singularis ut.</h3>
                    </div>
                    <h3>Abluo aptent facilisis gilvus ideo obruo pala utrum venio vereor. Aliquam aliquip antehabeo conventio iusto jumentum refero sudo. Eros eu loquor luptatum meus sed singularis. Abico acsi bene feugiat hendrerit premo qui scisco typicus usitas. Eligo facilisi ille iusto ludus.
                    </br>Augue damnum metuo patria valetudo.Abdo enim occuro pertineo. Aliquip elit fere obruo tamen. Iustum nimis nisl odio paratus ulciscor. Acsi aliquam caecus huic loquor molior refoveo sudo tincidunt uxor. Decet distineo genitus jugis quidne tation.
                    </br> Exputo immitto meus ratis tum. Fere iustum luptatum paulatim quae sudo velit vicis. Brevitas eros haero ymo. Abdo capto duis nisl ullamcorper valde. Decet facilisis illum interdico odio pecus tation. Ad facilisi gilvus humo iustum lenis praesent. Consectetuer dignissim ideo imputo metuo praesent roto saluto venio.
                    </br>Eligo exputo gemino rusticus te. Abigo blandit esca exputo facilisis huic luptatum premo singularis sit. Iaceo nulla quia quidem ymo. Accumsan comis nobis rusticus si. Augue diam esse ideo mos quidne.</h3>
                </div>
              </div>
	</div>
	
	

Horizontal Scroll Box

Content x


Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

View code example
	
	<div class="container">
      <div class="row-fluid">
        <div class="content-h">
		<div class="row-fluid">
			<h2>Content x</h2>
			<hr />
			<h4>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h4>
			<h4>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</h4> 
			<h4>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</h4> 
			<h4>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</h4>
			<h4>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</h4> 
			<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4> 
		</div>
        </div>
	 </div>
	</div>
	
	

Vertical Scroll Box

Content y


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

End of content.

View code example
	
	<div class="container">
		<div class="row">
		<div class="col-sm-6">
	<div class="content-y">
		<h2>Content y</h2>
				<hr>
				<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</br></br>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
				Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
				Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
				</br></br>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
				At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
				Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
				</br></br>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</h4> 
				<p>End of content.</p>
			</div>
            </div>
		</div>
	</div>T
	
	

Shadow Text

Bootstrap
This is Deep
View code example
	
	<div class="container mt-5">
		<div class="row">
			<div class="col-md-12">
				<div class="shadow-text">
					<div class="elegantshd"> Bootstrap </div >
				</div>
			</div>
		</div>
	</div>

	<div class="container mt-5">
		<div class="row">
			<div class="col-md-12">
				<div class="shadow-text">
					<div class="deepshd"> This is Deep </div>
				</div>
			</div>
		</div>
	</div>
	
	

Text Wrap

...

Website ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Website ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

View code example
	
		<img src="assets/img/site-images/img-xs-02.jpg" alt="..." class="pull-left wrap mr-2">
        	<h3>Website ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
        <br />
        	Website ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
		</h3>
	
	

Text / Image Carousel

Image and Text (half & half) on the same Slide. The text portion is changed in the html code for easy access.

View code example
	
		<div id="homeCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
			<div class="it-carousel">
				<div class="carousel-item active">
				<div class="row">
					<div class="col-sm-6 right">
						<h2><strong>Multipurpose responsive theme</strong>
						</br></br>
						</h2>
						<h3>Business, Agency, Personal,
						<br>Portfolio, Blog, Magazine Layout &amp; E-commerce.</h3>
					</div>
					<div class="col-sm-6">
						<img class="img-fluid" src="assets/img/site-images/template-homepage.png" alt="">
					</div>
				</div>
			</div>
                    <div class="carousel-item">
				<div class="row">
					<div class="col-sm-6 right">
						<h2><strong>70+ HTML pages full of features</h2></strong>
							<ul class="list-style-none">
								<li>Sliders and carousels</li>
								<li>4 Home Page variations</li>
								<li>Google Maps, Forms, Megamenu, CSS3 Animations and much more</li>
								<li>+ 12 easy to use Plugins you can add to your pages</li>
							</ul>
					</div>
					<div class="col-sm-6">
						<img class="img-fluid" src="assets/img/site-images/template-mac.png" alt="">
					</div>
				</div>
			</div>
                    <div class="carousel-item">
				<div class="row">
					<div class="col-sm-6 right">
						<h2><strong>Design</h2></strong>
							<ul class="list-style-none">
								<li>Clean and elegant design</li>
								<li>Full width and boxed mode</li>
								<li>Easily readable Lato font and awesome icons</li>
								<li>10 color schemes</li>
							</ul>
					</div>
					<div class="col-sm-6">
						<img class="img-fluid" src="assets/img/site-images/template-easy-customize.png" alt="">
					</div>
				</div>
			</div>
                    <div class="carousel-item">
				<div class="row">
					<div class="col-sm-6 right">
						<h2><strong>Easy to customize</h2></strong>
							<ul class="list-style-none">
							<li>10 color schemes</li>
							<li>Easy to change fonts</li>
							</ul>
					</div>
					<div class="col-sm-6">
						<img class="img-fluid" src="assets/img/site-images/template-easy-code.png" alt="">
					</div>
				</div>
			</div>
                  </div>
                <a class="carousel-control-prev" href="#homeCarousel" data-slide="prev">
                    <i class="fa fa-chevron-left fa-lg" aria-hidden="false"></i>
                </a>
                <a class="carousel-control-next" href="#homeCarousel" data-slide="next">
                    <i class="fa fa-chevron-right fa-lg" aria-hidden="false"></i>
                </a>
                </div>