白色宽屏风格的旅游路线推荐整站网站源码下载



13 51 18



模板描述:白色宽屏风格 旅游路线推荐 整站网站,白色宽屏风格的旅游路线推荐整站网站源码下载html模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<link href="css/fontawesome-all.min.css" rel="stylesheet" type="text/css" media="all">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Niconne|Oleo+Script" rel="stylesheet">
<link href='css/simplelightbox.min.css' rel='stylesheet' type='text/css'>

2. 引入JS

<script src="js/jquery.min.v3.js"></script>
<script src="js/lightbox-plus-jquery.min.js"></script>
<script src="js/simple-lightbox.min.js"></script>
<script  src="js/bootstrap.min.js"></script>
<script  src="js/move-top.js"></script>
<script  src="js/easing.js"></script>
<script  src="js/SmoothScroll.min.js"></script>

3. HTML代码

<div class="agile-banner-main" id="home">
		<div class="banner-layer">
			<div class="header-main">
				<div class="row">
				<div class="col-lg-6 col-md-6 col-sm-6 w3_bl">
<div class='social-wrap'> 
<ul> 
<li><a class='facebook1'> <i class="fab fa-facebook-f"></i> </a></li> 
<li><a class='twitter1'><i class="fab fa-twitter"></i> </a></li> 
<li><a class='google-p1'> <i class="fab fa-google-plus-g"></i> </a></li>  
<li><a class='linkdin1' ><i class="fab fa-linkedin-in"></i> </a></li> 
</ul> 
  </div>
				</div>
				<div class="col-lg-6 col-md-6 col-sm-6 w3_br">
				<div class="w3_rt">
				 <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2 ml-auto" type="search" placeholder="Search" required="" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
	</div>
				</div>
				</div>
			</div>
			<!-- //menu -->
			<!-- banner -->
			<div class="container">
				<div class="banner-top">
					<div class="banner-info">
						<h1>
							<a href="index.html">
								GLOBETROT</a>
						</h1>
						<div class="about-p text-center">
							<span class="sub-title"></span>
							<span class="fa fa-cutlery" aria-hidden="true"></span>
							<span class="sub-title"></span>
						</div>
						<p>Dont Quit Your Travel Dream
							</p>
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse " id="navbarSupportedContent">
    <ul class="navbar-nav w-100 justify-content-around">
      <li class="nav-item active">
        <a class="nav-link" href="index.html">Home </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="about.html">About</a>
      </li>
	  <li class="nav-item">
        <a class="nav-link" href="gallery.html">Gallery</a>
      </li>
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="typography.html">Typography</a>
          <a class="dropdown-item" href="error.html">Error</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="contact.html">Contact</a>
      </li>
    </ul>
  </div>
</nav>
					</div>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!-- //banner -->
