HTML & CSS_Project_Bass

1.First add a jumbotron section, complete with a container and header inside of it.

Inside the header, add a row with two columns in the following order: col-md-3 and col-md-9.
Add the logo in the first column.
In the second column, add a list that contains Features and Download. Display the list items on one line. Style Download into a button.

2.Change the background image of the jumbotron section. Here's the image we used.

3.Still inside of the jumbotron section, add a main section. Add a row with one column. Set the class of the column to col-md-7.

Inside the column, first add text for the heading and the subheading.

                    <div class="jumbotron">
                        <div class="container">
                            <div class="header">
                                <div class="row">
                                    <div class="col-md-3">
                                        <img class="logo" src="https://s3.amazonaws.com/codecademy-content/projects/bass/logo.svg" width="106" height="75"/>
                                    </div>
                                    <div class="col-md-9">
                                        <ul class="pull-right">
                                            <li><a href="#">Features</a></li>
                                            <li><a class="btn btn-default" href="#">Download</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="main">
                                <div class="row">
                                    <div class="col-md-7">
                                        <h1>Turn Up the Bass</h1>
                                        <p>From the newest releases to classic albums, we have the best music for you to enjoy.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> 
       .container {
            max-width: 1000px;
        }
        .jumbotron {
            background: url(https://s3.amazonaws.com/codecademy-content/projects/bass/bg.jpg) no-repeat center center;
            background-size: cover;
            background-color: transparent;
            height: 560px;
        }
        /* Header */
        .header, .header a {
            color: #fff;
        }
        .header li {
            display: inline-block;
            margin-left: 13px;
            margin-top: 40px;
        }
        .header a {
            padding: 15px;
            font-weight:bold;
        }
        .header .btn-default {
            border:0px;
            border-radius: 0;
            padding: 8px 30px;
            background-color:#ff003d;
        }
        .main h1 {
            padding-top:60px;
        }
        /* Main */
        .main {
            color: #fff;
        }

4.Add three separate sections for supporting content. Set the class of each section to supporting-1, supporting-2, and supporting-3, respectively.

Each supporting section should have one row with two columns of equal width.
For the first and third sections: The first column should contain an image. The second column should contain a heading and a subheading.
The second section should reverse the order of the columns (text first, image second).
Here is the image for the first section, the image for the second section, and the image for the third section.

5.Add a supporting-4 section with a container (no rows or columns).

In this section, first add text for the heading. Then add images for the App Store and Google Play.
Change the background image of the supporting-4 section. Feel free to use your own image. Here's the image we used.

                <div class="supporting-1">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-6">
                                    <img src="https://s3.amazonaws.com/codecademy-content/projects/bass/you.svg" width="450" height="300">
                                </div>
                                <div class="col-md-6">
                                    <h2>Music Just for You</h2>
                                    <p>Listen to your favorite artists and albums, and make playlists of your favorite songs. Get recommendations based on your tastes to discover new music.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="supporting-2">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-6">
                                    <h2>Listen Everywhere</h2>
                                    <p>Take your music with you everywhere you go. Listen for free for free on any device - mobile, tablet, and your computer. </p>
                                </div>
                                <div class="col-md-6">
                                    <img src="https://s3.amazonaws.com/codecademy-content/projects/bass/everywhere.svg" width="450" height="300">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="supporting-3">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-6">
                                    <img src="https://s3.amazonaws.com/codecademy-content/projects/bass/connect.svg" width="450" height="300">
                                </div>
                                <div class="col-md-6">
                                    <h2>Connect with Others</h2>
                                    <p>Find the right songs for the right occassions. Let your friends know what you're listening to, and connect with others who share the music you love.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="supporting-4">
                        <div class="container">
                            <h2>Try it now</h2>
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/bass/app-store.png">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/bass/google-play.png">
                        </div>
                    </div> 

6.Add a footer section with a container.

In the container, add four columns (no rows). Set the class of each column to col-md-2.
Each column should have a heading and a list with items.
                   <div class="footer">
                        <div class="container">
                            <div class="col-md-2">
                                <h3>Bass</h3>
                                <ul>
                                    <li><a href="#">Install</a></li>
                                    <li><a href="#">Mobile</a></li>
                                </ul>
                            </div>
                            <div class="col-md-2">
                                <ul>
                                    <h3>About</h3>
                                    <li><a href="#">Blog</a></li>
                                    <li><a href="#">Team</a></li>
                                    <li><a href="#">Jobs</a></li>
                                </ul>
                            </div>
                            <div class="col-md-2">
                                <ul>
                                    <h3>Support</h3>
                                    <li><a href="#">Help Center</a></li>
                                    <li><a href="#">Get Started</a></li>
                                    <li><a href="#">Contact Us</a></li>
                                </ul>
                            </div>
                            <div class="col-md-2">
                                <ul>
                                    <h3>Community</h3>
                                    <li><a href="#">Facebook</a></li>
                                    <li><a href="#">Twitter</a></li>
                                    <li><a href="#">Google+</a></li>
                                </ul>
                            </div>
                        </div>
                    </div> 
         /* Footer */
        .footer {
            background-color: #000;
            color: #fff;
            padding: 50px 0 35px 0;
        }
        .footer h3 {
            text-transform: uppercase;
            font-size: 15px;
        }
        .footer ul {
            padding: 0;
            list-style: none;
        }
        .footer a {
            color: #aaa;
            font-size: 13px;
            display: inline-block;
            padding: 5px 0;
        } 

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; 
      }
 

