airbnb (desktop)

In this example below you will see how to do a airbnb (desktop) 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
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>airbnb (desktop)</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/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 id="wrapper">
  <div class="jumbotron">
    <nav class="text-capitalize">
      <a href="#"><img id="logo" src="http://founders.com/wp-content/uploads/2014/05/airbnb-logo.png" width="100"></a>
      <a href="#">become a host</a>
      <a href="#">help</a>
      <a href="#">sign up</a>
      <a href="#">log in</a>
    </nav>
    <div id="title" class="text-uppercase">
    <h1>belong anywhere</h1>
      <p>pellentesque a libero a erat vehicula aliquam sed gravida pretium</p>
    </div>
  </div><!--jumbotron end-->
  <div class="container">
    <h2 class="text-capitalize text-xs-left">mauris condimentum euismod</h2>
    <div class="row">
      <div class="col-xs-4">
        <div class="card">
  <a href="#"><img class="card-img-top img-fluid" src="https://static.pexels.com/photos/121537/pexels-photo-121537-medium.jpeg"></a>
  <div class="card-block">
    <p class="card-text"><strong>$90</strong> Sed vel molestie felis</p>
    <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
  </div>
</div>
      </div><!--col-4 end-->
      <div class="col-xs-4">
        <div class="card">
  <a href="#"><img class="card-img-top img-fluid" src="https://static.pexels.com/photos/189333/pexels-photo-189333-medium.jpeg"></a>
  <div class="card-block">
    <p class="card-text"><strong>$150</strong> Phasellus maximus dui quis</p>
    <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
  </div>
</div>
      </div><!--col-4 end-->
      <div class="col-xs-4">
      <div class="card">
  <a href="#"><img class="card-img-top img-fluid" src="https://static.pexels.com/photos/2459/stairs-home-loft-lifestyle-medium.jpg"></a>
  <div class="card-block">
    <p class="card-text"> <strong>$60</strong> Vivamus et urna auctor, viverra</p>
    <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
  </div>
</div></div><!--col-4 end-->
    </div><!--row end-->
    <h2></h2>
    <div class="row">
    <div class="col-lg-8">
      <img src="https://static.pexels.com/photos/89873/pexels-photo-89873-medium.jpeg" width="500" class="img-fluid">
    </div><!--col-8 end-->
    <div class="col-xs-4">
      <h3>Morbi ac dictum libero nulla magna nisi?</h3>
      <p>Donec fringilla leo sit amet scelerisque gravida. Vivamus blandit metus tortor, dignissim porttitor felis eleifend sed. Morbi condimentum dolor volutpat lacus lacinia.</p>
      <button class="btn btn-success">Duis ac urna</button>
      </div><!--col-4 end-->
  </div><!--row end-->
    <h2 class="text-capitalize">duis ac urna</h2>
    <div id="box">
    <div class="row" id="main-row">
    <div class="col-md-6">
      <h4>Paris</h4>
    </div><!--col-6 end-->
    <div class="col-md-6">
      <div class="row" id="row-2">
        <div class="col-md-3">
          <h4>Rome</h4>
         </div><!--col-3 end-->
        <div class="col-md-3">
          <h4>Los Angeles</h4>
         </div><!--col-3 end-->
        <div class="col-md-3">
          <h4>Lisbon</h4>
         </div><!--col-3 end-->
        <div class="col-md-3">
          <h4>Tokyo</h4>
         </div><!--col-3 end-->
      </div><!--row end-->
    </div><!--col-6 end-->
    
  </div><!--row end-->
    
    <div class="row" id="main-row-2">
    <div class="col-md-3">
      <div class="row" id="inner-row">
        <div class="col-md-2">
          <h4>London</h4>
        </div><!--col-2 end-->
        <div class="col-md-2">
          <h4>Barcelona</h4>
        </div><!--col-2 end-->
      </div><!--row end-->
    </div><!--col-3 end-->
    <div class="col-md-6">
      <h4>New York</h4>
    </div><!--col-6 end-->
    <div class="col-md-3">
      <div class="row inner-row" id="inner-row-2">
      <div class="col-md-2">
        <h4>Amsterdam</h4>
      </div><!--col-2 end-->
      
      <div class="col-md-2">
        <h4>Berlin</h4>
      </div><!--col-2 end-->
        </div><!--row end-->
    </div><!--col-3 end-->
  </div><!--row end-->
    </div><!--box end-->
    <hr>
  </div><!--container end-->
</div><!--wrapper end-->
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js'></script>

  

</body>

</html>


/*Downloaded from https://www.codeseek.co/-J0hn-/airbnb-desktop-GjVYjK */
* {
  margin: 0;
  padding: 0;
}

body {
  box-sizing: border-box;
  background: black url("https://static.pexels.com/photos/1526/dark-blur-blurred-gradient-medium.jpg") no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}

#wrapper {
  width: 900px;
  margin: 1em auto;
  background: white;
}

.jumbotron {
  border-radius: 0px;
  padding: 0;
  height: 400px;
  background: black url("https://images.pexels.com/photos/106936/pexels-photo-106936.jpeg?h=350&auto=compress&cs=tinysrgb") no-repeat center bottom;
  background-size: cover;
}
.jumbotron nav {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-right: 1em;
  padding-top: .50em;
}
.jumbotron nav a:nth-of-type(2) {
  margin-left: auto;
  border: solid 2px white;
  padding: .15em .60em;
}
.jumbotron nav a {
  color: white;
  margin: auto .80em;
  text-decoration: none;
  text-shadow: 0 1px 2px black;
}
.jumbotron #title {
  color: white;
  text-shadow: 0 1px 2px black;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5em;
}

