白色欧美风格的旅行服务企业网站源码下载



19 72 25



模板描述:白色欧美风格 旅行服务 企业网站,白色欧美风格的旅行服务企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/chocolat.css" 		type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/nav.css" rel="stylesheet" type="text/css" media="all" />
<link href="//fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&amp;subset=latin-ext,vietnamese" rel="stylesheet">

2. 引入JS

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="js/responsiveslides.min.js"> </script>
<script src="js/classie.js"></script>
<script src="js/nav.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.chocolat.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/SmoothScroll.min.js"></script>

3. HTML代码

<div class="Main-agile">
<!-- banner -->
	<div class="sub-agile">
		<div class="col-md-4 agile1">
			<!-- navigation section -->
				<section>
					<p>
						<button id="trigger-overlay" type="button">
							<img src="images/menu.png" class="img-responsive" alt="menu">
						</button>
					</p>
				</section>
				<!-- open/close -->
				<div class="overlay overlay-boxes">
					<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="101%" viewBox="0 0 1440 806" preserveAspectRatio="none">
						<path d="m0.005959,200.364029l207.551124,0l0,204.342453l-207.551124,0l0,-204.342453z"/>
						<path d="m0.005959,400.45401l207.551124,0l0,204.342499l-207.551124,0l0,-204.342499z"/>
						<path d="m0.005959,600.544067l207.551124,0l0,204.342468l-207.551124,0l0,-204.342468z"/>
						<path d="m205.752151,-0.36l207.551163,0l0,204.342437l-207.551163,0l0,-204.342437z"/>
						<path d="m204.744629,200.364029l207.551147,0l0,204.342453l-207.551147,0l0,-204.342453z"/>
						<path d="m204.744629,400.45401l207.551147,0l0,204.342499l-207.551147,0l0,-204.342499z"/>
						<path d="m204.744629,600.544067l207.551147,0l0,204.342468l-207.551147,0l0,-204.342468z"/>
						<path d="m410.416046,-0.36l207.551117,0l0,204.342437l-207.551117,0l0,-204.342437z"/>
						<path d="m410.416046,200.364029l207.551117,0l0,204.342453l-207.551117,0l0,-204.342453z"/>
						<path d="m410.416046,400.45401l207.551117,0l0,204.342499l-207.551117,0l0,-204.342499z"/>
						<path d="m410.416046,600.544067l207.551117,0l0,204.342468l-207.551117,0l0,-204.342468z"/>
						<path d="m616.087402,-0.36l207.551086,0l0,204.342437l-207.551086,0l0,-204.342437z"/>
						<path d="m616.087402,200.364029l207.551086,0l0,204.342453l-207.551086,0l0,-204.342453z"/>
						<path d="m616.087402,400.45401l207.551086,0l0,204.342499l-207.551086,0l0,-204.342499z"/>
						<path d="m616.087402,600.544067l207.551086,0l0,204.342468l-207.551086,0l0,-204.342468z"/>
						<path d="m821.748718,-0.36l207.550964,0l0,204.342437l-207.550964,0l0,-204.342437z"/>
						<path d="m821.748718,200.364029l207.550964,0l0,204.342453l-207.550964,0l0,-204.342453z"/>
						<path d="m821.748718,400.45401l207.550964,0l0,204.342499l-207.550964,0l0,-204.342499z"/>
						<path d="m821.748718,600.544067l207.550964,0l0,204.342468l-207.550964,0l0,-204.342468z"/>
						<path d="m1027.203979,-0.36l207.550903,0l0,204.342437l-207.550903,0l0,-204.342437z"/>
						<path d="m1027.203979,200.364029l207.550903,0l0,204.342453l-207.550903,0l0,-204.342453z"/>
						<path d="m1027.203979,400.45401l207.550903,0l0,204.342499l-207.550903,0l0,-204.342499z"/>
						<path d="m1027.203979,600.544067l207.550903,0l0,204.342468l-207.550903,0l0,-204.342468z"/>
						<path d="m1232.659302,-0.36l207.551147,0l0,204.342437l-207.551147,0l0,-204.342437z"/>
						<path d="m1232.659302,200.364029l207.551147,0l0,204.342453l-207.551147,0l0,-204.342453z"/>
						<path d="m1232.659302,400.45401l207.551147,0l0,204.342499l-207.551147,0l0,-204.342499z"/>
						<path d="m1232.659302,600.544067l207.551147,0l0,204.342468l-207.551147,0l0,-204.342468z"/>
						<path d="m-0.791443,-0.360001l207.551163,0l0,204.342438l-207.551163,0l0,-204.342438z"/>
					</svg>
					<button type="button" class="overlay-close">Close</button>
					<nav>
						<ul>
							<li><a href="index.html">Home</a></li>
							<li><a href="#about" class="scroll">About US</a></li>
							<li><a href="#team" class="scroll">Team</a></li>
							<li><a href="#gallery" class="scroll">Gallery</a></li>
							<li><a href="#contact" class="scroll">Contact Us</a></li>
						</ul>
					</nav>
				</div>
				<!-- /open/close -->
			<!-- /navigation section -->
		</div>
			<div class="col-md-4 logo">
				<h1><a href="index.html">Travel Buzz</a></h1>
				</div>
		<div class="clearfix"> </div>
	</div>	
			<!-- banner-text -->
			<div class="slider">
				<div class="callbacks_container">
					<ul class="rslides callbacks callbacks1" id="slider4">
						<li>
							<div class="w3layouts-banner-top banner">
								<div class="banner-dott">
									<div class="container">
										<div class="agileits-banner-info">
											<h3>Curabitur laoreet porta</h3>
											<p>Duis et ipsum luctus</p>
										</div>	
									</div>
								</div>
							</div>		
						</li>
						<li>
							<div class="w3layouts-banner-top banner-2">
								<div class="banner-dott">
									<div class="container">
										<div class="agileits-banner-info">
											<h3> Vestibulum ante ipsum</h3>
											<p>Quisque venenatis</p>
										</div>	
									</div>
								</div>
							</div>		
						</li>
						<li>
							<div class="w3layouts-banner-top banner-3">
								<div class="banner-dott">
									<div class="container">
										<div class="agileits-banner-info">
											<h3>Duis accumsa ipsim</h3>
											<p>Lorem ipsum dolor sit</p>
										</div>	
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
				<div class="clearfix"> </div>
				<!-- //banner-text -->							
