模板描述：黑色 扁平 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> [email protected]</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 © 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>
