Item: A Pen by Arvind natarajan
Rating: 3.4
Author: Arvin6

0 Downloads
2 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

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

Comments

More from Arvin6

A Pen by Arvind natarajan

Technologies

Comments

More from Arvin6

A Pen by Arvind natarajan

A Pen by Arvind natarajan

A Pen by Arvind natarajan

A Pen by Arvind natarajan

You Might Also Like

Modal - Pure CSS (no Javascript)

E-Commerce Product-Grid Filter with OWL-Carousel

SVG textPath is fun! : )

Sokkia posts

CSS3 Reflection

A Pen by arpit

Memory-Game-Project3

kinetic email Stars