"Flight Widget"
Bootstrap 3.0.0 Snippet by sachinkul6185@gmail.com

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-xs-6"><div class="count"><span class="plus">+</span><input type="text" class="num"><span class="minus">-</span></div></div> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-8 col-xs-12"> <div class="tabing"> <ul> <li ><a href="#1" class="active"><span><i class="fa fa-plane" aria-hidden="true"></i></span> Flight</a></li> <li ><a href="#2" ><span><i class="fa fa-bed" aria-hidden="true"></i></span> Hotels</a></li> </ul> <div class="tab-content"> <div id="1" class="tab1 active"> <form> <div class="triptype"> <label class="rndTrip active"><input type="radio" name="Round" value="RoundTrip" checked> Round Trip</label> <label class="oneTrip"><input type="radio" name="Round" value="OneWay"> OneWay </label> </div> <div class="col-sm-12 col-xs-12 ctrl"> <i class="fa fa-map-marker" aria-hidden="true"></i> <input id="airport_city" type="text" class="form-control" name="airport_city" value="" placeholder="Enter a city or Airport"> </div> <div class="col-sm-12 col-xs-12 ctrl"> <i class="fa fa-map-marker" aria-hidden="true"></i> <input id="airport_city_to" type="text" class="form-control" name="airport_city" value="" placeholder="Enter a city or Airport"> </div> <div class="col-sm-6 col-xs-6 ctrl"> <i class="fa fa-calendar" aria-hidden="true"></i> <input id="depart" type="text" class="form-control" name="depart" value="" placeholder="dd-mm-yyyy"> </div> <div class="col-sm-6 col-xs-6 ctrl hide_one-trip"> <i class="fa fa-calendar" aria-hidden="true"></i> <input id="airport_city_Return" type="text" class="form-control" name="Return" value="" placeholder="dd-mm-yyyy"> </div> <div class="select-wrap"> <div class="adult-box"> <span>Adult</span> <select> <option>1</option> <option>2</option> <option>2</option> <option>4</option> <option>5</option> <option>6</option> </select> </div> <div class="adult-box"> <span>Seniors</span> <select> <option>1</option> <option>2</option> <option>2</option> <option>4</option> <option>5</option> <option>6</option> </select> </div> <div class="adult-box"> <span>Children</span> <select> <option>1</option> <option>2</option> <option>2</option> <option>4</option> <option>5</option> <option>6</option> </select> </div> <div class="adult-box pull-right"> <span>Class</span> <select> <option>Coach</option> <option>Business</option> <option>Economy</option> <option>General</option> </select> </div> </div> <div class="select-wrap prefered-airline"> <div class="adult-box"> <select> <option value="All">Airlines</option> <option value="VW">AEROMAR</option> <option value="3H">AIR INUIT</option> <option value="NQ">AIR JAPAN</option> <option value="MD">AIR MADAGASCAR</option> <option value="AZ">ALITALIA</option> <option value="JA">B H AIRLINES</option> <option value="NC">NATIONAL JET SYSTEMS</option> <option value="AQ">9 AIR</option> <option value="9B">ACCESRAIL</option> <option value="6U">ACG AIR CARGO</option> <option value="JP">ADRIA AIRWAYS</option> <option value="A3">AEGEAN AIRLINES</option> <option value="EI">AER LINGUS</option> <option value="NG">AERO CONTRACTORS</option> <option value="P5">AERO REPUBLICA</option> <option value="WV">AERO VIP COMPANHIA TRANSPORTES</option> <option value="H4">AERO4M</option> <option value="7L">AEROCARIBBEAN</option> <option value="A4">AEROCOMERCIAL ORIENTE NORTE</option> <option value="VB">AEROENLACES NACIONALES</option> <option value="SU">AEROFLOT</option> <option value="5P">AEROLINEA PRINCIPAL CHILE</option> <option value="AR">AEROLINEAS ARGENTINAS</option> <option value="2K">AEROLINEAS GALAPAGOS</option> <option value="P4">AEROLINEAS SOSA</option> <option value="A8">AEROLINK UGANDA LIMITED</option> <option value="5D">AEROLITORAL</option> <option value="AM">AEROMEXICO</option> <option value="VH">AEROPOSTAL</option> <option value="HN">AFGHAN JET INTERNATIONAL</option> <option value="FK">AFRICA WEST CARGO GHD</option> <option value="AW">AFRICA WORLD AIRLINES</option> <option value="8U">AFRIQIYAH AIRWAYS</option> <option value="AH">AIR ALGERIE</option> <option value="G9">AIR ARABIA</option> <option value="E5">AIR ARABIA EGYPT</option> <option value="9P">AIR ARABIA JORDAN</option> <option value="QN">AIR ARMENIA</option> <option value="UU">AIR AUSTRAL</option> <option value="W9">AIR BAGAN</option> <option value="BT">AIR BALTIC</option> <option value="AB">AIR BERLIN</option> </select> </div> <div class="adult-box"> <select> <option value="All">Economy</option> <option value="VW">Business</option> <option value="3H">First</option> </select> </div> </div> <div class="col-lg-12"> <input type="submit" class="srch" value="Search Flights" /> </div> </form> </div> <div id="2" class="tab1"> <form> <div class="triptype"> <label><input type="radio" name="Round" value="RoundTrip" checked> Round Trip</label> <label><input type="radio" name="Round" value="OneWay"> OneWay </label> </div> <div class="col-sm-12 col-xs-12 ctrl"> <i class="fa fa-map-marker" aria-hidden="true"></i> <input id="airport_city" type="text" class="form-control" name="airport_city" value="" placeholder="Enter a city or Airport"> </div> <div class="col-sm-12 col-xs-12 ctrl"> <i class="fa fa-map-marker" aria-hidden="true"></i> <input id="airport_city_to" type="text" class="form-control" name="airport_city" value="" placeholder="Enter a city or Airport"> </div> <div class="col-sm-6 col-xs-6 ctrl"> <i class="fa fa-calendar" aria-hidden="true"></i> <input id="depart" type="text" class="form-control" name="depart" value="" placeholder="dd-mm-yyyy"> </div> <div class="col-sm-6 col-xs-6 ctrl"> <i class="fa fa-calendar" aria-hidden="true"></i> <input id="airport_city_Return" type="text" class="form-control" name="Return" value="" placeholder="dd-mm-yyyy"> </div> <div class="select-wrap"> <div class="adult-box"> <span>Adult</span> <select> <option>1</option> <option>2</option> <option>2</option> <option>4</option> <option>5</option> <option>6</option> </select> </div> <div class="adult-box"> <span>Seniors</span> <select> <option>1</option> <option>2</option> <option>2</option> <option>4</option> <option>5</option> <option>6</option> </select> </div> <div class="adult-box"> <span>Children</span> <select> <option>1</option> <option>2</option> <option>2</option> <option>4</option> <option>5</option> <option>6</option> </select> </div> <div class="adult-box pull-right"> <span>Class</span> <select> <option>Coach</option> <option>Business</option> <option>Economy</option> <option>General</option> </select> </div> </div> <div class="select-wrap prefered-airline"> <div class="adult-box"> <select> <option value="All">Airlines</option> <option value="VW">AEROMAR</option> <option value="3H">AIR INUIT</option> <option value="NQ">AIR JAPAN</option> <option value="MD">AIR MADAGASCAR</option> <option value="AZ">ALITALIA</option> <option value="JA">B H AIRLINES</option> <option value="NC">NATIONAL JET SYSTEMS</option> <option value="AQ">9 AIR</option> <option value="9B">ACCESRAIL</option> <option value="6U">ACG AIR CARGO</option> <option value="JP">ADRIA AIRWAYS</option> <option value="A3">AEGEAN AIRLINES</option> <option value="EI">AER LINGUS</option> <option value="NG">AERO CONTRACTORS</option> <option value="P5">AERO REPUBLICA</option> <option value="WV">AERO VIP COMPANHIA TRANSPORTES</option> <option value="H4">AERO4M</option> <option value="7L">AEROCARIBBEAN</option> <option value="A4">AEROCOMERCIAL ORIENTE NORTE</option> <option value="VB">AEROENLACES NACIONALES</option> <option value="SU">AEROFLOT</option> <option value="5P">AEROLINEA PRINCIPAL CHILE</option> <option value="AR">AEROLINEAS ARGENTINAS</option> <option value="2K">AEROLINEAS GALAPAGOS</option> <option value="P4">AEROLINEAS SOSA</option> <option value="A8">AEROLINK UGANDA LIMITED</option> <option value="5D">AEROLITORAL</option> <option value="AM">AEROMEXICO</option> <option value="VH">AEROPOSTAL</option> <option value="HN">AFGHAN JET INTERNATIONAL</option> <option value="FK">AFRICA WEST CARGO GHD</option> <option value="AW">AFRICA WORLD AIRLINES</option> <option value="8U">AFRIQIYAH AIRWAYS</option> <option value="AH">AIR ALGERIE</option> <option value="G9">AIR ARABIA</option> <option value="E5">AIR ARABIA EGYPT</option> <option value="9P">AIR ARABIA JORDAN</option> <option value="QN">AIR ARMENIA</option> <option value="UU">AIR AUSTRAL</option> <option value="W9">AIR BAGAN</option> <option value="BT">AIR BALTIC</option> <option value="AB">AIR BERLIN</option> </select> </div> <div class="adult-box"> <select> <option value="All">Economy</option> <option value="VW">Business</option> <option value="3H">First</option> </select> </div> </div> <div class="col-lg-12"> <input type="submit" class="srch" value="Search" /> </div> </form> </div> </div> </div> </div> </div> </div> </div>
/* font-family: 'Open Sans', sans-serif; font-family: 'Roboto', sans-serif; */ body{ background: url(../images/body-bg.jpg) no-repeat center center; font-family: 'Roboto', sans-serif; height: 100%; position: relativ} *:focus{outline:none} a:hover{text-decoration:none} .wraper{width:100%;float:left;} .header{width:100%;float:left;background:#fff;padding:10px 0; box-shadow: 0 0 5px #000;} .tabing{width:100%; float:left;} .tabing ul{margin:0px; padding:0px;list-style:none;width:20%; float: left;} .tabing ul li{ float: left; text-align: left;background: rgba(10,22,37,.8); width: 100%;margin-bottom:1px; } .tabing ul li a{display: block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; padding: 10px 20px; cursor: pointer; text-decoration: none; color: #fff; -webkit-tap-highlight-color: rgba(0,0,0,0); font-size: 17px; text-align: center;} .tabing ul li a.active {} .tabing ul li a span { display: block; text-align: center; color: #fff; font-size: 28px;} .tab1{float: left;width: 100%;color: #fff;text-align: left;font-size: 20px;line-height: 25px;display: none;text-transform: capitalize;background: rgba(10,22,37,.8);color:#000;} .tab-content {float:left; width:80%;} .tab-content .triptype label{ font: 400 14px/20px "Roboto"; width: auto; display: inline-block; color: #fff; text-transform: uppercase; margin: 2px 10px; padding-bottom: 6px;cursor:pointer;} .tab-content .triptype label.active{ border-bottom: 2px solid #ff6600; } .tab-content .input-group label{font: 400 15px/28px "Roboto";margin: 0;width: 60px;text-align: left;} .triptype{width: 100%; float: left; text-align: center; margin: 17px 0;} .triptype input[type="radio"]{ font-size: 0; position: absolute; left: -9999px;} .ctrl i{ position: absolute; top: 9px; left: 24px; color: #ccc; font-size: 23px;} .ctrl .form-control{ border: none; border-radius: 0; margin-bottom: 20px; height: auto; padding: 8px 8px 8px 40px; line-height: 25px;} .tab1.active{display:block} .select-wrap{ width: 100%; float: left; padding: 0 15px;} .select-wrap .adult-box{width:22%; float:left;margin-right:16px;} .select-wrap.prefered-airline .adult-box{width:48%; float:left;margin-right:16px;margin-top:20px;} .select-wrap .adult-box:last-child{margin-right:0px;} .select-wrap .adult-box select{ width: 100%; padding: 10px 6px 10px 5px; border-radius: 0; font: 400 12px/14px "Roboto"; margin-top: 2px; border: none;} .select-wrap span {display:block ; font: 400 14px/15px "Roboto"; margin:0px 0 0 0; text-align: left;width:100%;color:#fff;} .srch{ border: none; background: #ff6600; color: #fff; padding: 6px 15px; margin-top: 10px; font: 400 20px/26px "Roboto"; width: 100%; text-transform: uppercase;margin-bottom:15px;} /*calender*/ .ui-datepicker{padding:0px;border-radius:0px;} .ui-widget-header{background:transparent;border:none} .ui-datepicker td span, .ui-datepicker td a{text-align:center;} .ui-datepicker td {background:transparent;border:none} .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus ,.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{ border: 0;background: transparent;font-weight: normal;color: #2b2b2b;} .ui-state-default.ui-state-active{background:#ff6600;color:#fff} .ui-state-default.ui-state-highlight{background:#082d45;color:#fff} .ui-datepicker-multi .ui-datepicker-buttonpane{display:none;} .ui-datepicker-multi-2 .ui-datepicker-group {width: 50%;border-right: 1px solid #ccc;}
$(document).ready(function() { $('.tabing a').click(function (e) { e.stopPropagation(); e.preventDefault(); var tabcont = $(this).attr('href'); $('.tabing a').removeClass('active'); $(this).addClass('active'); $('.tab1').fadeOut(0); $(tabcont).fadeIn(200); }); $('.tab-content .triptype label').click(function(){ $(this).addClass('active'); $(this).siblings().removeClass('active'); }); $('.tab-content .triptype label.oneTrip ').click(function(){ $('.hide_one-trip').hide(); }); $('.tab-content .triptype label.rndTrip ').click(function(){ $('.hide_one-trip').show(); }); }); $( function() { $( "#depart" ).datepicker({ numberOfMonths: 2, showButtonPanel: true }); } ); <script> var num = 0 $(".num").val(num); $(".plus").click(function(){ num = num + 1; if (num >10) { num = 10 $(this).parents(".col-xs-4").find(".message").val("Maximum Limit"); } else { $(this).parents(".col-xs-4").find(".message").val(""); } $(this).next(".num").val(num); }); $(".minus").click(function(){ num = num - 1; if (num < 0) { num = 0 $(this).parents(".col-xs-4").find(".message").val("Minimum Limit"); } else { $(this).parents(".col-xs-4").find(".message").val(""); } $(this).prev(".num").val(num); });

Related: See More


Questions / Comments: