<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 ----------> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" > <header id="main-head" class="d-inline-block clearHeader w-100"> <div class="top-head"> <div class="container"> <div class="row"> <div class="col-sm-8 menu-contact"> <div class="card-text"> <p class="cars-text">We Accept all major Credit Cards</p> <ul class="cards-list"> <li class=""><img src="images/cards/payment.png"></li> </ul> </div> </div> <div class="col-sm-4 menu-social"> <ul class="list-inline"> <li><a href=""><i class="fab fa-facebook-f"></i></a></li> <li><a href=""><i class="fab fa-twitter"></i></a></li> <li><a href=""><i class="fab fa-google-plus-g"></i></a></li> <li><a href=""><i class="fab fa-linkedin-in"></i></a></li> <li><a href=""><i class="fas fa-rss"></i></a></li> </ul> <div class="search-float"> <a href="" class="quote-btn"><i class="fa fa-search" aria-hidden="true"></i></a> </div> </div> </div> </div> </div> <div class="main-head d-none d-sm-block"> <div class="container"> <div class="row menu-contact"> <div class="offset-lg-3 offset-md-3 col-md-9 col-lg-9 pull-right"> <ul class="contact-list"> <li class="loc"> <h3>Baba Limousine LLC</h3> <p>Norwalk, Connectcuit</p> </li> <li class="tel"> <h3>Tel: (012) 345 - 6789</h3> <p>Fax: (012) 345 - 6789</p> </li> <li class="mail"> <h3>Our Email Address</h3> <p>info@babalimo.com</p> </li> </ul> </div> </div> </div> </div> <div class="nav-section"> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light "> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"> <img class="img-fluid d-block w-100" src="https://via.placeholder.com/300x80" alt="Logo"> </a> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <ul class="navbar-nav justify-content-center"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Service</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Rates</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Our Fleet</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Reservation</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li> </ul> </div> </nav> </div> </div> </header> <section id="home-banner"> <div id="banner-slide" class="carousel slide d-none d-lg-block" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100 img-fluid" src="https://via.placeholder.com/1500x700" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100 img-fluid" src="https://via.placeholder.com/1500x700" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100 img-fluid" src="https://via.placeholder.com/1500x700" alt="Third slide"> </div> </div> </div> <div class="banner-text"> <div class="container"> <div class="row"> <div class="col-lg-7 d-none d-sm-block"> <div class="banner-text-wrap"> <h1>Welcome to <span>Baba Limo</span></h1> <h3>of Connectcuit</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> <a href="" class="rounded-btn">lets check it out</a> </div> </div> <div class="col-lg-5 col-sm-12"> <div class="form-wrap"> <div class="form-title"> <h3>Book a Ride Now!</h3> <p>Lorem ipsum dolor sit amet</p> </div> <div class="form-section"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Step 1</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Step 2</a> </li> <li class="nav-item"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Step 3</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> <form> <div class="row"> <div class="col-sm-6"> <label for="exampleName">Your Name</label> <input type="text" class="form-control" id="exampleName" placeholder="Enter your name"> </div> <div class="col-sm-6"> <label for="examplenum">Your Name</label> <input type="text" class="form-control" id="examplenum" placeholder="Enter phone number"> </div> </div> <div class="row"> <div class="col-sm-12"> <label for="examplemail">Email Address</label> <input type="email" class="form-control" id="examplemail" placeholder="Enter your name"> </div> </div> <div class="row"> <div class="col-sm-12"> <label for="examplepick">Picking Up Location</label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"><i class="fas fa-map-marker"></i></div> </div> <input type="text" class="form-control" id="examplepick" placeholder="Airport or Anywhere"> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <label for="exampledrop">Dropping Off Location</label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"><i class="fas fa-map-marker"></i></div> </div> <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Airport or Anywhere"> </div> </div> </div> <div class="row"> <div class="col-sm-6"> <label for="exampledrop">Picking Up Date</label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"><i class="fas fa-calendar-alt"></i></div> </div> <input type="text" class="form-control" id="inlineFormInputGroup" > </div> </div> <div class="col-sm-6"> <label for="exampledrop">Picking Up Hour</label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"><i class="far fa-clock"></i></div> </div> <input type="text" class="form-control" id="inlineFormInputGroup" > </div> </div> </div> <div class="row"> <div class="col-sm-6"> <label for="exampledrop">Dropping Off Date</label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"><i class="fas fa-calendar-alt"></i></div> </div> <input type="text" class="form-control" id="inlineFormInputGroup" > </div> </div> <div class="col-sm-6"> <label for="exampledrop">Dropping Off Hour</label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"><i class="far fa-clock"></i></div> </div> <input type="text" class="form-control" id="inlineFormInputGroup" > </div> </div> </div> <div class="row button-wrap"> <div class="col-sm-6"><a href="" target="_blank">Useful information</a></div> <div class="col-sm-6"><button type="submit" class="btn btn-primary">Submit</button></div> </div> </form> </div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <div class="row"> <div class="col-lg-6 col-sm-6 "> <div class="card mb-3"> <span class="discount-off">10% OFF</span> <img class="card-img-top" src="images/car03.png" alt="Card image cap"> <div class="card-body"> <h6 class="card-title">BMW X6 2013</h6> <ul class="nav my-ul-1"> <li class="nav-item"> <a class="nav-link" href="#"><img src="images/icon1.png" /> 4 Passengers</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><img src="images/icon2.png" /> 2 Bags</a> </li> </ul> <a href="#" class="read-more">Book For $13/Hour</a> </div> </div> </div> <div class="col-lg-6 col-sm-6 "> <div class="card mb-3"> <img class="card-img-top" src="images/car03.png" alt="Card image cap"> <div class="card-body"> <h6 class="card-title">BMW X6 2013 </h6> <ul class="nav my-ul-1"> <li class="nav-item"> <a class="nav-link" href="#"><img src="images/icon1.png" /> 4 Passengers</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><img src="images/icon2.png" /> 2 Bags</a> </li> </ul> <a href="#" class="read-more">Book For $13/Hour</a> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> </div> </div> </div> </div> </div> </div> </div> </section>

