红色欧美风格的运输企业网站源码下载



17 64 22



模板描述:红色欧美风格 运输 企业网站,红色欧美风格的运输企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/lightbox.css">

2. 引入JS

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

3. HTML代码

<!-- header -->
	<div class="header-top">
		<div class="container">
			<div class="logo-top">
				<div class="logo-top-left">
					<p>autem quibusdam et aut officiis debitis</p>
				</div>
				<div class="logo-top-right">
					<ul>
						<li><a href="#" class="f1"> </a></li>
						<li><a href="#" class="f2"> </a></li>
						<li><a href="#" class="f3"> </a></li>
						<li><a href="#" class="f4"> </a></li>
						<li><a href="#" class="f5"> </a></li>
						<div class="clearfix"></div>
					</ul>
				</div>
				<div class="logo-top-lft">
					<p><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>Your First Visit? Call For Info<span>+0646-784-900</span></p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="logo">
				<a href="index.html"><i class="glyphicon glyphicon-road" aria-hidden="true"></i>Transportation<span>We Care About Your Cargo</span></a>
			</div>
			<div class="header-nav">
				<nav class="navbar navbar-default">
					<!-- 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>
					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li class="hvr-bounce-to-bottom active"><a href="index.html">Home</a></li>
							<li class="hvr-bounce-to-bottom"><a href="#about" class="scroll">About</a></li>
							<li class="hvr-bounce-to-bottom"><a href="#services" class="scroll">Services</a></li>
							<li class="hvr-bounce-to-bottom"><a href="#pricing" class="scroll">Pricing</a></li>
							<li class="hvr-bounce-to-bottom"><a href="#contact" class="scroll">Contact Us</a></li>
						</ul>
						<div class="search">
							<input type="text" class="textbox" value="Search here..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search here...';}">
						</div>
					</div><!-- /.navbar-collapse -->
				</nav>
			</div>
		</div>
	</div>
<!-- //header -->
<!-- banner -->
	<div class="banner">
		<div class="container">
			<div class="banner-left">
				<div class="view view-eighth vie">
					<img src="images/1.jpg" alt=" " class="img-responsive" />
					<div class="mask">
						<h2 class="late">Letraset sheets</h2>
						<p>with the release Letraset sheets Lorem voluptatibus maiores alias consequatur 
						aut perferendis doloribus omnis voluptas assumenda est, omnis asperiores repellat</p>
					</div>
				</div>
			</div>
			<div class="banner-right">
				<div class="view view-eighth">
					<img src="images/2.jpg" alt=" " class="img-responsive" />
					<div class="mask">
						<h2>Letraset sheets</h2>
						<p>with the release Letraset sheets Lorem</p>
					</div>
				</div>
				<div class="view view-eighth">
					<img src="images/3.jpg" alt=" " class="img-responsive" />
					<div class="mask">
						<h2>Letraset sheets</h2>
						<p>with the release Letraset sheets Lorem</p>
					</div>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- //banner -->
<!-- about -->
	<div class="about" id="about">
		<div class="container">
			<div class="about-grids">
				<div class="col-md-4 about-grid">
					<div class="globe">
						<span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
					</div>
					<h3>omnis voluptas assumenda est, omnis</h3>
					<p>Itaque earum rerum hic tenetur a sapiente delectus, 
						ut aut reiciendis voluptatibus maiores alias consequatur 
						aut perferendis.</p>
				</div>
				<div class="col-md-4 about-grid">
					<div class="globe">
						<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
					</div>
					<h3>omnis voluptas assumenda est, omnis</h3>
					<p>Itaque earum rerum hic tenetur a sapiente delectus, 
						ut aut reiciendis voluptatibus maiores alias consequatur 
						aut perferendis.</p>
				</div>
				<div class="col-md-4 about-grid">
					<div class="globe">
						<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
					</div>
					<h3>omnis voluptas assumenda est, omnis</h3>
					<p>Itaque earum rerum hic tenetur a sapiente delectus, 
						ut aut reiciendis voluptatibus maiores alias consequatur 
						aut perferendis.</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<div class="about-bottom">
		<div class="container">
			<div class="about-bottom-grids">
				<div class="col-md-7 about-bottom-grid-left">
					<h3>Our History</h3>
					<h4>optio cumque nihil impedit quo minus id quod maxime placeat 
						facere possimus, omnis voluptas assumenda est, omnis</h4>
					<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
						consectetur, adipisci velit, sed quia non numquam eius modi tempora 
						incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
						Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis 
						suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.
						Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
						accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
						quae ab illo inventore veritatis et quasi architecto beatae vitae
						dicta sunt explicabo.</p>
				</div>
				<div class="col-md-5 about-bottom-grid-right">
					<h3>Testimonials</h3>
					<div class="about-bottom-grid-right-grid">
						<div class="about-bottom-grid-right-grdl">
							<img src="images/6.jpg" alt=" " class="img-responsive" />
						</div>
						<div class="about-bottom-grid-right-grdr">
							<p><span>N</span>eque porro quisquam est, 
								qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
								sed quia non numquam eius modi.</p>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="about-bottom-grid-right-grid">
						<div class="about-bottom-grid-right-grdl">
							<img src="images/7.jpg" alt=" " class="img-responsive" />
						</div>
						<div class="about-bottom-grid-right-grdr">
							<p><span>R</span>eque porro quisquam est, 
								qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
								sed quia non numquam eius modi.</p>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //about -->
<!-- services -->
	<div class="services" id="services">
		<div class="container">
			<h3>Services</h3>
			<div class="services-grids">
				<div class="col-md-4 services-grid">
					<div class="services-grd">
						 <div class="box maxheight">
							<a class="example-image-link" href="images/8.jpg" data-lightbox="example-1" data-title="Guidance."><img class="example-image img-responsive" src="images/8.jpg">
							</a>
						</div>
						<h4>consequatur aut perferendis</h4>
						<p>Itaque earum rerum hic tenetur a sapiente delectus, 
							ut aut reiciendis voluptatibus maiores alias consequatur aut 
							perferendis.</p>
					</div>
				</div>
				<div class="col-md-4 services-grid">
					<div class="services-grd">
						 <div class="box maxheight">
							<a class="example-image-link" href="images/9.jpg" data-lightbox="example-1" data-title="Guidance."><img class="example-image img-responsive" src="images/9.jpg">
							</a>
						</div>
						<h4>consequatur aut perferendis</h4>
						<p>Itaque earum rerum hic tenetur a sapiente delectus, 
							ut aut reiciendis voluptatibus maiores alias consequatur aut 
							perferendis.</p>
					</div>
				</div>
				<div class="col-md-4 services-grid">
					<div class="services-grd">
						 <div class="box maxheight">
							<a class="example-image-link" href="images/10.jpg" data-lightbox="example-1" data-title="Guidance."><img class="example-image img-responsive" src="images/10.jpg">
							</a>
						</div>
						<h4>consequatur aut perferendis</h4>
						<p>Itaque earum rerum hic tenetur a sapiente delectus, 
							ut aut reiciendis voluptatibus maiores alias consequatur aut 
							perferendis.</p>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<!-- light-box -->
			<!-- //light-box -->																																																																																															
		</div>
	</div>
	<div class="services-bottom">
		<div class="container">
			<h3>Featured Services</h3>
			<div class="services-bottom-grids">
				<div class="col-md-6 services-bottom-grid">
					<div class="col-xs-3 services-bottom-grd-left">
						<div class="time-service">
							<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
						</div>
					</div>
					<div class="col-xs-9 services-bottom-grd-right">
						<h4>vel illum qui dolorem 
							eum fugiat quo voluptas nulla</h4>
					</div>
					<p>To take a trivial example, which of us ever undertakes laborious 
						physical exercise, except to obtain some advantage from it
						doloribus asperiores repellat.</p>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-6 services-bottom-grid">
					<div class="col-xs-3 services-bottom-grd-left">
						<div class="time-service">
							<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
						</div>
					</div>
					<div class="col-xs-9 services-bottom-grd-right">
						<h4>vel illum qui dolorem 
							eum fugiat quo voluptas nulla</h4>
					</div>
					<p>To take a trivial example, which of us ever undertakes laborious 
						physical exercise, except to obtain some advantage from it
						doloribus asperiores repellat.</p>
					<div class="clearfix"> </div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="services-bottom-grids">
				<div class="col-md-6 services-bottom-grid">
					<div class="col-xs-3 services-bottom-grd-left">
						<div class="time-service">
							<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
						</div>
					</div>
					<div class="col-xs-9 services-bottom-grd-right">
						<h4>vel illum qui dolorem 
							eum fugiat quo voluptas nulla</h4>
					</div>
					<p>To take a trivial example, which of us ever undertakes laborious 
						physical exercise, except to obtain some advantage from it
						doloribus asperiores repellat.</p>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-6 services-bottom-grid">
					<div class="col-xs-3 services-bottom-grd-left">
						<div class="time-service">
							<span class="glyphicon glyphicon-fire" aria-hidden="true"></span>
						</div>
					</div>
					<div class="col-xs-9 services-bottom-grd-right">
						<h4>vel illum qui dolorem 
							eum fugiat quo voluptas nulla</h4>
					</div>
					<p>To take a trivial example, which of us ever undertakes laborious 
						physical exercise, except to obtain some advantage from it
						doloribus asperiores repellat.</p>
					<div class="clearfix"> </div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //services -->