</div>
<!-- Modal5 -->
						<div class="modal fade" id="myModal5" tabindex="-1" role="dialog" >
							<div class="modal-dialog">
							<!-- Modal content-->
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">&times;</button>
											<h4>duken ipsum</h4>
											<h5>Lorem ipsum dolor sit amet</h5>
											<span>Lorem ipsum dolor sit amet, Sed ut perspiciatis unde omnis iste natus error sit voluptatem , eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.accusantium doloremque laudantium, totam rem aperiamconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
									</div>
								</div>
							</div>
				       </div>
				<!-- //Modal5 -->
<!-- //banner -->
<!-- js-scripts -->			
		<!-- Baneer-js -->
			<script>
						// You can also use "$(window).load(function() {"
						$(function () {
						  // Slideshow 4
						  $("#slider4").responsiveSlides({
							auto: false,
							pager:true,
							nav:false,
							speed: 500,
							namespace: "callbacks",
							before: function () {
							  $('.events').append("<li>before event fired.</li>");
							},
							after: function () {
							  $('.events').append("<li>after event fired.</li>");
							}
						  });
						});
			</script>
		<!-- //Baneer-js -->
		<!-- js for navigation -->
		<!-- //js for navigation -->
<!-- About-->
<div class="about" id="about">
       <div class="w3-about-grids-top">
	     <div class="col-md-6 w3-about-right">
		   <h3>Nam venenatis imperdiet molestie</h3>
		    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non mollis justo. Ut ut justo sapien. Vivamus lacinia purus eget risus sodales tincidunt. Nulla erat orci, facilisis eget mi ac, fermentum rutrum ipsum.<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non mollis justo. Ut ut justo sapien. Vivamus lacinia purus eget risus sodales tincidunt. Nulla erat orci, facilisis eget mi ac, fermentum rutrum ipsum.
	         </span> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non mollis justo. Ut ut justo sapien. Vivamus lacinia purus eget risus sodales tincidunt. Nulla erat orci, facilisis eget mi ac, fermentum rutrum ipsum.
	         </span> 
			</p>
	    </div>
		 <div class="col-md-6 w3-about-left">
	    </div>  
		<div class="clearfix"></div>
		</div>
		<div class="w3-about-grids-bottom">
		 <div class="col-md-6 w3-about-right1">
	    </div>  
		 <div class="col-md-6 w3-about-left1">
		   <h3>Donec eleifend massa vel augue</h3>
		   		    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non mollis justo. Ut ut justo sapien. Vivamus lacinia purus eget risus sodales tincidunt. Nulla erat orci, facilisis eget mi ac, fermentum rutrum ipsum.<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non mollis justo. Ut ut justo sapien. Vivamus lacinia purus eget risus sodales tincidunt. Nulla erat orci, facilisis eget mi ac, fermentum rutrum ipsum.
	                   </span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non mollis justo. Ut ut justo sapien. Vivamus lacinia purus eget risus sodales tincidunt. Nulla erat orci, facilisis eget mi ac, fermentum rutrum ipsum.
	                        </span> 
					</p>
	    </div>
		<div class="clearfix"></div>
        </div>