/* CONTAINER */
h2 {
  margin-bottom: .90em;
}

.card {
  border: none;
}

.card-block {
  padding-left: 0px;
}

.fa-star {
  color: yellow;
  margin-right: .15em;
  text-shadow: 0 1px 2px black;
}

.row:nth-of-type(2) {
  border: solid 1px lightgrey;
  margin: 1em;
  padding: .50em;
  display: flex;
  justify-content: center;
}
.row:nth-of-type(2) .col-xs-4 .btn {
  border-radius: 50px;
  padding: .70em 1.5em;
}

.row:nth-of-type(3) {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

#box {
  width: 800px;
  width: 100%;
  height: 640px;
  margin: auto;
  margin-bottom: 2em;
}

#main-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  width: 800px;
  margin: auto;
}
#main-row .col-md-6 {
  height: 320px;
  width: 430px;
}

#main-row-2 {
  border: none;
}

#row-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 480px;
}
#row-2 .col-md-3 {
  height: 150px;
  width: 200px;
  margin: 0 30px 18px -12px;
}

/*FIRST COL-MD-6 IMAGE*/
#main-row .col-md-6:nth-of-type(1) {
  background: url("https://static.pexels.com/photos/59048/pexels-photo-59048-medium.jpeg") no-repeat center center;
  background-size: cover;
  display: flex;
  flex-wrap: nowrap;
  height: 320px;
  width: 350px;
}

/*SECOND COL-MD-6 IMAGES*/
.col-md-6 #row-2 .col-md-3:nth-of-type(1) {
  background: url("https://static.pexels.com/photos/10922/pexels-photo-10922-medium.jpeg") no-repeat center center;
  background-size: cover;
}
.col-md-6 #row-2 .col-md-3:nth-of-type(2) {
  background: url("https://static.pexels.com/photos/59305/pexels-photo-59305-medium.png") no-repeat center center;
  background-size: cover;
}
.col-md-6 #row-2 .col-md-3:nth-of-type(3) {
  background: url("https://static.pexels.com/photos/9253/sea-city-landscape-sky-medium.jpg") no-repeat center center;
  background-size: cover;
}
.col-md-6 #row-2 .col-md-3:nth-of-type(4) {
  background: url("https://static.pexels.com/photos/161309/traditional-and-technology-zojoji-temple-tokyo-culture-161309-medium.jpeg") no-repeat center center;
  background-size: cover;
}

#box h4 {
  color: white;
  position: absolute;
  bottom: 0;
  font-weight: bold;
  text-shadow: 0 1px 2px black;
}

#main-row .col-md-6:nth-of-type(1), #row-2 .col-md-3 {
  cursor: pointer;
}

#main-row-2 {
  margin: auto;
  width: 800px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  margin-top: 1em;
}
#main-row-2 .col-md-2 {
  cursor: pointer;
}
#main-row-2 .col-md-6 {
  cursor: pointer;
  background: url("https://static.pexels.com/photos/1982/cars-traffic-street-new-york-medium.jpg") no-repeat center center;
  background-size: cover;
  height: 300px;
  width: 360px;
}

#inner-row, #inner-row-2, .col-md-2 {
  height: 130px;
  width: 200px;
  margin-bottom: 2.5em;
}

#inner-row .col-md-2:nth-of-type(1) {
  background: url("https://static.pexels.com/photos/34729/pexels-photo-medium.jpg") no-repeat center center;
  background-size: cover;
}
#inner-row .col-md-2:nth-of-type(2) {
  background: url("https://static.pexels.com/photos/51358/pexels-photo-51358-medium.jpeg") no-repeat center center;
  background-size: cover;
}

#inner-row-2 .col-md-2:nth-of-type(1) {
  background: url("https://static.pexels.com/photos/177166/pexels-photo-177166-medium.jpeg") no-repeat center center;
  background-size: cover;
}
#inner-row-2 .col-md-2:nth-of-type(2) {
  background: url("https://static.pexels.com/photos/65567/pexels-photo-65567-medium.jpeg") no-repeat center center;
  background-size: cover;
}

Comments

More from -J0hn-

A Pen by John

A Pen by John

By -J0hn-
Simple Responsive nav

Simple Responsive nav

By -J0hn-
Nav scroll animation

Nav scroll animation

By -J0hn-
Title Case a Sentence

Title Case a Sentence

By -J0hn-

You Might Also Like

RCROP Demo for Stackoverflow

RCROP Demo for Stackoverflow

By LordNeo
SOP // Home

SOP // Home

By mkinney
Vimeo Feed

Vimeo Feed

By ThatGuySam
http://microblog.anthonyestebe.com/2013-12-04/automatic-loader-with-ajax-call-on-angular/

http://microblog.anthonyestebe.com/2013-12-04/automatic-loader-with-ajax-call-on-angular/

By antho1404
rangeslider.js floating point boundaries

rangeslider.js floating point boundaries

By andreruffert
JavaScript Test: FizzBuzz

JavaScript Test: FizzBuzz

By alaneicker
interim

interim

By erika-harvey
Customized checkboxes with CSS

Customized checkboxes with CSS

By phuffstickler
© 2018 - Copyright CodeSeek.co
contact email