HTML & CSS_Project_Pocketbook

1.In the header, add the logo and a bottom border.

      <img src="https://s3.amazonaws.com/codecademy-content/projects/pocketbook/logo.svg" width="50">

      /* Header */
      .header {
        text-align: center;
        margin-bottom: 50px;
      }
      .header .container {
        padding: 30px 0;
        border-bottom: 1px solid #e5e5e5;
      }

2.In the main section, add a row with one column. Add text for the heading and a form.

Read how to use Bootstrap's form component, and add fields for First name, Last name, Email, Password, and a Create account button. Use CSS to style the form fields' borders.
       <div class="row">
          <div class="col-md-7">
            <h1>Join Pocketbook</h1>
            <form role="form">
              <div class="form-group">
                <label for="first">First name</label>
                <input type="text" class="form-control" id="first">
              </div>
              <div class="form-group">
                <label for="last">Last name</label>
                <input type="text" class="form-control" id="last">
              </div>
              <div class="form-group">
                <label for="email">Email</label>
                <input type="email" class="form-control" id="email">
              </div>
              <div class="form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control" id="password">
              </div>
              <button type="submit" class="btn">Create account</button>
            </form>       
          </div>
        </div>

       /* Form */
      form input.form-control {
        border:0px;
        border-radius:0px;
      }
      .main .btn {
        margin-top:30px;
        color:#fff;
        background:rgba(0,240,190,0.25);
        border:0px;
        border-radius:0px;
      }

3.In the footer, add text for the three items and a top border. Display the items on one line.

        <ul>
          <li>Contact</li>
          <li>Help Center</li>
          <li>About</li>
        </ul>

      /* Footer */
      .footer .container {
        padding: 20px 0;
        border-top: 1px solid #e5e5e5;
      }
      .footer ul {
        list-style: none;
        padding: 0 20px;
        margin-bottom: 80px;
      }
      .footer li {
        display: inline;
        margin-right: 20px;
      }

