"Search Engine"
Bootstrap 3.3.0 Snippet by imsachin

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!DOCTYPE html> <html lang="en"> <head> <title>HTML</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="style.css"> </head> <body> <!--search engine--> <div class="container search"> <div class="row"> <ul class="nav nav-tabs nav-tabs1"> <li class="active"><a data-toggle="tab" id="menu4" href="#home">Flights</a></li> <li><a data-toggle="tab" href="#menu1">Hotels</a></li> <li><a data-toggle="tab" href="#menu3">Cars</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade in active"> <div class="form-check-inline trip"> <label class="radio-inline"> <input type="radio" name="optradio" id="menu4" checked>Round Trip</label> <label class="radio-inline" > <input type="radio" name="optradio" id="menu2">One Way</label> </div> <div class="col-md-5"> <div class="row"> <div class="col-md-6 pr"> <div class="form-group relative"> <i class="fa fa-map-marker inputIcon" aria-hidden="true"></i> <input type="origin" class="form-control control" id="tags" placeholder="Enter origin City"> </div> </div> <div class="col-md-6 pr"> <div class="form-group relative"> <i class="fa fa-map-marker inputIcon" aria-hidden="true"></i> <input type="destination" class="form-control control" id="tags1" placeholder="Enter Destination City"> </div> </div> </div> </div> <div class="col-md-5"> <div class="row"> <div class="col-md-7"> <div class="row"> <div class="col-md-6 pr"> <div class="form-group relative"> <i class="fa fa-calendar inputIcon1" aria-hidden="true"></i> <input type="email" class="form-control inputcal depart_date" placeholder="Depart"> </div> </div> <div class="col-md-6 pr oneway"> <div class="form-group relative"> <i class="fa fa-calendar inputIcon1" aria-hidden="true"></i> <input type="email" class="form-control inputcal return_date" placeholder="Return"> </div> </div> </div> </div> <div class="col-md-5 pr"> <div class="form-group relative"> <i class="fa fa-user inputIcon2" aria-hidden="true"></i> <input type="email" class="form-control travel" placeholder="Traveler/Economy"> <div class=""> <div class="traveler-inside"> <div class="select1">Select Class</div> <select class="select2"> <option value="economy">Economy</option> <option value="premium economy">Premium Economy</option> <option value="business class">Business Class</option> <option value="first class">First Class</option> </select> <div class="modify-search"> <div class="modify-search-section"> <span class="adult">Adults</span> <div class="buttongroup"> <input id="sub1minus" class="btn btn-default altera decrescimo" type="button" onclick="MinusPax('Adult');" value="-"> <input id="txtAcrescimo" name="Adult" type="text" value="1" readonly=""> <input id="sub1plus" class="btn btn-default altera acrescimo" type="button" onclick="PlusPax('Adult');" value="+"> </div> </div> <div class="modify-search-section"> <span class="adult">Child(2-11)</span> <div class="buttongroup"> <input id="sub1minus" class="btn btn-default altera decrescimo" type="button" onclick="MinusPax('Adult');" value="-"> <input id="txtAcrescimo" name="Adult" type="text" value="1" readonly=""> <input id="sub1plus" class="btn btn-default altera decrescimo" type="button" onclick="PlusPax('Adult');" value="+"> </div> </div> <div class="modify-search-section"> <span class="adult">infant Lap(0-2)</span> <div class="buttongroup"> <input id="sub1minus" class="btn btn-default" type="button" onclick="MinusPax('Adult');" value="-"> <input id="Adult" name="Adult" type="text" value="1" readonly=""> <input id="sub1plus" class="btn btn-default " type="button" onclick="PlusPax('Adult');" value="+"> </div> </div> </div> <button type="btn-btn-danger" class="done" style="margin-top: 9px;margin-left: 120px;">Done</button> </div> </div> </div> </div> </div> </div> <div class="col-md-2 "> <a href="" class="btn btn-danger search1">Search</a> </div> <div class="pb20"></div> </div> <div id="menu1" class="tab-pane fade"> <h3> --Coming soon</h3> </div> <div id="menu3" class="tab-pane fade"> <h3> --Coming soon1</h3> </div> </div> </div> </div> <script> $( function() { $( ".depart_date" ).datepicker({ numberOfMonths: 2, minDate: 0 }); $( ".return_date" ).datepicker({ numberOfMonths: 2, minDate: 0 }); }); </script> <script> $(document).ready(function(){ $(".travel").click(function(){ //travel section start $(".traveler-inside").slideToggle(500); // travel section end }); $("#menu2").click(function(){ $(".oneway").hide(); }); $(".done").click(function(){ $(".traveler-inside").hide(); }); $("#menu4, .flight").click(function(){ $(".oneway").show(); }); }); </script> <script> $( function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "sachin", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); } ); </script> <script> $( function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "sachin", "Scala", "Scheme" ]; $( "#tags1" ).autocomplete({ source: availableTags }); } ); </script> <script> // Cache do elemento para evitar constantes ciclos de procura pelo mesmo var $input = $("#txtAcrescimo"); // Colocar a 0 ao início $input.val(0); // Aumenta ou diminui o valor sendo 0 o mais baixo possível $(".altera").click(function(){ if ($(this).hasClass('acrescimo')) $input.val(parseInt($input.val())+1); else if ($input.val()>=1) $input.val(parseInt($input.val())-1); }); </script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </body> </html>
body{margin:0px;padding:0px;font-size:16px;font-family:'Roboto', sans-serif;} ul{margin:0px;padding:0px;} a:hover{text-decoration:none;} /*css*/ .mt{margin-top:0px;} .mt10{margin-top:10px;} .mt20{margin-top:20px;} .mt40{margin-top:40px;} .mb{margin-bottom:0px;} .mb10{margin-bottom:10px;} .mb20{margin-bottom:20px;} .mb40{margin-bottom:40px;} .pad{padding:0px;} .pt10{padding-top:10px;} .pt20{padding-top:20px;} .pt40{padding-top:40px;} .pb10{padding-bottom:10px;} .pb20{padding-bottom:20px;} .pb40{padding-bottom:40px;} .pr{padding-right:0px;} .width100 {width: 100%;} .relative{position:relative;} .absolute{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} /*banner*/ .mainBG{background:url(../images/banner.jpg)no-repeat center center;background-size:cover;height:782px;} .navbar-default{background: rgba(30, 50, 102, 0.9);border:transparent;padding:10px;} .navbar-default .navbar-nav li a{color:#fff;font-weight:500;} .navbar-default .navbar-nav li a:hover{color:#f9d903;} .navbar-default .navbar-nav .dropdown-menu li a{color:#000;} /*search engine*/ .search{margin-top:15%;} .nav-tabs1{border:transparent;border-radius:0px;} .nav-tabs1 li a{padding:10px 30px;background:#009eef;color:#fff;border-radius: 0px 0px 0 0;border: 0px solid #ddd;margin-right: 1px;} .nav-tabs1 li a:hover{background:#fff;border:transparent;color:#000;} .nav-tabs1>li.active>a{background-color:#fff;border: 0px solid #ddd;} .trip{padding:10px;} .inputIcon{position:absolute;top:49%;left:4%;transform:translate(-50%,-50%);} .control{padding: 6px 18px;height:40px;border:none;} .inputcal{height:40px;border:none;} .travel{height:40px;border:none;} .search1{width:100%;height:40px;font-size:16px;padding-top:10px;border-radius:30px;background:#009eef;border:none;} .inputIcon1{position:absolute;top:30%;left:5%;} .inputcal{padding: 6px 26px;height:40px;border:none;} .inputIcon2{position:absolute;top:30%;left:5%;} .travel{padding: 6px 26px;height:40px;border:none;} .tab-content>.active {display: inline-block;background-color:#f1f1f1;} .tab-content>.tab-pane {width: 100%;} /*traveler-part*/ .traveler{margin-top:2px;} .traveler-inside{padding:10px;background:#fff;border:1px solid #eee;position:absolute;width: 100%;display:none;z-index:1;} .select1{font-size:14px;color:#18a3a8;} .select2{padding:2px;border:1px solid #ccc;} .adult{font-size:14px;color:#18a3a8;} .modify-search-section{float:left;} /*calender-part-start*/ .ui-datepicker .ui-datepicker-header { background: #009eef; } /*calender-part-end*/ /*traveler-inside-start*/ .buttongroup { width: 100%; } .buttongroup input.btn-default { color: #fff; background-color: #009eef; border-color: #009eef; border-radius: 0; font-weight: 600; } .buttongroup input { border: 1px solid #143ca1; background: #fff; width: 32px; margin: 0; padding: 2px 0; float: left; text-align: center; outline: 0; color: #143ca1; font-size: 12px; } /*traveler-inside-end*/ @media (max-width: 1200px){ } @media (min-width: 1025px) and (max-width: 1200px){ } @media (min-width: 768px) and (max-width: 1024px){ .inputIcon{position:absolute;top:49%;left:10px;transform:translate(-50%,-50%);} .inputIcon1{position:absolute;top:30%;left:1%;} .inputcal{padding: 6px 26px;height:40px;border:none;} .inputIcon2{position:absolute;top:30%;left:1%;} .travel{padding: 6px 26px;height:40px;border:none;} .pr{padding-right:15px;} } @media (min-width: 481px) and (max-width: 767px){ .inputIcon{position:absolute;top:49%;left:2%;transform:translate(-50%,-50%);} .control{padding: 6px 24px;height:40px;border:none;} .inputIcon1{position:absolute;top:30%;left:1%;} .inputcal{padding: 6px 26px;height:40px;border:none;} .inputIcon2{position:absolute;top:30%;left:1%;} .travel{padding: 6px 26px;height:40px;border:none;} .pr{padding-right:15px;} } @media (min-width: 320px) and (max-width: 480px) { .inputIcon{position:absolute;top:49%;left:3%;transform:translate(-50%,-50%);} .control{padding: 6px 24px;height:40px;border:none;} .inputIcon1{position:absolute;top:30%;left:2%;} .inputcal{padding: 6px 28px;height:40px;border:none;} .inputIcon2{position:absolute;top:30%;left:2%;} .travel{padding: 6px 26px;height:40px;border:none;} .pr{padding-right:15px;} }

Related: See More


Questions / Comments: