HTML & CSS_Project_Bolt Network

1.In the jumbotron section, add a row with one column. Next, add a div and set its class to pull right.

In the column, add the logo .
In the div, add two items: Login and a Sign Up link colored #0393FF.
         <div class="row">
            <div class="col-md-2">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/logo.svg" width="180" height="34">
            </div>
            <div class="pull-right">
              <ul>
                <li>Log in</li>
                <li>
                  <a href="#" class="btn btn-default">Sign up</a>
                </li>
              </ul>
            </div>
          </div>
      /* Header */
      .header {
        color:#fff;
      }

      .header ul {
        list-style: none;
      }

      .header li {
        display: inline;
        margin-right: 30px;
      }

      /* Jumbotron */
      .jumbotron {
        background-color: #000;
        height:600px;
      }

      .jumbotron h1 {
        color:#fff;
        font-weight:300;
        margin-top:80px;
        margin-bottom:40px; 
      }

      .jumbotron .btn {
        color:#0393ff;
        background:transparent;
        border:1px solid #0393ff;
        border-radius:2px;
        padding:8px 20px;
      }

      .jumbotron .btn:hover {
        color:#fff;
        background-color:#0393ff;
      }

2.In the main section, add text for the heading and another link that says Learn More.

Next, add an inline form and style its borders using CSS.
          <h1>Watch your favorite movies, instantly.</h1>
          <a class="btn btn-default" href="#">Learn More</a>
          <form class="form-inline" role="form">
            <div class="form-group">
              <input type="text" class="form-control" id="search" placeholder="Browse the collection">
            </div>
            <button type="submit" class="btn btn-submit">Search</button>
          </form>     

      form {
        margin-top:80px;
      }

      #search {
        background:transparent;
        border:0px;
        border-radius:0;
        border-bottom:1px solid #fff;
        color:#fff;
        font-size:18px;
        margin:0 20px;
        width:400px;
      }

      #search:hover {
        border-bottom:1px solid #0393ff;
      }

      #search:focus {
        border-bottom:1px solid #0393ff;
        box-shadow:0px 0px 0px;
        outline:0px;
      }

3.In the supporting section, add text for the heading and subheading. Below the text, create four rows of images.

The first row is made up of two columns. Set the class of the first column to col-md-8 and the class of the second column to col-md-4.
The second row is made up of three equal-sized columns. Set the class of each column to col-md-4.
The third row is made up of two columns. Set the class of the first column to col-md-4 and the class of the second column to col-md-8.
Finally, the fourth row is made up of three equal-sized columns. Set the class of each column to col-md-4.
Inside of each column, each image should also be enclosed in a div with a class of thumbnail.
Feel free to use images of your favorite movies. In order, here are the images we used: The Avengers, Harry Potter, Frozen, Iron Man 3, Transformers, Lord of the Rings, Skyfall, The Dark Knight, Pirates of the Caribbean, and Toy Story 3.
        <h2>A world of movies at your fingertips.</h2>
        <p>Choose from the latest titles, with new movies added every day.</p>
        <div class="row">
          <div class="col-md-8">
            <div class="thumbnail">
              <!-- The Avengers -->
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/the-avengers.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <!-- Harry Potter and the Deathly Hallows -->
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/harry-potter.jpg">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <div class="thumbnail">
              <!-- Frozen -->
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/frozen.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <!-- Iron Man 3 -->
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/iron-man.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <!-- Transformers: Dark of the Moon -->
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/transformers.jpg">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <div class="thumbnail">
              <!-- The Lord of the Rings -->
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/lord-of-the-rings.jpg">
            </div>
          </div>
          <div class="col-md-8">
            <div class="thumbnail">
              <!-- Skyfall -->
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/skyfall.jpg">
            </div>

  /* Supporting */
      .main,
      .supporting h2,
      .supporting p,
      .feature {
        text-align: center;
        color:#fff;
      }

      .supporting {
        padding-bottom:80px;
      }

      .supporting h2, .feature h1 {
        color:#0393ff;
        margin-top:60px;
        margin-bottom: 10px;
        font-size: 32px;
        font-weight:300;
      }

      .supporting p {
        margin-bottom: 45px;
        font-size: 16px;
      }

      .supporting .thumbnail {
        background:transparent;
        border: none;
        padding: 0;
      }

4.In the feature section, add text for the heading and subheading. Change the background image. Feel free to use your own image. Here's the one we used.

       <h1>Available everywhere</h1>
        <p>Start watching on one device, and pick up where you left off on another device.</p>
     /* Feature */
      .feature {
        background: url(https://s3.amazonaws.com/codecademy-content/projects/bolt-network/feature.jpg) no-repeat center center;
        background-size: cover;
        height: 380px;
        padding: 100px 0 0 0;
      }

      .feature p {
        font-size:18px;
      }

5.In the footer section, add a row with three columns of equal width. Set the class of the columns to col-md-3. In each column, add text for a heading and a list with items.

      <div class="row">
          <div class="col-md-3">
            <h3>Bolt</h3>
            <ul>
              <li>Careers</li>
              <li>Terms</li>
              <li>Help</li>
            </ul>
          </div>
          <div class="col-md-3">
            <h3>More Bolt</h3>
            <ul>
              <li>Gift Cards</li>
              <li>Trailers</li>
            </ul>
          </div>
          <div class="col-md-3">
            <h3>News</h3>
            <ul>
              <li>Blog</li>
              <li>Twitter</li>
              <li>YouTube</li>
              <li>Google+</li>
              <li>Facebook</li>
            </ul>
          </div>
        </div>
     .footer {
        background:#000;
        padding:60px 0;
      }

      .footer h3 {
        color:#fff;
        font-size:18px;
        font-weight:300; 
      }

      .footer ul {
        color:#0393ff;
        list-style:none;
        padding-left:0px; 
      }