Airbnb

In this example below you will see how to do a Airbnb with some HTML / CSS and Javascript

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

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Airbnb</title>
  <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" integrity="sha384-XXXXXXXX" crossorigin="anonymous">
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js" integrity="sha384-XXXXXXXX" crossorigin="anonymous"></script>
  
  <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div>
  <header>
    <div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">Home</a>
  <a href="#">Download the App</a>
  <a href="#">Become a Host</a>
  <a href="#">Sign Up</a>
  <a href="#">Log In</a>
  <a href="#">Discover</a>
  <a href="#">Search</a>
  <a href="#">How it Works</a>
  <a href="#"></a>
  <a href="#">Help</a>
</div>
    
    <div>
  <span style="font-size:1.5em;cursor:pointer" onclick="openNav()">☰ </span>
</div>
    <div class="logo">
      <img class="img-responsive" src="http://www.colombiavipservices.com/assets/images/airbnb.png">
    </div>
  </header>
</div>

<div id="main" class="jumbotron-fluid">
  <div class="nav">
    <ul>
      
      <li class="white-tooltip" data-toggle="tooltip" data-placement="bottom" title="You could earn $530 sharing your home in a week. Become a host.">Become a Host</li>
      <li>Help</li>
      <li>Sign Up</li>
      <li>Log In</li>
    </ul>
  </div>
  <!--nav end-->

  <div>
    <img id="play-btn" class="center-block img-responsive" src="http://airbnbhost.cz/assets/img/play-button.png">
    <h2 class="text-xs-center">LIVE THERE</h2>
    <p id="sub-headline" class="text-xs-center font-weight-bold">Book homes from local hosts in 191+ countries and experience a place like you live there</p>
  </div>

  <div class="search">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-8 col-md-offset-2">
          <div class="form-section">
            <div class="row">
              <form role="form">
                <div class="col-md-3">
                  <div class="form-group">
                    <label class="sr-only" for="location">Location</label>
                    <input type="email" class="form-control" id="location" placeholder="Where to?">
                  </div>
                </div>
                <div class="col-md-2 hidden-sm-down">
                  <div class="form-group">
                    <label class="sr-only" for="checkin">Check in</label>
                    <div class="input-group">
                      <input type="text" class="form-control" id="checkin" placeholder="Check in">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                  </div>
                </div>
                <div class="col-md-2 hidden-sm-down">
                  <div class="form-group">
                    <label class="sr-only" for="checkout">Check out</label>
                    <div class="input-group">
                      <input type="text" class="form-control" id="checkout" placeholder="Check out">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                  </div>
                </div>
                <div class="col-md-2 hidden-sm-down">
                  <div class="form-group">
                    <label class="sr-only" for="guest">Guest</label>
                    <select id="guest" name="guest" class="form-control">                               <option value="0"></option>
                              <option value="1">1 Guest</option>
                              <option value="2">2 Guests</option>
                              <option value="3">3 Guests</option>
                              <option value="4">4 Guests</option>
                              <option value="5">5 Guests</option>
                              <option value="6">6 Guests</option>
                              <option value="7">7 Guests</option>
                              <option value="8">8 Guests</option>
                              <option value="9">9 Guests</option>
                              <option value="10">10 Guests</option>
                              <option value="11">11 Guests</option>
                              <option value="12">12 Guests</option>
                              <option value="13">13 Guests</option>
                              <option value="14">14 Guests</option>
                              <option value="15">15 Guests</option>
                              <option value="16">16+ Guests</option>
                          </select>
                  </div>
                </div>
                <div class="col-md-3 button">
                  <button type="submit" class="btn btn-default btn-primary">Search</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
<!--jumbotron end-->

<div class="container">
  
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-J0hn-/airbnb-akYgwz */


.jumbotron-fluid {
  background: lightgrey;
  height: 100vh;
  background-image: url('http://static1.techinsider.io/image/56ddea00910584145c8b485c-1190-625/this-private-club-is-like-airbnb-for-the-ultra-rich--take-a-look-inside.jpg');
  background-size: cover;
}

.tooltip-arrow,
.white-tooltip + .tooltip > .tooltip-inner {
  background-color: #fff;
  color: #000;
  font-size: 1.2em;
  border-radius: 0;
}
.tooltip-inner {
  padding: 20px 0;
}

 h2 {
    color: #fff;
  }


/**************
   HEADLINE
**************/
#sub-headline {
  color: #fff;
  font-size: 1.2em;
}

/****************
  SEARCH BAR
****************/
.search {
	margin-top: 5%;
}
.row {
  margin: 5px 0 5px 0;
}
/* .search .form-section {
  margin-left: auto;
  margin-right: auto;
} */
.search .form-section{
	background:rgba(0,0,0,0.6);
	border: 1px solid #414141;
	border-radius: 5px;
	padding: 11px 0 1px 0;
}
.btn {
  background: #fd5c63;
  border-color: #fd5c63;
  padding: 7px 40px;
}
.btn:hover {
  background: rgba(241,102,100, .9);
  border-color: rgba(241, 102, 100, .9);
}

/***************
  SCROLL BAR
****************/
::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 5px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	width: 8px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #fd5c63;
}








/***************
  MEDIA QUERY
****************/
@media screen and (min-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 1.1em;}
}



@media (min-width: 769px) {
  header {
    background: white;
    height: 0;
    margin: 0;
  }
  #main {
    transition: margin-left .5s;
    padding: 7x;
}
  .logo {
    visibility: collapse;
  }
  img[src*="http://villabenni.it/wp-content/uploads/2015/10/airbnb_horizontal_lockup_white_web.png"] {
    width: 120px;
  }
  #play-btn {
    width: 80px;
    position: relative;
    top: 200px;
    padding-top: 40px;
  }
  h2 {
    font-size: 3.4em;
    position: relative;
    top: -100px;
    margin-top: 100px;
    margin-bottom: 50px;
  }
  #sub-headline {
    font-size: 1.4em;
    position: relative;
    top: -130px;
  }
  header span {
    margin: 10px;
    color: #fd5c63;
    visibility: hidden;
  }
  .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    overflow: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 7px 8px 7px 32px;
    text-decoration: none;
    font-size: 25px;
    color: red;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #fd5c63;
}
  

.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
}

  
   ul {
  list-style: none;
  color: white;
}
ul li:hover {
  cursor: pointer;
}

.nav,
ul{
  display:flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: baseline;
}
li{
  padding-right: 20px;
  margin-right: 15px;
  margin-top: 10px;
}

li:nth-of-type(1){
  border: solid 2px #fff;
  padding: 5px 10px;
}
li:nth-of-type(1):hover {
  background: rgba(204, 204, 204, .2);
}


}

@media (max-width: 769px) {
  header {
    background: white;
    height: 45px;
    padding: 8px 0 0 15px;
    transition: .2s ease-out;
  }
  .logo {
    width: 100px;
   margin: -30px auto;
    
  }
  ul {
    visibility: hidden;
  }
  
  #play-btn {
    width: 60px;
    opacity:10;
    margin: 30px auto;
  }
  #sub-headline {
    font-size: .98em;
  }
  
  span {
    margin: 10px;
    color: #fd5c63;
  }
  .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background-color: #111;
    
    
    overflow-x: hidden;
    overflow: hidden;
    transition: 0.5s;
    padding-top: 45px;
}

.sidenav a {
    padding: 8px 10px 7px 20px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #fd5c63;
}
 

.closebtn {
    position: absolute;
    top: 0;
    right: 20px;
    font-size: 36px !important;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 8x;
}

}

@media (max-width:766px) {
  .button {
    display: flex;
    justify-content: row;
  }
  .btn {
    flex-grow:1;
    margin-bottom: 8px;
  }
}




/*Downloaded from https://www.codeseek.co/-J0hn-/airbnb-akYgwz */
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
  
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}



$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});



$(window).ready(function(){
      var nowTemp = new Date();
      var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0);
      var checkin = $('#checkin').datepicker({
        onRender: function(date) {
          return date.valueOf() < now.valueOf() ? 'disabled' : '';
        }
      }).on('changeDate', function(ev) {
        if (ev.date.valueOf() > checkout.date.valueOf()) {
          var newDate = new Date(ev.date)
          newDate.setDate(newDate.getDate() + 1);
          checkout.setValue(newDate);
        }
        checkin.hide();
        $('#checkout')[0].focus();
      }).data('datepicker');
      var checkout = $('#checkout').datepicker({
        onRender: function(date) {
          return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
        }
      }).on('changeDate', function(ev) {
        checkout.hide();
      }).data('datepicker');
    });

Comments