</div>	
<!-- //About -->	
<div class="services" id="services">
   <div class="container">
		<h3>Services</h3>
		  <div class="w3-service-grids">
			<div class="col-md-3 w3-services-grid1">
			<div class="w3-icon">
				<i class="fa fa-suitcase" aria-hidden="true"></i>
				<h4>Lorem ipsum</h4>
			</div>
		</div>
		<div class="col-md-3 w3-services-grid1">
			<div class="w3-icon">
				<i class="fa fa-bed" aria-hidden="true"></i>
				<h4>Donec lectus</h4>
			</div>
		</div>
		<div class="col-md-3 w3-services-grid1">
			<div class="w3-icon">
				<i class="fa fa-plane" aria-hidden="true"></i>
				<h4>Proin cursus</h4>
			</div>
		</div>
		<div class="col-md-3 w3-services-grid1">
			<div class="w3-icon ">
				<i class="fa fa-tripadvisor" aria-hidden="true"></i>
				<h4>Aliquam quis</h4>
			</div>
		</div>
	     <div class="clearfix"> </div>
         <div class="w3-service-grids2">
			<div class="col-md-3 w3-services-grid2">
				<div class="w3-icon">
					<i class="fa fa-cutlery" aria-hidden="true"></i>
						<h4>Pellentesque</h4>
				</div>
			</div>
			<div class="col-md-3 w3-services-grid2">
				<div class="w3-icon">
					<i class="fa fa-building" aria-hidden="true"></i>
						<h4> Nunc aliquet</h4>
				</div>
			</div>
			<div class="col-md-3 w3-services-grid2">
			<div class="w3-icon">
				<i class="fa fa-bus" aria-hidden="true"></i>
				<h4>condimentum</h4>
			</div>
			</div>
			<div class="col-md-3 w3-services-grid2">
			<div class="w3-icon ">
				<i class="fa fa-globe" aria-hidden="true"></i>
				<h4>ultricies tortor</h4>
			</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
 </div>
