Product Landing Page - Build a Product Landing Page

I got 2 issues here and i’ve tried eveything but still not working…

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

the other one is…

Your #nav-bar should always be at the top of the viewport.

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
     <header id="header">
       <img src="" id="header-img" />
       <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>
       <iframe id="video" src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>
       <form id="form" action="https://www.freecodecamp.com/email-submit">
         <input id="email" name="email" type="email" placeholder="Enter email"/>
         <input id="submit" type="submit" />
       </form>
      
     </header>
  </body>
</html>

/* file: styles.css */
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

.header {
  display: flex;
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

for your href id links, you don’t have those IDs anywhere in your HTML.
and regarding your nav bar always staying at the top, is this all the CSS you have? You’ll have to add quite a bit more HTML and CSS to get this to pass.
start with adding some HTML elements with IDs that match the ones you used in the nav-links.
next, you’ll need to style the entire page besides the media queries. part of that CSS styling will have to be something targeting the #nav-bar id to make it stay at the top no matter how far down you scroll

2 Likes

I’ve already got the answer :slight_smile: Thanks for tips.

<a class="nav-link" id="features"   href="#features">Features</a>
<a class="nav-link" id="how-it-works" href="#how-it-works">How it works</a>
<a class="nav-link" id="pricing" href="#pricing">Pricing</a>

but with the nav-bar are you referring about position: fixed? to stay it on top?

right, that’s one way to do it. I believe that’s what I did when I did this project.

2 Likes

Thanks so much. I’m not polishing every certification. I just make sure to pass everything they asked me to do in order to pass it.

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