mirror of
				https://github.com/dawidolko/Website-Templates.git
				synced 2025-10-27 16:03:10 +01:00 
			
		
		
		
	
		
			
				
	
	
		
			573 lines
		
	
	
		
			25 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			573 lines
		
	
	
		
			25 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!DOCTYPE html>
 | |
| <html lang="en-us">
 | |
|   <head>
 | |
|     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 | |
|     <meta charset="UTF-8">
 | |
|     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | |
|     <meta name="description" content="">
 | |
|     <meta name="author" content="WebThemez">
 | |
|     <link rel="shortcut icon" href="">
 | |
|     <title>CAR ZONE</title>
 | |
|     <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600">
 | |
|     <link rel="stylesheet" href="assets/css/bootstrap.min.css">
 | |
|     <!-- FancyBox -->
 | |
| 	<link href="assets/css/fancybox/jquery.fancybox.css" rel="stylesheet">
 | |
|     <link rel="stylesheet" href="assets/css/style.css"> 
 | |
|     <link rel="stylesheet" href="assets/css/animate.min.css">
 | |
|     <link rel="stylesheet" href="assets/css/font-awesome.min.css">
 | |
|     <!--[if lt IE 9]>
 | |
|     <script src="assets/js/html5shiv.js"></script>
 | |
|     <script src="assets/js/respond.min.js"></script>
 | |
|     <![endif]-->
 | |
|   </head>
 | |
|   <body> 
 | |
|           <div id="navbar-top">
 | |
|       <nav class="navbar navbar-default navbar-static" role="navigation">
 | |
|         <div class="container">
 | |
|           <div class="navbar-header">
 | |
|             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 | |
|               <span class="sr-only">Toggle navigation</span>
 | |
|               <span class="icon-bar"></span>
 | |
|               <span class="icon-bar"></span>
 | |
|               <span class="icon-bar"></span>
 | |
|             </button>
 | |
|             <a class="navbar-brand nav-external" href="#home"><strong>CAR ZONE</strong></a>
 | |
|           </div>
 | |
|           <div class="collapse navbar-collapse">
 | |
|             <ul class="nav navbar-nav navbar-right">
 | |
|               <li class="active">
 | |
|                 <a href="#home">Home</a>
 | |
|               </li>
 | |
|               <li>
 | |
|                 <a href="#services">Services</a>
 | |
|               </li>
 | |
|               <li>
 | |
|                 <a href="#work">Works</a>
 | |
|               </li>
 | |
|               <li>
 | |
|                 <a href="#clients">Clients</a>
 | |
|               </li>
 | |
|               <li>
 | |
|                 <a href="#about">About</a>
 | |
|               </li>
 | |
|               <li>
 | |
|                 <a href="#contact">Contact</a>
 | |
|               </li>
 | |
|             </ul>
 | |
|           </div>
 | |
|         </div>
 | |
|       </nav>
 | |
|     </div>
 | |
|     <section id="home" class="page">
 | |
|       <div class="container">
 | |
|         <div class="content cover text-center">
 | |
|        <!--   <div class="row">
 | |
|             <div class="col-lg-12">
 | |
|               <h1 class="animated hiding" data-animation="fadeInDown" data-delay="300">We Are Merlin</h1>
 | |
|               <a class="btn btn-blue nav-external animated hiding" data-animation="fadeIn" data-delay="900" href="#services">Find more</a>
 | |
|               <h3 class="animated hiding" data-animation="fadeIn" data-delay="600">We Have Made A Lot Of Friends.</h3>
 | |
|             </div>
 | |
|           </div>-->
 | |
|           	<div class="banner-content">
 | |
| 			<div class="heroText">
 | |
|                 <h2><span> Car Zone </span><br>
 | |
|                   <strong>One stop CAR solution</strong></h2>
 | |
|               </div>
 | |
| 			</div>
 | |
|         </div>
 | |
|       </div>
 | |
|     </section>
 | |
| 
 | |
|     <section id="services" class="page space">
 | |
|       <div class="container text-center"> 
 | |
|           <div class="heading">
 | |
|             <h2>Our Services</h2>
 | |
|             
 | |
|             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, alias enim placeat earum quos ab.</p>
 | |
|           </div>
 | |
|          <div class="row services-list">
 | |
| 					<div class="col-sm-6 col-md-3 text-center service animated fadeInUp visible" data-animation="fadeInUp">
 | |
| 						<div class="service-icon"> 
 | |
|                             <img src="assets/img/car-wash.jpg" alt=""/> 
 | |
| 						</div>
 | |
| 						<h4 class="color-white">Car Wash</h4>
 | |
| 						<p>Lorem ipsum massa sed turpis ipsum dolor lorem luctus scelerisque gravida aliquet.</p>
 | |
| 					</div><!-- END COLUMN 3 -->
 | |
| 					<div class="col-sm-6 col-md-3 text-center service animated fadeInUp visible" data-animation="fadeInUp" data-animation-delay="200">
 | |
| 						<div class="service-icon">
 | |
| 							<img src="assets/img/car-service.jpg" alt=""/> 
 | |
| 						</div>
 | |
| 						<h4 class="color-white">Car Servicing</h4>
 | |
| 						<p>Lorem ipsum massa sed turpis ipsum dolor lorem luctus scelerisque gravida aliquet.</p>
 | |
| 					</div><!-- END COLUMN 3 -->
 | |
| 					<div class="col-sm-6 col-md-3 text-center service animated fadeInUp visible" data-animation="fadeInUp" data-animation-delay="400">
 | |
| 						<div class="service-icon">
 | |
| 							<img src="assets/img/Car-painting.jpg" alt=""/> 
 | |
| 						</div>
 | |
| 						<h4 class="color-white">Car Painting</h4>
 | |
| 						<p>Lorem ipsum massa sed turpis ipsum dolor lorem luctus scelerisque gravida aliquet.</p>
 | |
| 					</div><!-- END COLUMN 3 -->
 | |
| 					<div class="col-sm-6 col-md-3 text-center service animated fadeInUp visible" data-animation="fadeInUp" data-animation-delay="600">
 | |
| 						<div class="service-icon">
 | |
| 							<img src="assets/img/car-modi.jpg" alt=""/> 
 | |
| 						</div>
 | |
| 						<h4 class="color-white">Car Modifying</h4>
 | |
| 						<p>Lorem ipsum massa sed turpis ipsum dolor lorem luctus scelerisque gravida aliquet.</p>
 | |
| 					</div><!-- END COLUMN 3 -->
 | |
| 				</div>       
 | |
|       </div>
 | |
|     </section>
 | |
|     <section id="work" class="page space">
 | |
|       <div class="container text-center">
 | |
|           <div class="heading">
 | |
|             <h2>Our Work</h2>
 | |
|             
 | |
|             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, alias enim placeat earum quos ab.</p>
 | |
|           </div>
 | |
|           <div class="row">
 | |
|             <div class="col-md-12">
 | |
|               <div id="portfolio">
 | |
|                 <ul class="filters list-inline">
 | |
|                   <li>
 | |
|                     <a class="active" data-filter="*" href="#">All</a>
 | |
|                   </li>
 | |
|                   <li>
 | |
|                     <a data-filter=".photography" href="#">Wash</a>
 | |
|                   </li>
 | |
|                   <li>
 | |
|                     <a data-filter=".branding" href="#"> Servicing</a>
 | |
|                   </li>
 | |
|                   <li>
 | |
|                     <a data-filter=".web" href="#">Painting</a>
 | |
|                   </li>
 | |
|                 </ul>
 | |
|                 <ul class="items list-unstyled clearfix animated hiding" data-animation="fadeInRight">
 | |
|                   <li class="item branding">
 | |
|                      <a href="assets/img/work/1.jpg" class="fancybox">
 | |
|                       <img src="assets/img/work/1.jpg" alt="">
 | |
|                       <div class="overlay">
 | |
|                         <span>Etiam porta</span>
 | |
|                       </div>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                   <li class="item photography">
 | |
|                      <a href="assets/img/work/2.jpg" class="fancybox">
 | |
|                       <img src="assets/img/work/2.jpg" alt="">
 | |
|                       <div class="overlay">
 | |
|                         <span>Lorem ipsum</span>
 | |
|                       </div>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                   <li class="item branding">
 | |
|                      <a href="assets/img/work/3.jpg" class="fancybox">
 | |
|                       <img src="assets/img/work/3.jpg" alt="">
 | |
|                       <div class="overlay">
 | |
|                         <span>Vivamus quis</span>
 | |
|                       </div>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                   <li class="item photography">
 | |
|                      <a href="assets/img/work/4.jpg" class="fancybox">
 | |
|                       <img src="assets/img/work/4.jpg" alt="">
 | |
|                       <div class="overlay">
 | |
|                         <span>Donec ac tellus</span>
 | |
|                       </div>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                   <li class="item photography">
 | |
|                      <a href="assets/img/work/5.jpg" class="fancybox">
 | |
|                       <img src="assets/img/work/5.jpg" alt="">
 | |
|                       <div class="overlay">
 | |
|                         <span>Etiam volutpat</span>
 | |
|                       </div>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                   <li class="item web">
 | |
|                      <a href="assets/img/work/6.jpg" class="fancybox">
 | |
|                       <img src="assets/img/work/6.jpg" alt="">
 | |
|                       <div class="overlay">
 | |
|                         <span>Donec congue </span>
 | |
|                       </div>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                   <li class="item photography">
 | |
|                      <a href="assets/img/work/7.jpg" class="fancybox">
 | |
|                       <img src="assets/img/work/7.jpg" alt="">
 | |
|                       <div class="overlay">
 | |
|                         <span>Nullam a ullamcorper diam</span>
 | |
|                       </div>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                   <li class="item web">
 | |
|                     <a href="assets/img/work/8.jpg" class="fancybox">
 | |
|                       <img src="assets/img/work/8.jpg" alt="">
 | |
|                       <div class="overlay">
 | |
|                         <span>Etiam consequat</span>
 | |
|                       </div> 
 | |
|                     </a>
 | |
|                   </li>
 | |
|                 </ul>
 | |
|               </div>
 | |
|             </div>
 | |
|           </div>       
 | |
|       </div>
 | |
|     </section>
 | |
|     
 | |
|     <section id="clients" class="page space">
 | |
|       <div class="container text-center"> 
 | |
|           <div class="row">
 | |
|             <div class="col-lg-12 animated hiding" data-animation="fadeInDown">
 | |
|               <div id="testimonials" class="carousel slide">
 | |
|                 <ol class="carousel-indicators">
 | |
|                   <li data-target="#testimonials" data-slide-to="0" class="active"></li>
 | |
|                   <li data-target="#testimonials" data-slide-to="1" class=""></li>
 | |
|                   <li data-target="#testimonials" data-slide-to="2" class=""></li>
 | |
|                   <li data-target="#testimonials" data-slide-to="3" class=""></li>
 | |
|                 </ol>
 | |
|                 <div class="carousel-inner">
 | |
|                   <div class="item active">
 | |
|                     <p class="quote">Quisque convallis diam ligula, ac accumsan eros pretium vel. Curabitur convallis nibh sit amet iaculis ornare. Integer blandit quis diam sed tincidunt.</p>
 | |
|                     <p class="client">John Doe / CEO</p>
 | |
|                   </div>
 | |
|                   <div class="item">
 | |
|                     <p class="quote">Vestibulum volutpat accumsan sem non eleifend. Vivamus pretium nisi semper sapien eleifend, vel lacinia lacus sodales. Morbi bibendum purus at leo laoreet, vel ultricies orci viverra.</p>
 | |
|                     <p class="client">Jorginho Jian / Developer</p>
 | |
|                   </div>
 | |
|                   <div class="item">
 | |