<!-- pricing -->
	<div id="pricing" class="pricing">
		<div class="container">
			<div class="price">
				<h2>Pricing</h2>
			</div>
			<div class="basic">
				<div class="business">
					<h2>Basic</h2>
					<p>Best for small business</p>
				</div>
				<div class="value">
					<p>19,99$</p>
				</div>
				<ul>
					<li><span>50</span> Projects</li>
					<li><span>20</span> Files</li>
					<li><span>Full</span> Support</li>
					<li class="gd"><span>24h</span> Ready</li>
				</ul>
				<div class="buy-me">
					<a href="#">Buy Me</a>
				</div>
			</div>
			<div class="basic basic-mid">
				<div class="business">
					<h2>Premium</h2>
					<p>Best for medium business</p>
				</div>
				<div class="value">
					<p>49,99$</p>
				</div>
				<ul>
					<li><span>50</span> Projects</li>
					<li><span>20</span> Files</li>
					<li><span>Full</span> Support</li>
					<li class="gd"><span>24h</span> Ready</li>
				</ul>
				<div class="buy-me">
					<a href="#">Buy Me</a>
				</div>
			</div>
			<div class="basic">
				<div class="business">
					<h2>Deluxe</h2>
					<p>Best for big business</p>
				</div>
				<div class="value">
					<p>99,99$</p>
				</div>
				<ul>
					<li><span>50</span> Projects</li>
					<li><span>20</span> Files</li>
					<li><span>Full</span> Support</li>
					<li class="gd"><span>24h</span> Ready</li>
				</ul>
				<div class="buy-me">
					<a href="#">Buy Me</a>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- //pricing -->
<!-- newsletter -->
	<div class="newsletter">
		<div class="container">
			<h3>Subscribe Our Newsletter</h3>
			<form>
				<input type="text" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}" required="">
				<input type="email" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" required="">
				<input type="submit" value="Submit" >
			</form>
		</div>
	</div>
<!-- //newsletter -->
<!-- contact -->
	<div id="contact" class="contact">
		<div class="container">
			<div class="contact-grids">
				<div class="col-md-3 contact-grid">
					<h3>Contact Info</h3>
					<ul>
						<li class="dot"><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i>Address:4800 Jewell Road<span>Korea 09F 89MR</span></li>
						<li class="Phone"><i class="glyphicon glyphicon-phone" aria-hidden="true"></i>+0955 670 204</li>
						<li class="mail"><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:info@example.com" class="mail">Example.com</a></li>
					</ul>
				</div>
				<div class="col-md-5 contact-grid">
					<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2564.958900464012!2d36.23097800000001!3d49.993379999999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4127a0f009ab9f07%3A0xa21e10f67fa29ce!2sGeorgia+Education+Center!5e0!3m2!1sen!2sin!4v1436943860334" frameborder="0" style="border:0" allowfullscreen></iframe>
				</div>
				<div class="col-md-4 contact-grid">
					<h3>Reservation</h3>
					<form>
						<input type="text" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}" required="">
						<input type="email" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" required="">
						<input type="text" value="Telephone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Telephone';}" required="">
						<textarea type="text"  onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message...';}" required="">Message...</textarea>
						<input type="submit" value="Send" >
					</form>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //contact -->
<!-- footer -->
	<div class="footer">
		<div class="container">	
			<div class="footer-grids">
				<div class="col-md-4 footer-grid">
					<h3>Disclaimer</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
						eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
						minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
						ex ea commodo consequat.</p>
					<ul>
						<li><a href="#" class="facebook"> </a></li>
						<li><a href="#" class="p"> </a></li>
						<li><a href="#" class="in"> </a></li>
						<li><a href="#" class="be"> </a></li>
						<li><a href="#" class="u-tube"> </a></li>
					</ul>
				</div>
				<div class="col-md-4 footer-grid">
					<h3>Our Dealers</h3>
					<div class="dealer-grids">
						<div class="dealer-grid-left">
							<a href="#"><img src="images/6.jpg" alt=" " class="img-responsive" /></a>
						</div>
						<div class="dealer-grid-right">
							<h4><a href="#">soluta nobis est eligendi</a></h4>
							<p>Temporibus autem quibusdam et aut officiis debitis 
								aut rerum necessitatibus.</p>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="dealer-grids">
						<div class="dealer-grid-left">
							<a href="#"><img src="images/7.jpg" alt=" " class="img-responsive" /></a>
						</div>
						<div class="dealer-grid-right">
							<h4><a href="#">soluta nobis est eligendi</a></h4>
							<p>Temporibus autem quibusdam et aut officiis debitis 
								aut rerum necessitatibus.</p>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="col-md-4 footer-grid">
					<h3>Flickr Posts</h3>
					<div class="footer-grds">
						<div class="footer-grd">
							<img src="images/4.jpg" alt=" " class="img-responsive" />
						</div>
						<div class="footer-grd">
							<img src="images/5.jpg" alt=" " class="img-responsive" />
						</div>
						<div class="footer-grd">
							<img src="images/4.jpg" alt=" " class="img-responsive" />
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="footer-grds">
						<div class="footer-grd">
							<img src="images/5.jpg" alt=" " class="img-responsive" />
						</div>
						<div class="footer-grd">
							<img src="images/4.jpg" alt=" " class="img-responsive" />
						</div>
						<div class="footer-grd">
							<img src="images/5.jpg" alt=" " class="img-responsive" />
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<div class="footer-copy">
		<div class="container">	
			<p>Copyright © 2015 Transportation. All rights reserved | Design by <a href="http://www.51qianduan.com/">xmoban.cn</a></p>
		</div>
	</div>
<!-- //footer -->
<!-- for bootstrap working -->
<!-- //for bootstrap working -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 扁平化 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 pc+wap 移动+电脑 手机+电脑 红色 简洁 简约 简单 运输 货运 快递 货运公司 快递公司 运输公司

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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