<!-- Accordian -->
<section class="accordian py-lg-5 py-md-4 py-sm-3 py-2">
<div class="container py-lg-5 py-md-4 py-sm-3 py-2">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 w3_acc">
<div id="accordion" role="tablist">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
        <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <h5 class="mb-0">  Travel Guides </h5>
        </a>
    </div>
    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div><div class="tlinks">Collect from <a href="http://www.51qianduan.com//"  title="网站模板">网站模板</a></div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
        <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        <h5 class="mb-0">  Diplomatic Visits</h5>
        </a>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingThree">
        <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          <h5 class="mb-0">Royal Visits </h5>
        </a>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
    <div class="card">
    <div class="card-header" role="tab" id="headingfour">
        <a class="collapsed" data-toggle="collapse" href="#collapsefour" aria-expanded="false" aria-controls="collapsefour">
         <h5 class="mb-0"> Adventure Travel</h5>
        </a>
    </div>
    <div id="collapsefour" class="collapse" role="tabpanel" aria-labelledby="headingfour" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 w3l_accr">
								<h3 class="mb-lg-3 mb-md-2 mb-sm-1 mb-1">Client Reviews</h3>
								<!-- Quote 1 -->
									<blockquote>
										<div class="test_grid mb-lg-5 mb-md-4 mb-sm-3 mb-2">
										<div class="row">
											<div class="col-lg-4 col-md-4 col-sm-4 text-center test_img">
												<img src="images/t1.jpg" class="img-fluid" alt="">
											</div>
											<div class="col-lg-8 col-md-8 col-sm-8  test_img_info">
												<p class="mb-lg-2 mb-md-1 mb-sm-1">Maecenas quis neque libero. Class aptent taciti.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
													auctor nec lacus ut tempor. Mauris.</p>
												<h6>Sara Lisbon</h6>
											</div>
											</div>
										</div>
									</blockquote>
								<!-- Quote 2 -->
								<div class="item">
									<blockquote>
										<div class="test_grid mb-lg-5 mb-md-4 mb-sm-3 mb-2">
										<div class="row">
											<div class="col-lg-4 col-md-4 col-sm-4 text-center test_img">
												<img src="images/t2.jpg" class="img-fluid" alt="">
											</div>
											<div class="col-lg-8 col-md-8 col-sm-8 test_img_info">
												<p class="mb-lg-2 mb-md-1 mb-sm-1">Lorem ipsum dolor sit amet. Class aptent taciti.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
													auctor nec lacus ut tempor. Mauris.</p>
												<h6>Jane Wearne</h6>
											</div>
											</div>
										</div>
									</blockquote>
								</div>
							<div class="item">
									<blockquote>
										<div class="test_grid">
										<div class="row">
											<div class="col-lg-4 col-md-4 col-sm-4 text-center test_img">
												<img src="images/t3.jpg" class="img-fluid" alt="">
											</div>
											<div class="col-lg-8 col-md-8 col-sm-8 test_img_info">
												<p class="mb-lg-2 mb-md-1 mb-sm-1">Lorem ipsum dolor sit amet. Class aptent taciti.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
													auctor nec lacus ut tempor. Mauris.</p>
												<h6>Jade Amy</h6>
											</div>
											</div>
										</div>
									</blockquote>
								</div>
							</div>
</div>
</div>
</section>
<!-- /Accordian -->
<!-- Team -->
<section class="team py-lg-5 py-md-4 py-sm-3 py-2"> 
<div class="w3_tm1 py-lg-5 py-md-4 py-sm-3 py-2">
<h3 class="mb-lg-3 mb-md-2 mb-sm-1 mb-1">Our Team</h3>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner ">
    <div class="carousel-item active">
	<div class="container ">
      <div class="row">
	  <div class="col-lg-3 col-md-3 col-sm-3 w3_c1">
	  <img src="images/tm1.jpg" alt="" class="img-fluid">
	  <h4>Jade</h4>
	  <p>CEO</p>
	  </div>
	  <div class="col-lg-3 col-md-3 col-sm-3 w3_c1">
	  <img src="images/tm2.jpg" alt="" class="img-fluid">
	  <h4>Amy</h4>
	  <p>COO</p>
	  </div>
	  <div class="col-lg-3 col-md-3 col-sm-3 w3_c1">
	  <img src="images/tm3.jpg" alt="" class="img-fluid">
	  <h4>Scott</h4>
	  <p>ACEO</p>
	  </div>
	  <div class="col-lg-3 col-md-3 col-sm-3 w3_c1">
	  <img src="images/tm4.jpg" alt="" class="img-fluid">
	  <h4>Ade</h4>
	  <p>MD</p>
	  </div>
	  </div>
	  </div>
    </div>
    <div class="carousel-item">
      <div class="container">
      <div class="row">
	  <div class="col-lg-3 col-md-3 col-sm-3 w3_c1">
	  <img src="images/tm5.jpg" alt="" class="img-fluid">
	  <h4>Hall</h4>
	  <p>Manager</p>
	  </div>
	  <div class="col-lg-3 col-md-3 col-sm-3 w3_c1">
	  <img src="images/tm6.jpg" alt="" class="img-fluid">
	  <h4>Nicole</h4>
	  <p>Guide</p>
	  </div>
	  <div class="col-lg-3 col-md-3 col-sm-3 w3_c1">
	  <img src="images/tm7.jpg" alt="" class="img-fluid">
	  <h4>Andre</h4>
	  <p>HR</p>
	  </div>
	  <div class="col-lg-3 col-md-3 col-sm-3 w3_c1">
	  <img src="images/tm8.jpg" alt="" class="img-fluid">
	  <h4>Michel</h4>
	  <p>Officer</p>
	  </div>
	  </div>
	  </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
