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