</div>
<!-- //services -->
<!-- gallery -->
<div class="portfolio w3layouts agileits" id="gallery">
     <div class="gallery-head">
		  <h3>Gallery</h3>
     </div>
   <div class="filtr-container w3layouts agileits">
				<div class="col-md-4 filtr-item w3layouts agileits portfolio-t" data-category="1, 5" data-sort="Busy streets">
					<a href="images/gallery1.jpg" class="b-link-stripe w3layouts agileits b-animate-go thickbox">
						<figure>
							<img src="images/gallery1.jpg" class="img-responsive w3layouts agileits" alt="W3layouts Agileits">
							<figcaption>
								<h3>TRIP JOY</h3>
							</figcaption>
						</figure>
					</a>
				</div>
				<div class="col-md-4 filtr-item w3layouts agileits" data-category="2, 5" data-sort="Luminous night">
					<a href="images/gallery2.jpg" class="b-link-stripe w3layouts agileits b-animate-go thickbox">
						<figure>
							<img src="images/gallery2.jpg" class="img-responsive w3layouts agileits" alt="W3layouts Agileits">
							<figcaption>
								<h3>TRIP JOY</h3>
							</figcaption>
						</figure>
					</a>
				</div>
				<div class="col-md-4 filtr-item w3layouts agileits" data-category="1, 4" data-sort="City wonders">
					<a href="images/gallery3.jpg" class="b-link-stripe w3layouts agileits b-animate-go thickbox">
						<figure>
							<img src="images/gallery3.jpg" class="img-responsive w3layouts agileits" alt="W3layouts Agileits">
							<figcaption>
								<h3>TRIP JOY</h3>
							</figcaption>
						</figure>
					</a>
				</div>
				<div class="col-md-4 filtr-item w3layouts agileits" data-category="3" data-sort="In production">
					<a href="images/gallery4.jpg" class="b-link-stripe w3layouts agileits b-animate-go thickbox">
						<figure>
							<img src="images/gallery4.jpg" class="img-responsive w3layouts agileits" alt="W3layouts Agileits">
							<figcaption>
								<h3>TRIP JOY</h3>
							</figcaption>
						</figure>
					</a>
				</div>
				<div class="col-md-4 filtr-item w3layouts agileits" data-category="3, 4" data-sort="Industrial site">
					<a href="images/gallery5.jpg" class="b-link-stripe w3layouts agileits b-animate-go thickbox">
						<figure>
							<img src="images/gallery5.jpg" class="img-responsive w3layouts agileits" alt="W3layouts Agileits">
							<figcaption>
								<h3>TRIP JOY</h3>
							</figcaption>
						</figure>
					</a>
				</div>
				<div class="col-md-4 filtr-item w3layouts agileits" data-category="2, 4" data-sort="Peaceful lake">
					<a href="images/gallery6.jpg" class="b-link-stripe w3layouts agileits b-animate-go thickbox">
						<figure>
							<img src="images/gallery6.jpg" class="img-responsive w3layouts agileits" alt="W3layouts Agileits">
							<figcaption>
								<h3>TRIP JOY</h3>
							</figcaption>
						</figure>
					</a>
				</div>
				<div class="col-md-4 filtr-item w3layouts agileits" data-category="1, 5" data-sort="City lights">
					<a href="images/gallery7.jpg" class="b-link-stripe w3layouts agileits b-animate-go thickbox">
						<figure>
							<img src="images/gallery7.jpg" class="img-responsive w3layouts agileits" alt="W3layouts Agileits">
							<figcaption>
								<h3>TRIP JOY</h3>
							</figcaption>
						</figure>
					</a>
				</div>
				<div class="col-md-4 filtr-item w3layouts agileits" data-category="2, 4" data-sort="Dreamhouse">
					<a href="images/gallery8.jpg" class="b-link-stripe w3layouts agileits b-animate-go thickbox">
						<figure>
							<img src="images/gallery8.jpg" class="img-responsive w3layouts agileits" alt="W3layouts Agileits">
							<figcaption>
								<h3>TRIP JOY</h3>
							</figcaption>
						</figure>
					</a>
				</div>
				<div class="col-md-4 filtr-item w3layouts agileits" data-category="2, 4" data-sort="Dreamhouse">
					<a href="images/gallery19.jpg" class="b-link-stripe w3layouts agileits b-animate-go thickbox">
						<figure>
							<img src="images/gallery9.jpg" class="img-responsive w3layouts agileits" alt="W3layouts Agileits">
							<figcaption>
								<h3>TRIP JOY</h3>
							</figcaption>
						</figure>
					</a>
				</div>
				<div class="clearfix"></div>
	</div>
</div>
<!-- PopUp-Box-JavaScript -->
			<script type="text/javascript">
				$(function() {
					$('.filtr-item a').Chocolat();
				});
			</script>
		<!-- //PopUp-Box-JavaScript -->
<!-- //gallery -->
<!-- events -->
<div class="w3-event" id="event">
	<div class="container">
		<div class="event-head">
			<h3>Events</h3>
		</div>
		<div class="w3-events-grid">
			<div class="w3-event-grids-top">
				<div class="col-md-6 w3-event-left"> 
					<img src="images/e1.jpg" alt="image">
			    </div>
				<div class="col-md-6 w3-event-right">
				    <h5>26 NOVEMBER 2017</h5>
					<h3><a href="#" data-toggle="modal" data-target="#myModal">Donec lectus neque</a></h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non mollis justo. Ut ut justo sapien. Vivamus lacinia purus eget risus sodales tincidunt. Nulla erat orci, facilisis eget mi ac, fermentum rutrum ipsum.<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non mollis justo. Ut ut justo sapien. Vivamus lacinia purus eget risus sodales tincidunt. Nulla erat orci, facilisis eget mi ac, fermentum rutrum ipsum.
					</span> 
					</p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="w3-event-grids-bottom">
				<div class="col-md-6 w3-event-right1">
				   <h5>26 NOVEMBER 2017</h5>
					<h3><a href="#" data-toggle="modal" data-target="#myModal">Aliquam quis congue</a></h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non mollis justo. Ut ut justo sapien. Vivamus lacinia purus eget risus sodales tincidunt. Nulla erat orci, facilisis eget mi ac, fermentum rutrum ipsum.<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non mollis justo. Ut ut justo sapien. Vivamus lacinia purus eget risus sodales tincidunt. Nulla erat orci, facilisis eget mi ac, fermentum rutrum ipsum.
	                 </span>
					</p>
				</div>
				<div class="col-md-6 w3-event-left1">
					<img src="images/e2.jpg" alt="image">
				</div>  
				<div class="clearfix"></div>
			</div>
		</div>
	</div>	
