<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="//code.jquery.com/jquery-1.11.1.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"> <div class="container"> <div class="row"> <div class="col-md-12"> text </div> </div> </div> <nav class="navbar navbar-expand-sm bg-light fixed-top navbar-light "> <div class="container"> <!-- Brand --> <a class="navbar-brand" href="#"> <img src="http://velikorodnov.com/html/autotrader/images/logo.png" alt="Logo" style="width:120px;"> </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"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> New </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Find New Cars</a> <a class="dropdown-item" href="#">Latest Cars</a> <a class="dropdown-item" href="#">Popular Cars</a> <a class="dropdown-item" href="#">Upcoming Cars</a> <a class="dropdown-item" href="#">Offers & Discounts</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Used </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Find Used Cars</a> <a class="dropdown-item" href="#">Find by Brand</a> <a class="dropdown-item" href="#">Find by Location</a> <a class="dropdown-item" href="#">Upcoming Cars</a> <a class="dropdown-item" href="#">Offers & Discounts</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Sell</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Compare</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> News & Reviews </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Car News</a> <a class="dropdown-item" href="#">Car Reviews</a> <a class="dropdown-item" href="#">Car Videos</a> <a class="dropdown-item" href="#">Write Review</a> </div> </li> <li class="nav-item dropdown "> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> More </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Car Loan</a> <a class="dropdown-item" href="#">EMI Calculator</a> <a class="dropdown-item" href="#">Car Insurance</a> <a class="dropdown-item" href="#">Ask Question</a> </div> </li> <form class="form-inline" action="#"> <input class="form-control mr-sm-2" type="text" placeholder="Search Cars"> <button class="btn btn-success" type="submit"><i class="fa fa-search"></i> Search</button> </form> </ul> </div> </div> </nav> <div class="mt-4"></div> <section class="bg-blue text-white pt-5 pb-4"> <div class="container 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="py-5 featured"> <div class="container"> <div class="row mb-3"> <div class="col-md-12"> <h2>Featured Cars</h2> </div> </div> <div class="row"> <div class="col-md-12 text-center "> <nav class="nav-justified "> <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="pop1-tab" data-toggle="tab" href="#pop1" role="tab" aria-controls="pop1" aria-selected="true">Popular Cars</a> <a class="nav-item nav-link" id="pop2-tab" data-toggle="tab" href="#pop2" role="tab" aria-controls="pop2" aria-selected="false">Upcoming</a> <a class="nav-item nav-link" id="pop3-tab" data-toggle="tab" href="#pop3" role="tab" aria-controls="pop3" aria-selected="false">Newly Launched</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="pop1" role="tabpanel" aria-labelledby="pop1-tab"> <div class="pt-4"></div> <div class="container"> <div class="row"> <div class="text-center"> <div class="card-group"> <a href="#"> <div class="card"> <img class="card-img-top" src="https://imgd.aeplcdn.com/310x174/cw/ec/22803/Audi-New-SQ7-Right-Front-Three-Quarter-70082.jpg?wm=0&q=85" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Maruti Swift</h4> <p class="card-text">Rs. 6.44 Lac to 8.99 Lac.</p> </div> <div class="card-footer"> <button type="button" class="btn btn-danger btn-block">know more</button> </div> </div> </a> <a href="#"> <div class="card"> <img class="card-img-top" src="https://imgd.aeplcdn.com/310x174/cw/ec/34253/Mitsubishi-New-Outlander-Exterior-126541.jpg?wm=0&q=85" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Porsche</h4> <p class="card-text">Rs. 6.44 Lac to 8.99 Lac.</p> </div> <div class="card-footer"> <button type="button" class="btn btn-danger btn-block">know more</button> </div> </div></a> <div class="card"> <img class="card-img-top" src="https://imgd.aeplcdn.com/310x174/cw/ec/26523/Maruti-Suzuki-Ciaz-Facelift-Exterior-87489.jpg?wm=0&q=85" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Swift Dezire</h4> <p class="card-text">Rs. 6.44 Lac to 8.99 Lac.</p> </div> <div class="card-footer"> <button type="button" class="btn btn-danger btn-block">know more</button> </div> </div> <div class="card"> <img class="card-img-top" src="https://imgd.aeplcdn.com/310x174/cw/ec/22803/Audi-New-SQ7-Right-Front-Three-Quarter-70082.jpg?wm=0&q=85" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Maruti Swift</h4> <p class="card-text">Rs. 6.44 Lac to 8.99 Lac.</p> </div> <div class="card-footer"> <button type="button" class="btn btn-danger btn-block">know more</button> </div> </div> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="pop2" role="tabpanel" aria-labelledby="pop2-tab"> <div class="pt-3"></div> <p>2. There's another way to do this for layouts that doesn't have to put the navbar inside the container, and which doesn't require any CSS or Bootstrap overrides. Simply place a div with the Bootstrap container class around the navbar. This will center the links inside the navbar: </div> <div class="tab-pane fade" id="pop3" role="tabpanel" aria-labelledby="pop3-tab"> <div class="pt-3"></div> <p>3. There's another way to do this for layouts that doesn't have to put the navbar inside the container, and which doesn't require any CSS or Bootstrap overrides. Simply place a div with the Bootstrap container class around the navbar. This will center the links inside the navbar: </div> </div> </div> </div> </div> </section> <section class="py-5"> <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>New & Used Vehicles</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>New & Used Vehicles</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>New & Used Vehicles</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>New & Used Vehicles</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> <section class="py-5"> <div class="container"> <div class="row mb-3"> <div class="col-md-12"> <h2>Compare Cars</h2> </div> </div> <div class="row"> <div class="col-md-4 pl-1 pr-1"> <div class="card"> <div class="card-img-top"> <img src="http://velikorodnov.com/html/autotrader/images/289x190_img1.jpg"> </div> <div class="card-body"> <a href="#" class="text-dark"><h5>2016 Ford Fusion Hybrid</h5></a> <ul class="list-unstyled list-inline"> <a href="#" class="text-warning"><li class="list-inline-item"><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></li></a> <a href="#" class="text-muted"><li class="list-inline-item"><small>3 Reviews</small></li></a> </ul> <h4 class="text-danger"><i class="fa fa-inr"></i> 255060.00</h4> <ul class="list-unstyled list-inline"> <a href="#" class="text-primary"><li class="list-inline-item"><small>Contact Seller</small></li></a> <li class="list-inline-item"><small>|</small></li> <a href="#" class="text-primary"><li class="list-inline-item"><small>Add to Wishlist</small></li></a> <li class="list-inline-item"><small>|</small></li> <a href="#" class="text-primary"><li class="list-inline-item"><small>Add to Compare</small></li></a> </ul> </div> </div> </div> <div class="col-md-4 pl-1 pr-1"> <div class="card"> <div class="card-img-top"> <img src="http://velikorodnov.com/html/autotrader/images/289x190_img1.jpg"> </div> <div class="card-body"> <a href="#" class="text-dark"><h5>2016 Ford Fusion Hybrid</h5></a> <ul class="list-unstyled list-inline"> <a href="#" class="text-warning"><li class="list-inline-item"><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></li></a> <a href="#" class="text-muted"><li class="list-inline-item"><small>3 Reviews</small></li></a> </ul> <h4 class="text-danger"><i class="fa fa-inr"></i> 255060.00</h4> <ul class="list-unstyled list-inline"> <a href="#" class="text-primary"><li class="list-inline-item"><small>Contact Seller</small></li></a> <li class="list-inline-item"><small>|</small></li> <a href="#" class="text-primary"><li class="list-inline-item"><small>Add to Wishlist</small></li></a> <li class="list-inline-item"><small>|</small></li> <a href="#" class="text-primary"><li class="list-inline-item"><small>Add to Compare</small></li></a> </ul> </div> </div> </div> <div class="col-md-4 pl-1 pr-1"> <div class="card"> <div class="card-img-top"> <img src="http://velikorodnov.com/html/autotrader/images/289x190_img1.jpg"> </div> <div class="card-body"> <a href="#" class="text-dark"><h5>2016 Ford Fusion Hybrid</h5></a> <ul class="list-unstyled list-inline"> <a href="#" class="text-warning"><li class="list-inline-item"><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></li></a> <a href="#" class="text-muted"><li class="list-inline-item"><small>3 Reviews</small></li></a> </ul> <h4 class="text-danger"><i class="fa fa-inr"></i> 255060.00</h4> <ul class="list-unstyled list-inline"> <a href="#" class="text-primary"><li class="list-inline-item"><small>Contact Seller</small></li></a> <li class="list-inline-item"><small>|</small></li> <a href="#" class="text-primary"><li class="list-inline-item"><small>Add to Wishlist</small></li></a> <li class="list-inline-item"><small>|</small></li> <a href="#" class="text-primary"><li class="list-inline-item"><small>Add to Compare</small></li></a> </ul> </div> </div> </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> <section class="copyright bg-light py-2" id="copyright"> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <small>© Copyright 2018 Osahan Property. All Rights Reserved</small></br> <small> Made with by Ask Bootstrap </small> </div> </div> </div> </section>

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; }