<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 ----------> <!--banner section--> <section class="title-banner py-4 bg-orange" id="title-banner"> <div class="container py-5"> <div class="row"> <h4>About Us</h4> </div> </div> </section> <!--filter section--> <section class="sticky-top"> <div class="container"> <div class="row "> <div class="col-md-12"> <div class="bg-secondary"> <div class="card-body"> <div class="row"> <div class="col-md-3"> <form> <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> </form> </div> <div class="col-md-3"> <form> <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> </form> </div> <div class="col-md-3 "> <form> <div class="form-group"> <select id="inputState" class="form-control"> <option selected>... Select Version...</option> <option>BMW</option> <option>Audi</option> <option>Maruti</option> <option>Tesla</option> </select> </div> </form> </div> <div class="col-md-3"> <button type="button" class="btn bg-orange secondary btn-block">Compare Now</button> </div> </div> </div> </div> </div> </div> </div> </section> <!--main content section--> <section class="mb-5"> <div class="container"> <div class="row title py-3"> <div class="col-md-12"> <h5><strong>Filter Search Result</strong></h5> </div> </div> <div class="row"> <div class="col-md-3"> <div class="row mb-3"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <strong><p>Category</p></strong> <ul class="list-unstyled"> <a href="#"> <li>Digital Accuracy</li></a> <a href="#"> <li>Digital Accuracy</li></a> <a href="#"> <li>Digital Accuracy</li></a> <a href="#"> <li>Digital Accuracy</li></a> <a href="#"> <li>Digital Accuracy</li></a> <a href="#"> <li>Digital Accuracy</li></a> </ul> </div> </div> </div> </div> <div class="row mb-3"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <strong><p>Nature</p></strong> <ul class="list-unstyled"> <a href="#"> <li>Digital Accuracy</li></a> <a href="#"> <li>Digital Accuracy</li></a> <a href="#"> <li>Digital Accuracy</li></a> <a href="#"> <li>Digital Accuracy</li></a> <a href="#"> <li>Digital Accuracy</li></a> <a href="#"> <li>Digital Accuracy</li></a> </ul> </div> </div> </div> </div> <div class="row mb-3"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <strong><p>Location</p></strong> <ul class="list-unstyled"> <a href="#"> <li>Digital Accuracy</li></a> <a href="#"> <li>Digital Accuracy</li></a> <a href="#"> <li>Digital Accuracy</li></a> <a href="#"> <li>Digital Accuracy</li></a> <a href="#"> <li>Digital Accuracy</li></a> <a href="#"> <li>Digital Accuracy</li></a> </ul> </div> </div> </div> </div> <div class="row mb-3"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <button type="button" class="btn btn-outline bg-orange btn-block">Contat Now</button></button> </div> </div> </div> </div> <div class="row mb-3"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <button type="button" class="btn btn-outline bg-orange btn-block">Contat Now</button></button> </div> </div> </div> </div> </div> <div class="col-md-9"> <div class="row mb-3"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-md-3"> <img src="https://s3.envato.com/files/248072868/Screenshot/01_preview.jpg"> </div> <div class="col-md-7"> <h5>Msexchange contributes senior UX Designer</h5> <small>Jopitor Inc., India</small> <p><small>11907 Dyuuleves Incorpotatestion, South west, Newzealer</small></p> </div> <div class="col-md-2"> <button type="button" class="btn btn-outline bg-orange">Get Quotes</button> <small>Published on Nov 27, 2017</small> </div> </div> </div> </div> </div> </div> <div class="row mb-3"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-md-3"> <img src="https://s3.envato.com/files/248072868/Screenshot/01_preview.jpg"> </div> <div class="col-md-7"> <h5>Msexchange contributes senior UX Designer</h5> <small>Jopitor Inc., India</small> <p><small>11907 Dyuuleves Incorpotatestion, South west, Newzealer</small></p> </div> <div class="col-md-2"> <button type="button" class="btn btn-outline bg-orange">Get Quotes</button> <small>Published on Nov 27, 2017</small> </div> </div> </div> </div> </div> </div> <div class="row mb-3"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-md-3"> <img src="https://s3.envato.com/files/248072868/Screenshot/01_preview.jpg"> </div> <div class="col-md-7"> <h5>Msexchange contributes senior UX Designer</h5> <small>Jopitor Inc., India</small> <p><small>11907 Dyuuleves Incorpotatestion, South west, Newzealer</small></p> </div> <div class="col-md-2"> <button type="button" class="btn btn-outline bg-orange">Get Quotes</button> <small>Published on Nov 27, 2017</small> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> <!--cta section--> <section class="py-4 bg-orange"> <div class="container"> <div class="row"> <div class="col-md-8"> <h2>Best Place to Find information</h2> </div> <div class="col-md-4"> <buttton type="button" class="btn btn-outline-light">Find Out Now</buttton> </div> </div> </div> </section> <!--footer section--> <section class="py-5 bg-dark text-white"> <div class="container"> <div class="row"> <div class="col-md-3"> <h5>About Us</h5> <p>Lorem Ipsum Generator. With our simple and useful tool you can generate a standard text which you can place in your web design to look more realistic.</p> </div> <div class="col-md-3"> footer two </div> <div class="col-md-3"> footer three </div> <div class="col-md-3"> footer four </div> </div> </div> </section> <div class="container"> <div class="row"> <div class="col-md-12"> </div> </div> </div>

.bg-orange {background:#d8622b;color:#fff!important;} body{background:#f4f4f4;} img{width:100%;max-height:560px;} a {color:#696969;}