黑色扁平风格html5豪车汽车维修店网页模板代码下载



3 8 3



模板描述:黑色 扁平 html5 豪车汽车维修店 网页模板代码下载,黑色扁平风格html5豪车汽车维修店网页模板代码下载html模板下载

代码结构

1. 引入CSS

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

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.backTop.min.js"></script>

3. HTML代码

	<!-- /////////////////////////////////////////Navigation -->
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" 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>
				<a class="navbar-brand" href="#">
					<img src="images/logo.png" class="hidden-xs" alt="">
					<h3 class="visible-xs">Automobile</h3>
				</a>
			</div>
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav navbar-right">
					<li>
                        <a class="page-scroll" href="index.html">Home</a>
                    </li>
					<li>
                        <a class="page-scroll" href="single.html">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="archive.html">Staff</a>
                    </li>
					<li>
                        <a class="page-scroll" href="archive.html">Portfolio</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="contact.html">Contact Us</a>
                    </li>
				</ul>
			</div>
		</div>
	</nav>
	<header>
		<!-- Carousel -->
    	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
			  	<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
			</ol>
			<!-- Wrapper for slides -->
			<div class="carousel-inner">
			    <div class="item active">
			    	<img src="images/1.jpg" alt="First slide">
                    <!-- Static Header -->
                    <div class="header-text">
                        <div class="col-md-12 text-center">
                            <h2>Welcome to Automobile</h2>
                            <br>
                            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
                            <br>
                        </div>
                    </div><!-- /header-text -->
			    </div>
			    <div class="item">
			    	<img src="images/2.jpg" alt="Second slide">
			    	<!-- Static Header -->
                    <div class="header-text">
                        <div class="col-md-12 text-center">
                            <h2>The World's 50 Best Automobile</h2>
                            <br>
                            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
                            <br>
                        </div>
                    </div><!-- /header-text -->
			    </div>
			    <div class="item">
			    	<img src="images/3.jpg" alt="Third slide">
			    	<!-- Static Header -->
                    <div class="header-text">
                        <div class="col-md-12 text-center">
                            <h2>Consectetur adipiscing elit</h2>
                            <br>
                            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
                            <br>
                        </div>
                    </div><!-- /header-text -->
			    </div>
			</div>
			<!-- Controls -->
			<a href="https://www.51qianduan.com/">51前端</a>
			<a href="https://www.51qianduan.com/">51前端</a>
		</div><!-- /carousel -->
	</header>
	<!-- Header -->
	<a href="https://www.51qianduan.com/">51前端</a>
	<!-- /Back To Top -->
	<!-- /////////////////////////////////////////Content -->
	<div id="page-content" class="index-page">
		<!-- ////////////Content Box 01 -->
		<section class="box-content box-1 box-bg-black">
			<div class="no-gutter">
				<div class="col-sm-6 fix-right">
					<div class="box-image">
						<img class="media__image " src="images/4.jpg">
					</div>
				</div>
				<div class="col-sm-6">
					<div class="box-text">
						<div class="heading">
							<h2>welcome</h2>
							<span>RENT THE CAR <br>OF YOUR DREAMS</span>
						</div>
						<p>We specialize in exotic and luxury car rental. Whether you are looking for a Mercedes, a luxury SUVs, Jaguar convertible, Range Rover, BMW, Porsche, Cadillac, Bentley, Corvette, Hummer, Viper, or a conversion van, 15 passenger vans, a new hybrid or sport convertible car to rent, you have come to the right place. We carry only the newest models of exotic cars available and keep our rental cars in new condition all with very low mileage.</p>
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</section>
		<!-- ////////////Content Box 02 -->
		<section class="box-content box-2 box-bg-white">
			<div class="no-gutter">
				<div class="col-sm-6">
					<div class="box-image">
						<img class="media__image " src="images/14.jpg">
					</div>
				</div>
				<div class="col-sm-6">
					<div class="box-text">
						<div class="heading">
							<h2>About</h2>
							<span>RENT THE CAR <br>OF YOUR DREAMS</span>
						</div>
						<p>We specialize in exotic and luxury car rental. Whether you are looking for a Mercedes, a luxury SUVs, Jaguar convertible, Range Rover, BMW, Porsche, Cadillac, Bentley, Corvette, Hummer, Viper, or a conversion van, 15 passenger vans, a new hybrid or sport convertible car to rent, you have come to the right place. We carry only the newest models of exotic cars available and keep our rental cars in new condition all with very low mileage.</p>
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</section>
		<!-- ////////////Content Box 03 -->
		<section class="box-content box-3">
			<div class="no-gutter">
				<div class="col-lg-4 col-sm-6">
					<a href="#" class="portfolio-box">
						<img src="images/5.jpg" class="img-responsive" alt="">
						<div class="portfolio-box-caption">
							<div class="portfolio-box-caption-content">
								<div class="project-category text-faded">
									Category
								</div>
								<div class="project-name">
									Project Name
								</div>
							</div>
						</div>
					</a>
				</div>
				<div class="col-lg-4 col-sm-6">
					<a href="#" class="portfolio-box">
						<img src="images/6.jpg" class="img-responsive" alt="">
						<div class="portfolio-box-caption">
							<div class="portfolio-box-caption-content">
								<div class="project-category text-faded">
									Category
								</div>
								<div class="project-name">
									Project Name
								</div>
							</div>
						</div>
					</a>
				</div>
				<div class="col-lg-4 col-sm-6">
					<a href="#" class="portfolio-box">
						<img src="images/7.jpg" class="img-responsive" alt="">
						<div class="portfolio-box-caption">
							<div class="portfolio-box-caption-content">
								<div class="project-category text-faded">
									Category
								</div>
								<div class="project-name">
									Project Name
								</div>
							</div>
						</div>
					</a>
				</div>
				<div class="col-lg-4 col-sm-6">
					<a href="#" class="portfolio-box">
						<img src="images/8.jpg" class="img-responsive" alt="">
						<div class="portfolio-box-caption">
							<div class="portfolio-box-caption-content">
								<div class="project-category text-faded">
									Category
								</div>
								<div class="project-name">
									Project Name
								</div>
							</div>
						</div>
					</a>
				</div>
				<div class="col-lg-4 col-sm-6">
					<a href="#" class="portfolio-box">
						<img src="images/9.jpg" class="img-responsive" alt="">
						<div class="portfolio-box-caption">
							<div class="portfolio-box-caption-content">
								<div class="project-category text-faded">
									Category
								</div>
								<div class="project-name">
									Project Name
								</div>
							</div>
						</div>
					</a>
				</div>
				<div class="col-lg-4 col-sm-6">
					<a href="#" class="portfolio-box">
						<img src="images/10.jpg" class="img-responsive" alt="">
						<div class="portfolio-box-caption">
							<div class="portfolio-box-caption-content">
								<div class="project-category text-faded">
									Category
								</div>
								<div class="project-name">
									Project Name
								</div>
							</div>
						</div>
					</a>
				</div>
			</div>
			<div class="clear"></div>
		</section>
	</div>
	<footer>
		<div class="wrap-footer">
			<div class="no-gutter">
				<div class="col-md-4">
					<div class="box-text">
						<div class="footer-heading">
							<h2>Contacts</h2>
						</div>
						<p><i class="fa fa-map-marker"></i> My Company Glasgow D04 89GR</p>
						<p><i class="fa fa-phone"></i> 800-2345-6789</p>
						<p><i class="fa fa-envelope-o"></i> info@demolink.org</p>
						<p><i class="fa fa-clock-o"></i> 7 Days a week from 9:00 am to 7:00 pm</p>
						<ul class="list-inline social-link">
							<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-google-plus"></i></a></li>
						</ul>
						<p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
					</div>
				</div>
				<div class="col-md-8">
					<div class='embed-container maps'>
						map
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
	</footer>
	<!-- Footer -->
	<!-- Core JavaScript Files -->
	<script>
		$(document).ready( function() {
			$('#backTop').backTop({
				'position' : 1200,
				'speed' : 500,
				'color' : 'orange',
			});
		});
	</script>
	<!-- Google Map -->
	<script>
		$('.maps').click(function () {
		$('.maps iframe').css("pointer-events", "auto");
	});
	$( ".maps" ).mouseleave(function() {
	  $('.maps iframe').css("pointer-events", "none"); 
	});
	</script>



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 黑色 bootstrap bootstrap自适应 bootstrap响应式 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 汽车 汽车4S店 4S店 自行车 摩托车

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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