</section>
<!-- /Team -->
<!-- Stats -->
	<div class="w3ls-stats agile-section py-lg-5 py-md-4 py-sm-3 py-2">
		<div class="container py-lg-5 py-md-4 py-sm-3 py-2">
			<div class="shortcode_title shortcode-title-style_1"><h3 class="title_primary">why choose us?</h3></div>
			<div class="row">
			<div class="col-lg-6 col-md-6 col-sm-6 stats news-w3layouts">
					<h5>Integer non felis eget arcu vehicula tincidunt. Aenean lectus felis, blandit vitae hendrerit a, hendrerit eget mi. </h5>
					<p>Nam placerat pellentesque nisi a sodales. Mauris pellentesque felis cursus ligula tempus lacinia. Pellentesque gravida hendrerit mauris, non viverra odio laoreet ut. Sed euismod leo quis nisl fermentum rutrum.</p>
			</div>
			<div class="col-lg-6 col-md-6 col-sm-6 stats-info-right">
				<div class="stats-info-text">
					<h4>17 </h4>
					<h5>years</h5>
					<p>of excellence</p>
				</div>
			</div>
			</div>
		</div>
	</div>
<!-- //Stats -->
<!-- Popular Places -->
<section class="gallery py-lg-5 py-md-4 py-sm-3 py-2">
	<div class="gallery py-lg-5 py-md-4 py-sm-3 py-2">
			<h3 class="agile-title mb-lg-3 mb-md-2 mb-sm-1 mb-1">Popular Places</h3>
		<div class="row">
			<div class="col-md-3 col-sm-3  w3gallery-grids">
				<a href="images/g1.jpg" class="imghvr-hinge-right figure">
					<img src="images/g1.jpg" alt="" title="Globetrot" />
				</a>
			</div>
			<div class="col-md-3 col-sm-3  w3gallery-grids">
				<a href="images/g2.jpg" class="imghvr-hinge-right figure">
					<img src="images/g2.jpg" alt="" title="Globetrot" />
				</a>
			</div>
			<div class="col-md-3 col-sm-3  w3gallery-grids">
				<a href="images/g3.jpg" class="imghvr-hinge-right figure">
					<img src="images/g3.jpg" alt="" title="Globetrot" />
				</a>
			</div>
			<div class="col-md-3 col-sm-3  w3gallery-grids">
				<a href="images/g4.jpg" class="imghvr-hinge-right figure">
					<img src="images/g4.jpg" alt="" title="Globetrot" />
				</a>
			</div>
			<div class="col-md-3 col-sm-3  w3gallery-grids">
				<a href="images/g5.jpg" class="imghvr-hinge-right figure">
					<img src="images/g5.jpg" alt="" title="Globetrot" />
				</a>
			</div>
			<div class="col-md-3 col-sm-3  w3gallery-grids">
				<a href="images/g6.jpg" class="imghvr-hinge-right figure">
					<img src="images/g6.jpg" alt="" title="Globetrot" />
				</a>
			</div>
			<div class="col-md-3 col-sm-3 col-xs-4 w3gallery-grids">
				<a href="images/g7.jpg" class="imghvr-hinge-right figure">
					<img src="images/g7.jpg" alt="" title="Globetrot" />
				</a>
			</div>
			<div class="col-md-3 col-sm-3  w3gallery-grids">
				<a href="images/g8.jpg" class="imghvr-hinge-right figure">
					<img src="images/g8.jpg" alt="" title="Globetrot" />
				</a>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	</section>
	<!-- //Popular Places -->
