A Pen by Arvind natarajan

Thumbnail
This awesome code was written by Arvin6, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Arvin6 ©

Technologies

  • 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