红色宽屏样式html5旅游交通网页模板代码下载



5 19 7



模板描述:红色 宽屏 html5 旅游交通 网页模板 代码下载,红色宽屏样式html5旅游交通网页模板代码下载html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/font-awesome.css">

2. HTML代码

<div class="main-top py-1">
<!-- header -->
	<header>
		<div class="container-fluid px-lg-5">
			<nav class="py-4">
                        <div class="logo" id="logo">
                            <h1> <a href="index.html">Itinerate</a>
                            </h1>
                        </div>
                        <label for="drop" class="toggle">Menu</label>
                        <input type="checkbox" id="drop">
                        <ul class="menu mt-2">
                            <li class="mr-lg-4 mr-3 active"><a href="index.html">Home</a></li>
                            <li class="mr-lg-4 mr-3"><a href="#about" class="scroll">About</a></li>
							<li class="mr-lg-4 mr-3"><a href="#news" class="scroll">News</a></li>
                            <li class="mr-lg-4 mr-3"><a href="#services" class="scroll">Services</a></li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </nav>
		</div>
	</header>
	<!-- //header -->
	<!-- banner -->
	<div class="main-w3pvt">
		<div class="container-fluid">
			<div class="row">
				<div class="style-banner">
					<h2 class="text-white">Welcome to Travel</h2>
					<p class="mt-4 mx-auto text-white">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. </p>
					<a href="#about" class="scroll"><span class="fa fa-arrow-down"></span></a>
				</div>
			</div>
		</div>
	</div>
	<!-- //banner -->
</div>
 <section class="diam" id="about">
	<div class="diam_top py-5">
		<div class="container py-lg-5">
			<div class="row about-info-diam">
					<div class="col-md-4 about-diam about-diam1">
						<h4>Integer porttitor mollisar lorem molestie</h4>
						<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit </p>
					</div>
					<div class="col-md-4 about-diam about-diam2">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. Proin ac fermentum est.  </p>
					</div>
					<div class="col-md-4 about-diam about-diam3">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. Proin ac fermentum est.  </p>
					</div>
			</div>
		</div>	
	</div>	
</section>
	<!-- what -->
	<section class="what right" id="news">
		<div class="what_top">
			<h3>Fusce blandit ultrices in accumsan orci </h3>
			<h6 class="mt-3"> Sapien sed elementum egestas dolore condimentum. </h6>
			<p class="wtp mt-3">Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum. Fusce blandit ultrices sapien, in accumsan orci rhoncus eu. Sed sodales venenatis arcu, id varius justo euismod in. Curabitur egestas consectetur magna.</p>
			<a href="#" class="btn button-style-1 mt-sm-5 mt-4 scroll">Learn More</a>
		</div>
	</section>
	<!-- //what -->
	<!-- who -->
	<section class="who left">
		<div class="who_top">
			<h3>Fusce blandit ultrices in accumsan orci </h3>
			<h6 class="mt-3"> Sapien sed elementum egestas dolore condimentum. </h6>
			<p class="wtp mt-3">Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum. Fusce blandit ultrices sapien, in accumsan orci rhoncus eu. Sed sodales venenatis arcu, id varius justo euismod in. Curabitur egestas consectetur magna.</p>
			<a href="#" class="btn button-style-1 mt-sm-5 mt-4 scroll">Learn More</a>
		</div>
	</section>
	<!-- //what -->
	 <!-- //what we do -->
	 <div style="position:relative;display:block;">
<section class="what_you py-5" id="services">
	<div class="container py-lg-5">
	<h4 class="agile-ser_bot text-capitalize text-white text-center">Services</h4>
	<h6 class="mt-3 text-center"> Ante metus praesent faucibus ante integer id accumsan eleifend </h6>
		<div class="row about-info-grids text-center mt-3 py-md-5">
				<div class="col-lg-4 col-md-6 about-info about-info1">
					<span class="fa fa-area-chart"></span>
					<h4>Sit amet</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
				</div>
				<div class="col-lg-4 col-md-6 about-info about-info2">
					<span class="fa fa-comment"></span>
					<h4>Adipisicing</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
				</div>
				<div class="col-lg-4 col-md-6 about-info about-info3">
					<span class="fa fa-paper-plane"></span>
					<h4>Dolor sit</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
				</div>
				<div class="col-lg-4 col-md-6 about-info about-info4 mt-5">
					<span class="fa fa-file"></span>
					<h4>Sit amet</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
				</div>
				<div class="col-lg-4 col-md-6 about-info about-info5 mt-5">
					<span class="fa fa-lock"></span>
					<h4>Adipisicing</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
				</div>
				<div class="col-lg-4 col-md-6 about-info about-info6 mt-5">
					<span class="fa fa-flask"></span>
					<h4>Dolor sit</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
				</div>
		</div>
	</div>		
</section>
</div>
	 <!-- what we do -->
<!-- services bottom -->
	<section class="serv_bottom py-5">
		<div class="container py-md-4 mt-md-3">
			<h4 class="agile-ser_bot text-capitalize text-white text-center">Subscribe For New Updates</h4>
			<h6 class="mt-3 text-center"> Ante metus praesent faucibus ante integer id accumsan eleifend </h6>	
				<div class="newsright mt-md-3 pt-5">
					<form action="#" method="post">
						<input type="email" placeholder="Enter your email..." name="email" required="">
						<button class="btn" type="submit">Subscribe</button>
					</form>
				</div>
		</div>
	</section>
<!-- //services bottom -->
	<div class="cpy-right text-center py-5">
		<ul class="social_section_1info pt-lg-4 mb-lg-4">
			<li><a href="#"><span class="fa fa-facebook"></span></a></li>
			<li><a href="#"><span class="fa fa-twitter"></span></a></li>
			<li><a href="#"><span class="fa fa-google"></span></a></li>
			<li><a href="#"><span class="fa fa-linkedin"></span></a></li>
		</ul>
        <p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a>
        </p>
    </div>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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