<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="container">
          <ul class="nav">
              <li><a href="#">About</a></li>
              <li><a href="#">Animals</a></li>
              <li><a href="#">Adoptly</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Events</a></li>
          </ul>
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
      <h1>Meet your new best friend.</h1>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h2>Search</h2>
                <p>You can find the perfect pet for your home through our awesome filtering services</p>
                <a href="#" class="btn">Go</a>
            </div>
            <div class="col-md-4">
                <h2>Learn</h2>
                <p>Find out more about breads, and how to become certified. We try to make it simple.</p>
                <a href="#" class="btn">Go</a>
            </div>
            <div class="col-md-4">
                <h2>Help</h2>
                <p>Dogs can help you if you've fallen and cannot get up. They are animals, thus there's no need to make a call.</p>
                <a href="#" class="btn">Go</a>
            </div>
        </div>
      </div>
    </div>
    
    <div class="footer">
      <div class="container">
        <div class="row">
            <div class="col-md-10">
                <p>&copy Adoptly 2015
            </div>
            <div class="col-md-1">
                <p><a href="#">FAQ</a></p>
            </div>
            <div class="col-md-1">
                <p><a href="#">Contact</a></p>
            </div>
        </div>
      </div>
    </div>
  </body>
</html>
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

.container {
    max-width: 940px;
}

.header{
    background-color: #33637E;
    margin: 0 auto;
}

.nav{
    text-align: center;
    width: 100%;
  display: table;
}

.nav li {
    display: inline;
    background-color: #33637E;
    display: table-cell;
  width: auto;
  text-align: center;
}

.nav li a{
    color: #fff;
    padding: .7em 2em;
}

.nav li:nth-child(3){
    background-color: #E42966;
    font-size: 2em;
}

.nav li:nth-child(3):hover{
    background-color: #E42966;
    font-size: 2em;
}

.nav li:hover{
    background-color: #E42966;
}

.jumbotron{
    height: 500px;
    background: url(http://s3.amazonaws.com/codecademy-content/projects/adoptly/bg.jpg) no-repeat center center;
    background-size: cover;
}

.jumbotron h1{
    text-align: center;
    color: #E42966;
    font-weight: 600;
}

.supporting{
    text-align: center;
    margin-bottom: 5em;
}

.btn{
    border: 1px solid #33637E;
    padding: .5em 5em;
    text-transform: uppercase;
}

.footer {
    background-color: #e52364;
    padding: 2em;
    color: #fff;
}

.footer a{
    color: #fff;
}

Browse more Codebits