</div>
<!-- modal -->
	<div class="modal about-modal fade" id="myModal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header"> 
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
						<h4 class="modal-title">TBUZZ Tours</h4>
						<h5>26 Nov 2017</h5>
					</div> 
					<div class="modal-body">
					<div class="agileits-w3layouts-info">
						<img src="images/e11.jpg" alt="" />
						<p>Duis venenatis, turpis eu bibendum porttitor, sapien quam ultricies tellus, ac rhoncus risus odio eget nunc. Pellentesque ac fermentum diam. Integer eu facilisis nunc, a iaculis felis. Pellentesque pellentesque tempor enim, in dapibus turpis porttitor quis. Suspendisse ultrices hendrerit massa. Nam id metus id tellus ultrices ullamcorper.  Cras tempor massa luctus, varius lacus sit amet, blandit lorem. Duis auctor in tortor sed tristique. Proin sed finibus sem.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //modal -->
<!-- //events -->
<!-- team -->
		<div class="team" id="team">
		   <div class="team-head">
			<h3>Our Team</h3>
		  </div>
			<div class="container">
				<div class="agile_team_grids">
					<div class="col-md-3 agile_team_grid">
						<div class="agile_team_grid_main">
							<img src="images/team1.jpg" alt=" " class="img-responsive">
							<div class="p-mask">
								<ul class="top-links two">
									<li><a href="#"><i class="fa fa-facebook"></i></a></li>
									<li><a href="#"><i class="fa fa-twitter"></i></a></li>
									<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								</ul>
							</div>
						</div>
						<div class="agile_team_grid1">
							<h3>Riya John</h3>
							<p>Lorem ipsum</p>
						</div>
					</div>
					<div class="col-md-3 agile_team_grid">
						<div class="agile_team_grid_main">
							<img src="images/team2.jpg" alt=" " class="img-responsive">
							<div class="p-mask">
								<ul class="top-links two">
									<li><a href="#"><i class="fa fa-facebook"></i></a></li>
									<li><a href="#"><i class="fa fa-twitter"></i></a></li>
									<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								</ul>
							</div>
						</div>
						<div class="agile_team_grid1">
							<h3>Williamson </h3>
							<p>Consectetur </p>
						</div>
					</div>
					<div class="col-md-3 agile_team_grid three">
						<div class="agile_team_grid_main">
							<img src="images/team3.jpg" alt=" " class="img-responsive">
							<div class="p-mask">
								<ul class="top-links two">
									<li><a href="#"><i class="fa fa-facebook"></i></a></li>
									<li><a href="#"><i class="fa fa-twitter"></i></a></li>
									<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								</ul>
							</div>
						</div>
						<div class="agile_team_grid1">
							<h3>Rosy John</h3>
							<p>Suscipit</p>
						</div>
					</div>
					<div class="col-md-3 agile_team_grid four">
						<div class="agile_team_grid_main">
							<img src="images/team4.jpg" alt=" " class="img-responsive">
							<div class="p-mask">
								<ul class="top-links two">
									<li><a href="#"><i class="fa fa-facebook"></i></a></li>
									<li><a href="#"><i class="fa fa-twitter"></i></a></li>
									<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								</ul>
							</div>
						</div>
						<div class="agile_team_grid1">
							<h3>David Pal</h3>
							<p>Malesuada </p>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
		<!-- //team -->