<!-- footer -->
<footer>
<section class="footer py-lg-5 py-md-4 py-sm-3 py-2"> 
<div class="footer py-lg-5 py-md-4 py-sm-3 py-2">
	<div class="container">
	<div class="footer_agile_inner_info_w3l">
	<div class="row">
		<div class="col-md-3 footer-left">
			<h2><a href="index.html">Globetrot </a></h2>
			<p>Lorem ipsum quia dolor
			sit amet, consectetur, adipisci velit, sed quia non 
			numquam eius modi tempora.</p>
			<ul class="social-nav model-3d-0 footer-social w3_agile_social two">
											<li><a href="#" class="facebook">
											<div class="front"><i class="fab fa-facebook-f"></i></div>
											<div class="back"><i class="fab fa-facebook-f"></i></div></a></li>
											<li><a href="#" class="twitter"> 
											<div class="front"><i class="fab fa-twitter"></i></div>
											<div class="back"><i class="fab fa-twitter"></i></div></a></li>
											<li><a href="#" class="instagram">
											<div class="front"><i class="fab fa-instagram"></i></div>
											<div class="back"><i class="fab fa-instagram"></i></div></a></li>
											<li><a href="#" class="pinterest">
											<div class="front"><i class="fab fa-linkedin-in"></i></div>
											<div class="back"><i class="fab fa-linkedin-in"></i></div></a></li>
														</ul>
		</div>
		<div class="col-md-3 footer-right">
			<div class="sign-grds">
				<div class="sign-gd">
					<h4>Information </h4>
					<ul>
		<li><a href="#">Customer Service</a></li>
        <li><a href="#">Hotels</a></li>
        <li><a href="#">Tourist Places</a></li>
		<li><a href="#">Details</a></li>
		<li><a href="#">Timings</a></li>
					</ul>
				</div>
				</div>
			</div>
				<div class="col-md-3 sign-gd-two">
					<div class="sign-grds">
				<div class="sign-gd">
					<h4>Quick links</h4>
					<ul>
		<li>
        <a  href="index.html">Home </a>
      </li>
      <li >
        <a  href="about.html">About</a>
      </li>
	  <li >
        <a  href="gallery.html">Gallery</a>
      </li>
			<li><a  href="typography.html">Typography</a></li>
          <li><a  href="error.html">Error</a></li>	
 <li >
        <a  href="contact.html">Contact</a>
      </li>		  
					</ul>
				</div>
				</div>
				</div>
				<div class="col-md-3 sign-gd-two">
					<div class="sign-grds">
				<div class="sign-gd">
					<h4>Services</h4>
					<ul>
		<li><a href="#">Guides</a></li>
        <li><a href="#" >Documentation</a></li>
        <li><a href="#">Passpoprts</a></li>
		<li><a href="#">Visas</a></li>
		<li><a href="#">Tickets</a></li>
					</ul>
				</div>
				</div>
				</div>
		</div>
	</div>
</div>
</div>
</footer>
<div class="copyright py-lg-3 py-md-2 py-sm-1 py-1">
<p class="copy-right">Copyright &copy; 2018.Company name All rights reserved.More Templates <a href="http://www.51qianduan.com//" target="_blank" title="PHP中文网">PHP中文网</a> - Collect from <a href="http://www.51qianduan.com//xiazai/code" title="网页模板" target="_blank">网页模板</a></p>
</div>
<!-- //footer -->
<!--  light box js -->
	<!-- //light box js-->
<script  src="js/SmoothScroll.min.js"></script>	
	<script>
		$(function () {
			var gallery = $('.w3gallery-grids a').simpleLightbox({
				navText: ['&lsaquo;', '&rsaquo;']
			});
		});
	</script>
	<!-- Light-box css -->
	<!-- //simple-lightbox -->
<!-- start-smoth-scrolling -->
<!-- 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 -->
<!-- scrolling script -->
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script> 
<!-- //scrolling script -->
<!--//start-smoth-scrolling -->



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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