Build a product landing page - Each .nav-link element should link to a corresponding element on the landing page

HTML-CSS
1

Hello !
I’ve been struggling for along time on a the step " 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 )." I don’t understand what I did wrong here, I already try to copy paste online code so I’m almost sure that it’s not a typo issue. My links work in the Preview so I really don’t know why this step don’t wanna be completed. If anyone can help it’d be awesome !

Here’s my code :

<nav id="nav-bar">
        <a class="nav-link" href="#features">Features</a>
        <a class="nav-link" href="#how-it-works">How it works</a>
        <a class="nav-link" href="#pricing">Pricing</a>
</nav>

<section id="features">
        <h2>Premium quality stories</h2>
        <p>We read and pick for you the bestest love stories each three months.</p>
        <h2>Fast shipping</h2>
        <p>You order, we ship you the books as fast as we can.</p>
        <h2>Enjoy</h2>
        <p>Have fun reading those books!</p>
</section>
2

Every single ‘a’ element with a class set to ‘nav-link’ should have corresponding html element with ‘id’ set to the same value as its 'href’s attribute (but without #):

<a class="nav-link" href="#smth">How it works</a>
corresponds to:
<section id="smth">

</section>

In the example above the ‘a’ and ‘section’ elements are linked. If you click on the text “How it works” it will lead you to the ‘section’ element with an ‘id’ attribute set to “smth”.

This is guidance not the final solution.

3

Yeah hum … That’s what I did I think ?

4

Well, then there is something else. Post all your code here. We can’t see what is happening without all HTML and CSS code. In the snippet, you have posted it is not visible if I click on “Pricing” where this would lead me.

5

Here’s my full code, as I said, my links work in the preview but the step don’t validate.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width inital-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Product Landing Page</title>
  </head>


  <body>

    <header id="header">
      <img id="header-img" src="https://img.freepik.com/free-vector/rose-badge-retro-logo_530521-864.jpg?w=826&t=st=1672999156~exp=1672999756~hmac=03345f44004b83a89bb9d582c187bdd144fab81c6bdd50cdcfdd69b3bcc70e76">
      <nav id="nav-bar">
        <a class="nav-link" href="#features">Features</a>
        <a class="nav-link" href="#how_it_works">How it works</a>
        <a class="nav-link" href="#pricing">Pricing</a>
      </nav>
    </header>

      <section>
        <h1 id="heading">Books picked just for you with love</h1>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <input name="email" type="email" id="email" placeholder="Enter your email adress here">
          <input type="submit" id="submit" method="post" target="https://www.freecodecamp.com/email-submit">
        </form>
      </section>

      <section id="features">
        <h2>Premium quality stories</h2>
        <p>We read and pick for you the bestest love stories each three months.</p>
        <h2>Fast shipping</h2>
        <p>You order, we ship you the books as fast as we can.</p>
        <h2>Enjoy</h2>
        <p>Have fun reading those books!</p>
      </section>

      </section id="how_it_works">
        <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/CgKwEcRRWeg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      </section>

      <section id="pricing">
        <article id="price-1">
          <h3>The Yellow Rose Pack</h3>
          <p class="price">30€/month</p>
          <p clas="description">
            Three books every three months.</br>
            You can end the subscription whenever you want.
          </p>
        </article>
        <article id="price-2">
          <h3>The Pink Rose Pack</h3>
          <p class="price">40€/month</p>
          <p class="description">
            Four books every months.</br>
            You can end the subscription whenever you want.
          </p>
        </article>
        <article id="price-3">
          <h3>The Red Rose Pack</h3>
          <p class="price">50€/month</p>
          <p class="description">
            Five books every months.</br>
            You can end the subscription whenever you want.
          </p>
        </article>
      </section>

      <footer id="footer">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Contact</a>
      </footer>
  </body>
</html>
6

The problem is here

Wrong syntax.
Once you fix that error then it will pass

7

Thany you so much ! It worked ! :relieved: