<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 ----------> <div class="top"> <div class="container"> <div class="row"> </div> </div> </div> <div class="top-bar bg-light1"> <div class="container py-1"> <div class="row"> <div class="col-md-6"> <a href="#" ><small>Language</small></a> </div> <div class="col-md-6 text-right "> <small>My Autotrader: <a href="#" data-toggle="modal" data-target="#myModal"> Sign In </a></small> <!-- The Modal --> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Sign In</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <form> <div class="form-group row"> <label for="text" class="col-4 col-form-label">Name</label> <div class="col-8"> <input id="text" name="text" placeholder="Full Name" class="form-control here" type="text"> </div> </div> <div class="form-group row"> <label for="text1" class="col-4 col-form-label">Email</label> <div class="col-8"> <input id="text1" name="text1" placeholder="Email Add" class="form-control here" type="text"> </div> </div> <div class="form-group row"> <div class="offset-4 col-8"> <button name="submit" type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> </div> </div> </div> </div> <a href="#"><small>|</small></a> <small><a href="#" data-toggle="modal" data-target="#myModal2"> Sign Up </a></small> <!-- The Modal --> <div class="modal fade" id="myModal2"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Sign Up</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <form> <div class="form-group row"> <label for="text" class="col-4 col-form-label">Name-S</label> <div class="col-8"> <input id="text" name="text" placeholder="Full Name" class="form-control here" type="text"> </div> </div> <div class="form-group row"> <label for="text1" class="col-4 col-form-label">Email</label> <div class="col-8"> <input id="text1" name="text1" placeholder="Email Add" class="form-control here" type="text"> </div> </div> <div class="form-group row"> <div class="offset-4 col-8"> <button name="submit" type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> <div class="bg-nav bg-dark"> <div class="container"> <nav class="navbar navbar-expand-sm navbar-dark "> <!-- 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 ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Why we</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Our Team</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Testimonials</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Offers</a> </li> <li class="nav-item"> <a class="nav-link" href="#">News</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Portfolio </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Price Plans</a> <a class="dropdown-item" href="#">Blog</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li> </ul> </div> </nav> </div> </div> <div class="brands my-5 py-5"> <div class="container"> <div class="row pb-4"> <h3><strong>Popular cars from the brands you love</strong></h3> </div> <div class="row text-center"> <div class="col-md-2 border py-3 bg-light1"> <div class="brand-image"> <img src="http://velikorodnov.com/html/autotrader/images/brend1.png"> </div> <div class="brand-title pt-5"> <h5>Audi</h5> </div> <div class="brand-list"> <ul class="list-unstyled"> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li class="pt-2"> Show All</li></a> </ul> </div> </div> <div class="col-md-2 border py-3"> <div class="brand-image"> <img src="http://velikorodnov.com/html/autotrader/images/brend4.png"> </div> <div class="brand-title pt-5"> <h5>Audi</h5> </div> <div class="brand-list"> <ul class="list-unstyled"> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li class="pt-2"> Show All</li></a> </ul> </div> </div> <div class="col-md-2 border py-3 bg-light1"> <div class="brand-image"> <img src="http://velikorodnov.com/html/autotrader/images/brend1.png"> </div> <div class="brand-title pt-5"> <h5>Audi</h5> </div> <div class="brand-list"> <ul class="list-unstyled"> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li class="pt-2"> Show All</li></a> </ul> </div> </div> <div class="col-md-2 border py-3"> <div class="brand-image"> <img src="http://velikorodnov.com/html/autotrader/images/brend1.png"> </div> <div class="brand-title pt-5"> <h5>Audi</h5> </div> <div class="brand-list"> <ul class="list-unstyled"> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li class="pt-2"> Show All</li></a> </ul> </div> </div> <div class="col-md-2 border py-3 bg-light1"> <div class="brand-image"> <img src="http://velikorodnov.com/html/autotrader/images/brend1.png"> </div> <div class="brand-title pt-5"> <h5>Audi</h5> </div> <div class="brand-list"> <ul class="list-unstyled"> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li class="pt-2"> Show All</li></a> </ul> </div> </div> <div class="col-md-2 border py-3"> <div class="brand-image"> <img src="http://velikorodnov.com/html/autotrader/images/brend1.png"> </div> <div class="brand-title pt-5"> <h5>Audi</h5> </div> <div class="brand-list"> <ul class="list-unstyled"> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li class="pt-2"> Show All</li></a> </ul> </div> </div> </div> <div class="row mt-3 text-center"> <div class="col-md-2 border py-3 bg-light1"> <div class="brand-image"> <img src="http://velikorodnov.com/html/autotrader/images/brend1.png"> </div> <div class="brand-title pt-5"> <h5>Audi</h5> </div> <div class="brand-list"> <ul class="list-unstyled"> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li class="pt-2"> Show All</li></a> </ul> </div> </div> <div class="col-md-2 border py-3"> <div class="brand-image"> <img src="http://velikorodnov.com/html/autotrader/images/brend1.png"> </div> <div class="brand-title pt-5"> <h5>Audi</h5> </div> <div class="brand-list"> <ul class="list-unstyled"> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li class="pt-2"> Show All</li></a> </ul> </div> </div> <div class="col-md-2 border py-3 bg-light1"> <div class="brand-image"> <img src="http://velikorodnov.com/html/autotrader/images/brend1.png"> </div> <div class="brand-title pt-5"> <h5>Audi</h5> </div> <div class="brand-list"> <ul class="list-unstyled"> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li class="pt-2"> Show All</li></a> </ul> </div> </div> <div class="col-md-2 border py-3"> <div class="brand-image"> <img src="http://velikorodnov.com/html/autotrader/images/brend1.png"> </div> <div class="brand-title pt-5"> <h5>Audi</h5> </div> <div class="brand-list"> <ul class="list-unstyled"> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li class="pt-2"> Show All</li></a> </ul> </div> </div> <div class="col-md-2 border py-3 bg-light1"> <div class="brand-image"> <img src="http://velikorodnov.com/html/autotrader/images/brend1.png"> </div> <div class="brand-title pt-5"> <h5>Audi</h5> </div> <div class="brand-list"> <ul class="list-unstyled"> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li class="pt-2"> Show All</li></a> </ul> </div> </div> <div class="col-md-2 border py-3"> <div class="brand-image"> <img src="http://velikorodnov.com/html/autotrader/images/brend1.png"> </div> <div class="brand-title pt-5"> <h5>Audi</h5> </div> <div class="brand-list"> <ul class="list-unstyled"> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li> A3</li></a> <a href="#"><li class="pt-2"> Show All</li></a> </ul> </div> </div> </div> </div> </div> <div class="compare my-5 py-5 bg-dark"> <div class="container"> <div class="row"> <div class="col-md-4 pt-3"> <h3>Compare Cars</h3> <p>Which cars interest you? We'll highlight the differences to help you choose. View popular car comparisons or customize your own.</p> <btn type="button" class="btn btn-danger">Compare Cars</btn> </div> <div class="col-md-8"> <img src="http://velikorodnov.com/html/autotrader/images/cars-vs.png"> </div> </div> </div> </div> <div class="tabbing my-5 py-5"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>Tabs</h2> <ul id="tabsJustified" class="nav nav-tabs"> <li class="nav-item"><a href="" data-target="#home1" data-toggle="tab" class="nav-link small text-uppercase">Home</a></li> <li class="nav-item"><a href="" data-target="#profile1" data-toggle="tab" class="nav-link small text-uppercase active">Profile</a></li> <li class="nav-item"><a href="" data-target="#messages1" data-toggle="tab" class="nav-link small text-uppercase">Messages</a></li> </ul> <br> <div id="tabsJustifiedContent" class="tab-content"> <div id="home1" class="tab-pane fade"> <div class="list-group"><a href="" class="list-group-item d-inline-block"><span class="float-right badge badge-pill badge-dark">51</span> Home Link</a> <a href="" class="list-group-item d-inline-block"><span class="float-right badge badge-pill badge-dark">8</span> Link 2</a> <a href="" class="list-group-item d-inline-block"><span class="float-right badge badge-pill badge-dark">23</span> Link 3</a> <a href="" class="list-group-item d-inline-block text-muted">Link n..</a></div> </div> <div id="profile1" class="tab-pane fade active show"> <div class="row pb-2"> <div class="col-md-7"> <p>Tabs can be used to contain a variety of content & elements. They are a good way to group <a href="" class="link">relevant content</a>. Display initial content in context to the user. Enable the user to flow through <a href="" class="link">more</a> information as needed. </p> </div> <div class="col-md-5"><img src="//dummyimage.com/1005x559.png/5fa2dd/ffffff" class="float-right img-fluid img-rounded"></div> </div> </div> <div id="messages1" class="tab-pane fade"> <div class="list-group"><a href="" class="list-group-item d-inline-block"><span class="float-right badge badge-pill badge-dark">44</span> Message 1</a> <a href="" class="list-group-item d-inline-block"><span class="float-right badge badge-pill badge-dark">8</span> Message 2</a> <a href="" class="list-group-item d-inline-block"><span class="float-right badge badge-pill badge-dark">23</span> Message 3</a> <a href="" class="list-group-item d-inline-block text-muted">Message n..</a></div> </div> </div> </div> </div> </div> </div>

a:hover {color: #ed1c24 !important;} .top-bar a {padding-right:10px; padding-left:15px;color:#696969;} .bg-light1 {background:#f2f3f3;} .compare {color:#fff;}