黄色欧美风格的户外旅行企业网站源码下载



6 21 8



模板描述:黄色欧美风格 户外旅行 企业网站,黄色欧美风格的户外旅行企业网站源码下载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/swipebox.css">
<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" type="text/css" media="all" />
<link href="//fonts.googleapis.com/css?family=Marck+Script" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>

2. 引入JS

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/jquery.swipebox.min.js"></script>
<script src="js/responsiveslides.min.js"></script>

3. HTML代码

	<div class="top-header-agile">
		<div class="container">
			<div class="col-md-6 top-header-agile-left">
				<ul>
					<li><i class="fa fa-phone" aria-hidden="true"></i></li>
					<li>+18084563326</li>
					<li><i class="fa fa-envelope" aria-hidden="true"></i></li>
					<li><a href="mailto:info@example.com">info@example.com</a></li>
				</ul>
			</div>
			<div class="col-md-6 top-header-agile-right">
				<ul>
					<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
				</ul>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<div class="banner" id="home">
		<div class="header-bottom">
		     <div class="container">
			  <div class="fixed-header">
			      <!--logo-->
			       <div class="logo">
                      <a href="index.html"><h1>Hangout</h1></a>
				   </div>
					<!--//logo-->
					<nav class="navbar navbar-default cl-effect-16" id="cl-effect-16">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<div id="navbar" class="navbar-collapse navbar-right collapse hover-effect">
							<ul class="nav navbar-nav">
								<li><a class="scroll" href="#home">HOME</a></li>
								<li><a href="#about" class="scroll">ABOUT</a></li>
								<li><a href="#gallery" class="scroll">GALLERY</a></li>
								<li><a href="#team" class="scroll">TEAM</a></li>
								<li ><a class="scroll" href="#contact">CONTACT</a></li>
							</ul>	
						</div>
						</nav>
				 <div class="clearfix"></div>
			 </div>
		</div>
	</div>
		<div class="banner-slider w3layouts">
				<div class="callbacks_container">
					<ul class="rslides" id="slider4">
					    <li>
						   <div class="banner-info">
							      <h3>To Travel</h3>
								  <p>IS TO LIVE</p>
								     <div class="arrows"><img src="images/border.png" alt="border"/></div>
								 <span>ENJOY THE MOMENT</span>
							  </div>
						</li>
						<li>
						   <div class="banner-info">
							    <h3>To Travel</h3>
								 <p>IS TO EXPLORE</p>
								  <div class="arrows"><img src="images/border.png" alt="border"/></div>
								 <span>ENJOY THE MOMENT</span>
							  </div>
						</li>
						<li>
						   <div class="banner-info">
							      <h3>To Travel</h3>
								  <p>IS TO DISCOVER</p>
								   <div class="arrows"><img src="images/border.png" alt="border"/></div>
								   <span>ENJOY THE MOMENT</span>
						   </div>
					  </li>
					</ul>
			  </div>
		<!--banner Slider starts Here-->
			 <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>
	<!-- About-->
	<div class="about-w3" id="about">
		<div class="container">
			<div class="col-md-6 about-left-w3l">
				<h2>About</h2>
				<p>Suspendisse molestie lorem eu felis congue, maximus convallis mi bibendum. Curabitur est tortor, hendrerit eu velit quis, vestibulum cursus ligula.</p>
				<div class="about-left-wthree">
					<div class="about-left-w3l-sec1">
						<div class="col-md-2 about-left-icon-w3ls">
							<i class="fa fa-envira" aria-hidden="true"></i>
						</div>
						<div class="col-md-10 about-left-text-w3ls">
							<h4>Fusce at augue</h4>
							<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ornare, mauris id ultricies dapibus</p>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="about-left-w3l-sec2">
						<div class="col-md-2 about-left-icon-w3ls">
							<i class="fa fa-anchor" aria-hidden="true"></i>
						</div>
						<div class="col-md-10 about-left-text-w3ls">
							<h4>Fusce at augue</h4>
							<p>Fusce eleifend, tellus fermentum placerat posuere, ligula felis hendrerit nisl, vitae bibendum nisl purus sit amet nisi.</p>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="about-left-w3l-sec3">
						<div class="col-md-2 about-left-icon-w3ls">
							<i class="fa fa-heart" aria-hidden="true"></i>
						</div>
						<div class="col-md-10 about-left-text-w3ls">
							<h4>Fusce at augue</h4>
							<p> Vestibulum fermentum, risus ut maximus pellentesque, dolor lorem pretium nunc</p>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
			<div class="col-md-6 about-right-w3l">
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<!-- //About-->
	<!--Services-->
	<div class="services-w3-agileits" id="services">
		<div class="container">
			<h3>Services</h3>
			<div class="service-grids-agileits-w3layouts">
				<div class="col-md-3 services-grids-w3-agile sg1">
					<i class="fa fa-cutlery" aria-hidden="true"></i>
					<h4>Fusce eleifend</h4>
					<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ornare mauris id.</p>
				</div>
				<div class="col-md-3 services-grids-w3-agile sg2">
					<i class="fa fa-bed" aria-hidden="true"></i>
					<h4>Ligula felis</h4>
					<p>Fusce eleifend, tellus fermentum placerat posuere,felis hendrerit nisl, vitae bibendum .</p>
				</div>
				<div class="col-md-3 services-grids-w3-agile sg3">
					<i class="fa fa-star" aria-hidden="true"></i>
					<h4>Nulla convallis</h4>
					<p>nisl purus sit amet nisi. Ut odio sem, blandit ac libero at, pulvinar pretium massa..</p>
				</div>
				<div class="col-md-3 services-grids-w3-agile">
					<i class="fa fa-gift" aria-hidden="true"></i>
					<h4>Porttitor turpis</h4>
					<p> In imperdiet pulvinar libero vitae sodales. Maecenas dapibus venenatis gravida. </p>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--//services-->
	<!--Gallery-->
	<div class="gallery agileits-w3layouts" id="gallery">
		<div class="container">
			<h3>Gallery</h3>
				<div class="gallery-grids">
					<div class="col-md-6 baner-top">
						<a href="images/g1.jpg" class="b-link-stripe b-animate-go  swipebox">
							<div class="gal-spin-effect vertical ">
								<img src="images/g1.jpg" alt=" " />
								<div class="gal-text-box">
									<div class="info-gal-con">
										<h4>View</h4>
									</div>
								</div>
							</div>
						</a>
					</div>
					<div class="col-md-6 baner-top">
						<a href="images/g2.jpg" class="b-link-stripe b-animate-go  swipebox">
							<div class="gal-spin-effect vertical ">
								<img src="images/g2.jpg" alt=" " />
								<div class="gal-text-box">
									<div class="info-gal-con">
										<h4>View</h4>
									</div>
								</div>
							</div>
						</a>
					</div>
					<div class="col-md-3 baner-top ban-mar">
						<a href="images/g3.jpg" class="b-link-stripe b-animate-go  swipebox">
							<div class="gal-spin-effect vertical ">
								<img src="images/g3.jpg" alt=" " />
								<div class="gal-text-box">
									<div class="info-gal-con">
										<h4>View</h4>
									</div>
								</div>
							</div>
						</a>
					</div>
					<div class="col-md-3 baner-top ban-mar">
						<a href="images/g4.jpg" class="b-link-stripe b-animate-go  swipebox">
							<div class="gal-spin-effect vertical ">
								<img src="images/g4.jpg" alt=" " />
								<div class="gal-text-box">
									<div class="info-gal-con">
										<h4>View</h4>
									</div>
								</div>
							</div>
						</a>
					</div>
					<div class="col-md-3 baner-top ban-mar">
						<a href="images/g5.jpg" class="b-link-stripe b-animate-go  swipebox">
							<div class="gal-spin-effect vertical ">
								<img src="images/g5.jpg" alt=" " />
								<div class="gal-text-box">
									<div class="info-gal-con">
										<h4>View</h4>
									</div>
								</div>
							</div>
						</a>
					</div>
					<div class="col-md-3 baner-top ban-mar">
						<a href="images/g6.jpg" class="b-link-stripe b-animate-go  swipebox">
							<div class="gal-spin-effect vertical ">
								<img src="images/g6.jpg" alt=" " />
								<div class="gal-text-box">
									<div class="info-gal-con">
										<h4>View</h4>
									</div>
								</div>
							</div>
						</a>
					</div>
					<div class="col-md-6 baner-top">
						<a href="images/g7.jpg" class="b-link-stripe b-animate-go  swipebox">
							<div class="gal-spin-effect vertical ">
								<img src="images/g7.jpg" alt=" " />
								<div class="gal-text-box">
									<div class="info-gal-con">
										<h4>View</h4>	
									</div>
								</div>
							</div>
						</a>
					</div>
					<div class="col-md-6 baner-top">
						<a href="images/g8.jpg" class="b-link-stripe b-animate-go  swipebox">
							<div class="gal-spin-effect vertical ">
								<img src="images/g8.jpg" alt=" " />
								<div class="gal-text-box">
									<div class="info-gal-con">
										<h4>View</h4>
									</div>
								</div>
							</div>
						</a>
					</div>
					<div class="clearfix"> </div>
					</div>
		</div>
	</div>
	<!-- //gallery -->
	<!-- News-->
	<div class="news w3-agile" id="news">
		<div class="container">
			 <h3>OUR NEWS</h3>
			 <div class="news-content-w3layouts">
				<div class="col-md-6 col-sm-6 newsl">
					<h5>Randomised words which don't look even slightly</h5>
					<a href="#" class="date" data-toggle="modal" data-target="#myModal">20 feb,2016</a>
					<a href="#" data-toggle="modal" data-target="#myModal"><img src="images/news.jpg" alt="" /></a>
					<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
				</div>
				<div class="col-md-6 col-sm-6 newsr">
					<h4>TAGS</h4>
					<ul>
						<li><a href="#" class="hvr-rectangle-in"> Holiday</a></li>
						<li><a href="#"  class="hvr-rectangle-in">Joyride</a></li>
						<li><a href="#"  class="hvr-rectangle-in">Scenic</a></li>
						<li><a href="#"  class="hvr-rectangle-in">Resort</a></li>
						<li><a href="#"  class="hvr-rectangle-in">Shore leave </a></li>
						<li><a href="#"  class="hvr-rectangle-in">Trip</a></li>
						<li><a href="#"  class="hvr-rectangle-in">Tourism</a></li>
						<li><a href="#"  class="hvr-rectangle-in">Vacation</a></li>
						<li><a href="#"  class="hvr-rectangle-in">Zoological</a></li>
					</ul>
					<h6>RECENT POSTS</h6>
					<div class="newsrt">
						<div class="col-md-3 col-sm-3 newsrtl">
							<a href="#" data-toggle="modal" data-target="#myModal"><img src="images/b1.jpg" alt=" " /></a>
						</div>
						<div class="col-md-9  col-sm-9 newsrtr">
							<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p>
							<a href="#" class="date" data-toggle="modal" data-target="#myModal">20 feb,2016</a>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="newsrt">
						<div class="col-md-3 col-sm-3 newsrbl">
							<a href="#" data-toggle="modal" data-target="#myModal"><img src="images/b2.jpg" alt=" " /></a>
						</div>
						<div class="col-md-9 col-sm-9 newsrbr">
							<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p>
							<a href="#" class="date" data-toggle="modal" data-target="#myModal">22 mar,2016</a>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--// News -->
	<div id="myModal" class="modal fade" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title">Nunc egestas</h4>
				</div>
				<div class="modal-body">
					<p>Nulla eget lacus sed sapien venenatis laoreet vitae ultricies justo. Mauris hendrerit vulputate gravida. Etiam efficitur tellus sit amet convallis ullamcorper. Ut ultrices, urna ut aliquam vulputate, lacus risus ornare libero, sit amet ullamcorper tortor tortor ut mi.</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
	<!--team-->
	<div class="team wthree" id="team">
		<div class="container">
			<div class="team-main">
				<div class="team-top">
					<h3>Our Team</h3>
				</div>
				<div class="team-bottom">
					<div class="col-md-3 team-grids tg1">
						<div class="ih-item circle effect5">
							<a href="#">
								<div class="img"><img src="images/t1.jpg" alt="img" class="img-responsive"></div>
								<div class="info">
								  <div class="info-back">
									<h3>Kristen</h3>		          
								  </div>			          
								</div>
							</a>
						</div>
						<div class="team-bottom">
							<h4>Travel Advisor</h4>
							<p>On the other hand, we denounce with righteous indignation.</p>
							<ul>
								<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
								<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
								<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
							</ul>
						</div>
					</div>
					<div class="col-md-3 team-grids tg2">
						<div class="ih-item circle effect5">
							<a href="#">
								<div class="img"><img src="images/t2.jpg" alt="img" class="img-responsive"></div>
								<div class="info">
								  <div class="info-back">
									<h3>Lisa</h3>		           	            
								  </div>
								</div>
							</a>
						</div>
						<div class="team-bottom">
							<h4>Travel Advisor</h4>
							<p>On the other hand, we denounce with righteous indignation.</p>
							<ul>
								<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
								<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
								<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
							</ul>
						</div>	 
					</div>
					<div class="col-md-3 team-grids tg3">
						<div class="ih-item circle effect5">
							<a href="#">
								<div class="img"><img src="images/t3.jpg" alt="img" class="img-responsive"></div>
								<div class="info">
								   <div class="info-back">
										<h3>Johnson</h3>			       
								    </div>
								</div>
							</a>
						</div>
						<div class="team-bottom">
							<h4>Chairman & CEO</h4>
							<p>On the other hand, we denounce with righteous indignation.</p>
						    <ul>
								<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
								<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
								<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
							</ul>
						</div>
					</div>
					<div class="col-md-3 team-grids">
						<div class="ih-item circle effect5">
							<a href="#">
								<div class="img"><img src="images/t4.jpg" alt="img" class="img-responsive"></div>
								<div class="info">
								    <div class="info-back">
										<h3>Martina</h3>		           
								    </div>
								</div>
							</a>
						</div>
						<div class="team-bottom">
							<h4>Travel Advisor</h4>
							<p>On the other hand, we denounce with righteous indignation.</p>
							<ul>
								<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
								<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
								<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
							</ul>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
	<!--//team-->
	<!--contact-->
	<div class="contact" id="contact">
		<div class="container">
			<div class="contact-main">
				<div class="contact-top">
					<h3>Say Hello</h3>
				</div>
				<div class="contact-bottom">
					<div class="col-md-6 contact-left">
						<form action="#" method="post">
							<input type="text"  name="name" placeholder="Name">
							<input type="text"  placeholder="Email" name="email">					
							<textarea rows="4" cols="50" name="your message" placeholder="Message"></textarea>
							<input type="submit"  value="Send Message">
						</form>
					</div>
					<div class="col-md-6 contact-right">
						<h4>Contact Info</h4>
						<p> Nemo enim ipsam voluptatem</p>
						<p>These cases are perfectly </p>
						<ul>
							<li><span class="glyphicon glyphicon-map-marker" aria-hidden="true"> </span>Professor at Hampden-Sydney</li>
							<li><span class="glyphicon glyphicon-phone" aria-hidden="true"> </span>+1284 485 978</li>			    	
							<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"> </span><a href="mailto:info@example.com">@example.com</a></li>
						</ul>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
	</div>
	<!--//contact-->
	<!--map-->
	<div class="map">
		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5662242.781648118!2d-2.27915352769371!3d46.13547129362329!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd54a02933785731%3A0x6bfd3f96c747d9f7!2sFrance!5e0!3m2!1sen!2sin!4v1457683084562" style="border:0" allowfullscreen> </iframe>
	</div>
	<!--//map-->
	<!--footer-->
	<div class="footer">
		<div class="container">
			<div class="footer-main">
				<div class="col-md-4 ftr-grid">
					<h4>Coaching</h4>
					<span class="ftr-line"> </span>
					<p>Lorem Ipsum is simply dummy text</p>
					<p>Typesetting Lorem Ipsum </p>
				</div>
				<div class="col-md-4 ftr-grid ftr-mid">
					 <h4>Social Media</h4>
					 <span class="ftr-line flm"> </span>
					   <ul>
							<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
						</ul>
				</div>
				<div class="col-md-4 ftr-grid ftr-rit">
					 <h4>Address</h4>
					 <span class="ftr-line flr"> </span>
					 <p>Hampden-Sydney College</p>
					 <p> in Virginia</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--//footer-->
	<div class="copy-agileinfo">
		<div class="container">
			<p>&copy; 2017 Hangout. All Rights Reserved | Design by <a href="http://www.51qianduan.com/">xmoban.cn</a></p>
		</div>
	</div>



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


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

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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