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!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.