<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://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <div class="top "> <div class="container"> <div class="row"> </div> </div> </div> <div class="topc "> <div class="container"> <div class="row"> <div class="col-md-12"> </div> </div> </div> </div> <div class="top-head pt-1 border"> <div class="container"> <div class="row "> <div class="col-md-12 text-right"> <ul class="list-inline "> <a href="#"><li class="list-inline-item"><small><i class="fa fa-mobile fa-2x"></i> Download Mobile App</small></li></a> <a href="#"><li class="list-inline-item"><small> Check On Road Price</small></li></a> <a href="#"><li class="list-inline-item"><small> Feedback</small></li></a> <a href="#"><li class="list-inline-item"><small> Ask a Question</small></li></a> <a href="#"><li class="list-inline-item"><small><i class="fa fa-user"></i> My Account</small></li></a> </ul> </div> </div> </div> </div> <nav class="navbar navbar-expand-sm bg-light border"> <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="content py-5 "> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1"> <span class="anchor" id="formComplex"></span> <hr class="my-5"> <h3>Complex Form Example </h3> <!-- form complex example --> <div class="form-row mt-4"> <div class="col-sm-5 pb-3"> <label for="exampleAccount">Account #</label> <input type="text" class="form-control" id="exampleAccount" placeholder="XXXXXXXXXXXXXXXX"> </div> <div class="col-sm-3 pb-3"> <label for="exampleCtrl">Control #</label> <input type="text" class="form-control" id="exampleCtrl" placeholder="0000"> </div> <div class="col-sm-4 pb-3"> <label for="exampleAmount">Amount</label> <div class="input-group"> <div class="input-group-prepend"><span class="input-group-text">$</span></div> <input type="text" class="form-control" id="exampleAmount" placeholder="Amount"> </div> </div> <div class="col-sm-6 pb-3"> <label for="exampleFirst">First Name</label> <input type="text" class="form-control" id="exampleFirst"> </div> <div class="col-sm-6 pb-3"> <label for="exampleLast">Last Name</label> <input type="text" class="form-control" id="exampleLast"> </div> <div class="col-sm-6 pb-3"> <label for="exampleCity">City</label> <input type="text" class="form-control" id="exampleCity"> </div> <div class="col-sm-3 pb-3"> <label for="exampleSt">State</label> <select class="form-control" id="exampleSt"> <option>Pick a state</option> </select> </div> <div class="col-sm-3 pb-3"> <label for="exampleZip">Postal Code</label> <input type="text" class="form-control" id="exampleZip"> </div> <div class="col-md-6 pb-3"> <label for="exampleAccount">Color</label> <div class="form-group small"> <div class="form-check form-check-inline"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> Blue </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> Red </label> </div> <div class="form-check form-check-inline disabled"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled=""> Green </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option4"> Yellow </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option5"> Black </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option6"> Orange </label> </div> </div> </div> <div class="col-md-6 pb-3"> <label for="exampleMessage">Message</label> <textarea class="form-control" id="exampleMessage"></textarea> <small class="text-info"> Add the packaging note here. </small> </div> <div class="col-12"> <div class="form-row"> <label class="col-md col-form-label" for="name">Generated Id</label> <input type="text" class="form-control col-md-4" name="gid" id="gid" /> <label class="col-md col-form-label" for="name">Date Assigned</label> <input type="text" class="form-control col-md-4" name="da" id="da" /> </div> </div> </div> </div> </div> </div> </div> <div class="cta-sektion border py-3"> <div class="container"> <div class="row"> <div class="col-md-9 col-sm-9 col-xs-12"> <h3><span class="glyphicon glyphicon-cog "></span> <b>Car for sale?</b> Explore Cars like a pro.</h3> </div> <div class="col-md-3 col-sm-3 col-xs-12 "> <button type="button" class="btn bg-danger twhite">Start Right Now</button> </div> </div> </div> </div> <div class="footer py-5 "> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3 footer-one"> <img src="http://velikorodnov.com/html/autotrader/images/logo.png" alt="Logo" style="width:120px;"> <p class="pt-4">Cras sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <div class="social-icons"> <a href="https://www.facebook.com/"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a> <a href="https://twitter.com/"><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a> <a href="https://plus.google.com/"><i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i></a> <a href="mailto:bootsnipp@gmail.com"><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 footer-two"> <h5>Information </h5> <ul class="list-unstyled"> <li><a href="maintenance.html">Maintenance Tips</a></li> <li><a href="contact.html">Locations</a></li> <li><a href="about.html">Testimonials</a></li> <li><a href="about.html">Careers</a></li> <li><a href="about.html">Partners</a></li> </ul> </div> <div class="col-xs-12 col-sm-6 col-md-3 footer-three"> <h5>Helpful Links </h5> <ul class="list-unstyled"> <li><a href="maintenance.html">Maintenance Tips</a></li> <li><a href="contact.html">Locations</a></li> <li><a href="about.html">Testimonials</a></li> <li><a href="about.html">Careers</a></li> <li><a href="about.html">Partners</a></li> </ul> </div> <div class="col-xs-12 col-sm-6 col-md-3 footer-four"> <h5>Helpful Links </h5> <ul class="list-unstyled"> <li><a href="maintenance.html">Maintenance Tips</a></li> <li><a href="contact.html">Locations</a></li> <li><a href="about.html">Testimonials</a></li> <li><a href="about.html">Careers</a></li> <li><a href="about.html">Partners</a></li> </ul> </div> </div> </div> </div> <div class="copyright bglight1 border pt-2"> <div class="container"> <div class="row justify-content-md-center"> <p> © 2018 xyz Software Pvt. Ltd. </p> </div> </div> </div>

/************* GENERIC *****************/ a {color:#696969;} img {width:100%;} .twhite {color:#fff!important;} .twhite a {color:#fff!important;} /************* Background ****************/ .bglight1 {background:#f2f2f2;} /************* TOP-HEAD *****************/ .top-head ul li {padding-right:8px;} /****************** Navigation **************/ .navbar-toggler {border-color: #dd0000;} .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(221, 0, 0, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); } /**************** Banner Slider Carousel **************/ .carousel-inner img {width: 100%;} .carousel-caption {color:#000;top:110px; bottom: auto; text-align:left;} .carousel-caption h1 { color:#dd0000; background-color:#;} /************ Services **************/ .most-car-box:hover {background: ; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);} /*********** TABS *******/ .nav-tabs { border-bottom: 1px solid #ccc; } .nav-tabs .nav-link.active { border-bottom: 1px solid #dd0000; border-radius:0px; } /**************** Social ICONS ***************/ .social-icons{margin: 0;padding: 0; font-size : 8px;} .social {margin:7px 7px 7px 0px;} #social-fb:hover {color: #3B5998;transition:all .25s;} #social-tw:hover {color: #4099FF;transition:all .25s;} #social-gp:hover {color: #d34836;transition:all .25s;} #social-em:hover {color: #f39c12;transition:all .25s;}