Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

my nav-bar ia at the top of my viewport… and my nav-link to the best of my knowledge corresponds with the section id… i still don’t know why my code wont pass. please can someone help me out.

Your code so far

<!-- file: index.html -->
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>build a product landing page</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
    <header id="header">ECO-FRIENDLY WATER BOTTLE
      <img src="https://www.ecofriendlywaterbottle.org" alt="logo" id="header-img"/>
      <nav id="nav-bar">
          <a class="nav-link" href="Introduction">Introduction</a>
 <a class="nav-link" href="Product-Features">Product Features</a>
 <a class="nav-link" href="footer">Benefits and Conclusion</a>
        </nav>
      </header>
      <main>
      <section id="Introduction" class="Introduction">
      <h1>INTRODUCTION</h1>
      <p>In a world increasingly conscious of environmental issues,an eco-friendly water bottle represent a perfect blend of sustainability and functionality.</p>
      </section>
      <section id="Product-features" class="Product-features">
      <h2>PRODUCT FEATURES</h2>
      <ul>
        <li>sustainable materials</li>
        <li>Insulation technology</li>
        <li>Customizable design</li>
        <li>Leak-proof Lid</li>
        </ul>
        </section>
        <section id="footer" class="footer" name="benefits">
          <h3>BENEFITS</h3>
          <ul>
            <li>Health-Conscious Chioce</li>
            <li>Eco-Freiendly</li>
            <li>Stylish Accessory</li>
            </ul>
            <footer id="footer">CONCLUSION
              <p>The eco-friendly water bottle is not just a product;it's a lifestyle chioce that align with modern values of sustainability and health.</p>
            <iframe id="video" src="https://www.ecofriendlywaterbottle.org"></iframe>
            <form id="form" action="https://www.freecodecamp.com/email-submit">
              <input id="email" name="email" type="email" placeholder="mhizsissy200@gmail.com"></input>
              <input id="submit" type="submit"></input>
              </form>
              </footer>
              </body>
              </html>

/* file: styles.css */
#nav-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
justify-content: space-between;
  z-index: 200;
background-color: white;
padding: 10px;
}

header {
  position: relative;
  margin: 0 auto;
  top: 0;
  font-size: 15px;
  display: block;
}

body {
  font-size: 15px;
  position: relative;
  width: 30px;
justify-content: space-evenly;
}

nav {
background-color: #333;
  padding: 1rem;
}

nav ul {
  padding: 0;
  margin: 0;
  display: flex;
justify-content: space-around;
}

nav a {
  padding: 0;
  margin: 0;
  font-size: 1rem;
}

@media (max-width: 600px) {
  #header {
    display: block;
  }
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Hey there,
when you’re adding a link to a section of your page you add # with the id of that section. Make sure your .nav-links have that. Also, make sure your second .nav-link is correctly linked, check if it’s the same as the section id.
For the #nav-bar, don’t you think there’s a better position than sticky?
Hope this helps!