HTML & CSS_Project_ BestBite

1.In the header section, add a row with two columns. In the first column, write the heading BestBite. In the second column, make a navigation bar using Boostrap's pills. Add three links that say:

• About
• Sign Up
• Log In

Set the class of the About item to be active.
<div class="header">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <h1>BestBite</h1>
                    </div>
                    <ul class="nav nav-pills">
                        <li class="active">
                            <a href="#">About</a>
                        </li>
                        <li>
                            <a href="#">Sign Up</a>
                        </li>
                        <li>
                            <a href="#">Log In</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div> 

2.In the jumbotron section, add headings that say Browse. Create. Share.. Use margins and Bootstrap's offset columns to achieve the alignment shown in the design.

Add a background image to the jumbotron. The one we used is here.
        <div class="jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <h2>Browse.</h2>
                        <h2>Create.</h2>
                        <h2>Share.</h2>
                    </div>
                </div>
            </div>
        </div> 
          .jumbotron {
                background: url(https://s3.amazonaws.com/codecademy-content/projects/bestbite/bg.jpg) no-repeat center center;
                background-size:cover;
                height: 500px;
                padding-top: 25px;
                margin-bottom: 0;
            }
            .jumbotron h2:first-child {
                margin:120px 0 0;
            }
            .jumbotron h2 {
                color:#fff;
                font-size: 60px;
                text-align: right;
                margin:0;
                width:100%;
            } 

3.In the banner section, add a link that says Learn More.

Style the link into a large default Bootstrap button. Write CSS to color it rgba(216,25,47,.5) and to adjust the top margin.
                <a class="btn btn-lg btn-default" href="#">
                    Learn More
                </a> 
           .section {
                text-align: center;
                padding-top: 40px;
            }
            .section h3 {
                margin: 0;
                padding: 0 0 20px;
                font-size: 30px;
            }
            .banner h3 {
                margin: 0;
                padding: 0;
                color:#fff;
            }
            .section h4 {
                color:#d8192f;
                margin: 30px 0 20px;
                padding: 0;
                font-size: 20px;
            }
            .section .btn {
                background-color:rgba(216,25,47,.5);
                border:0px;
                margin-top: 24px;
                color: #fff;
            } 

4.In the supporting section, within the page-header div, add a row with three equal-sized columns.

In each column, add a subheading, and then add a list containing recipe names.

             <div class="row">
                    <div class="col-md-4">
                        <h4>Breakfast</h4>
                        <ul>
                            <li>Maple French Toast</li>
                            <li>Rolled Oats with Berries</li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <h4>Dinner</h4>
                        <ul>
                            <li>Black Bean Stuffed Peppers</li>
                            <li>Pesto Pasta with Spinach</li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <h4>Dessert</h4>
                        <ul>
                            <li>German Chocolate Cake</li>
                            <li>Hazelnut Tiramisu</li>
                        </ul>
                    </div>
                </div> 

5.In the footer section, add text for each column, style the text as shown in the design, and color the background #eeeeee.

      <div class="footer">
            <div class="container">
                <p>&copy; 2014 BestBite</p>
                <p class="a-center">
                    <a href="#">BestBite.com</a>
                </p>
                <p class="a-right">12 Greentree Lane, Orlando, FL</p>
            </div>
        </div>  

        .footer {
                height:100px;
                padding: 40px 0px 100px;
                margin-top: 80px;
                background-color: #eee;
                font-size: 14px;
            }
            .footer p {
                float:left;
                width:33%;
            }
            .footer a {
                color: #d8192f;
            }
            .a-center {
                text-align:center;
            }
            .a-right {
                text-align:right;
            }