HTML & CSS_Project_Pocketbook

1.In the header, add the logo and a bottom border.

      <img src="https://s3.amazonaws.com/codecademy-content/projects/pocketbook/logo.svg" width="50">

      /* Header */
      .header {
        text-align: center;
        margin-bottom: 50px;
      }
      .header .container {
        padding: 30px 0;
        border-bottom: 1px solid #e5e5e5;
      }

2.In the main section, add a row with one column. Add text for the heading and a form.

Read how to use Bootstrap's form component, and add fields for First name, Last name, Email, Password, and a Create account button. Use CSS to style the form fields' borders.
       <div class="row">
          <div class="col-md-7">
            <h1>Join Pocketbook</h1>
            <form role="form">
              <div class="form-group">
                <label for="first">First name</label>
                <input type="text" class="form-control" id="first">
              </div>
              <div class="form-group">
                <label for="last">Last name</label>
                <input type="text" class="form-control" id="last">
              </div>
              <div class="form-group">
                <label for="email">Email</label>
                <input type="email" class="form-control" id="email">
              </div>
              <div class="form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control" id="password">
              </div>
              <button type="submit" class="btn">Create account</button>
            </form>       
          </div>
        </div>

       /* Form */
      form input.form-control {
        border:0px;
        border-radius:0px;
      }
      .main .btn {
        margin-top:30px;
        color:#fff;
        background:rgba(0,240,190,0.25);
        border:0px;
        border-radius:0px;
      }

3.In the footer, add text for the three items and a top border. Display the items on one line.

        <ul>
          <li>Contact</li>
          <li>Help Center</li>
          <li>About</li>
        </ul>

      /* Footer */
      .footer .container {
        padding: 20px 0;
        border-top: 1px solid #e5e5e5;
      }
      .footer ul {
        list-style: none;
        padding: 0 20px;
        margin-bottom: 80px;
      }
      .footer li {
        display: inline;
        margin-right: 20px;
      }

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

     body {
        background-image:url(https://s3.amazonaws.com/codecademy-content/projects/pocketbook/bg.jpg);
        background-size:cover; 
        background-repeat:no-repeat;
        background-color: #140e07;
        color:#fff;
      }