Product Landing Page - Build a Product Landing Page

hello , i coudnt pass this:

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 ).

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <header id="header">
    <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>
    <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
    
  </header>
  <h2>Handcrafted, home-made masterpieces</h2>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input id="email" type="email" name="email" placeholder="Enter your email address" required>
    <input id="submit" type="submit" value="GET STARTED">
    <div>
    <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>
     <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>
    <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>

  <iframe id="video" src="https://youtu.be/y8Yv4pnO7qc" title="Roman Carnival Overture Op. 9 for Five Trombones"></iframe>
  
  </form>
  <section id="pricing">
          <div class="product" id="tenor">
            <div class="level">Tenor Trombone</div>
            <h2>$600</h2>
            <ol>
              <li>Lorem ipsum.</li>
              <li>Lorem ipsum.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum.</li>
            </ol>
            <button class="btn">Select</button>
          </div>
           <footer>
          <ul>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          <span>Copyright 2016, Original Trombones</span>
        </footer>
</body>
</html>
/* file: styles.css */
@media only screen and (max-width: 720px) {
  .image-wrapper {
    grid-template-columns: 1fr;
  }
    #nav-bar {
position: fixed;
top: 0px;
    }
     #submit {
    background-color: yellow;
  }
  header {
justify-content: flex-end;
position: positioned;
display: flex;
flex-direction: row;
flex-wrap: none;
width: 100%;
top: 0;
left: 0;
padding: 1em;

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

The navigation links must work. That is, each link must take you to a section of the page when you click it.

This is done by assigning the href value the exact id value of an element on the page.

(The id should match even the capital letters or lower case letters)

i added the id to every a element and it works thanks.

1 Like