HTML & CSS_Project_Adoptly

1.In the header, add five items for:

• Adoptly
• About
• Animals
• Blog
• Events

To get the colors used in the nav, try out Colorzilla (Chrome, Firefox). It lets you get a color reading from a web page so that you can use that hex value in your CSS.
               <ul>
                    <li class="main">Adoptly</li>
                    <li>About</li>
                    <li>Animals</li>
                    <li>Blog</li>
                    <li>Events</li>
                </ul>
            /* Header */
            .header {
                background-color:#30627E;
            }
            .header ul {
                list-style: none;
                text-align: center;
                margin: 0;
                padding: 0;
            }
            .header li {
                color: #fff;
                display: inline-block;
                font-size: 20px;
                text-align: center;
                padding: 20px 30px;
                margin: 0;
            }
            .header .main {
                font-size: 28px;
                background-color: #e52364;
            } 

2.In the jumbotron, add text for the heading and change the background image. Here's the image we used.

            <h1>Meet your new best friend.</h1> 

            /* Jumbotron */
            .jumbotron {
                background: url(https://s3.amazonaws.com/codecademy-content/projects/adoptly/bg.jpg) no-repeat center center;
                background-size: cover;
                height: 500px;
                text-align: center;
                margin-bottom: 0;
            }
            .jumbotron h1 {
                color: #e52364;
                font-weight: 700;
            }  

3.In the supporting section, use Bootstrap's grid to add columns for each piece of content. Each piece of content is made up of a heading, a paragraph, and a link styled as a button.

            <div class="row">
                    <div class="col-md-4">
                        <h2>Search</h2>
                        <p>Find a pet based on location, type, breed, age, and gender. We look through hundreds of shelters, agencies, and rescue sites. </p>
                        <a href="#" class="btn">Go</a>
                    </div>
                    <div class="col-md-4">
                        <h2>Learn</h2>
                        <p>Read articles on feeding, training, grooming, and more. Our resources ensure that you are fully prepared as a new pet owner.</p>
                        <a href="#" class="btn">Go</a>
                    </div>
                    <div class="col-md-4">
                        <h2>Help</h2>
                        <p>Get involved to help pets in need. You can make a difference through volunteering, social media, and donations.</p>
                        <a href="#" class="btn">Go</a>
                    </div>
                </div> 

            /* Supporting */
            .supporting {
                text-align: center;
                padding: 60px 30px 80px;
            }
            .supporting h2 {
                color:#333;
                font-size: 30px;
                margin-top: 0;
            }
            .supporting p {
                font-family: 'Open Sans', sans-serif;
                font-size: 14px;
                min-height: 80px;
            }
            .btn {
                font-size:16px;
                border-radius:0px;
                margin: 20px auto 60px;
                padding: 10px 20px;
                color: #30627E;
                width: 200px;
                border: 1px solid #30627E;
                text-transform: uppercase;
            }

4.In the footer, use Bootstrap's grid to add columns for each piece of content. There is one piece of content for the copyright, and another piece of content for the menu. Color the background #e52364.

            /* Footer */
            .footer {
                color:#fff;
                background-color: #e52364;
                padding: 20px;
            }
            .copy {
                padding-top: 10px;
            }
            .nav li a {
                color: #fff;
            }  

            <div class="row">
                    <div class="col-md-2">
                        <div class="copy">&copy;
                            Adoptly
                        </div>
                    </div>
                    <div class="col-md-10">
                        <ul class="nav nav-pills pull-right">
                            <li><a href="#">FAQ</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </div>