HTML & CSS_Project_Newsroom

1.Add a header section with a container.Next, add the logo and an inline form.

       <div class="header">
            <div class="container">
                <img src="https://s3.amazonaws.com/codecademy-content/projects/newsroom/logo.svg" width="210" height="50">
                <div class="search">
                    <form class="search-form">
                        <input type="text" placeholder="Search NewsRoom">
                        <button type="submit" class="search-btn">Search</button>
                    </form>
                </div>
            </div>
        </div> 

           /*HEADER*/
            .header {
                background: #000;
                min-height: 80px;
            }
            .header img {
                margin: 15px 0 0 0;
            }
            .search {
                float:right;
                margin: 25px 0 0 0;
            }
            .search-form input {
                background: transparent;
                border: 0px;
                border-bottom: 1px solid #fff;
                color: #fff;
                height: 30px;
                width: 240px;
            }
            .search-form input:hover, .search-form input:focus {
                border-bottom: 1px solid #1a77ff;
                outline: 0px;
            }
            .search-btn {
                background: transparent;
                border: 0px;
                border-bottom: 1px solid #1a77ff;
                color: #fff;
                height: 30px;
                margin: 0 0 0 10px;
                padding: 0 10px;
            }  

2.Add a menu section with a container. In the container, add a list with eight items:

• Top Stories
• World
• Business
• Technology
• Entertainment
• Sports
• Science
• Health

      <div class="menu">
            <div class="container">
                <ul class="nav">
                    <li class="active"><a href="#">Top Stories</a></li>
                    <li><a href="#">World</a></li>
                    <li><a href="#">Business</a></li>
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Entertainment</a></li>
                    <li><a href="#">Sports</a></li>
                    <li><a href="#">Science</a></li>
                    <li><a href="#">Health</a></li>
                </ul>
            </div>
        </div> 

3.Add a main section with a container. In it, add one row with a column that has a class of col-md-5.

In the column, add text for the date, heading, and subheading.
In style.css, change the background image of the main section. Here's the image we used.
        <div class="main">
            <div class="container">
                <div class="row">
                    <div class="col-md-5">
                        <p class="date">November 7, 2014</p>
                        <h2><span>Introducing Bass</span></h2>
                        <p>A new app by the creators of Shutterbugg that lets you enjoy your favorite music everywhere you go.</p>
                    </div>
                </div>
            </div>
        </div> 
            /*MAIN*/
            .main {
                background: url(https://s3.amazonaws.com/codecademy-content/projects/newsroom/bass-bg.jpg) no-repeat center;
                background-size: cover;
                height: 500px;
            }
            .main .container .col-md-5 {
                padding:40px;
            }
            .main .container .col-md-5 p.date {
                color: #fff;
                font-size: 16px;
            }
            .main .container .col-md-5 h2 {
                color: #fff;
                font-size: 60px;
                margin: 20px 0;
            }
            .main .container .col-md-5 h2 span {
                border-bottom: 5px solid #1a77ff;
            }
            .main .container .col-md-5 p {
                color: #fff;
                font-size: 20px;
            } 

4.Add a supporting section with a container. In the container, create two rows.

The first row should have two columns. Set the class of the first column to col-md-8. Set the class of the second column to col-md-4 sidebar.
In the first column, add the heading Latest News along with dates. In the second column, add the heading Upcoming Events along with dates.
The second row should have only one column. Set the class of the column to col-md-12. The column should display this image advertising the Innovation Cloud conference.
       <div class="supporting">
            <div class="container">
                <div class="row">
                    <div class="col-md-8">
                        <h3>Latest News</h3>
                        <ul>
                            <li>
                                <p class="date">November 5, 2014</p>
                                <h4><span>MOVE Launches in London</span></h4>
                            </li>
                            <li>
                                <p class="date">November 4, 2014</p>
                                <h4><span>Introducing Excursion</span></h4>
                            </li>
                            <li>
                                <p class="date">November 2, 2014</p>
                                <h4><span>Improvements to Shutterbugg Arrive</span></h4>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-4 sidebar">
                        <h3>Upcoming Events</h3>
                        <ul>
                            <li>
                                <p class="date">November 8-12, 2014</p>
                                <h4><span>Innovation Cloud 2014</span></h4>
                            </li>
                            <li>
                                <p class="date">November 21, 2014</p>
                                <h4><span>LL Retrospective</span></h4>
                            </li>
                            <li>
                                <p class="date">December 5, 2014</p>
                                <h4><span>M.O.N.E.Y. Launch Event</span></h4>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <img src="https://s3.amazonaws.com/codecademy-content/projects/newsroom/ad.jpg">
                    </div>
                </div>
            </div>
        </div> 
            /*SUPPORTING*/
            .supporting .row {
                margin:50px 0;
            }
            .supporting .row .col-md-8 {
                background: #fff;
                padding: 20px 40px 40px 40px;
            }
            .supporting .row .col-md-4 {
                background: #152230;
                padding: 20px 40px 40px 40px;
            }
            .supporting .row .sidebar h3 {
                color: #fff;
            }
            .supporting .row ul {
                list-style: none;
                margin:40px 0 0 0;
                padding:0;
            }
            .supporting .row ul li {
                margin: 0 0 20px 0;
            }
            .supporting .row .col-md-4 ul li {
                color: #fff;
            }
            .supporting .row ul li h4 span {
                border-bottom: 3px solid #1a77ff;
            }
            .supporting .row .col-md-12 {
                margin: 0;
                padding: 0;
            }

5.Add a footer with a container. Add the following three items:

• About
• Terms
• Send Feedback

Be sure to also add a copyright.
        <div class="footer">
            <div class="container">
                <ul>
                    <li>About</li>
                    <li>Terms</li>
                    <li>Send Feedback</li>
                </ul>
                <p>&copy; 2014 Newsroom</p>
            </div>
        </div> 

            /*FOOTER*/
            .footer {
                background: #000;
                padding:40px 0;
            }
            .footer ul {
                float: left;
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .footer ul li {
                color: #fff;
                display: inline;
                margin:0 40px 0 0;
            }
            .footer p {
                color:#e2e2e2;
                float: right;
            }
            .col-md-12 img {
                width: 100%;
            }