.nav-link not accepting #id href link - Build a Product Landing Page

I have everything else in this entire certification complete, but this one condition keeps erroring for days I cannot figure out why my code is not correct! Please help… this is the error:

“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 ).”

<body>
    <div id="page-wrapper">
    <header id="header">
      <div class="logo">
      <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
      </div>
      <nav id="nav-bar">
        <ul>
          <li>
            <a class="nav-link" href="#features">Features</a>
            </li>
          <li>
            <a class="nav-link" href="#howitworks">How It Works</a>
            </li>
          <li>
            <a class="nav-link" href="#pricing">Pricing</a>
            </li>
          </ul>
        </nav>
      </header>
      <div class="container"></div>
      <section id="hero">
        <h2>Handcrafted, home-made masterpieces</h2>
      <form id="form" method="post" action="https://www.freecodecamp.com/email-submit">
        <input name="email" id="email" type="email" placeholder="Enter your email address" required>
        <input id="submit" type="submit" class="button" value="Get Started">
        </form>
        </section>
        <div class="container">

          <section id="features">
            <div class="grid">
              <div class="icon">
                <i class="fi fire">
                </i>
                </div>
              <div class="desc">
                <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="grid">
              <div class="icon">
                <i class="fi truck">
                </i>
                </div>
              <div class="desc">
                <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="grid">
              <div class="icon">
                <i class="fi battery">
                </i>
                </div>
              <div class="desc">
                <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="howitworks">
              <iframe id="video" height="315px" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen>"
              </section>

              <section id="pricing">
                <div class="product" id="tenor">
                  <div class="level">Tenor Trombone</div>
                  <h2>$600</h2>
                  <ol>
                    <li>Number 1</li>
                    <li>Number 2</li>
                    <li>Number 3</li>
                    <li>Number 4</li>
                  </ol>
                  <button class="button">Select</button>
                </div>
                <div class="product" id="bass">
                  <div class="level">Bass Trombone</div>
                  <h2>$900</h2>
                  <ol>
                    <li>Number 1</li>
                    <li>Number 2</li>
                    <li>Number 3</li>
                    <li>Number 4</li>
                  </ol>
                  <button class="button">Select</button>
                </div>
                <div class="product" id="valve">
                  <div class="level">Valve Trombone</div>
                  <h2>$1200</h2>
                  <ol>
                    <li>Number 1</li>
                    <li>Number 2</li>
                    <li>Number 3</li>
                    <li>Number 4</li>
                  </ol>
                  <button class="button">Select</button>
                </div>
              </section>
            <footer>
              <ul>
                <li><a>Privacy</a></li>
                <li><a>Terms</a></li>
                <li><a>Contact</a></li>
              </ul>
              <span>Copyright 2023, Original Trombones</span>
              </footer>
          </div>
        </div>
    </body>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

the iframe element is missing the closing tag.
I think once it is closed, that will help fix it.
Also you have a stray double quote here:

LIFESAVER.

With all these screens up, I never scrolled that far to the end of that link in iframe to realize that!!

Thanks, it works now. :smiley:

1 Like

In case this helps, this error was easily found by an html code validator. (That is what I used to find this).

You can consider using one (they are available online).

You know, I wondered about that, but I wasn’t sure what to search for.

“Code validator”

Thanks a bunch!

1 Like

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