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