body { overflow-x: hidden; font-family:open sans } p{font:300 15px/21px open sans;} a{text-decoration:none;} #main-head { position: relative; } #main-head .top-head { background: #1c1e32; color: #fff; padding: 5px 0; } #main-head .top-head .card-text p.cars-text { display: inline-block; float: left; font-size: 13px; margin: 0 .5rem 0 0; color: #dedede; line-height: 24px; } #main-head .top-head .card-text .cards-list { display: inline-block; padding: 0; list-style-type: none; margin: 0; } #main-head .top-head .menu-social {} #main-head .top-head .menu-social .search-float { float: right; display: inline-block; border-right: 1px dashed #dedede; padding: 0 9px 0 0; font-size: 13px; } #main-head .top-head .menu-social ul.list-inline { display: inline-block; float: right; margin: 0 0 0 5px; } #main-head .top-head .menu-social ul.list-inline li { list-style-type: none; display: inline-block; float: left; font-size: 13px; color: #fff; } #main-head .top-head .menu-social ul.list-inline li a { color: #fff; padding: 0 5px; } #main-head .top-head .menu-social .search-float a { color: #fff; } #main-head .main-head { padding: 15px 0; background: #22243b; box-shadow: 0 0 1px rgba(255,255,255,.45); color: #fff; } #main-head .main-head .menu-contact {} #main-head .main-head .menu-contact ul.contact-list { padding: 0; margin: 0; float: right; list-style-type: none; } #main-head .main-head .menu-contact ul.contact-list li { float: left; margin: 0 0 0 50px; position: relative; } #main-head .main-head .menu-contact ul.contact-list li h3 { font: 600 15px/21px open sans; margin: 0 0 0 0; } #main-head .main-head .menu-contact ul.contact-list li p { font: 300 13px/21px open sans; margin: 0 0 0 0; color: #f77d0a; } #main-head .nav-section { background: transparent; border-top: 3px solid #f77d0a; position: absolute; bottom: -42px; left: 0; z-index: 99; right: 0; } #main-head .nav-section .navbar { padding: 0; } #main-head .nav-section .navbar .navbar-brand { position: absolute; top: -70px; max-width: 200px; left: 0; } #main-head .nav-section .navbar ul.navbar-nav { background: #f77d0a; color: #fff; position: relative; } ul.navbar-nav.justify-content-center.w-100 {} .navbar-expand-lg .navbar-collapse { justify-content: center; } #main-head .nav-section .navbar ul.navbar-nav li.nav-item {} #main-head .nav-section .navbar ul.navbar-nav li.nav-item a.nav-link { color: #fff; padding: 10px 20px; text-transform: uppercase; font-size: 14px; } #main-head .nav-section .navbar ul.navbar-nav::before { content: ''; background-image: url(../images/nav-left.png); position: absolute; left: 0; } #main-head .nav-section .navbar ul.navbar-nav::before { content: ''; background-image: url(http://html.letsgohimachal.com/car-hire/images/nav-left.png); position: absolute; left: -40px; height: 100%; padding: 20px; background-size: 100% 100%; } #main-head .nav-section .navbar ul.navbar-nav::after { content: ''; background-image: url(http://html.letsgohimachal.com/car-hire/images/nav-right.png); position: absolute; right: -40px; height: 100%; padding: 20px; background-size: 100% 100%; } #home-banner { position: relative; } #home-banner .banner-text { position: absolute; top: 0; width: 100%; padding: 3% 0 0; } #home-banner .banner-text .banner-text-wrap { padding-top: 8rem; } #home-banner .banner-text .banner-text-wrap h1 { font: 700 37px/42px open sans; color: #fff; margin: 0 0 1rem 0; } #home-banner .banner-text .banner-text-wrap h1 span { background: #f77d0a; padding: 0 10px; } #home-banner .banner-text .banner-text-wrap h3 { color: #fff; font-style: italic; } #home-banner .banner-text .banner-text-wrap p { color: #fff; font: italic 500 16px/21px open sans; } #home-banner .banner-text .banner-text-wrap .rounded-btn { padding: 10px 26px; display: inline-block; background: #f77d0a; border-radius: 50px; text-decoration: none; color: #fff; text-transform: uppercase; font: 500 15px/21px open sans; } #home-banner .banner-text .form-wrap { margin: 35px 0 0px 0; } #home-banner .banner-text .form-wrap .form-title { padding: 15px; background: #4b4e76; color: #fff; } #home-banner .banner-text .form-wrap .form-title h3 { font: 600 19px/21px open sans; margin: 0 0 .2rem 0; } #home-banner .banner-text .form-wrap .form-title p { font: 300 15px/21px open sans; margin: 0 0 0 0; } #home-banner .banner-text .form-wrap .form-section { padding: 15px; background: #ffffff; color: #000; } #home-banner .banner-text .form-wrap .form-section .nav-tabs { border: none; } #home-banner .banner-text .form-wrap .form-section .nav-tabs li.nav-item { border: none; width: calc(33.33%); } #home-banner .banner-text .form-wrap .form-section .nav-tabs li.nav-item a { margin: 0 10px; text-align: center; border: none; border-radius: 50px; padding: 4px 10px; background: #dedede; color: #101010; font: 400 14px/21px open sans; text-transform: uppercase; } #home-banner .banner-text .form-wrap .form-section .nav-tabs li.nav-item a.active { background: #f77d0a; color: #fff; } #home-banner .banner-text .form-wrap .form-section .nav-tabs { margin: 0 0 .5rem; } #home-banner .banner-text .form-wrap .form-section .tab-content label { margin: 0; font: 600 13px/21px open sans; } #home-banner .banner-text .form-wrap .form-section .tab-content .form-control { border-radius: 0; padding: .2rem .7rem; font: 400 14px/21px open sans; } #home-banner .banner-text .form-wrap .form-section .tab-content .form-control:focus{ box-shadow:none; } #home-banner .banner-text .form-wrap .form-section .input-group-text { border-radius: 0; } #home-banner .banner-text .form-wrap .form-section .button-wrap { padding-top: 15px; } #home-banner .banner-text .form-wrap .form-section .button-wrap a { font: 600 13px/21px open sans; color: #f77d0a; text-decoration: underline; } #home-banner .banner-text .form-wrap .form-section .button-wrap .btn-primary { padding: 8px 26px; display: inline-block; background: #f77d0a; border-radius: 50px; text-decoration: none; color: #fff; text-transform: uppercase; font: 500 14px/20px open sans; border: none; width: 100%; } #home-banner .banner-text .form-wrap .form-section .button-wrap .btn-primary:focus { box-shadow:none; } .my-pad { padding:3% 0; } .my-orange { color: #f77d0a; font-weight: 700; }