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