|                     <p class="quote">Curabitur in nulla et lorem varius convallis. Morbi bibendum purus at leo laoreet, vel ultricies orci viverra. Duis quis accumsan urna. Nulla faucibus mauris elit, vitae tristique nisi sollicitudin ut.</p>
 | |
|                     <p class="client">Gandalf Kadir / Web Designer</p>
 | |
|                   </div>
 | |
|                   <div class="item">
 | |
|                     <p class="quote">Nullam vel tempor quam, id dictum eros. Nam augue sem, aliquam ac mauris in, pharetra convallis quam. Nulla faucibus mauris elit, vitae tristique nisi sollicitudin ut. Vivamus pretium nisi semper sapien eleifend.</p>
 | |
|                     <p class="client">Homeros Yehudi / QA Engineer</p>
 | |
|                   </div>
 | |
|                 </div>
 | |
|                 <a class="left carousel-control" data-slide="prev" href="#testimonials">‹</a>
 | |
|                 <a class="right carousel-control" data-slide="next" href="#testimonials">›</a>
 | |
|               </div>
 | |
|             </div>
 | |
|           </div>      
 | |
|       </div>
 | |
|     </section>
 | |
|     <section id="about" class="page space">
 | |
|       <div class="container text-center"> 
 | |
|           <div class="heading">
 | |
|             <h2>Who we are</h2>
 | |
|             
 | |
|             <p>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.</p>
 | |
|           </div>
 | |
|           <div class="row">
 | |
|             <div class="col-md-3 col-sm-6 col-xs-12 teammate" data-animation="fadeInLeft" data-delay="600">
 | |
|               <div class="profile-photo">
 | |
|                 <img class="img-responsive" src="assets/img/team/1.jpg" alt="">
 | |
|               </div>
 | |
|               <div class="bio">
 | |
|                 <h4>John Doe</h4>
 | |
|                 <h5>Web Developer</h5>
 | |
|                  
 | |
|                 <ul class="list-inline">
 | |
|                   <li>
 | |
|                     <a href="http://www.facebook.com" title="Facebook">
 | |
|                       <i class="fa fa-facebook"></i>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                   <li>
 | |
|                     <a href="http://www.twitter.com" title="Twitter">
 | |
|                       <i class="fa fa-twitter"></i>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                   <li>
 | |
|                     <a href="http://www.linkedin.com" title="LinkedIn">
 | |
|                       <i class="fa fa-linkedin"></i>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                   <li>
 | |
|                     <a href="http://www.github.com" title="GitHub">
 | |
|                       <i class="fa fa-github"></i>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                 </ul>
 | |
|               </div>
 | |
|             </div>
 | |
|             <div class="col-md-3 col-sm-6 col-xs-12 teammate animated hiding" data-animation="fadeInUp" data-delay="300">
 | |
|               <div class="profile-photo">
 | |
|                 <img class="img-responsive" src="assets/img/team/2.jpg" alt="">
 | |
|               </div>
 | |
|               <div class="bio">
 | |
|                 <h4>Clarinda Gratia</h4>
 | |
|                 <h5>Designer</h5>
 | |
|                  
 | |
|                 <ul class="list-inline">
 | |
|                   <li>
 | |
|                     <a href="http://www.dribbble.com" title="Dribbble">
 | |
|                       <i class="fa fa-dribbble"></i>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                   <li>
 | |
|                     <a href="http://www.pinterest.com" title="Pinterest">
 | |
|                       <i class="fa fa-pinterest"></i>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                   <li>
 | |
|                     <a href="http://www.instagram.com" title="Instagram">
 | |
|                       <i class="fa fa-instagram"></i>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                 </ul>
 | |
|               </div>
 | |
|             </div>
 | |
|             <div class="col-md-3 col-sm-6 col-xs-12 teammate animated hiding" data-animation="fadeInUp" data-delay="300">
 | |
|               <div class="profile-photo">
 | |
|                 <img class="img-responsive" src="assets/img/team/3.jpg" alt="">
 | |
|               </div>
 | |
|               <div class="bio">
 | |
|                 <h4>Mandeep Eimear</h4>
 | |
