HTML & CSS_Project_Armando Pérez

1.Change the background image of the body. Here's the image we used.

           body {
                background: url(https://s3.amazonaws.com/codecademy-content/projects/armando-perez/brand.jpg) no-repeat fixed;
                background-size: 100%;
            } 

2.Add a header section with a container. Then add a row that contains one column and one div.

Set the class of the column to col-md-4. Set the class of the div to pull-right.
In the column, add Armando's name as a heading. In the div, add a list for the following five items:

• All
• Consumer
• Mobile
• Commerce
• Enterprise

Set the class of the All item to active. Display the list items on one line. All items should also be links.
       <div class="header">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <h1>Armando Pérez</h1>
                    </div>
                    <div class="pull-right">
                        <ul class="nav nav-pills">
                            <li class="active"><a href="#">All</a></li>
                            <li><a href="#">Consumer</a></li>
                            <li><a href="#">Mobile</a></li>
                            <li><a href="#">Commerce</a></li>
                            <li><a href="#">Enterprise</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div> 
            .header, .footer {
                padding: 30px 0;
                color: #444;
            }
            .header h1 {
                color:#fff;
                margin: 0 0 30px;
                font-size: 30px;
                text-transform: uppercase;
            }
            .header ul, .footer ul {
                padding: 0 20px;
                margin: 0;
                list-style: none;
            }
            .header li {
                display: inline;
                width: 100px;
                text-align: center;
                margin: 6px;
            }
            .header li a {
                color:#f01251;
            }
            .header li.active a {
                background-color:#f01251;
            } 

3.Add a main section with a container. In this section, create a grid of images.

First, create three separate rows. Inside of each row, create three columns of equal width. Set the class of the columns to col-md-4.
In each column, add the image and turn the image into a link.
Feel free to use your own images. In order, here are the images we used: p1, p2, p3, p4, p5, p6, p7, p8, p9.
        <div class="main">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p1.jpg">
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p2.jpg">
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p3.jpg">
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p4.jpg">
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p5.jpg">
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p6.jpg">
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p7.jpg">
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p8.jpg">
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p9.jpg">
                        </a>
                    </div>
                </div>
            </div>
        </div> 

4.Add a footer section with a container. Inside, create one row with one column and one div.

Set the class of the column to col-md-4. Set the class of the div to pull-right.
In the column, add text for the four items. In the div, add text for the copyright.
        <div class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <ul>
                            <li>email</li>
                            <li>linkedin</li>
                            <li>twitter</li>
                            <li>blog</li>
                        </ul>
                    </div>
                    <div class="pull-right">
                        <p>&copy; 2014</p>
                    </div>
                </div>
            </div>
        </div> 
            /* Footer */
            .footer li {
                display: inline;
                margin-right: 40px;
            }
            .footer p {
                margin: 0 30px 0 0;
            }