Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

I have two tests left to complete:

  1. Each .nav-link element should have an href attribute.
  2. 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 ).

However, to my understanding I have already done what the test are asking me. I need help finding the error in my code as I have looked through it multiple times and cannot seem to find where I went wrong.

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>Product Homepage</title>
    <link rel ="stylesheet" href="styles.css"
  </head>
  <body>
    <header id="header">
      <img class="logo" src="https://cdn.discordapp.com/attachments/691377100791480370/1144282372737597502/image.png" id="header-img"/>
      <h2 class="company">Elendiel Toothpaste</h2>
      <nav id="nav-bar">
        <ul>
          <li class="nav-link"><a href="#features">Features</a></li>
          <li class="nav-link"><a href="#advertisement">Product Example</a></li>
          <li class="nav-link"><a href="#pricing">Pricing</a></li>
        </ul>
      </nav>
    </header>
    <section class="below-nav">
      <h3>Masters of Advanced Enamel Health</h3>
      <form action="https://www.freecodecamp.com/email-submit" id="form">
        <input name="email" id="email" placeholder="Enter your email here" type="email"/>
        <input class="button" type="submit" id="submit"/>
      </form>
    </section>
    <section id="features">
      <div class="feature-1">
        <img id="arrows" width="200" src="https://cdn.discordapp.com/attachments/691377100791480370/1144637776382402701/image.png">
        <h3 class="heading">Larger Tubes</h3>
        <p class="feature-para">Our toothpaste is packaged in larger tubes so that you can get more toothpaste per tube. The best thing is that the price hasn't changed!</p>
      </div>
      <div class="feature-2">
        <img id="truck" src="https://cdn.discordapp.com/attachments/691377100791480370/1144639162314653706/image.png">
        <h3 class="heading">Rapid Shipping</h3>
        <p class="feature-para">We make sure you recieve your toothpaste as soon as we have finished making it. We also provide free returns, within 3 days of arrival, if you are not satisfied.</p>
      </div>
      <div class="feature-3">
        <img id="quality" src="https://cdn.discordapp.com/attachments/691377100791480370/1144639780882227311/image.png">
        <h3 class="heading">Quality Ingredients</h3>
        <p class="feature-para">We want to  offer you the best toothpaste on the market. To reach that goal we've put all our effort into finding the safest and healthiest ingredients for your teeth!</p>
      </div>
    </section>
    <section id="advertisement">
      <iframe id="video" class="advert" src="https://www.youtube.com/embed/Ke5AZpTg6ck?si=jyUREtWHI555TWSC" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </section>
    <h3 class="product-header">Our toothpaste products</h3>
    <section id="pricing">
      <div class="product container" id="flouride-f">
        <h3>Flouride-Free</h3>
        <p class="price">£10.99</p>
        <p class="description">No flouride means healthier gums and teeth.</p>
        <input type="submit" id="select" value="Select"/>
      </div>
      <div class="product container" id="whiten">
        <h3>Whitening</h3>
        <p class="price">£12.99</p>
        <p class="description">To brighten up that smile!</p>
        <input type="submit" id="select" value="Select"/>
      </div>
      <div class="product container" id="organic">
        <h3>Organic</h3>
        <p class="price">£15.99</p>
        <p class="description">Made with the best of the best ingredients.</p>
        <input type="submit" id="select" value="Select"/>
      </div>
    </section>
  </body>
</html>

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

The nav-link class should be on the a elements.

3

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