<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
	<link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    <div class="main">
        <div class="container">
            <div class="navbar">
              <a class="navbar-brand" href="#">
                <img alt="Brand" src="http://s3.amazonaws.com/codecademy-content/projects/bass/logo.svg">
              </a>
              <ul class="pull-right list-unstyled">
                  <li><a href="#">Features</a></li>
                  <li><a href="#" class="btn">Download</a></li>
              </ul>
            </div>
        
            <div class="content">
                <h1>Turn up the bass.</h1>
                <p>From the newest beats to the hottest jams, we have the best music for you to enjoy.</p>
            </div>
        </div>
    </div>
    
    <div class="supporting grey">
        <div class="container">
            <div class="row">
                <div class="col-xs-6">
                    <img src="http://s3.amazonaws.com/codecademy-content/projects/bass/you.svg">
                </div>
                <div class="col-xs-6">
                <h2>Music just for you</h2>
                <p>We carefully curate and select great traks to be the soundtrack to your life-movie.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="supporting">
        <div class="container">
            <div class="row">
                <div class="col-xs-6">
                    <h2>Listen everywhere</h2>
                <p>Well, anywhere you can find wifi, you silly goose!</p>
                </div>
                <div class="col-xs-6">
                <img src="http://s3.amazonaws.com/codecademy-content/projects/bass/everywhere.svg">
                </div>
            </div>
        </div>
    </div>
    
    <div class="supporting grey">
        <div class="container">        
            <div class="row">
                <div class="col-xs-6">
                    <img src="http://s3.amazonaws.com/codecademy-content/projects/bass/connect.svg">
                </div>
                <div class="col-xs-6">
                <h2>Connect with others</h2>
                <p>Being social is always a nice thing to do, so you should probably do it more. </p>
                </div>
            </div>
        </div>    
    </div>
    
    <div class="feature">
        <div class="container text-center">
            <h2>Try it now</h2>
            <img src="http://s3.amazonaws.com/codecademy-content/projects/bass/app-store.png">
            <img src="http://s3.amazonaws.com/codecademy-content/projects/bass/google-play.png">
        </div>
    </div>
    
    <div class="footer">
      <div class="container">
        <div class="row">
            <div class="col-xs-2">
             <ul class="list-unstyled">
                 <li>Bass</li>
                 <li><a href="#">Careers</a></li>
                 <li><a href="#">Team</a></li>
             </ul>
            </div>
            <div class="col-xs-2">
                <ul class="list-unstyled">
                 <li>About</li>
                 <li><a href="#">Gift Cards</a></li>
                 <li><a href="#">Trailers</a></li>
             </ul>
            </div>
            <div class="col-xs-2">
                <ul class="list-unstyled">
                 <li>Support</li>
                 <li><a href="#">Blog</a></li>
                 <li><a href="#">Twitter</a></li>
                 <li><a href="#">Youtube</a></li>
             </ul>
            </div>
            <div class="col-xs-2">
                <ul class="list-unstyled">
                 <li>Community</li>
                 <li><a href="#">Contact</a></li>
                 <li><a href="#">Email</a></li>
                 <li><a href="#">Music</a></li>
                                  <li><a href="#">Instagram</a></li>
             </ul>
            </div>
        </div>
    </div>
    
  </body>
</html>
html, body {
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #fff;
}

.main{
    background: url(http://s3.amazonaws.com/codecademy-content/projects/bass/bg.jpg) no-repeat center center fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  
  height: 550px;
}
.navbar ul{
    margin-top: 2em;
}

.navbar li{
    display: inline;
    padding: 1em;
}

.navbar li a{
    color:#fff;
}

.navbar img{
    height: 3em;
}

.btn {
    background-color: #FC0F43;
    border-radius: 0;
    width: 8em;
}

.btn:hover{
    color: #000;
    background-color: #fff;
}

.content{
    color: #fff;
    width: 32em;
}

h1 {
    font-size: 4em;
    margin-top: 2em;
}

.content p{
    font-size: 1.3em;
}

.supporting .row{
    margin: 3em 0;
}

.grey{
    background-color: #161718;
}

.feature{
    background: url(http://s3.amazonaws.com/codecademy-content/projects/bass/feature.jpg) no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  
  height: 300px;
}

.feature h2{
    margin-top: 3em;
}

.footer{ 
    padding: 3em;
}

.footer li{
    margin-bottom: .5em;
}

.footer li a{
    color: #3e3e3e;
}

.footer li:first-child{
    margin-bottom: .5em;
    text-transform: uppercase;
}

Browse more Codebits