蓝色欧美风格的环球英文旅游企业网站源码下载



5 19 7



模板描述:蓝色欧美风格 环球英文旅游 企业网站,蓝色欧美风格的环球英文旅游企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" media="all">
<link href="css/owl.theme.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/cm-overlay.css" />
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="css/jquery.countdown.css" />
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Droid+Serif:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/jquery-ui.css" />

2. 引入JS

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="js/jquery.vide.min.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/lightbox-plus-jquery.min.js"> </script>
<script src="js/jarallax.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script src="js/owl.carousel.js"></script>
<script type="text/javascript" src=" js/moment.js"></script>
<script type="text/javascript" src=" js/moment-timezone-with-data.js"></script>
<script type="text/javascript" src="js/timer.js"></script>
<script src="js/jquery-ui.js"></script>

3. HTML代码

	<!-- banner -->
	<div data-vide-bg="video/beach1">
		<div class="banner jarallax">
				<div class="w3layouts-header-top">
					<div class="container">
						<div class="w3-header-top-grids">
							<div class="w3-header-top-left">
								<p><i class="fa fa-volume-control-phone" aria-hidden="true"></i> +1 234 567 8901</p>
							</div>
							<div class="w3-header-top-right">
								<div class="agileinfo-social-grids">
									<ul>
										<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-rss"></i></a></li>
										<li><a href="#"><i class="fa fa-vk"></i></a></li>
									</ul>
								</div>
								<div class="clearfix"> </div>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
				</div>
				<div class="head">
					<div class="container">
						<div class="navbar-top">
								<!-- Brand and toggle get grouped for better mobile display -->
								<div class="navbar-header">
									<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
										<span class="sr-only">Toggle navigation</span>
										<span class="icon-bar"></span>
										<span class="icon-bar"></span>
										<span class="icon-bar"></span>
									</button>
									<div class="navbar-brand logo">
										<h1><a href="index.html"><i class="fa fa-globe" aria-hidden="true"></i> World <span>Tour</span></a></h1>
									</div>
								</div>
								<!-- Collect the nav links, forms, and other content for toggling -->
								<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
								 <ul class="nav navbar-nav link-effect-4">
									<li class="active first-list"><a href="index.html">Home</a> </li>
									<li><a href="#about" class="scroll">About</a></li>
									<li><a href="#destinations" class="scroll">Destinations</a></li>
									<li><a href="#gallery" class="scroll">Gallery</a></li>
									<li><a href="#offers" class="scroll">Offers</a></li>
									<li><a href="#contact" class="scroll">Contact</a></li>
								  </ul>
								</div><!-- /.navbar-collapse -->
							</div>
					</div>
				</div>
				<div class="w3layouts-banner-slider">
					<div class="container">
						<div class="slider">
							<div class="callbacks_container">
								<ul class="rslides callbacks callbacks1" id="slider4">
									<li>
										<div class="wthree-top-info">
											<div class="agileits-banner-info">
												<p>Etiam ut maximus</p>
												<h3>Lorem ipsum dolor sit</h3>
											</div>
											<div class="agileits-boder"> </div>
										</div>
									</li>
									<li>
										<div class="wthree-top-info">
											<div class="agileits-banner-info">
												<p>Proin sapien ante</p>
												<h3>Donec quis diam enim</h3>
											</div>
											<div class="agileits-boder"> </div>
										</div>
									</li>
									<li>
										<div class="wthree-top-info">
											<div class="agileits-banner-info">
												<p>Etiam ut maximus</p>
												<h3>Lorem ipsum dolor sit</h3>
											</div>
											<div class="agileits-boder"> </div>
										</div>
									</li>
									<li>
										<div class="wthree-top-info">
											<div class="agileits-banner-info">
												<p>Proin sapien ante</p>
												<h3>Donec quis diam enim</h3>
											</div>
											<div class="agileits-boder"> </div>
										</div>
									</li>
								</ul>
							</div>
							<div class="clearfix"> </div>
							<script>
								// You can also use "$(window).load(function() {"
								$(function () {
								  // Slideshow 4
								  $("#slider4").responsiveSlides({
									auto: true,
									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>
							<!--banner Slider starts Here-->
						</div>
					</div>
				</div>
		</div>
	</div>
	<!-- //banner -->
	<!-- booking -->
	<div class="booking" id="booking">
		<div class="container">
			<div class="agileits-heading wthree-heading">
				<h2>Make Your Reservation</h2>
				<p>Vivamus pulvinar imperdiet</p>
			</div>
			<div class="book-reservation">
				<form action="#" method="post">
					<div class="col-md-4 form-date-w3-agileits">
						<label><i class="fa fa-user" aria-hidden="true"></i> Name :</label>
						<input type="text" name="name" placeholder="Your Name" required=""/>
					</div>
					<div class="col-md-4 form-date-w3-agileits">
						<label><i class="fa fa-envelope" aria-hidden="true"></i> Email :</label>
						<input type="email" name="email" placeholder="Your Email" required="" />
					</div>
					 <div class="col-md-4 form-date-w3-agileits">
						<label><i class="fa fa-calendar" aria-hidden="true"></i> Arrival Date :</label>
						<input  id="datepicker1" name="Text" type="text" value="mm/dd/yyyy" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'mm/dd/yyyy';}" required="" />
					</div>
					<div class="col-md-4 form-date-w3-agileits">
						<label><i class="fa fa-calendar" aria-hidden="true"></i> Departure Date :</label>
						<input  id="datepicker2" name="Text" type="text" value="mm/dd/yyyy" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'mm/dd/yyyy';}" required="" />
					</div>
					<div class="col-md-4 form-left-agileits-w3layouts bottom-w3ls form-date-w3-agileits">
							<label><i class="fa fa-home" aria-hidden="true"></i> Choose a Room :</label>
							<select class="form-control">
								<option>Room</option>
								<option>Standard Double Room</option>
								<option>Standard Family Room</option>
								<option>Garden Family Room</option>
								<option>Deluxe Double Room</option>
								<option>Executive Junior Suite</option>
								<option>Maisonette</option>
							</select>
					</div>
					<div class="col-md-4 form-left-agileits-w3layouts form-date-w3-agileits">
							<label><i class="fa fa-users" aria-hidden="true"></i> No.of People :</label>
							<select class="form-control">
								<option>Persons</option>
								<option>1 Person</option>
								<option>2 People</option>
								<option>3 People</option>
								<option>4 People</option>
								<option>5 People</option>
								<option>More</option>
							</select>
					</div>
					<div class="clearfix"> </div>
					<div class="make">
						  <input type="submit" value="Submit">
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- //booking -->
	<!-- ad -->
<div class="container">
<!-- 自适应广告 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1112982054462406"
     data-ad-slot="7771152246"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- /ad -->
	<!-- popular -->
	<div class="popular" id="destinations">
		<div class="container">
			<div class="agileits-heading">
				<h2>Popular Destinations</h2>
				<p>Vivamus pulvinar imperdiet</p>
			</div>
			<div class="agileinfo-popular-grids">
				<div class="col-md-3 agileinfo-popular-grid">
					<img src="images/1.jpg" alt="" />
					<h4>Paris</h4>
				</div>
				<div class="col-md-3 agileinfo-popular-grid">
					<img src="images/2.jpg" alt="" />
					<h4>London</h4>
				</div>
				<div class="col-md-3 agileinfo-popular-grid">
					<img src="images/4.jpg" alt="" />
					<h4>Maldives</h4>
				</div>
				<div class="col-md-3 agileinfo-popular-grid">
					<img src="images/5.jpg" alt="" />
					<h4>Bermuda</h4>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //popular -->
	<!-- choose -->
	<div class="choose" id="about">
		<div class="container">
			<div class="agileits-heading wthree-heading">
				<h3>Why Choose Us</h3>
				<p>Vivamus pulvinar imperdiet</p>
			</div>
			<div class="wthree-choose-grids">
				<div class="col-md-4 wthree-choose-grid">
					<i class="fa fa-map" aria-hidden="true"></i>
					<h5>Curabitur viverra nunc</h5>
					<p>Ut nulla libero, luctus quis varius efficitur, molestie non felis. Phasellus eget rutrum enim. Sed ac est tincidunt, tristique quam aliquam</p>
				</div>
				<div class="col-md-4 wthree-choose-grid">
					<i class="fa fa-ship" aria-hidden="true"></i>
					<h5>Curabitur viverra nunc</h5>
					<p>Ut nulla libero, luctus quis varius efficitur, molestie non felis. Phasellus eget rutrum enim. Sed ac est tincidunt, tristique quam aliquam</p>
				</div>
				<div class="col-md-4 wthree-choose-grid">
					<i class="fa fa-train" aria-hidden="true"></i>
					<h5>Curabitur viverra nunc</h5>
					<p>Ut nulla libero, luctus quis varius efficitur, molestie non felis. Phasellus eget rutrum enim. Sed ac est tincidunt, tristique quam aliquam</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //choose -->
	<!-- gallery -->
	<div class="gallery" id="gallery">
		<div class="container">
			<div class="agileits-heading">
				<h3>Our Gallery</h3>
				<p>Vivamus pulvinar imperdiet</p>
			</div>
			<div class="w3-agileits-gallery-grids">
				<div class="col-md-3 gallery-grid">
					<div class="grid">
						<figure class="effect-apollo">
							<a class="example-image-link" href="images/1.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
								<img src="images/1.jpg" alt="" />
								<figcaption>
								</figcaption>	
							</a>
						</figure>
					</div>
				</div>
				<div class="col-md-3 gallery-grid">
					<div class="grid">
						<figure class="effect-apollo">
							<a class="example-image-link" href="images/2.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
								<img src="images/2.jpg" alt="" />
								<figcaption>
								</figcaption>	
							</a>
						</figure>
					</div>
				</div>
				<div class="col-md-3 gallery-grid">
					<div class="grid">
						<figure class="effect-apollo">
							<a class="example-image-link" href="images/4.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
								<img src="images/4.jpg" alt="" />
								<figcaption>
								</figcaption>		
							</a>
						</figure>
					</div>
				</div>
				<div class="col-md-3 gallery-grid">
					<div class="grid">
						<figure class="effect-apollo">
							<a class="example-image-link" href="images/5.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
								<img src="images/5.jpg" alt="" />
								<figcaption>
								</figcaption>	
							</a>
						</figure>
					</div>
				</div>
				<div class="col-md-3 gallery-grid">
					<div class="grid">
						<figure class="effect-apollo">
							<a class="example-image-link" href="images/7.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
								<img src="images/7.jpg" alt="" />
								<figcaption>
								</figcaption>	
							</a>
						</figure>
					</div>
				</div>
				<div class="col-md-3 gallery-grid">
					<div class="grid">
						<figure class="effect-apollo">
							<a class="example-image-link" href="images/8.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
								<img src="images/8.jpg" alt="" />
								<figcaption>
								</figcaption>		
							</a>
						</figure>
					</div>
				</div>
				<div class="col-md-3 gallery-grid">
					<div class="grid">
						<figure class="effect-apollo">
							<a class="example-image-link" href="images/9.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
								<img src="images/9.jpg" alt="" />
								<figcaption>
								</figcaption>	
							</a>
						</figure>
					</div>
				</div>
				<div class="col-md-3 gallery-grid">
					<div class="grid">
						<figure class="effect-apollo">
							<a class="example-image-link" href="images/1.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
								<img src="images/1.jpg" alt="" />
								<figcaption>
								</figcaption>	
							</a>
						</figure>
					</div>
				</div>
				<div class="col-md-3 gallery-grid">
					<div class="grid">
						<figure class="effect-apollo">
							<a class="example-image-link" href="images/2.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
								<img src="images/2.jpg" alt="" />
								<figcaption>
								</figcaption>		
							</a>
						</figure>
					</div>
				</div>
				<div class="col-md-3 gallery-grid">
					<div class="grid">
						<figure class="effect-apollo">
							<a class="example-image-link" href="images/4.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
								<img src="images/4.jpg" alt="" />
								<figcaption>
								</figcaption>		
							</a>
						</figure>
					</div>
				</div>
				<div class="col-md-3 gallery-grid">
					<div class="grid">
						<figure class="effect-apollo">
							<a class="example-image-link" href="images/5.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
								<img src="images/5.jpg" alt="" />
								<figcaption>
								</figcaption>		
							</a>
						</figure>
					</div>
				</div>
				<div class="col-md-3 gallery-grid">
					<div class="grid">
						<figure class="effect-apollo">
							<a class="example-image-link" href="images/7.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem ac lectus mattis sagittis. Donec pulvinar quam sit amet est vestibulum volutpat. Phasellus sed nibh odio. Phasellus posuere at purus sit amet porttitor. Cras euismod egestas enim eget molestie. Aenean ornare condimentum odio, in lacinia felis finibus non. Nam faucibus libero et lectus finibus, sed porttitor velit pellentesque.">
								<img src="images/7.jpg" alt="" />
								<figcaption>
								</figcaption>		
							</a>
						</figure>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //gallery -->
	<!-- offer -->
	<div class="jarallax offer">
		<div class="container">
			<div class="agile-offer-slide">
				<div class="slider">
					<div class="callbacks_container">
						<ul class="rslides callbacks callbacks1" id="slider3">
							<li>
								<div class="w3-agile-offer">
									<h5>From $650</h5>
									<div class="w3-star">
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
									</div>
									<h4>Curabitur viverra nunc</h4>
									<p>April <span>24th</span> to June <span>17th</span></p>
								</div>
							</li>
							<li>
								<div class="w3-agile-offer">
									<h5>From $400</h5>
									<div class="w3-star">
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
									</div>
									<h4>Nullam sit amet quam</h4>
									<p>March <span>15th</span> to April <span>10th</span></p>
								</div>		
							</li>
							<li>
								<div class="w3-agile-offer">
									<h5>From $650</h5>
									<div class="w3-star">
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
									</div>
									<h4>Curabitur viverra nunc</h4>
									<p>April <span>24th</span> to June <span>17th</span></p>
								</div>		
							</li>
							<li>
								<div class="w3-agile-offer">
									<h5>From $400</h5>
									<div class="w3-star">
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
										<i class="fa fa-star" aria-hidden="true"></i>
									</div>
									<h4>Nullam sit amet quam</h4>
									<p>March <span>15th</span> to April <span>10th</span></p>
								</div>	
							</li>
						</ul>
					</div>
					<div class="clearfix"> </div>
					<script>
						// You can also use "$(window).load(function() {"
						$(function () {
							 // Slideshow 4
							$("#slider3").responsiveSlides({
								auto: true,
								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>
					<!--banner Slider starts Here-->
				</div>
			</div>
		</div>
	</div>
	<!-- //offer -->
	<!-- special -->
	<div class="special" id="offers">
		<div class="container">
			<div class="agileits-heading">
				<h3>Special Offers</h3>
				<p>Vivamus pulvinar imperdiet</p>
			</div>
			<div class="agileits-special-grids">
				<div id="owl-demo" class="owl-carousel owl-theme">
					<div class="item">
						<div class="special-info">
							<div class="special-info-top">
								<div class="special-star">
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
								</div>
								<h4>Thailand</h4>
							</div>
							<div class="special-info-bottom">
								<ul>
									<li>65 <span>Hotels</span></li>
									<li>24 <span>Cities</span></li>
									<li>45 <span>Tours</span></li>
								</ul>
								<p>Vivamus pulvinar imperdiet lorem vel aliquam. Maecenas nunc tellus, feugiat blandit commodo eget</p>
							</div>
						</div>	
					</div>
					<div class="item">
						<div class="special-info special-info1">
							<div class="special-info-top">
								<div class="special-star">
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
								</div>
								<h4>Australia</h4>
							</div>
							<div class="special-info-bottom">
								<ul>
									<li>70 <span>Hotels</span></li>
									<li>15 <span>Cities</span></li>
									<li>37 <span>Tours</span></li>
								</ul>
								<p>Vivamus pulvinar imperdiet lorem vel aliquam. Maecenas nunc tellus, feugiat blandit commodo eget</p>
							</div>
						</div>
					</div>
					<div class="item">
						<div class="special-info special-info2">
							<div class="special-info-top">
								<div class="special-star">
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
								</div>
								<h4>Bermuda</h4>
							</div>
							<div class="special-info-bottom">
								<ul>
									<li>45 <span>Hotels</span></li>
									<li>12 <span>Cities</span></li>
									<li>25 <span>Tours</span></li>
								</ul>
								<p>Vivamus pulvinar imperdiet lorem vel aliquam. Maecenas nunc tellus, feugiat blandit commodo eget</p>
							</div>
						</div>
					</div>
					<div class="item">
						<div class="special-info">
							<div class="special-info-top">
								<div class="special-star">
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
								</div>
								<h4>Thailand</h4>
							</div>
							<div class="special-info-bottom">
								<ul>
									<li>65 <span>Hotels</span></li>
									<li>24 <span>Cities</span></li>
									<li>45 <span>Tours</span></li>
								</ul>
								<p>Vivamus pulvinar imperdiet lorem vel aliquam. Maecenas nunc tellus, feugiat blandit commodo eget</p>
							</div>
						</div>	
					</div>
					<div class="item">
						<div class="special-info special-info1">
							<div class="special-info-top">
								<div class="special-star">
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
								</div>
								<h4>Australia</h4>
							</div>
							<div class="special-info-bottom">
								<ul>
									<li>70 <span>Hotels</span></li>
									<li>15 <span>Cities</span></li>
									<li>37 <span>Tours</span></li>
								</ul>
								<p>Vivamus pulvinar imperdiet lorem vel aliquam. Maecenas nunc tellus, feugiat blandit commodo eget</p>
							</div>
						</div>
					</div>
					<div class="item">
						<div class="special-info special-info2">
							<div class="special-info-top">
								<div class="special-star">
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
									<i class="fa fa-star" aria-hidden="true"></i>
								</div>
								<h4>Bermuda</h4>
							</div>
							<div class="special-info-bottom">
								<ul>
									<li>45 <span>Hotels</span></li>
									<li>12 <span>Cities</span></li>
									<li>25 <span>Tours</span></li>
								</ul>
								<p>Vivamus pulvinar imperdiet lorem vel aliquam. Maecenas nunc tellus, feugiat blandit commodo eget</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //special -->
	<!-- discount -->
	<div class="discount jarallax">
		<div class="container">
			<div class="discount-top">
				<h4>Beautiful trips with Special offers <span>customers with discount 65%</span></h4>
				<div class="agileits-border"> </div>
				<h6>It’s limited seating! Hurry up</h6>
			</div>
			<!--timer-->
			<div class="agileits-timer"> 
				<div class="clock">
					<div class="column days">
						<div class="timer" id="days"></div>
						<div class="text">DAYS</div>
					</div>
					<div class="timer days"></div>
					<div class="column">
						<div class="timer" id="hours"></div>
						<div class="text">HOURS</div>
					</div>
					<div class="timer"></div>
					<div class="column">
						<div class="timer" id="minutes"></div>
						<div class="text">MINUTES</div>
					</div>
					<div class="timer"></div>
					<div class="column">
						<div class="timer" id="seconds"></div>
						<div class="text">SECONDS</div>
					</div>
					<div class="clearfix"> </div>
				</div>	 
			</div>
			<!--//timer-->
			<div class="w3ls-booking">
				<a href="#booking" class="scroll">Book Now</a>
			</div>
		</div>
	</div>
	<!-- //discount -->
	<!-- subscribe -->
	<div class="wthree-subscribe">
		<div class="container">
			<div class="agileits-heading">
				<h3>Newsletter</h3>
				<p>Vivamus pulvinar imperdiet</p>
			</div>
			<div class="w3-agileits-subscribe-form">
				<form action="#" method="post">
					<input type="text" placeholder="Subscribe" name="Subscribe" required="">
					<button class="btn1">Subscribe</button>
				</form>
			</div>
		</div>
	</div>
	<!-- //subscribe -->
	<!-- contact -->
	<div class="contact" id="contact">
		<div class="container">
			<div class="agileits-heading">
				<h3>Contact Us</h3>
				<p>Vivamus pulvinar imperdiet</p>
			</div>
			<div class="agile-contact-grids">
				<div class="col-md-6 agile-contact-left">
					<div class="address-grid">
						<h4>Our Address</h4>
						<ul class="w3_address">
							<li><i class="fa fa-map-marker" aria-hidden="true"></i>1234k Avenue, 4th block, <span>New York City.</span></li>
							<li><i class="fa fa-envelope-o" aria-hidden="true"></i><a href="mailto:info@example.com">info@example.com</a></li>
							<li><i class="fa fa-mobile" aria-hidden="true"></i>+1234 567 567</li>
						</ul>
					</div>
					<div class="contact-form">
						<h4>Contact Form</h4>
						<form action="#" method="post">
							<div class="styled-input agile-styled-input-top">
								<input type="text" name="Name" required="">
								<label>Name</label>
								<span></span>
							</div>
							<div class="styled-input">
								<input type="text" name="Email" required=""> 
								<label>Email</label>
								<span></span>
							</div> 
							<div class="styled-input">
								<input type="text" name="Subject" required="">
								<label>Subject</label>
								<span></span>
							</div>
							<div class="styled-input">
								<textarea name="Message" required=""></textarea>
								<label>Message</label>
								<span></span>
							</div>	 
							<input type="submit" value="SEND">
						</form>
					</div>
				</div>
				<div class="col-md-6 agile-contact-right">
					<div class="agileits-map">
						<h4>Our Location</h4>
					</div>
					<div class="map-grid">
						<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387142.8400948023!2d-74.25819082602831!3d40.70583163923578!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e0!3m2!1sen!2sin!4v1470295981376" allowfullscreen></iframe>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //contact -->
	<!-- footer -->
	<div class="footer">
		<div class="footer-top">
			<div class="container">
				<div class="footer-grids">
					<div class="col-md-3 footer-logo">
						<h3><a href="index.html"><i class="fa fa-globe" aria-hidden="true"></i> World<span>Tour</span></a></h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget egestas erat. In hac habitasse platea dictumst.</p>
					</div>
					<div class="col-md-3 footer-grid">
						<h3>Navigation</h3>
						<ul>
							<li class="active first-list"><a href="index.html">Home</a> </li>
							<li><a href="#about" class="scroll">About</a></li>
							<li><a href="#destinations" class="scroll">Destinations</a></li>
							<li><a href="#gallery" class="scroll">Gallery</a></li>
							<li><a href="#offers" class="scroll">Offers</a></li>
							<li><a href="#contact" class="scroll">Contact</a></li>
						</ul>
					</div>
					<div class="col-md-3 footer-list">
						<h3>Latest Posts</h3>
						<ul>
							<li><i class="fa fa-arrow-right" aria-hidden="true"></i> Vestibulum ante ipsum</li>
							<li><i class="fa fa-arrow-right" aria-hidden="true"></i> Phasellus at eros</li>
							<li><i class="fa fa-arrow-right" aria-hidden="true"></i> Mauris eleifend aliquet</li>
							<li><i class="fa fa-arrow-right" aria-hidden="true"></i> Aliquam vitae tristique</li>
							<li><i class="fa fa-arrow-right" aria-hidden="true"></i> Pellentesque lobortis</li>
							<li><i class="fa fa-arrow-right" aria-hidden="true"></i> Class aptent taciti</li>
						</ul>
					</div>
					<div class="col-md-3 footer-grid">
						<h3>Twitter Posts</h3>
						<ul class="w3agile_footer_grid_list">
							<li>Ut aut reiciendis voluptatibus <a href="#">http://example.com</a> alias, ut aut.
								<span><i class="fa fa-twitter" aria-hidden="true"></i> 02 days ago</span></li>
							<li>Itaque earum rerum hic tenetur a sapiente <a href="#">http://example.com</a> ut aut.
							<span><i class="fa fa-twitter" aria-hidden="true"></i> 03 days ago</span></li>
						</ul>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
		<div class="footer-bottom">
			<div class="container">
				<p>&copy; 2017 World Tour. All rights reserved | Design by <a href="http://www.51qianduan.com/">xmoban.cn</a></p>
			</div>
		</div>
	</div>
	<!-- //footer -->
	<script type="text/javascript">
		/* init Jarallax */
		$('.jarallax').jarallax({
			speed: 0.5,
			imgWidth: 1366,
			imgHeight: 768
		})
	</script>
	<!-- here stars scrolling icon -->
	<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>
	<!-- //here ends scrolling icon -->
	<script src="js/owl.carousel.js"></script>  
	<!-- timer -->
	<!-- //timer -->
	<!-- booking -->
	<!-- Calendar -->
	<script>
		$(function() {
			$( "#datepicker,#datepicker1,#datepicker2,#datepicker3" ).datepicker();
		});
	</script>
	<!-- //Calendar -->
	<!-- //booking -->



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


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

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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