<!DOCTYPE html>
<html>

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="style.css">
    
  </head>

  <body>
    <div class="nav">
      <div class="container">
        <ul class="pull-left">
          <li><a href="#">Home</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul class="pull-right">
          <li><a href="#">Signup</a></li>
          <li><a href="#">Login</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
        <h1>Find a place to stay.</h1>
        <p>Or just a lot of pictures of corgis.</p>
        <a href="#">Learn More</a>
      </div>
    </div> 
    <div class="neighborhood-guides">
      <div class="container">
        <h2> Neighborhood Guides </h2>
        <p> Not sure where to stay? Great! We've got loads of corgis to help you decide! </p>
        <div class="row">
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="http://i.imgur.com/8gpaY5u.jpg">
            </div>
            <div class="thumbnail">
              <img src="http://i.imgur.com/YwkuheC.jpg"> 
            </div>
          </div>
          <div class=col-md-4>
            <div class="thumbnail">
              <img src="http://i.imgur.com/bMDGhRs.jpg">
            </div>
            <div class="thumbnail">
              <img src="http://i.imgur.com/bh3lxdE.jpg">
            </div>
            
          </div>
          <div class=col-md-4>
            <div class="thumbnail">
              <img src="http://i.imgur.com/XkfjNl6.jpg">
            </div>
            <div class="thumbnail">
              <img src="http://i.imgur.com/XneV0Ts.jpg">
            </div>
            
          </div>
          

    <div class="learn-more">
	  <div class="container">
	    <div class="row">
	      
		<div>
		<div class="col-md-4">
	      <div>
			<h3>Travel</h3>
			<p> You see a Corgi wearing glass. You are in a tree. Which path do you take?</p>
			<p><a href="#">Learn about technology and nature at AirBnB</a></p>
	      </div>
	      </div>
	      <div class="col-md-4">
		  <div>
			<h3>Host</h3>
			<p>When hosting a BnB, always avoid serving your guests bees. Instead, opt for a healthy, baked bread.</p>
			<p><a href="#">Learn about insects and baking at AirBnB</a></p>
		  </div>
		  </div>
		  <div class="col-md-4"> 
		  <div>
			<h3>Trust and Safety</h3>
			<p>You want to be safe and protected like this Thor Corgi, not like this Corgi being attacked by a squid</p>
			<p><a href="#">Learn about trust at Airbnb</a></p>
		  </div> 
		  </div>
		  </div>
	    </div>
	  </div>
	</div>
  </body>
</html>
.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav li {
  display: inline;
}

.jumbotron {
  background-image:url('http://i.imgur.com/goZHWZc.jpg');
  height: 500px;
}

.jumbotron .container {
  position: relative;
  top:100px;
}

.jumbotron h1 {
  color: #fff;
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.jumbotron p {
  font-size: 20px;
  color: #fff;
}

.learn-more {
  background-color: #f7f7f7;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight:bold;
}

.learn-more a {
  color: #00b0ff;
}

.neighborhood-guides {
    background-color: #efefef;
    border-bottom: 1px solid #dbdbdb;
}

.neighborhood-guides h2 {
    color: #393c3d;
    font-size: 24px; 
    font-weight:bold;
}
.neighborhood-guides p {
    font-size:15px;
    margin-bottom:13px;
}

    
    
    
Created from scratch
2 bifurcars
123 vers

Explorá más Codebits