<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<body>
<nav class="navbar navbar-expand-sm bg-light navbar-light border fixed-top">
<div class="container">
<!-- Brand -->
<a class="navbar-brand" href="index.html">
<img src="http://sarto.edge-themes.com/wp-content/uploads/2018/04/landing-img-18.png" alt="Logo" style="width:70px;">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="categories.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="license.html">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact-us.html">Contact</a>
</li>
<button type="button" class="btn btn-light"data-toggle="modal" data-target="#toploginModal"><i class="fa fa-cart-plus"></i> Order</button>
<a href="submit-site.html"><button type="button" class="btn btn-danger"><i class="fa fa-plus"></i> Pick Up service</button></a>
</ul>
</div>
</div>
</nav>
<div class="modal fade" id="toploginModal" tabindex="-1" role="dialog" aria-labelledby="toploginModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h5 class="modal-title" id="toploginModalLabel">Login to Oursite</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-md-12">
<input id="email" name="Full Name" placeholder="Email Address" class="form-control" type="text">
</div>
<div class="form-group col-md-12">
<input type="pass" class="form-control" id="pass" placeholder="Password">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="updatecheck1">
<label class="form-check-label" for="updatecheck1">
<small>By submitting this form you agree to our <a href="#" class="text-muted">terms and conditions </a> </small>
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-primary btn-block">Submit</button>
</div>
</form>
</div>
<div class="modal-footer">
<small>New to our site ?<a href="#">Register here</a></small>
</div>
</div>
</div>
</div>
<section class="bg-blue text-white pt-5 pb-4">
<div class="container mt-5 py-5">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<h1>Find your</h1>
<h1>Perfect Match</h1>
<p>Get the best offers on cars. Check out the latest cars.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">New Car</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Used Car</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<div class="card bg-light card-body ">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<select id="inputState" class="form-control">
<option selected>... Select Make...</option>
<option>BMW</option>
<option>Audi</option>
<option>Maruti</option>
<option>Tesla</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select id="inputState" class="form-control">
<option selected>... Select Model...</option>
<option>BMW</option>
<option>Audi</option>
<option>Maruti</option>
<option>Tesla</option>
</select>
</div>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary btn-block">Search</button>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<div class="card bg-light card-body text-white">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<select id="inputState" class="form-control">
<option selected>... Select Make...</option>
<option>BMW</option>
<option>Audi</option>
<option>Maruti</option>
<option>Tesla</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select id="inputState" class="form-control">
<option selected>... Select Model...</option>
<option>BMW</option>
<option>Audi</option>
<option>Maruti</option>
<option>Tesla</option>
</select>
</div>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary btn-block">Search</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<img src="http://www.freepngimg.com/download/car/4-2-car-png-hd.png">
</div>
</div>
</div>
</section>
<section class="1topc-b3 py-5 " id="1topc-b3">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<h3>What Type of Project do you need?</h3>
<p>Selection with Branch (First Branch). Web Development have a Second Branch.</p>
</div>
</div>
<div class="pb-5"></div>
<div class="row text-center">
<div class="col-md-4">
<div class="card" style="width: ;">
<div class="card-body">
<div class="sub-row pb-4">
<img src="http://www.ansonika.com/steps/img/seo_icon_1.svg"alt="" style="width:30%" ></br>
</div>
<strong>Seo Optimization</strong>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: ;">
<div class="card-body">
<div class="sub-row pb-4">
<img src="http://www.ansonika.com/steps/img/seo_icon_1.svg"alt="" style="width:30%" ></br>
</div>
<strong>Seo Optimization</strong>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: ;">
<div class="card-body">
<div class="sub-row pb-4">
<img src="http://www.ansonika.com/steps/img/seo_icon_1.svg"alt="" style="width:30%" ></br>
</div>
<strong>Seo Optimization</strong>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="row mt-5 text-center">
<div class="col-md-12">
<button type="button" class="btn btn-outline-danger">Find All Locations</button>
</div>
</div>
</div>
</section>
<div class="offer my-5 ">
<div class="container">
<div class="row bg-primary">
<div class="col-md-4 py-3 border">
<div class="row ">
<div class="col-md-3 mt-2">
<img src="http://klbtheme.com/froday/wp-content/uploads/2018/02/tablet.png">
</div>
<div class="col-md-9 ">
<h5>Car Service</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aspernatur</p>
</div>
</div>
</div>
<div class="col-md-4 py-3 border">
<div class="row">
<div class="col-md-3 mt-2">
<img src="http://klbtheme.com/froday/wp-content/uploads/2018/02/online-shop-6.png">
</div>
<div class="col-md-9">
<h5>Find Best Offers</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aspernatur</p>
</div>
</div>
</div>
<div class="col-md-4 py-3 border">
<div class="row">
<div class="col-md-3 mt-2">
<img src="http://klbtheme.com/froday/wp-content/uploads/2018/02/money.png">
</div>
<div class="col-md-9">
<h5>Save Money</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aspernatur</p>
</div>
</div>
</div>
</div>
<div class="row bg-primary">
<div class="col-md-4 py-3 border">
<div class="row ">
<div class="col-md-3 mt-2">
<img src="http://klbtheme.com/froday/wp-content/uploads/2018/02/tablet.png">
</div>
<div class="col-md-9 ">
<h5>Car Service</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aspernatur</p>
</div>
</div>
</div>
<div class="col-md-4 py-3 border">
<div class="row">
<div class="col-md-3 mt-2">
<img src="http://klbtheme.com/froday/wp-content/uploads/2018/02/online-shop-6.png">
</div>
<div class="col-md-9">
<h5>Find Best Offers</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aspernatur</p>
</div>
</div>
</div>
<div class="col-md-4 py-3 border">
<div class="row">
<div class="col-md-3 mt-2">
<img src="http://klbtheme.com/froday/wp-content/uploads/2018/02/money.png">
</div>
<div class="col-md-9">
<h5>Save Money</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aspernatur</p>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="py-5 bg-secondary">
<div class="container">
<div class="row mb-3">
<div class="col-md-12">
<h2>Reviews, News and Advice</h2>
</div>
</div>
<div class="row">
<div class="col-md-3 pl-1 pr-1">
<div class="card">
<div class="card-img-top">
<img src="http://velikorodnov.com/html/autotrader/images/263x180_img1.jpg">
</div>
<div class="card-body">
<h4>CAR SERVICE</h4>
<p>Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel.</p>
<a href="#">Read More...</a>
</div>
</div>
</div>
<div class="col-md-3 pl-1 pr-1">
<div class="card">
<div class="card-img-top">
<img src="http://velikorodnov.com/html/autotrader/images/263x180_img2.jpg">
</div>
<div class="card-body">
<h4>AC REPAIR & SERVICE</h4>
<p>Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel.</p>
<a href="#">Read More...</a>
</div>
</div>
</div>
<div class="col-md-3 pl-1 pr-1">
<div class="card">
<div class="card-img-top">
<img src="http://velikorodnov.com/html/autotrader/images/263x180_img3.jpg">
</div>
<div class="card-body">
<h4>CAR CLEANING</h4>
<p>Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel.</p>
<a href="#">Read More...</a>
</div>
</div>
</div>
<div class="col-md-3 pl-1 pr-1">
<div class="card">
<div class="card-img-top">
<img src="http://velikorodnov.com/html/autotrader/images/263x180_img4.jpg">
</div>
<div class="card-body">
<h4>DENTING & PAINTING</h4>
<p>Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel.</p>
<a href="#">Read More...</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-5 bg-blue text-white">
<div class="container">
<div class="row mb-3">
<div class="col-md-12">
<h2>Explore Cars by body type</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<i class="fa fa-key fa-4x text-danger mb-3"></i>
<h5>Sell My Car</h5>
<p>Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Integer rutrum ante eu lacus.</p>
</div>
<div class="col-md-4 text-center">
<i class="fa fa-user fa-4x text-success mb-3"></i>
<h5>Trade My Car</h5>
<p>Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Integer rutrum ante eu lacus.</p>
</div>
<div class="col-md-4 text-center">
<i class="fa fa-inr fa-4x text-warning mb-3"></i>
<h5>Value My Car</h5>
<p>Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Integer rutrum ante eu lacus.</p>
</div>
</div>
</div>
</section>
<div class="reviews pt-5 pb-5">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<h3>Happy Clients Reviews</h3>
</div>
</div>
<div class="row mt-5 ">
<div class="col-md-6">
<h4>It was absolutely lovely.</h4>
<p>“Nam elementum non tellus sit amet ultricies. In nec elit velit. Nullam luctus efficitur urna, a accumsan nunc varius nec.”</p>
<i class="fa fa-star text-danger"></i><i class="fa fa-star text-danger"></i><i class="fa fa-star text-danger"></i><i class="fa fa-star text-danger"></i><i class="fa fa-star"></i>
<p>James E. Duncan</p>
</div>
<div class="col-md-6">
<h4>It was absolutely lovely.</h4>
<p>“Nam elementum non tellus sit amet ultricies. In nec elit velit. Nullam luctus efficitur urna, a accumsan nunc varius nec.”</p>
<i class="fa fa-star text-danger"></i><i class="fa fa-star text-danger"></i><i class="fa fa-star text-danger"></i><i class="fa fa-star text-danger"></i><i class="fa fa-star"></i>
<p>James E. Duncan</p>
</div>
</div>
</div>
</div>
<section class="option1 bg-light py-4" id="option1">
<div class="container py-2">
<div class="row">
<div class="col-md-7">
<div class="pb-5"></div>
<h2>MILLIONS OF OPTIONS. </h2>
<h2>FIND THE ONE THAT’S RIGHT FOR YOU. </h2>
<p>Search all the open positions on the web. Get your own personalized salary estimate. Read reviews on over 600,000 companies worldwide. The right job is out there.</p>
<button type="button" class="btn btn-warning">Get More Details</button>
</div>
<div class="col-md-5">
<img src="https://careerfy.net/demo/wp-content/uploads/parallex-thumb-1.png"alt="">
</div>
</div>
</div>
</section>
<section class="option3 bg-dark text-white py-4" id="option3">
<div class="container">
<div class="row text-center">
<div class="col-md-3">
<h1>123,012</h1>
<p> Positions Matched </p>
</div>
<div class="col-md-3">
<h1>123,012</h1>
<p> Positions Matched </p>
</div>
<div class="col-md-3">
<h1>123,012</h1>
<p> Positions Matched </p>
</div>
<div class="col-md-3">
<h1>123,012</h1>
<p> Positions Matched </p>
</div>
</div>
</div>
</section>
<section class="option1 py-4" id="option1">
<div class="container py-2">
<div class="row">
<div class="col-md-7">
<div class="pb-5"></div>
<h2>MILLIONS OF OPTIONS. </h2>
<h2>FIND THE ONE THAT’S RIGHT FOR YOU. </h2>
<p>Search all the open positions on the web. Get your own personalized salary estimate. Read reviews on over 600,000 companies worldwide. The right job is out there.</p>
<button type="button" class="btn btn-warning">Get More Details</button>
</div>
<div class="col-md-5">
<img src="https://careerfy.net/demo/wp-content/uploads/parallex-thumb-1.png"alt="">
</div>
</div>
</div>
</section>
<section class="footer py-5 bg-blue text-white border" id="footer">
<div class="container py-3">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 ">
<img class="mb-4" src="http://velikorodnov.com/html/autotrader/images/logo.png" alt="Logo" style="width:120px;">
<p class="">86 Petersham town, New South wales
Waedll Steet, Australia PA 6550</p>
<ul class="list-unstyled">
<li>+61 525 240 310</li>
<li>iamosahan@gmail.com</li>
<li>www.askbootstrap.com</li>
</ul>
</div>
<div class="col-md-9 col-sm-6 col-xs-12 ">
<div class="row">
<div class="col-md-3">
<h6 class="pb-2">OUR PROPERTIES </h6>
<ul class="list-unstyled">
<a href="#"><li> Single Story</li></a>
<a href="#"><li> Double Story</li></a>
<a href="#"><li> Triple Story</li></a>
<a href="#"><li> Resort </li></a>
<a href="#"><li> Homes in Hawai</li></a>
<a href="#"><li> Palace</li></a>
</ul>
</div>
<div class="col-md-3">
<h6 class="pb-2">QUICK LINKS </h6>
<ul class="list-unstyled">
<a href="#"><li> Single Story</li></a>
<a href="#"><li> Double Story</li></a>
<a href="#"><li> Triple Story</li></a>
<a href="#"><li> Resort </li></a>
<a href="#"><li> Homes in Hawai</li></a>
<a href="#"><li> Palace</li></a>
</ul>
</div>
<div class="col-md-3">
<h6 class="pb-2">ABOUT OP </h6>
<ul class="list-unstyled">
<a href="#"><li> Single Story</li></a>
<a href="#"><li> Double Story</li></a>
<a href="#"><li> Triple Story</li></a>
<a href="#"><li> Resort </li></a>
<a href="#"><li> Homes in Hawai</li></a>
<a href="#"><li> Palace</li></a>
</ul>
</div>
<div class="col-md-3">
<h6 class="pb-2">NEWSLETTER </h6>
<small> Get the most recent updates from our site and be updated your self...GET IN TOUCH</small>
<div class="social-icons pt-3">
<ul class="list-inline list-unstyled">
<a href="#"><li class="list-inline-item"><i class="fa fa-facebook-square fa-2x text-primary"></i></li> </a>
<a href="#"><li class="list-inline-item"><i class="fa fa-twitter-square fa-2x text-info"></i></li> </a>
<a href="#"><li class="list-inline-item"><i class="fa fa-youtube-play fa-2x text-danger"></i></i></li> </a>
<a href="#"><li class="list-inline-item"><i class="fa fa-google-plus-square fa-2x text-danger"></i></li> </a>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="copyright bglight1 border pt-2">
<div class="container">
<div class="row justify-content-md-center">
<p> © 2018 xyz Software Pvt. Ltd. </p>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="bigpixi/jquery/jquery.min.js"></script>
<script src="bigpixi/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
img {width:100%;}
body{background:#f2f2f2;}
.bg-blue {background:#15151e;}
.btn-danger {background:#ff4f1e;color:#fff!important;}
.btn-danger:hover {background:#fff;color:#ff4f1e!important;}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
color: #dd0000;
background-color: #f2f2f2;
border-color: transparent transparent #f3f3f3;
border-bottom: 3px solid !important;
font-weight: bold;
}
.nav-tabs .nav-link {
border-bottom: 1px solid #dd0000;
color: #696969;
}
