<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;}
}
