"http://preview.themeforest.net/item/grab-taxi-online-taxi-service/full_screen_preview/20263738"
Bootstrap 4.1.1 Snippet by adriano3429

<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="//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"> <nav class="navbar navbar-expand-sm bg-light border navbar-light 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">License</a> </li> <li class="nav-item"> <a class="nav-link" href="contact-us.html">Support</a> </li> <a href="submit-site.html"><button type="button" class="btn btn-success"><i class="fa fa-plus"></i> Book Appointment</button></a> </ul> </div> </div> </nav> <section class="bg-danger py-5"> <div class="container my-5"> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-8 text-light"> <h1 class="pt-3 mt-5">Get servicing done in no time.</h1> <h6 class= "text-light">Car Services | Dent & Paint | Insurances | Roadside Assistance</h6> <ul> <li>10,000+ Cars Serviced</li> <li>92.3% Customer Satisfaction</li> <li>4.6/5 Customer Rating</li> <li>Free Pick up & Drop</li> <li>Car returned with all possession intact</li> <li>Genuine parts with warranty*</li> <li>Standard billing procedure</li> <li>Adherence to quality standards and timely delivery</li> </ul> </div> <div class="col-md-4"> <div class="row"> <div class="col-md-12"> <div class="card shadow-lg"> <div class="card-body"> <div class="filter-sidebar "> <h3>Book a ride</h3> <div class="form-group"> <input type="text" class="form-control" placeholder="First & Last Name"> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Phone No."> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Location"> </div> <div class="form-group"> <select class="form-control" id="make1"> <option selected>Make</option> <option>Ford</option> <option>Hyundai</option> <option>Kia</option> <option>Honda</option> <option>Skoda</option> </select> </div> <div class="form-group"> <select class="form-control" id="make1"> <option selected>Model</option> <option>Accord</option> <option>Camry</option> <option>Civic</option> <option>Rapid</option> <option>Octavia</option> </select> </div> <hr> <button type="btn" class="btn btn-danger">Book Now</button> <button type="btn" class="btn btn-dark">+91-8899445577</button> <div class="pb-3"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="bg-dark py-3"> <div class="container bg-dark py-3 shadow-lg text-white"> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-3 text-center"> <i class="fa fa-tachometer fa-4x text-info"></i></br> <small class="text-secondary">Mileage (upto)</small> <h5>General Service</h5> </div> <div class="col-md-3 text-center"> <i class="fa fa-wrench fa-4x text-light"></i><br> <small class="text-secondary">Mileage (upto)</small> <h5>Denting/Penting</h5> </div> <div class="col-md-3 text-center"> <i class="fa fa-tag fa-4x text-warning"></i></br> <small class="text-secondary">Mileage (upto)</small> <h5>Accidental Repair</h5> </div> <div class="col-md-3 text-center"> <i class="fa fa-whatsapp fa-4x text-success"></i></br> <small class="text-secondary">Mileage (upto)</small> <h5>Electrical Work</h5> </div> </div> </div> </div> </div> </div> </div> </section> <section class="py-5"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-4"> <div class="card border text-center"> <div class="card-body"> <i class="fa fa-tachometer fa-3x text-secondary"></i></br> <h5>Millions of Listings</h5> <p>All our service centers are peer reviewed by car owners like you.</p> </div> </div> </div> <div class="col-md-4"> <div class="card bg-dark text-light shadow-lg border text-center"> <div class="card-body"> <i class="fa fa-tachometer fa-3x text-light"></i></br> <h5>Save Time & Money</h5> <p>All our service centers are peer reviewed by car owners like you.</p> </div> </div> </div> <div class="col-md-4"> <div class="card border text-center"> <div class="card-body"> <i class="fa fa-tachometer fa-3x text-secondary"></i></br> <h5>Best Services</h5> <p>All our service centers are peer reviewed by car owners like you.</p> </div> </div> </div> </div> <div class="row pt-3"> <div class="col-md-4"> <div class="card border text-center"> <div class="card-body"> <i class="fa fa-tachometer fa-3x text-secondary"></i></br> <h5>Millions of Listings</h5> <p>All our service centers are peer reviewed by car owners like you.</p> </div> </div> </div> <div class="col-md-4"> <div class="card bg-success text-light shadow-lg border text-center"> <div class="card-body"> <i class="fa fa-tachometer fa-3x text-light"></i></br> <h5>Save Time & Money</h5> <p>All our service centers are peer reviewed by car owners like you.</p> </div> </div> </div> <div class="col-md-4"> <div class="card border text-center"> <div class="card-body"> <i class="fa fa-tachometer fa-3x text-secondary"></i></br> <h5>Best Services</h5> <p>All our service centers are peer reviewed by car owners like you.</p> </div> </div> </div> </div> </div> </div> </div> </section> <section class="py-5"> <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> <button type="btn" class="btn btn-danger">Book Now</button> </div> <div class="col-md-8"> <img src="http://velikorodnov.com/html/autotrader/images/cars-vs.png"> </div> </div> </div> </section> <section class="bg-dark py-3"> <div class="container py-3 shadow-sm text-white"> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-3 text-center"> <i class="fa fa-tachometer fa-4x text-info"></i></br> <small class="text-secondary">Mileage (upto)</small> <h5>General Service</h5> </div> <div class="col-md-3 text-center"> <i class="fa fa-wrench fa-4x text-light"></i><br> <small class="text-secondary">Mileage (upto)</small> <h5>Denting/Penting</h5> </div> <div class="col-md-3 text-center"> <i class="fa fa-tag fa-4x text-warning"></i></br> <small class="text-secondary">Mileage (upto)</small> <h5>Accidental Repair</h5> </div> <div class="col-md-3 text-center"> <i class="fa fa-whatsapp fa-4x text-success"></i></br> <small class="text-secondary">Mileage (upto)</small> <h5>Electrical Work</h5> </div> </div> </div> </div> </div> </div> </div> </section> <section class="footers pt-5 pb-3"> <div class="container pt-5"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4 footers-one"> <div class="footers-logo"> <img src="http://velikorodnov.com/html/autotrader/images/logo.png" alt="Logo" style="width:120px;"> </div> <div class="footers-info mt-3"> <p>Cras sociis natoque penatibus et magnis Lorem Ipsum tells about the compmany right now the best.</p> </div> <div class="social-icons"> <a href="https://www.facebook.com/"><i id="social-fb" class="fa fa-facebook-square fa-2x social"></i></a> <a href="https://twitter.com/"><i id="social-tw" class="fa fa-twitter-square fa-2x social"></i></a> <a href="https://plus.google.com/"><i id="social-gp" class="fa fa-google-plus-square fa-2x social"></i></a> <a href="mailto:bootsnipp@gmail.com"><i id="social-em" class="fa fa-envelope-square fa-2x social"></i></a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-2 footers-two"> <h5>Essentials </h5> <ul class="list-unstyled"> <li><a href="maintenance.html">Search</a></li> <li><a href="contact.html">Sell your Car</a></li> <li><a href="about.html">Advertise with us</a></li> <li><a href="about.html">Dealers Portal</a></li> <li><a href="about.html">Post Requirements</a></li> </ul> </div> <div class="col-xs-12 col-sm-6 col-md-2 footers-three"> <h5>Information </h5> <ul class="list-unstyled"> <li><a href="maintenance.html">Register Now</a></li> <li><a href="contact.html">Advice</a></li> <li><a href="about.html">Videos</a></li> <li><a href="about.html">Blog</a></li> <li><a href="about.html">Services</a></li> </ul> </div> <div class="col-xs-12 col-sm-6 col-md-2 footers-four"> <h5>Explore </h5> <ul class="list-unstyled"> <li><a href="maintenance.html">News</a></li> <li><a href="contact.html">Sitemap</a></li> <li><a href="about.html">Testimonials</a></li> <li><a href="about.html">Feedbacks</a></li> <li><a href="about.html">User Agreement</a></li> </ul> </div> <div class="col-xs-12 col-sm-6 col-md-2 footers-five"> <h5>Company </h5> <ul class="list-unstyled"> <li><a href="maintenance.html">Career</a></li> <li><a href="about.html">For Parters</a></li> <li><a href="about.html">Terms</a></li> <li><a href="about.html">Policy</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> </div> </div> </section> <section class="disclaimer bg-light border"> <div class="container"> <div class="row "> <div class="col-md-12 py-2"> <small> Disclaimer: Element Limited is only an intermediary offering its platform to facilitate the transactions between Seller and Customer/Buyer/User and is not and cannot be a party to or control in any manner any transactions between the Seller and the Customer/Buyer/User. All the offers and discounts on this Website have been extended by various Builder(s)/Developer(s) who have advertised their products. Element is only communicating the offers and not selling or rendering any of those products or services. It neither warrants nor is it making any representations with respect to offer(s) made on the site. Element Limited shall neither be responsible nor liable to mediate or resolve any disputes or disagreements between the Customer/Buyer/User and the Seller and both Seller and Customer/Buyer/User shall settle all such disputes without involving Element Limited in any manner. </small> </div> </div> </div> </section> <section class="copyright border"> <div class="container"> <div class="row text-center"> <div class="col-md-12 pt-3"> <p class="text-muted">© 2018 xyz Software Pvt. Ltd.</p> </div> </div> </div> </section>
img {width:100%;} .footers a {color:#696969;} .footers p {color:#696969;} .footers ul {line-height:30px;} #social-fb:hover { color: #3B5998; transition:all .001s; } #social-tw:hover { color: #4099FF; transition:all .001s; } #social-gp:hover { color: #d34836; transition:all .001s; } #social-em:hover { color: #f39c12; transition:all .001s; }

Related: See More


Questions / Comments: