Product Landing Page- User Stories 4 & 5

When running the tests for my landing page I failed two: that each .nav-link element should have an href attribute and that each .nav-link element should link to a corresponding element on the landing page. However, after looking over my code several times I still can’t seem to understand why.

My code so far

 <body>
    <header id="header">
      <div class="logo">
        <img id="header-img" src="https://cdn.worldvectorlogo.com/logos/notion-2.svg" />
      </div>
      <nav id="nav-bar">
        <ul class="nav">
          <li class="nav-link"><a href="#features">Features</a></li>
          <li class="nav-link"><a href="#how-to-use">How To Use</a></li>
          <li class="nav-link"><a href="#pricing">Pricing</a></li>
        </ul>
      </nav>
    </header>
    <section class="hero">
      <h1 class="hero-title">One workspace. Every team.</h1>
      <h3>Customize Notion to work the way you do.</h3>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input id="email" name="email" type="email" placeholder="Enter your email address" required/>
      <input class="button-one" id="submit" type="submit" value="Try Notion Free" />
      </form>
    </section>
    <section id="features" class="main-section">
      <div class="feature-container">
        <div class="feature-icon">
          <i class="fa-solid fa-people-group fa-3x"></i>
        </div>
        <div class="feature-info">
          <h1>Team up without the chaos</h1>
          <p>Connect your teams, projects, and docs in Notion — so you can bust silos and move as one.</p>
        </div>
      </div>
      <div class="feature-container">
        <div class="feature-icon">
          <i class="fa-solid fa-book-open fa-3x"></i>
        </div>
        <div class="feature-info">
          <h1>Never ask “What’s the context?” again</h1>
          <p>Stale wikis aren't helpful. Neither are floating docs. In Notion, your daily work and knowledge live side by side — so you never lose context.</p>
        </div>
      </div>
      <div class="feature-container">
        <div class="feature-icon">
          <i class="fa-solid fa-arrows-turn-to-dots fa-3x"></i>
        </div>
        <div class="feature-info">
          <h1>Build the workflow you want</h1>
          <p>Customize Notion to make it work the way you want it to. Just drag and drop to craft the dashboard, website, doc, or system you need.</p>
        </div>
      </div>
      <div class="feature-container">
        <div class="feature-icon">
          <i class="fa-solid fa-earth-americas fa-3x"></i>
        </div>
        <div class="feature-info">
          <h1>Benefit from a global ecosystem of creators</h1>
          <p>Get inspiration from thousands of community-made templates, integrations, and events. You'll never want for resources or support.</p>
        </div>
      </div>
    </section>
    <section id="how-to-use" class="how-to-use">
      <div class="video-container">
        <div class="video">
          <iframe width="100%" height="315px" id="video" src="https://www.youtube.com/embed/aA7si7AmPkY" frameborder="0" allowfullscreen="" />
          </iframe>
        </div>
      </div>
    </section>
    <section id="pricing" class="pricing">
      <div class="pricing-container">
        <div class="price-info">
          <div class="price-heading">
            <p class="personal">Personal</p>
            <p class="for">For organizing every corner of your life.</p>
          </div>
          <p class="price-tag">Free</p>
          <ul class="differences">
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>    
          </ul>    
          <button class="button-two one">Select</button>
        </div>
        <div class="price-info">
          <div class="price-heading">
            <p class="personal-pro">Personal Pro</p>
            <p class="for">For power users who want to do even more.</p>
          </div>
          <p class="price-tag">$4 <span>/month<span></p>
          <ul class="differences">
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>    
          </ul>    
          <button class="button-two two">Select</button>
        </div>
        <div class="price-info">
          <div class="price-heading">
            <p class="team">Team</p>
            <p class="for">Collaborate with your entire team in one place.</p>
          </div>
          <p class="price-tag">$8 <span>/month</span></p>
          <ul class="differences">
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>    
          </ul>    
          <button class="button-two three">Select</button>
        </div>
      </div>
    </section>
    <footer>
      <ul class="terms">
        <li>Privacy</li>
        <li>Terms</li>
        <li>Contract</li>
      </ul>
      <p class="copyright">Copyright 2016, Notion</p>
    </footer>
  </body>

Your browser information:

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

Challenge: Responsive Web Design Projects - Build a Product Landing Page

Link to the challenge:

Your .nav-link elements don’t have an href attribute

and the elements that have an href attribute don’t have that class

That worked, thank you for the help!!

tell me you didn’t give href attributes to the li elements