Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
please help :sob:
i’ve been stuck on this
Each .nav-link element should have an hrefattribute.
and
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).

what’s wrong with my code? thanks in advance

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>
    <title>Product Landing Page</title>
  <body>
    <main>
      <header id="header">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" id="header-img" alt="logo" />
        <nav id="nav-bar">
          <ul>
            <li class="nav-link" ><a href="#feature">Features</a></li>

            <li class="nav-link"><a href="#how_it_works">How it works</a></li>

            <li class="nav-link"><a
            href="#pricing">Pricing</a></li>
          </ul>
        </nav>
      </header>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" type="email" name="email" placeholder="Enter your email address"></input>
        <input id="submit" type="submit"></input>
      <section id="feature">
        <ul>
          <li>
            <h3 class="list-feature">Premium Materials</h3>
            <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
          </li>
          <li>
            <h3 class="list-feature">Fast Shipping</h3>
            <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>
          </li>
          <li>
            <h3 class="list-feature">Quality Assurance</h3>
            <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>
          </li>
        </ul>
      </section>
      <section id=
      "how_it_works">
        <video controls width="250" id="video"><source src="https://youtu.be/y8Yv4pnO7qc" />
        </video>
      </section>
      <section id="pricing">
        <div class="container">
          <div>
          <h4>TENOR TROMBONE</h4>
          </div>
          <div></div>
          <div></div>
        </div>
      </section>
    </main>
  </body>
</html>


/* file: styles.css */
.nav-link, .list-footer {
  list-style-type: none;
}

div {
  border-style: solid ;
  position: relative;
  width: 200px;
}

.container {
  display: flex;
  justify-content: space-around;
  margin: 0;
}

#nav-bar {
  position: fixed;
  top: 0;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Safari/605.1.15

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

The issue is that your .nav-link elements do not have href attributes. The two attributes are in different elements. The easiest way to fix this would be to move all of the .nav-link attributes from the li elements to the a elements.

1 Like
3

ohhh it works mate. thank youu, ive been stuck like for 2 days :sob:

4

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