Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

I am having trouble with my nav-links working. Criteria 9 and 10 will not pass?

      <img id="header-img" alt="Logo" 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"><a href="#features">Features</a></li>
         <li><a class="nav-link"><a href="#how it works">How it Works</a></li>
         <li><a class="nav-link"><a href="#pricing">Pricing</a></li>
       </ul>
       </nav>
   </header>
2

Criteria 9 and 10 are about the email input field. Is that what you meant? I suggest you post all your HTML code. Please put 3 backticks before and after your block of code when posting it in the forum.

3
    1. Each .nav-link element should have an href attribute.

  • Failed:10. 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).

4 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Product Landing Page</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
    <header id="header">
      <div class="logo">
        <img id="header-img" alt="Logo" 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"><a href="#features">Features</a></li>
         <li><a class="nav-link"><a href="#how_it_works">How it Works</a></li>
         <li><a class="nav-link"><a href="#pricing">Pricing</a></li>
       </ul>
       </nav>
   </header>
   <section id="hero">
     <h2>Handcrafted, home-made masterpieces</h2>
     <form id="form" action="https://www.freecodecamp.com/email-submit">
     <input type="email" id="email" placeholder="Enter your email address" name="email" required/>
     <input type="submit" id="submit" value="GET STARTED" />
     </form>
   </section>
   <div class="container">
     <div id="features">
       <div class="grid">
         <div class="text">
           <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 id="how it works">
       <div class="grid">
         <div class="text">
           <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 id="pricing">
       <div class="grid">
         <div class="text">
           <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>
     <div id="how it works">
       <iframe id="video" src="https://youtube.com/embed/y8Yv4pnO7qc" height="315" width="500" title="Product Video" frameborder="0"></iframe>
   </div>
   <div id="pricing">
     <div class="product">
       <div class="level">TENOR TROMBONE</div>
       <h2>$600</h2>
         <ol>
           <li>Lorem Ipsum</li>
           <li>Lorem Ipsum</li>
           <li>Lorem Ipsum</li>
           <li>Loren Ipsum</li>
         </ol>
         <button class="btn">SELECT</button>
         </div>
   <div class="product">
       <div class="level">BASS TROMBONE</div>
       <h2>$900</h2>
         <ol>
           <li>Lorem Ipsum</li>
           <li>Lorem Ipsum</li>
           <li>Lorem Ipsum</li>
           <li>Loren Ipsum</li>
         </ol>
         <button class="btn">SELECT</button>
         </div>
   <div class="product">
       <div class="level">VALVE TROMBONE</div>
       <h2>$1200</h2>
         <ol>
           <li>Play similar to a trumpet</li>
           <li>Lorem Ipsum</li>
           <li>Lorem Ipsum</li>
           <li>Loren Ipsum</li>
         </ol>
         <button class="btn">SELECT</button>
         </div>      


         </div>
 </body>  
</html>
5

it doesn’t have a href
you have an anchor element inside an anchor element, don’t do that

6

Ahh, I see! Thank you

That satisfied 9 but…

  • Failed:10. 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).
7

ohhh…
I put the underscores in the how_it_works further down and all good now!
Thank you!