|                 <h5>Mobile Developer</h5>
 | |
|                  
 | |
|                 <ul class="list-inline">
 | |
|                   <li>
 | |
|                     <a href="http://www.twitter.com" title="Twitter">
 | |
|                       <i class="fa fa-twitter"></i>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                   <li>
 | |
|                     <a href="http://developer.android.com/index.html" title="Android Developers">
 | |
|                       <i class="fa fa-android"></i>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                   <li>
 | |
|                     <a href="http://www.stackoverflow.com" title="Stack Overflow">
 | |
|                       <i class="fa fa-stack-overflow"></i>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                 </ul>
 | |
|               </div>
 | |
|             </div>
 | |
|             <div class="col-md-3 col-sm-6 col-xs-12 teammate animated hiding" data-animation="fadeInRight" data-delay="600">
 | |
|               <div class="profile-photo">
 | |
|                 <img class="img-responsive" src="assets/img/team/4.jpg" alt="">
 | |
|               </div>
 | |
|               <div class="bio">
 | |
|                 <h4>Wigstan Fergus</h4>
 | |
|                 <h5>QA Engineer</h5>
 | |
|                  
 | |
|                 <ul class="list-inline">
 | |
|                   <li>
 | |
|                     <a href="http://www.plus.google.com" title="Google+">
 | |
|                       <i class="fa fa-google-plus"></i>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                   <li>
 | |
|                     <a href="http://www.trello.com" title="Trello">
 | |
|                       <i class="fa fa-trello"></i>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                   <li>
 | |
|                     <a href="mailto:john.doe@mail.com" title="Email">
 | |
|                       <i class="fa fa-envelope"></i>
 | |
|                     </a>
 | |
|                   </li>
 | |
|                 </ul>
 | |
|               </div>
 | |
|             </div>
 | |
|           </div>        
 | |
|       </div>
 | |
|       <div class="twitter text-center">
 | |
|         <div class="animated hiding" data-animation="fadeIn">
 | |
|           <i class="fa fa-twitter fa-3x"></i>
 | |
|           <div id="feed"></div>
 | |
|         </div>
 | |
|       </div>
 | |
|     </section> 
 | |
|     <section id="priceTable" class="page space">
 | |
|     	 <div class="container text-center"> 
 | |
|          <div class="heading">
 | |
|             <h2>Our Efforts</h2>
 | |
|             
 | |
|             <p>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.</p>
 | |
|           </div> 
 | |
|          	<div class="row"> 
 | |
|             <div class="col-sm-3">
 | |
|               <div class="panel panel-default text-center">
 | |
|                 <div class="panel-heading">
 | |
|                   <h3>Basic</h3>
 | |
|                 </div>
 | |
|                 <div class="panel-body">
 | |
|                   <h3 class="panel-title price">$9<span class="price-cents">99</span><span class="price-month">mo.</span></h3>
 | |
|                 </div>
 | |
|                 <ul class="list-group">
 | |
|                   <li class="list-group-item">5 Projects</li>
 | |
|                   <li class="list-group-item">5 GB of Storage</li>
 | |
|                   <li class="list-group-item">Up to 100 Users</li>
 | |
|                   <li class="list-group-item">10 GB Bandwidth</li>
 | |
|                   <li class="list-group-item">Security Suite</li>
 | |
|                   <li class="list-group-item"><a class="btn btn-default">Sign Up Now!</a></li>
 | |
|                 </ul>
 | |
|               </div>          
 | |
|             </div>
 | |
|             <div class="col-sm-3">
 | |
|               <div class="panel panel-default text-center">
 | |
|                 <div class="panel-heading">
 | |
|                   <h3>Plus</h3>
 | |
|                 </div>
 | |
|                 <div class="panel-body">
 | |
|                   <h3 class="panel-title price">$19<span class="price-cents">99</span><span class="price-month">mo.</span></h3>
 | |
|                 </div>
 | |
|                 <ul class="list-group">
 | |
|                   <li class="list-group-item">10 Projects</li>
 | |
