(Responsive Web Design Projects ) Build a Product Landing Page

1

Problem:
**User Story #5:**When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.

User Story #13: The navbar should always be at the top of the viewport.

Code So Far:

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

<header id="header">
  <img id="header-img" src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fdesign-style-guide.freecodecamp.org%2F&psig=AOvVaw1zUQ2kjEhvCrPErnhmAEPn&ust=1587979479368000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCPD5rePihekCFQAAAAAdAAAAABAK" alt="FreeCodeCamp Logo">
  <nav id="nav-bar">
    <ul>
      <li> <a class="nav-link"
              href="Features">Features</li>
        <li> <a class="nav-links"
                href="How-It-Works">How-It-Works</li>
          <li><a class="nav-link"
                 href="More">More</li>
    </ul>
  </nav>
</header>
  <form id="form"      action="https://www.freecodecamp.com/email-submit">
    <input id="email"
           name="email"
           placeholder="ENTER YOUR EMAIL HERE"
           type="email"
           reqiured>
    <br>
    <input id="submit" 
           type="submit" 
           value="Click To Enter!">
  </form>
  <br>
  </br>
  <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/RBSGKlAvoiM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Please Help
Thank You :smiley:

1 Like
2

with this also

My product landing page should have at least one media query

3

Providing a link to your codepen pen makes it easier to debug your code