HTML & CSS_Project_Shutterbugg

1.Use CSS to add a background image to the main section. Here's the image we used.

.main {
            background-image: url('https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg');
            height: 550px;
            padding-top: 55px;
        } 

2.In the main section, add text for the heading and subheading. Add a link that says Download Shutterbugg and write CSS to style it into a button. Color the button rgba(238,68,95,0.9).

                   <div class="main">
                        <div class="container">
                            <h1>Introducing Shutterbugg</h1>
                            <p>Capture the moments that matter.</p>
                            <a class="download" href="#">
                                Download Shutterbugg
                            </a>
                        </div>
                    </div>  

       .download {
            background-color:rgba(238,68,95,0.9);
            border-radius:4px;
            color: #fff;
            padding: 8px 30px;
            transition:box-shadow 0.5s;
        }
        .download:hover {
            background-color:rgba(238,68,95,1);
            box-shadow:0px 1px 6px rgba(0,0,0,0.6);
            border-radius:4px;
            color: #fff;
            padding: 8px 30px;
            text-decoration: none;
            transition:box-shadow 0.25s;
        }

3.Within the first <div class="section">, use Bootstrap's grid system to create a row that has two equal-sized columns.

Inside the first column, add this image.
Inside the second column, add text for the heading and paragraph.
                              <div class="row">
                                    <div class="col-md-6">
                                        <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/share.png" >
                                    </div>
                                    <div class="col-md-6">
                                        <h1>Share</h1>
                                        <p>
                                            Share your moments with the people who matter to you most. With Shutterbugg, it's easy to share with the right people.
                                        </p>
                                    </div>
                                </div>

4.Inside the second <div class="section">, create a row that has two equal-sized columns.

In the first column, add text for the heading and paragraph.
In the second column, add this image .

                           <div class="row">
                                <div class="col-md-6">
                                    <h1>Explore</h1>
                                    <p>
                                        Explore moments from your friends and family. Shutterbugg makes it easy to see what's happening in the world and take in everything around you.
                                    </p>
                                </div>
                                <div class="col-md-6" style="text-align: right;">
                                    <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/explore.png" >
                                </div>
                            </div>

5.Inside the third <div class="section">, create a row that has two equal-sized columns.

Inside the first column, add this image.
Inside the second column, add text for the heading and paragraph.
<div class="row">
                            <div class="col-md-6">
                                <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/save.png" >
                            </div>
                            <div class="col-md-6">
                                <h1>Save</h1>
                                <p>Save every photo you take. Shutterbugg automatically saves your photos so you can show them off from anywhere.</p>
                            </div>
                        </div> 

6.In the footer, create a row with three equal-sized columns.

Inside the first column, add a heading that says Company and a list with items that say Careers, Terms, and Help. Write CSS to adjust the text size and to color the text #555555.
Inside the second and third columns, add headings and lists as shown in the redesign.

                      <div class="row">
                            <div class="col-md-3">
                                <h3>Company</h3>
                                <ul>
                                    <li>Careers</li>
                                    <li>Terms</li>
                                    <li>Help</li>
                                </ul>
                            </div>
                            <div class="col-md-3">
                                <h3>Products</h3>
                                <ul>
                                    <li>Shutterbugg</li>
                                    <li>Speakerboxx</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 {
            border-top: 1px solid #dbdbdb;
            background-color: #f3f3f3;
            padding: 20px 0px 80px;
        }
        .footer h3 {
            color: #555;
            font: 400 1.2em 'Open Sans',arial,sans-serif;
            margin-bottom: 10px;
        }
        .footer ul {
            list-style-type: none;
            padding-left: 0;
        }
        .footer li {
            color: #999;
            font-weight: 600;
        }