|                   <li class="list-group-item">10 GB of Storage</li>
 | |
|                   <li class="list-group-item">Up to 250 Users</li>
 | |
|                   <li class="list-group-item">25 GB Bandwidth</li>
 | |
|                   <li class="list-group-item">Security Suite</li>
 | |
|                   <li class="list-group-item"><a class="btn btn-default">Sign Up Now!</a></li>
 | |
|                 </ul>
 | |
|               </div>          
 | |
|             </div>
 | |
|             <div class="col-sm-3">
 | |
|               <div class="panel panel-danger text-center">
 | |
|                 <div class="panel-heading">
 | |
|                   <h3>Premium</h3>
 | |
|                 </div>
 | |
|                 <div class="panel-body">
 | |
|                   <h3 class="panel-title price">$29<span class="price-cents">99</span><span class="price-month">mo.</span></h3>
 | |
|                 </div>
 | |
|                 <ul class="list-group">
 | |
|                   <li class="list-group-item">Unlimited</li>
 | |
|                   <li class="list-group-item">50 GB of Storage</li>
 | |
|                   <li class="list-group-item">Up to 1000 Users</li>
 | |
|                   <li class="list-group-item">100 GB Bandwidth</li>
 | |
|                   <li class="list-group-item">Security Suite</li>
 | |
|                   <li class="list-group-item"><a class="btn btn-primary">Sign Up Now!</a></li>
 | |
|                 </ul>
 | |
|               </div>          
 | |
|             </div>
 | |
|             <div class="col-sm-3">
 | |
|               <div class="panel panel-default text-center">
 | |
|                 <div class="panel-heading">
 | |
|                   <h3>Ultimate</h3>
 | |
|                 </div>
 | |
|                 <div class="panel-body">
 | |
|                   <h3 class="panel-title price">$49<span class="price-cents">99</span><span class="price-month">mo.</span></h3>
 | |
|                 </div>
 | |
|                 <ul class="list-group">
 | |
|                   <li class="list-group-item">Unlimited</li>
 | |
|                   <li class="list-group-item">150 GB of Storage</li>
 | |
|                   <li class="list-group-item">Unlimited</li>
 | |
|                   <li class="list-group-item">500 GB Bandwidth</li>
 | |
|                   <li class="list-group-item">Security Suite</li>
 | |
|                   <li class="list-group-item"><a class="btn btn-default">Sign Up Now!</a></li>
 | |
|                 </ul>
 | |
|               </div>          
 | |
|             </div>
 | |
|      
 | |
|           </div>
 | |
|          </div>      
 | |
|     </section>
 | |
|     <section id="contact" class="content-section form contact light space">
 | |
|     	<div class="container">
 | |
|         	  <div class="content cover text-center">
 | |
|               <div class="heading">
 | |
|                 <h2>Getting in touch</h2>
 | |
|                 
 | |
|                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br/><br/></p>
 | |
|               </div>
 | |
|                <div class="row">
 | |
|             <span id="message"></span><!-- remove #message to stop floating jQuery messages -->
 | |
|             
 | |
|             <form target="#" name="contact">
 | |
|                 <div class="col-lg-5 anim fadeInLeft animated" style="visibility: visible;">
 | |
|                 
 | |
|                     <span class="input-group">
 | |
|                         <i class="fa fa-user"></i>
 | |
|                         <input type="text" name="contactName" id="contactName" class="lg" placeholder="Name">
 | |
|                     </span><!-- .input-group -->
 | |
|                     
 | |
|                     <span class="input-group">
 | |
|                         <i class="fa fa-envelope"></i>
 | |
|                         <input type="text" name="contactEmail" id="contactAddress" class="lg" placeholder="Email Address">
 | |
|                     </span><!-- .input-group -->
 | |
|                     
 | |
|                    	<span class="input-group">
 | |
|                         <i class="fa fa-book"></i>
 | |
|                         <input type="text" name="contactSubject" id="contactSubject" class="lg" placeholder="Subject">
 | |
|                     </span><!-- .input-group -->
 | |