4.Change the background image of the body. Here's the one we used.

     body {
        background-image:url(https://s3.amazonaws.com/codecademy-content/projects/pocketbook/bg.jpg);
        background-size:cover; 
        background-repeat:no-repeat;
        background-color: #140e07;
        color:#fff;
      }

HTML & CSS_Project_Excursion

1.In the main section, just before the content container div, add a <video> element that uses this video.

Search online for what the video element is and how to use it. Check out the autoplay and loop attributes as well.
            <video autoplay muted loop>
                <source src="https://s3.amazonaws.com/codecademy-content/projects/excursion/bg.mp4" type="video/mp4">
            </video> 

2.In the main section, inside the content container div, add text for the heading and for a button. Use CSS to style the button.

                <h1>Discover hidden places in the world around you</h1>
                <p><a class="btn" href="#">Download Excursion</a></p>

         .btn{
                background-color:#4386fc;
                color:#fff;
                font-size:16px;
                font-weight:300;
                padding:16px 26px;
                text-decoration:none
            }

           .video-section .section-content{
                position:absolute;
                top:200px;
                width:100%;
                text-align:center;
                color:#fff;
                left: 0;
                right: 0;
                margin: 0 auto;
            }
            .video-section h1{
                color:#fff;
                font-size:50px;
                margin-top:0;
                margin-bottom:50px;
                text-shadow:0 2px 3px rgba(0,0,0,.4);
                padding: 0 40px;
            }

3.In the first supporting div, add text for the heading and paragraph.

                <h2>Your personal travel guide</h2>
                <p>Excursion remembers places you like, and recommends new points of interest around you.</p>

            .text-section{
                margin-top:100px;
                text-align:center;
                margin-bottom:130px
            }
            .text-section h2{
                font-size:48px;
                font-weight:300;
                margin-top:40px;
                margin-bottom:40px
            }
            .text-section p{
                color:#333;
                font-size:21px;
                padding: 0 30px;
            }

4.Change the background image of the feature section. Here's the image we used.

             .feature-section{
                background:url("https://s3.amazonaws.com/codecademy-content/projects/excursion/camp.png") no-repeat center center;
                background-size:cover;
                height:500px;

              }

5.In the second supporting div, add an image for binoculars, text for the subheading, and a link that says Download Excursion.

                 <p>
                    <img class="app" src="https://s3.amazonaws.com/codecademy-content/projects/excursion/binoculars.png">
                </p>
                <h2>Available for iPhone and Android</h2>
                <a class="btn" href="#">Download Excursion</a>

 

6.In the footer, add text for the copyright and color the background #eeeeee.

           <div class="container">
            <p>&copy; Excursion</p>
            </div>

           .footer{
                background-color:#eee;
                font-size:11px;
                padding:5px 0
            } 

HTML & CSS_Project_Headlines

1.In the header section, add a row with two columns.

In the first column, add a heading with the company name.
In the second column, use Bootstrap's navigation tabs to create a menu with four links, and align using the class pull-right.
               <div class="row">
                    <div class="col-md-3">
                        <h1>Headlines.</h1>
                    </div>
                    <div class="col-md-9">
                        <ul class="nav nav-tabs pull-right">
                            <li><a href="#">About</a></li>
                            <li><a href="#">Our Services</a></li>
                            <li><a href="#">Our Team</a></li>
                            <li><a href="#">Contact Us</a></li>
                        </ul>
                    </div>
                </div> 
            /* Header */
            .header {
                padding: 30px 0px 80px;
            }
            .header h1 {
                font-size: 20px;
            }
            .nav li a {
                color: #333;
                margin:0;
                border:0px;
            } 

2.In the jumbotron section, add text for the heading. Color collect and curate hex color #ffc200.

                <h2>
                    We <span>collect and curate</span> <br/> articles, opinions, and images <br/> from around the world.
                </h2>  

            .jumbotron h2 {
                font-size: 50px;
                margin-bottom: 120px;
            }
            .jumbotron h2 span {
                color:#ffc200;
            }
            .jumbotron p {
                text-shadow: 0 0;
                font-size: 16px;
                color: #666;
                margin-bottom: 0;
                } 

3.In the banner section, add text for the heading and paragraph. Set the background color to #333.

                <h1>The Bottom Line.</h1>
                <p> We deliver the news that is relevant to you.<p>  

            /* Banner */
            .banner {
                background-color: #333;
                color: #fff;
                padding: 20px;
                text-align: center;
            } 

4.In the cards section, first add a heading. Next, create a row with three columns.

In the first column, add images for Television Broadcasts, Radio Broadcasts, and Podcasts.
Here are the images we used: Online Newspapers, Magazines, Print Broadcasts, Online Magazines, Photojournalism, RSS Readers, Company Blogs.
                <h2>Our Expertise.</h2>
                <div class="row">
                    <div class="col-md-4">
                        <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p1.jpg">
                        <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p2.jpg">
                        <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p3.jpg">
                    </div>
                    <div class="col-md-4">
                        <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p6.jpg">
                        <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p5.jpg">
                        <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p4.jpg">
                    </div>
                    <div class="col-md-4">
                        <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p7.jpg">
                        <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p8.jpg">
                        <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p9.jpg">
                        <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p10.jpg">
                    </div>
                </div>

            /* Cards */
            .cards {
                background:#ffc200;
                padding: 80px 0;
            }
            .cards h2 {
                margin: 20px 0 60px 0;
                text-align: center;
            }
            .cards img {
                margin-bottom: 25px;
            } 

5.In the footer, add a row with one column. In the column, add text for the heading and the address. Check out Bootstrap's addresses component.

Add three social media image links. Here are the images we used: email, Facebook, Twitter (these images are white and will show up on a dark background).
                <div class="row">
                    <div class="align-left col-md-4">
                        <h3>Headlines.</h3>
                        <p>1000 7th Avenue</p>
                        <p>New York, NY</p>
                        <p>(484) 192 - 8372</p>
                        <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/email.svg"></a>
                        <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/fb.svg"></a>
                        <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/twitter.svg"></a>
                    </div>
                </div> 
            /* Footer */
            .footer {
                padding: 60px 0px;
                background-color: #000;
                color: #fff;
            }
            .footer h3 {
                font-size: 20px;
            }
            .footer img {
                width: 24px;
                margin-top:10px;
                margin-right:10px;
            }
            .footer p {
                font-size:12px;
                margin-bottom: 0;
            }