HTML & CSS_Project_Red Eye Photography

1.In the header, add text for a heading. We used Red Eye Photography.

Adjust the heading's margins and width so that it matches the final result.
    <div class="header">
      <h1>Red Eye Photography</h1>
    </div>
.header h1 {
  color: #31363d;
    font-size: 32px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 10px;
    text-transform: uppercase;
    top:44px;
}

2.In the nav section, add a list containing four items:

• Home
• About
• Gallery
• Contact

Write CSS to display them on the same line.
       <div class="nav">
            <div class="container">
                <ul>
                    <li>Home</li>
                    <li>About</li>
                    <li>Gallery</li>
                    <li>Contact</li>
                </ul>
            </div>
        </div> 
           .nav ul {
                height:50px;
                margin: 0 0 30px;
                padding: 20px 0px;
                text-align: center;
            }
            .nav li {
                color: #fff;
                display: inline;
                text-transform: uppercase;
                padding: 0px 10px;
                -webkit-transition:color 0.25s;
                transition:color 0.25s;
            }

3.In the container section, there are two <div class="row">...</div> rows. Inside each row, use Bootstrap's grid create three equal-sized columns.

You can also learn more about Bootstrap in our Make a Website course.

4.Inside each column, add an image. Feel free to use your own images.

Here are the ones we used: one, two, three, four, five, and six.
Use Bootstrap's CSS class img-responsive to style each image. Feel free to use your own images.
    <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <img class="img-responsive" src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p1.jpg">
                </div>
                <div class="col-md-4">
                    <img class="img-responsive" src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p2.jpg">
                </div>
                <div class="col-md-4">
                    <img class="img-responsive" src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p3.jpg">
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <img class="img-responsive" src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p4.jpg">
                </div>
                <div class="col-md-4">
                    <img class="img-responsive" src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p5.jpg">
                </div>
                <div class="col-md-4">
                    <img class="img-responsive" src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p6.jpg">
                </div>
            </div>
        </div>

5.Add a footer section with text for the copyright.

Write CSS to align as shown in the final result.
       <div class="footer">
            Photography by Matthew Wiebe
        </div> 
        .footer {
                color: #31363d;
                font-size: 10px;
                height: 70px;
                line-height:70px;
                padding-right:40px;
                text-align: right;
                text-transform: uppercase;
                margin-bottom: 100px;
                }