<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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"> <nav class="navbar navbar-expand-sm fixed-top bg-light 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 ml-auto"> <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-5"></div> <section class="latest py-5" id="latest"> <div class="container"> <div class="row pb-5 text-center"> <div class="col-md-12"> <h2>Latest Properties</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="row"> <div class="col-md-4"> <h2>20 Years of Experience in Financial Services.</h2> <p class="py-3">Bimply dummy text the printing and typesety Ipsum deartyhas been the industry’s standard ever since thewhengalley.</p> <button type="button" class="btn btn-outline-danger mb-3">Find Out More About us</button> </div> <div class="col-md-4 latest-box"> <a href="#"> <img class="no-mp" src="https://radiustheme.com/demo/wordpress/finance/wp-content/uploads/2017/08/case-studies-2-min-490x340.jpg "> <div class=""> <div class="bg-red card-body"> <h5>Financial Services</h5> </div> </div> </a> </div> <div class="col-md-4 latest-box"> <a href="#"> <img class="no-mp" src="https://radiustheme.com/demo/wordpress/finance/wp-content/uploads/2017/08/case-studies-2-min-1-490x340.jpg "> <div class=""> <div class="bg-red card-body"> <h5>Marketing Strategy</h5> </div> </div> </a> </div> </div> </div> </section>

.navbar {border-bottom:2px solid #dd0000;} img {width:100%;} .bg-red {background:rgba(219, 0, 0, 0.46);color:#fff;} .latest-box:hover {background:#dd0000;} .no-mp {margin:-14px;padding:0px!important;}