Product Landing Page

index.html

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<div class="grid-wrapper">
  <header id="header">
    <h1 id="header-img">Joy Pill</h1>
    <nav id="nav-bar">
       <ul>
         <li class="nav-link"><a href="#features">Features</a></li>
         <li class="nav-link"><a href="#whatitfeels">What It Feels Like</a></li>
         <li class="nav-link"><a href="#pricing">Pricing and Flavors</a></li>
      </ul>
    </nav>
  </header>
  <main id="main">
    <section id="whatitfeels">
      <h2>What It Feels Like</h2>
      <iframe width="560" height="315"  src="https://www.youtube.com/embed/c84uEQUBnnI" frameborder="0"          allow="autoplay; encrypted-media" id="video"></iframe>
    </section>
    
  </main>
  <footer id="footer">Footer</footer>
</div>

product-landing-page.markdown

Product Landing Page

A Pen by Yordan Zhelev on CodePen.

License.

style.scss

html,body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-image: url('http://i.imgur.com/uyO6Hrv.png');
  background-size: cover;
  background-repeat: no-repeat;
}

*, *:before, *:after {
  box-sizing: inherit;
}


.grid-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; 
  grid-template-areas: 
    'header header header'
    'main main main'
    'footer footer footer';
  
    #header { 
      background-color: #fff3;
      grid-area: header;
      display: flex;
      color: #FFFADA;
      justify-content: center;
      align-items: center;
      padding: 0 25px;
      
      #header-img {
        font-weight: normal;
        padding: 0 32px;
        &:before {
          content: '';
          width: 25px;
          height: 25px;
          position: absolute;
          left: 29px;
          top: 30px;
          display: inline-block;
          background-color: transparent;
          background-image: url('http://i.imgur.com/4S9LeUT.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
      
      #nav-bar {
        margin-left: auto;
        ul {
          display: flex;
          justify-content: space-between;
          li { 
            list-style-type: none;
            border: 1px solid white;
            margin: 0 5px;
            overflow: hidden;
            border-radius: 20px;
            a { 
              display: block;
              text-decoration: none;
              color: inherit;
              padding: 7px 15px;
              background-color: #81818166;
            }
          }
        }
      }
    }
    #main { 
      background-color: #fff3; 
      grid-area: main; 
      height: 100vh; 
      #whatitfeels { display: flex; flex-direction: column; align-items: center; justify-content: center;}
    }
    #footer { background-color: green; grid-area: footer;}
}