.nav-link error

Tell us what’s happening:
I am getting this error:
"Each .nav-link element should have an href attribute.

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 )." even though everything is linking correctly so far.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"><title>Product Landing Page</title>
<main>
  <header id="header">
    <img src="https://stringrays.github.io/odds-and-ends/pngkey.com-generic-logo-png-1416946.png" id="header-img" alt="generic logo">
  <nav id="nav-bar">
      <ul>
        <li class="nav-link">
          <a href="#our-products">Our Products</a>
        </li>
        <li class="nav-link">
          <a href="#product-description">Product Description</a>
        </li>
        <li class="nav-link">
          <a href="#email-list">Newsletter</a>
        </li>
      </ul>
  </nav>  
 </header>
     <video width="320" id="video" src="https://stringrays.github.io/odds-and-ends/rickroll.mp4" autoplay muted>
     </video>
     <div class="center" id="product-description">
       <h1> Our Product </h1>
       <hr>
        <p> This is where a product description can go. Typically this involves a paragraph of technical or dramatic description of why a person should buy this item. Some strategies include humor, listing technical specifications, and comparing performance of product to leading brands. </p> 
          <p>Price: $99,999.99</p>
    </div>
     <div class="center" id="add-to-cart">
       <button id="buy">Add to Cart</button>
    </div>
    <div class="productBox" id="our-products">
      <div class="emptyCell">
        <h1>Other Product</h1>
          <p><img src="https://stringrays.github.io/odds-and-ends/pngkey.com-generic-logo-png-1416946.png" id="product-picture-repeat" alt="logo">
          </p>
         <p>Description of other product can be placed here.</p>
        </div>
        <div class="emptyCell">
        <h1>Other Product</h1>
          <p><img src="https://stringrays.github.io/odds-and-ends/pngkey.com-generic-logo-png-1416946.png" id="product-picture-repeat-one" alt="logo">
          </p>
         <p>Description of other product can be placed here.</p>
        </div>
        <div class="emptyCell">
        <h1>Other Product</h1>
          <p><img src="https://stringrays.github.io/odds-and-ends/pngkey.com-generic-logo-png-1416946.png" id="product-picture-repeat-two" alt="logo">
          </p>
         <p>Description of other product can be placed here.</p>
        </div>
    </div>
     <div class="center" id="email-list">
       <p> If you would like to be added to our monthly mailing list, please input your email below:</p>
       <form id="form" action="https://www.freecodecamp.com/email-submit">
         <label>Email:</label>
         <input type="email" id="email" name="email" placeholder="blank@blank.blank"/>
         <input type="submit" id="submit"/>
       </form>
    </div>
  </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/101.0.4951.67 Safari/537.36

Challenge: Build a Product Landing Page

Link to the challenge:

hint : Are the classes applied on a link element ?

2 Likes

Thank you so much! Got it functional and cleaned up.