<!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' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
  
  <div class="header">
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-xs-6">
        <img class="logo" src="http://s3.amazonaws.com/codecademy-content/projects/newsroom/logo.svg" width="180px">
        </div>
      <div class="col-md-6 col-md-6">
          
      </div>
      </div>
    </div>  
  </div>
  
  <div class="nav">
    <div class="container">
        <ul width="100%">
            <li><a href="#" class="active-btn">Top Stories</a></li>
            <li><a href="#">World</a></li>
            <li><a href="#">Business</a></li>
            <li><a href="#">Technology</a></li>
            <li><a href="#">Entertainment</a></li>
            <li><a href="#">Sports</a></li>
            <li><a href="#">Science</a></li>
            <li><a href="#">Health</a></li>
            <li><a href="#">Messages</a></li>
        </ul>
    </div>  
  </div>
  
  <div class="main">
    <div class="container">
      <div class="row">
        <div class="col-md-5 col-xs-5">
        <h6>August 20, 2015</h6>
        <h1>Introducing Bass</h1>
         <p>A new app by the creators of Shutterbugg that lets you enjoy your favorite music everywhere you go.</p>
        </div>
        <div class="col-md-7 col-xs-7">
        </div>
        </div>
    </div>  
  </div>
  
   <div class="supporting">
      <div class="row">
        <div class="col-md-7 col-xs-7 latest">
          <h2>Latest News</h2>
          <p>August 15, 2015</p>
          <h4>Move Launches in London</h4>
          <p>August 20, 2015</p>
          <h4>Introducing Excursion</h4>
          <p>August 25, 2015</p>
          <h4>Improvements to Shutterbugg Arrive</h4>
        </div>
        <div class="col-md-5 col-xs-5 upcoming">
          <h2>Upcoming Events</h2> 
          <p>September 8-12, 2014</p>
          <h4>Innovation Cloud 2014</h4>
          <p>November 21, 2014</p>
          <h4>LL Retrosoective</h4>
          <p>December 05, 2014</p>
          <h4>M.O.N.E.Y. Launch Event</h4>
        </div>
      </div>
  </div>
  
   <div class="footer">
    <div class="container">
      <img src="http://s3.amazonaws.com/codecademy-content/projects/newsroom/ad.jpg" class="img-responsive">
    </div>  
  </div>
  

  </body>
</html>
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}

.header {
  background-color: black;
  color: white;
  padding: 25px;
}

.nav {
  background-color: rgb(20,34,47);
  padding-top: 14px;
  padding-bottom: 12px;
}

.nav li {
  display: inline-block;
}

.nav a {
  color: white;  
  text-decoration: none;
  padding: 14px 6px 22px 6px;
}

.active-btn {
    background-color: rgb(10,23,247);
}

.nav a:hover {
    background-color: rgb(10,23,247);
}


.main {
  background: url("http://s3.amazonaws.com/codecademy-content/projects/newsroom/bass-bg.jpg")no-repeat center;
  background-size: cover;
  color: white;
  height: 400px;
  font-size: 20px;
}

.main h2 {
  text-decoration: underline;
  font-weight: bold;
}

.main p {
  font-weight: bold;
}

.supporting {
  background-color: rgb(243,243,243); ;
}

.supporting .latest {
 background-color: white;
 padding: 20px;
}

.supporting .upcoming {
 background-color: black;
 color: white;
 padding: 20px;
}

.supporting .row {
 padding-top: 60px;
 padding-bottom: 60px;
 padding-right: 60px;
 padding-left: 60px;
}

Browse more Codebits