<!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=Oxygen:300,400,700' rel='stylesheet' type='text/css'>
	<link rel='stylesheet' href='style.css'/>
	<script src='script.js'></script>
  </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/bolt-network/logo.svg">
          </a>
          <ul class="pull-right">
              <li><a href="#">Log in</a></li>
              <li><a href="#" class="btn">Sign Up</a></li>
          </ul>
        </div>
        
        <h1>Watch your favorite movies, instantly.</h1>
        <a href="#" class="btn btn2">Learn More</a>
        
        <form class="form-inline" type="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Browse the collection">
              </div>
              <button type="submit" class="btn">Search                    </button>
            </form>
        </form>
        
      </div>
    </div>

    <div class="supporting text-center">
      <div class="container">
        <h2>A world of movies at your fingertips</h2>
        <p>Choose from the latest titles, added every day.</p>
        <div class="row">
            <div class="col-xs-8">
            <img src="http://s3.amazonaws.com/codecademy-content/projects/bolt-network/the-avengers.jpg">
            </div>
            <div class="col-xs-4">
            <img src="http://s3.amazonaws.com/codecademy-content/projects/bolt-network/harry-potter.jpg">
            </div>
        </div>
        
        <div class="row">
            <div class="col-xs-4">
            <img src="http://s3.amazonaws.com/codecademy-content/projects/bolt-network/frozen.jpg">
            </div>
            <div class="col-xs-4">
            <img src="http://s3.amazonaws.com/codecademy-content/projects/bolt-network/iron-man.jpg">
            </div>
            <div class="col-xs-4">
            <img src="http://s3.amazonaws.com/codecademy-content/projects/bolt-network/transformers.jpg">
            </div>
        </div>
        
        <div class="row">
            <div class="col-xs-4">
            <img src="http://s3.amazonaws.com/codecademy-content/projects/bolt-network/lord-of-the-rings.jpg">
            </div>
            <div class="col-xs-8">
            <img src="http://s3.amazonaws.com/codecademy-content/projects/bolt-network/skyfall.jpg">
            </div>
        </div>
        
        <div class="row">
            <div class="col-xs-4">
            <img src="http://s3.amazonaws.com/codecademy-content/projects/bolt-network/the-dark-knight.jpg">
            </div>
            <div class="col-xs-4">
            <img src="http://s3.amazonaws.com/codecademy-content/projects/bolt-network/pirates-of-the-caribbean.jpg">
            </div>
            <div class="col-xs-4">
            <img src="http://s3.amazonaws.com/codecademy-content/projects/bolt-network/toy-story-3.jpg">
            </div>
        </div>
        
      </div>
    </div>

    <div class="feature">
      <div class="container">
        <h2>Available Everywhere.</h2>
        <p class="text-center">Start watching on one device, and pick it up on another device.</p>
      </div>
    </div>

    <div class="footer">
      <div class="container">
        <div class="row">
            <div class="col-md-2">
             <ul class="list-unstyled">
                 <li>Bolt</li>
                 <li><a href="#">Careers</a></li>
                 <li><a href="#">Team</a></li>
             </ul>
            </div>
            <div class="col-md-2">
                <ul class="list-unstyled">
                 <li>More Bolt</li>
                 <li><a href="#">Gift Cards</a></li>
                 <li><a href="#">Trailers</a></li>
             </ul>
            </div>
            <div class="col-md-2">
                <ul class="list-unstyled">
                 <li>News</li>
                 <li><a href="#">Blog</a></li>
                 <li><a href="#">Twitter</a></li>
                 <li><a href="#">Facebooke</a></li>
                                  <li><a href="#">Instagram</a></li>
                 <li><a href="#">Youtube</a></li>



             </ul>
            </div>
        </div>
    </div>
  </body>
</html>
html, body {
  font-family: "Oxygen", sans-serif; 
  font-weight: 300; 
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #fff;
}

.container {
  width: 970px;
}

.navbar{
    margin-top: 1em;
}

.navbar-brand{
    width: 25%;
}

.navbar ul{
    margin-top: 1em;
}
.navbar li{
    display: inline;
    margin: 1em;
}

.navbar a{
    color: #fff;
}

.btn{
    border: 1px solid #4789F8;
}

a.btn{
    color: #4789F8;
}

a.btn:hover{
    color: #fff;
    border: 1px solid #fff;
}

.main{
    color: #fff;
}

.main h1{
    font-size: 5em;
    text-align: center;
    font-weight: 300;
    margin-top: 1.5em;
}

.btn.btn2{
    display: block;
    width: 10em;
    margin: 3em auto;
}

.form-control{
    background-color: #000;
    border: none;
    border-bottom: 1px solid #fff;
    border-radius: 0;
}

form.form-inline{
    display: block;
    text-align: center;
    margin-top: 4em;
    margin-bottom: 6em;
}

.form-inline .form-group input{
    width:30em;
    margin: auto;
}

button.btn{
    background-color: #000;
    color: #4789F8;
    margin-left: 1em;
}

button.btn:hover{
    color: #fff;
    border: 1px solid #fff;
}

.supporting {
  background: url(http://s3.amazonaws.com/codecademy-content/projects/bolt-network/diagmonds_@2X.png) repeat;
  background-size: 141px 142px;
  color: #fff;
  padding-bottom: 4em;
}

h2{
    color: #4789F8;
    text-align: center;
    margin-top: 2em;
}

.supporting p{
    margin-bottom: 4em;
}

.supporting .row{
    margin-top: 2em;
}

.supporting img{
    width: 100%;
}

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

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

.footer{ 
    padding: 3em;
}

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

Browse more Codebits