Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
When I run the tests on my code the part that says:

" Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer )."

Is not passing. Why? I clearly have three nav-link elements with hrefs linking to sections of the page.

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Original Trombones</title>
    <link rel="stylesheet" href="styles.css">
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <header id="header">
      <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Original Trombones logo">
      <nav id="nav-bar">
        <a class="nav-link" href="#features">Features</a>
        <a class="nav-link" href="#video-section">How It Works</a>
        <a class="nav-link" href="#pricing">Pricing</a>
      </nav>
    </header>
    <main>
      <section id="hero">
        <h1>Handcrafted, home-made masterpieces</h1>
        <form id="form" action="https://www.freecodecamp.com/email-submit" method="GET">
          <input id="email" type="email" name="email" placeholder="Enter your email address" required>
          <input id="submit" type="submit" value="GET STARTED">
        </form>
      </section>
      <section id="features">
        <div class="feature">
          <i class="fa fa-fire"></i>
          <div class="feature-text">
            <h2>Premium Materials</h2>
            <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
          </div>
        </div>
        <div class="feature">
          <i class="fa fa-truck"></i>
          <div class="feature-text">
            <h2>Fast Shipping</h2>
            <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
          </div>
        </div>
        <div class="feature">
          <i class="fa fa-battery-full"></i>
          <div class="feature-text">
            <h2>Quality Assurance</h2>
            <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
          </div>
        </div>
      </section>
      <section id="video-section">
        <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/y8Yv4pnO7qc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </section>
      <section id="pricing">
        <div class="price-box">
          <h3 class="item-name">Tenor Trombone</h3>
          <p class="price">$600</p>
          <ul class="item-features">
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum dolor.</li>
            <li>Lorem ipsum.</li>
          </ul>
          <button class="select">Select</button>
        </div>
        <div class="price-box">
          <h3 class="item-name">Bass Trombone</h3>
          <p class="price">$900</p>
          <ul class="item-features">
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum dolor.</li>
            <li>Lorem ipsum.</li>
          </ul>
          <button class="select">Select</button>
        </div>
        <div class="price-box">
          <h3 class="item-name">Valve Trombone</h3>
          <p class="price">$1200</p>
          <ul class="item-features">
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum dolor.</li>
            <li>Lorem ipsum.</li>
          </ul>
          <button class="select">Select</button>
        </div>
      </section>
      <footer>
        <div id="footer-links">
          <a class="nav-link" href="#">Privacy</a>
          <a class="nav-link" href="#">Terms</a>
          <a class="nav-link" href="#">Contact</a>
        </div>
        <p class="copyright-msg">Copyright 2016, Original Trombones</p>
      </footer>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.81 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

Actually I am kinda stuck on your issue :upside_down_face:

But the thing is:

Emphasis on each.

You have nav-links in the footer also, don’t you? That could be it

1 Like

:man_facepalming:

That was it! I didn’t even consider that re-using the class to style my footer links would cause the test to fail. Thanks for the insight!