HTML & CSS_Project_MOVE

What it looks like: 
https://s3.amazonaws.com/codecademy-content/projects/move/index.html

1.In the main section, add a heading, a paragraph, and a link. Write CSS to style the link into a button and to change the background image of main.Here's the image we used.

<div class="main">
      <div class="container">
        <h1>Move</h1>
        <p>Form healthy habits to take your fitness to the next level.</p>
        <a href="#" class="btn">start now</a>
      </div>
    </div>

/* Main */
      .main {
        text-align: center;
        background: url(https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg) no-repeat center center;
        background-size: cover;
        height: 600px;
      }

      .main .container {
        position: relative;
        top: 100px;
      }

      .main h1 {
        color: #fff;
        margin: 0;
        font-size: 150px;
      }

      .main p {
        color: #fff;
        margin: 0 0 20px 0;
        font-size: 18px;
      }

      .main .btn {
        background-color: #1c1c1c;
        color: #fff;
        font-size: 18px;
        padding: 8px 30px;
        text-decoration: none;
        display: inline-block;
      }

2.In the supporting section, change the background color to #1c1c1c.

Add a section for Sync and a section for Compete, as shown in the redesign.

    .supporting {
        background-color: #1c1c1c;
        text-align: center;
        padding: 50px 0 80px;
      }

        <div class="col">
          <h2>Sync</h2>
          <p>Access your activity on your phone, tablet, or computer.</p>
        </div>
        <div class="col">
          <h2>Compete</h2>
          <p>Set personal challenges and see how you rank against your friends.</p>
        </div>

3.In the feature section, change the background image and add text for the heading. Here's the image we used.

     /* Feature */
      .feature {
        background: url(https://s3.amazonaws.com/codecademy-content/projects/move/feature.jpg) no-repeat center center;
        background-size: cover;
        height: 600px;
        text-align: center;
      }

      .feature .container {
        position: relative;
        top: 200px;
      }

      .feature h2 {
        color: #fff;
        font-size: 40px;
        margin:0;
        padding:50px 0 0;

      }

    <div class="feature">
      <div class="container">
          <h2>Move. Rest. Recover. Move.</h2>
      </div>
    </div>

4.Under the feature section, add another supporting section with text for the heading, paragraph, and link.Write CSS to style the link into a button.

   <div class="supporting">
      <div class="container">
        <h2>Go Premium</h2>
        <p>Receive recommendations based on your activity to level up.</p>
        <a class="btn" href="#">Learn More</a>
      </div>
    </div>

 .supporting .btn {
  background-color: #eee;
  color: #1c1c1c;
  font-size: 18px;
  padding: 8px 30px;
  text-decoration: none;
  display: inline-block;
}
5.Add a footer section with text for the heading and link.Write CSS to style the link into a button and change the background image.Here's the image we used.

    <div class="footer">
      <div class="container">
        <h2>Stop scrolling. Start moving</h2>
        <a class="btn" href="#">Start Now</a>
      </div>
    </div>

/* Footer */
      .footer {
        background: url(https://s3.amazonaws.com/codecademy-content/projects/move/footer.jpg) no-repeat center center;
        background-size: cover;
        height: 600px;
        text-align: center;
      }

      .footer .container {
        position: relative;
        top: 200px;
      }

      .footer h2 {
        color: #fff;
        font-size: 40px;
        margin: 0 0 20px 0;
        padding:50px 0 0;
      }

      .footer p {
        color: #fff;
        margin: 0 0 20px 0;
        font-size: 18px;
      }

      .footer .btn {
        background-color: #1c1c1c;
        color: #fff;
        font-size: 18px;
        padding: 8px 30px;
        text-decoration: none;
        display: inline-block;
      }

      a.btn:hover {
        background:#ffa800;
        color:#000;
      }