<!-- contact -->
	<div class="contact" id="contact">
			<div class="w3l_heading">
				<h3>Contact Us</h3>
			</div>
			<div class="w3agile_contact_grid">
     		<div class="col-md-4 w3agile_contact_left">
				<h2>Contact Info</h2>
				<ul class="agileinfo_contact_grid_list">
					<li><i class="fa fa-map-marker contact_icons" aria-hidden="true"></i>1234k Avenue, 4th block, <span>New York City.</span></li>
					<li><i class="fa fa-envelope-o contact_icons" aria-hidden="true"></i><a href="mailto:info@example.com">info@example.com</a></li>
					<li><i class="fa fa-phone contact_icons" aria-hidden="true"></i>+1234 567 567</li>
				</ul>
			</div>
			<div class="col-md-8 w3agile_contact_right">
			<!--google map section ends here-->
	          <div class="agileits-w3layouts-map wow zoomIn animated" data-wow-delay=".5s">
		            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3023.9503398796587!2d-73.9940307!3d40.719109700000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a27e2f24131%3A0x64ffc98d24069f02!2sCANADA!5e0!3m2!1sen!2sin!4v1441710758555"></iframe>
	          </div>
	<!--/google map section ends here-->
			</div>
			<div class="clearfix"> </div>
			</div>
	</div>
	<!-- //contact -->
	<!-- subscribe -->
	<div class="subscribe">  
		<div class="container">
			<div class="agileits-title">  
				<h6>- Subscribe our</h6>
				<h3>Newsletter</h3> 
			</div>
			<form action="#" method="post"> 
				<input type="email" name="email" placeholder="Enter your Email..." required="">
				<input type="submit" value="Subscribe">
			</form>
			<div class="clearfix"> </div> 
		</div>
	</div>
	<!-- //subscribe -->
	<!-- footer -->
	<div class="footer">
		<div class="container">
			<ul class="social">
				<li><a class="social-facebook" href="#">
						<i class="fa fa-facebook" aria-hidden="true"></i>
						<div class="tooltip"><span>Facebook</span></div>
					</a>
				</li>
				<li><a class="social-twitter" href="#">
					<i class="fa fa-twitter" aria-hidden="true"></i>
					<div class="tooltip"><span>Twitter</span></div>
					</a></li>
				<li><a class="social-google" href="#">
					<i class="fa fa-google-plus" aria-hidden="true"></i>
					<div class="tooltip"><span>Google+</span></div>
					</a></li>
				<li><a class="social-pinterest" href="#">
					<i class="fa fa-pinterest-p" aria-hidden="true"></i>
					<div class="tooltip"><span>Pinterest</span></div>
					</a></li>
				<li><a class="social-instagram" href="#">
					<i class="fa fa-instagram" aria-hidden="true"></i>
					<div class="tooltip"><span>Instagram</span></div>
					</a></li>
			</ul>
			<ul class="main-nav">
				<li><a href="index.html">Home</a><i>|</i></li>
				<li><a href="#about" class="scroll">About Us</a><i>|</i></li>
				<li><a href="#gallery" class="scroll">Gallery</a><i>|</i></li>
				<li><a href="#services" class="scroll">Services</a><i>|</i></li>
				<li><a href="#contact" class="scroll">Contact Us</a></li>
			</ul>
			<div class="copy-right">
				<p>&copy; 2017 Travel Buzz. All rights reserved | Design by <a href="http://www.51qianduan.com/">xmoban.cn</a></p>
			</div>
		</div>
	</div>
<!-- //footer --> 
	<!-- start-smoth-scrolling -->
				<script type="text/javascript">
					jQuery(document).ready(function($) {
						$(".scroll").click(function(event){		
							event.preventDefault();
							$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
						});
					});
				</script>
		<!-- start-smoth-scrolling -->
		<!-- smooth scrolling-bottom-to-top -->
				<script type="text/javascript">
					$(document).ready(function() {
					/*
						var defaults = {
						containerID: 'toTop', // fading element id
						containerHoverID: 'toTopHover', // fading element hover id
						scrollSpeed: 1200,
						easingType: 'linear' 
						};
					*/								
					$().UItoTop({ easingType: 'easeOutQuart' });
					});
				</script>
				<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
		<!-- //smooth scrolling-bottom-to-top -->
<!-- //js-scripts -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 旅游 旅游公司 旅行社 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 白色 宽屏 全屏 满屏

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到