|                     
 | |
|                 </div><!-- .col-5 -->
 | |
|                 
 | |
|                 <div class="col-lg-7 anim fadeInRight animated" style="visibility: visible;">
 | |
|                 
 | |
|                  	<span class="input-group">
 | |
|                         <textarea name="contactMessage" id="contactMessage" class="lg" placeholder="What's on your mind?"></textarea>
 | |
|                     </span><!-- .input-group -->
 | |
|                     
 | |
|                     <span class="input-group">
 | |
|                     	<button class="submit" id="submit_contact" data-loading-text="SENDING...">SEND</button>
 | |
|                     </span><!-- .input-group -->
 | |
|                 </div>
 | |
|             </form>
 | |
|             </div>
 | |
|             
 | |
|     	</div><!-- .container -->
 | |
|     	
 | |
|         <span id="message_sent"><i class="fa-check fa"></i></span><!-- jQuery display of giant checkmark -->	
 | |
|         
 | |
|     </section>
 | |
|     <footer id="footer">
 | |
|       <div class="container"> 
 | |
|         <div class="row">
 | |
|           <div class="col-lg-12 animated hiding" data-animation="fadeInUp">
 | |
|             <ul class="social list-inline ">
 | |
|               <li>
 | |
|                 <a class="facebook" href="http://www.facebook.com" title="Facebook">
 | |
|                   <i class="fa fa-facebook fa-2x"></i>
 | |
|                 </a>
 | |
|               </li>
 | |
|               <li>
 | |
|                 <a class="twitter" href="http://www.twitter.com" title="Twitter">
 | |
|                   <i class="fa fa-twitter fa-2x"></i>
 | |
|                 </a>
 | |
|               </li>
 | |
|               <li>
 | |
|                 <a class="google-plus" href="http://www.plus.google.com" title="Google+">
 | |
|                   <i class="fa fa-google-plus fa-2x"></i>
 | |
|                 </a>
 | |
|               </li>
 | |
|               <li>
 | |
|                 <a class="dribbble" href="http://www.linkedin.com" title="Dribbble">
 | |
|                   <i class="fa fa-dribbble fa-2x"></i>
 | |
|                 </a>
 | |
|               </li>
 | |
|             </ul>
 | |
|             <p class="copyright"> 
 | |
|               Template by <a href="http://www.webthemez.com">WebThemez</a> · 
 | |
|               Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a> · 
 | |
|               Based on <a href="http://getbootstrap.com/">Bootstrap</a>  · 
 | |
|               Icons by <a href="http://fontawesome.io/">Font Awesome</a> ·  
 | |
|             </p>
 | |
|           </div>
 | |
|         </div>
 | |
|       </div>
 | |
|     </footer>
 | |
|     <script src="assets/js/modernizr-latest.js"></script>
 | |
|     <script src="assets/js/jquery.min.js"></script>
 | |
|     <script src="assets/js/bootstrap.min.js"></script>
 | |
| 	<script src="assets/js/jquery.cslider.js"></script>
 | |
|     <script src="assets/js/isotope.pkgd.min.js"></script>
 | |
| 	<script src="assets/js/jquery.fancybox.pack.js"></script>  
 | |
| 	<script src="assets/js/jquery.fancybox-media.js"></script>  
 | |
|     <script src="assets/js/imagesloaded.min.js"></script>
 | |
|     <script src="assets/js/jquery.scrollTo.min.js"></script>
 | |
|     <script src="assets/js/jquery.nav.min.js"></script>
 | |
|     <script src="assets/js/jquery.appear.min.js"></script>
 | |
|     <script src="assets/js/twitterFetcher.min.js"></script>
 | |
|     <script src="assets/js/script.js"></script> 
 | |
| 	<script type="text/javascript">
 | |
|     $(document).ready(function () {
 | |
| 		$('#da-slider').cslider({
 | |
| 			autoplay: true,
 | |
| 			bgincrement: 0
 | |
| 		});
 | |
|     });
 | |
|     </script>
 | |
|   </body>
 | |
| </html> |