Product Landing Page - Build a Product Landing Page

Tell us what’s happening:

Describe your issue in detail here.
I have no idea what is going wrong with the navbar, it says :
Each .nav-link element should have an href attribute.
which it does, 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 ).
which it also does.
On top of that it throws: Your #nav-bar should always be at the top of the viewport.
I thought I’d done that by removing the margins and the barriers but I’m just confused, I’ve looked online and taken bits of code from here and there but I’m just lost.

Your code so far

/* file: index.html */
<!DOCTYPE html><html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, intial-scale=1.0">
    <meta charset="utf-8">
    <title>Product Landing Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  <header id="header">
    <nav id="nav-bar" class="nav-link">
      <ul class="no-bullets">
        <li class="nav-link"><a href="#features">Features</a></li>
        <li class="nav-link"><a href="#how">How it works</a></li>
          <li class="nav-link"><a href="#pricing">Pricing</a></li>
          </ul>
  </nav>
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Original Trombone Logo">
    </header>
  <body>
    <iframe id="video" src="https://youtu.be/y8Yv4pnO7qc"></iframe>
    <section id="features">
    <p>Features</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
    </section>
    <section id="how">
    <p>How It Works</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
    </section>
    <section id="pricing">
    <p>Pricing</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <label>Email Address:</label>
      <input type="email" name="email" placeholder="johnsmith@email.com" id="email">
      <input type="submit" id="submit" "> 
      </form>
    
      </body>
</html>
/* file: styles.css */
.navbar {
  position: fixed;
  top: 0;
  text-decoration: none;
  display: in-line block;
  margin: 0;
  padding: 0;
  width: 60px;
}

.no-bullets {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
     }
}

.flex-container {
  display: flex;
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

All the nav-link elements are supposed to be clickable and have an href attribute so that might be an issue.

This link should help you with positioning. https://developer.mozilla.org/en-US/docs/Web/CSS/position

Happy learning. :slight_smile:

they do have hrefs and are clickable, they bring you to the correct area

1 Like

Hello @millicentbowers !

Try to move the a in the opening anchor tags to before the nav-link.
It appears the li opening tags should have the angle bracket before the anchor opening tags.

Example of how it should appear:

<li><a class="value" href="#value">text</a></li>

I hope this helps with the nav-link issue.

The nav-bar is in the wrong syntax. It should be # for the id instead of the . for class.
And, if you see, the nav-bar is hyphenated.

Try these changes and see if you are able to pass the project @millicentbowers.

If they work, please credit @2937 who has been providing the excellent guidance?

Keep up the good progress.

2 Likes