<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>A Pen by Arvind natarajan</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid">
<div id="main-wrapper">
<div class="row">
<div class="col-md-offset-3 text-left col-lg-7">
<form class="form-group-lg">
<div id="search-wrapper">
<div id="locate" class="text-right col-lg-3 col-md-12 col-sm-12">
<div class="btn-group btn-group-lg">
<button id="d_loc" name="city" class="btn btn-success"> Chennai</button>
<button type="button" class="btn btn-success btn-lg dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="cit" class="dropdown-menu" role="menu">
<li><button class="btn form-control " >Bangalore</button></li>
<li><button class="btn form-control ">Mumbai</button></li>
</ul>
</div>
</div>
<div id="search" class="col-lg-7 col-sm-12 col-md-12">
<div class=" input-group">
<input type="text" placeholder="Search Restraunts.." class="form-control"></input>
<span class="input-group-addon"><i class="fa fa-search"></i></span></div>
</div>
<div id="sub" class="col-lg-2 col-md-2" >
<button type="submit" class="btn btn-success btn-lg"> Search</button>
</div>
</div>
</form>
</div> <!--Search bar-->
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/Arvin6/a-pen-by-arvind-natarajan-vgeovx */
*{
box-sizing:border-box;
}
@media screen and (max-width:600px){
body{
background:#FFF;
}
#sub{
display:none;
}
#search-wrapper #locate{
display:block;
text-align:center;
width:100%;
padding:5%;
}
[class*="col-"]{
width:100%;
}
}
@media screen and (min-width:900px){
html,body{
background:#01579B;
font-family:Roboto;
color:#000;
// background:url("http://hivewallpaper.com/wallpaper/2014/12/food-wallpaper-free-download-3-desktop-wallpaper.jpg")no-repeat fixed center;
background-blend-mode: darken;
}
#search-wrapper{
display:inline;
padding:0;
}
.container-fluid{
width:90%;
}
#main-wrapper{
position:absolute;
top:40%;
left:1%;
bottom:0;
width:inherit;
}
}
/*Downloaded from https://www.codeseek.co/Arvin6/a-pen-by-arvind-natarajan-vgeovx */
$(document).ready(function(){
console.log("Loaded");
$('.btn-group').find('li').find('button').on('click',function(){
var curr=$("#d_loc").text();
var city=this.innerHTML;
//alert(city);
$("#d_loc").html(city);
$(this).text(curr);
});
});