HTML & CSS_Project_Junction

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

          body {
                    background: url(https://s3.amazonaws.com/codecademy-content/projects/junction/bg.jpg) no-repeat center center fixed;
                    background-size: cover;
                } 

2.In the header, add this logo and add four list items:

• About
• Blog
• Help
• Contact

Write CSS to color the background rgba(0,0,0,.5). (Check out how RGBa colors work.)
Display the list items on one line.
           <div class="header">
                <div class="container">
                    <div class="row">
                        <img class="logo" src="https://s3.amazonaws.com/codecademy-content/projects/junction/logo.svg" height="36" width="36">
                        <ul class="nav">
                            <li>About</li>
                            <li>Blog</li>
                            <li>Help</li>
                            <li>Contact</li>
                        </ul>
                    </div>
                </div>
            </div>
                .header {
                    background:rgba(0,0,0,.5);
                    height:60px;
                    padding: 10px 0;
                }
                .logo {
                    margin:0 30px 0;
                }
                .nav {
                    display:inline-block;
                    margin: 0;
                    padding: 8px 0;
                }
                .nav li {
                    color: #fff;
                    display: inline;
                    font-size: 14px;
                    margin-right: 30px;
                    padding:0 0 5px;
                }
                .nav li:hover {
                    border-bottom:1px solid #00ffbc;
                    color: #00ffbc;
                    cursor:pointer;
                }

3.In the jumbotron section, add text for the heading.

           <div class="jumbotron">
                <div class="container">
                    <h1>Meet Junction</h1>
                </div>
            </div> 

              .jumbotron {
                    background-color: transparent;
                    text-align: center;
                    position: relative;
                    top: 30px;
                }
                .jumbotron h1 {
                    color: #fff;
                    font-size: 60px;
                    text-shadow: 0 2px 3px rgba(0,0,0,.4);
                }
                .jumbotron p {
                    color: #c9c3e6;
                    font-size: 18px;
                } 

4.In the supporting section, create a row with three equal-sized columns. In each column, add an image and text. Here's the first image, second image, and third image.

                  <div class="row">
                        <div class="col-md-4">
                            <img class="read" src="https://s3.amazonaws.com/codecademy-content/projects/junction/read.svg" height="128" width="128">
                            <h2>Read</h2>
                            <p>Discover new stories and follow your favorite writers.</p>
                        </div>
                        <div class="col-md-4">
                            <img class="write" src="https://s3.amazonaws.com/codecademy-content/projects/junction/write.svg" height="128" width="128">
                            <h2>Write</h2>
                            <p>Create stories about our world, or entirely new worlds.</p>
                        </div>
                        <div class="col-md-4">
                            <img class="talk" src="https://s3.amazonaws.com/codecademy-content/projects/junction/talk.svg" height="128" width="128">
                            <h2>Talk</h2>
                            <p>Join the conversation by talking with your favorite readers and your fans.</p>
                        </div>
                    </div>

               .supporting {
                    margin-top: 40px;
                    text-shadow: 0 2px 3px rgba(0,0,0,.4);
                }
                .supporting .col-md-4 {
                    text-align: center;
                    color: #fff;
                    margin-bottom: 40px;
                }
                .supporting h2 {
                    font-size: 25px;
                }
                .supporting p {
                    font-size: 16px;
                } 

5.Under the supporting section, add a new section.

In the new section, add a button that says Join. Color the button rgba(0,255,188,0.5).

          <div class="download">
                <div class="container">
                <a href="#" class="btn btn-default">
                    <span>Join</span>
                </a>
            </div> 

               .download {
                    position: relative;
                    top: 80px;
                    text-align: center;
                }
                .btn-default {
                    background:rgba(0,255,188,0.5);
                    border:none;
                    border-radius: 8px;
                    color: #fff;
                    font-size: 18px;
                    letter-spacing: 1.3px;
                    padding: 10px 60px;
                    margin-bottom: 100px;
                }
                .btn-default:hover {
                    background:rgba(0,0,0,0.5);
                    border:none;
                    color: #fff;
                }