Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

Im stuck on this project can you help with the last pointers?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<link rel="stylesheet" href="styles.css">
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Product Landing Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header id="header">
    <!-- #nav-bar is a descendant of #header (required by test 7)
         and is fixed to the top of the viewport (required by test 23) -->
    <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" href="#hero">Home</a></li>
        <li><a class="nav-link" href="#features">Features</a></li>
        <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
        <li><a class="nav-link" href="#pricing">Pricing</a></li>
      </ul>
    </nav>

    <!-- header content sits below the fixed nav because #header reserves nav space with padding-top -->
    <div class="header-content">
      <img id="header-img" src="https://via.placeholder.com/140x60?text=Logo" alt="Product Logo">
    </div>
  </header>

  <main>
    <section id="hero">
      <h1>Best Product Ever!</h1>
      <p>Discover how our product can improve your life.</p>
      <form id="form" action="https://www.freecodecamp.com/email-submit" method="GET">
        <input id="email" name="email" type="email" placeholder="Enter your email" required>
        <input id="submit" type="submit" value="Get Started">
      </form>
    </section>

    <section id="features">
      <h2>Features</h2>
      <div class="feature">
        <h3>Fast</h3>
        <p>Quick and easy to use.</p>
      </div>
      <div class="feature">
        <h3>Reliable</h3>
        <p>Dependable performance, every time.</p>
      </div>
      <div class="feature">
        <h3>Affordable</h3>
        <p>Competitive pricing for everyone.</p>
      </div>
    </section>

    <section id="how-it-works">
      <h2>How It Works</h2>
      <iframe id="video" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </section>

    <section id="pricing">
      <h2>Pricing</h2>
      <div class="pricing-option">
        <h3>Basic</h3>
        <p>$19.99/mo</p>
      </div>
      <div class="pricing-option">
        <h3>Pro</h3>
        <p>$29.99/mo</p>
      </div>
      <div class="pricing-option">
        <h3>Enterprise</h3>
        <p>Contact us</p>
      </div>
    </section>
  </main>

  <footer>
    <p>© 2025 Your Company</p>
  </footer>
</body>
</html>

/* file: styles.css */
#navbar {
position: relative;
top: 0px;
left: 0px;
width: 100%;
}

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/26.0.1 Safari/605.1.15

Challenge Information:

Product Landing Page - Build a Product Landing Pagehttps://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page
2

what code is fixing it to the top of the viewport?

3

The Navbar with the correct top settings

4

that does not make it fixed

5 
    Fixed position
6

I don’t understand what you mean

7

I assume it’s this

/* file: styles.css */
#navbar {
position: relative;
top: 0px;
left: 0px;
width: 100%;
}

8

that does not make the navbar fixed at the top even scrolling the page (see the example project to see that behaviour)

9

I see what you mean
10

Any examples would be helpful

11

I can’t give you the solution, this is a certification project, research or go back to review

12

Tell us what’s happening:

I think they might be a bug on your platform that needs checking out Im confident this code is correct but it keeps flashing up with the same error message.

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"/>
  <title>Product Landing Page</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <!-- ✅ Header contains both logo and nav -->
  <header id="header">
    <img
      id="header-img"
      src="https://via.placeholder.com/150"
      alt="Product Logo"
    />
    <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" href="#section-1">Section 1</a></li>
        <li><a class="nav-link" href="#section-2">Section 2</a></li>
        <li><a class="nav-link" href="#section-3">Section 3</a></li>
      </ul>
    </nav>
  </header>

  <div class="section" id="section-1">
    <h2>Section 1</h2>
    <p>This is the first section of our product landing page.</p>
  </div>

  <div class="section" id="section-2">
    <h2>Section 2</h2>
    <p>This is the second section with more information about our product.</p>
  </div>

  <div class="section" id="section-3">
    <h2>Section 3</h2>
    <p>This is the third section with additional details.</p>
  </div>

  <iframe
    id="video"
    width="560"
    height="315"
    src="https://www.youtube.com/embed/umBzUhvS5gE"
    title="YouTube video player"
    frameborder="0"
    allowfullscreen
  ></iframe>

  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input
      id="email"
      name="email"
      placeholder="Enter your email"
      type="email"
      required
    />
    <input id="submit" type="submit" value="Submit" />
  </form>
</body>
</html>


/* file: styles.css */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: 100px; /* space for fixed header */
  font-family: Arial, sans-serif;
}

/* ✅ Header with fixed nav bar */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  z-index: 1000;
  display: flex;              /* ✅ flexbox usage */
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #ccc;
}

#header-img {
  max-height: 60px;
}

#nav-bar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex; /* ✅ flexbox again */
}

#nav-bar li {
  margin-left: 20px;
}

#nav-bar a {
  text-decoration: none;
  font-weight: bold;
  color: black;
}

.section {
  margin: 10px;
  padding: 50px;
  min-height: 200px;
}

#video {
  display: block;
  margin: 20px auto;
}

#form {
  margin: 50px auto;
  max-width: 400px;
  text-align: center;
}

#email,
#submit {
  display: block;
  margin: 10px auto;
  padding: 10px;
}

/* ✅ Media query */
@media only screen and (max-width: 600px) {
  body {
    background-color: #00beef;
    padding-top: 140px;
  }
  #header {
    flex-direction: column;
    align-items: center;
  }
  #nav-bar ul {
    flex-direction: column;
  }
  #nav-bar li {
    margin: 10px 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/26.0.1 Safari/605.1.15

Challenge Information:

Product Landing Page - Build a Product Landing Page

13

Your code passes for me but incidentally you have an invalid src for your header img.

Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

14

I’ve tried with no luck there’s ongoing bugs that need fixing.

15

Tell us what’s happening:

Can anyone help me with this bug for the project?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<header img src="">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Product Landing Page</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header id="header">
    <img
      id="header-img"
      src="https://cdn.freecodecamp.org/testable-projects-fcc/images/fcc_secondary.svg"
      alt="Product Logo"
    />
    <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" href="#section-1">Section 1</a></li>
        <li><a class="nav-link" href="#section-2">Section 2</a></li>
        <li><a class="nav-link" href="#section-3">Section 3</a></li>
      </ul>
    </nav>
  </header>

  <div class="section" id="section-1">
    <h2>Section 1</h2>
    <p>This is the first section of our product landing page.</p>
  </div>

  <div class="section" id="section-2">
    <h2>Section 2</h2>
    <p>This is the second section with more information about our product.</p>
  </div>

  <div class="section" id="section-3">
    <h2>Section 3</h2>
    <p>This is the third section with additional details.</p>
  </div>

  <iframe
    id="video"
    width="560"
    height="315"
    src="https://www.youtube.com/embed/umBzUhvS5gE"
    title="YouTube video player"
    frameborder="0"
    allowfullscreen
  ></iframe>

  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input
      id="email"
      name="email"
      placeholder="Enter your email"
      type="email"
      required
    />
    <input id="submit" type="submit" value="Submit" />
  </form>
</body>
</html>


/* file: styles.css */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: 100px; /* space for fixed nav */
  font-family: Arial, sans-serif;
}

/* ✅ nav-bar itself must be fixed for FCC */
#nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  z-index: 1000;
  border-bottom: 1px solid #ccc;
}

/* ✅ flexbox used */
#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

#header-img {
  max-height: 60px;
}

#nav-bar ul {
  margin: 0;
  padding: 10px 20px;
  list-style: none;
  display: flex; /* ✅ flexbox again */
  justify-content: center;
}

#nav-bar li {
  margin-left: 20px;
}

#nav-bar a {
  text-decoration: none;
  font-weight: bold;
  color: black;
}

.section {
  margin: 10px;
  padding: 50px;
  min-height: 200px;
}

#video {
  display: block;
  margin: 20px auto;
}

#form {
  margin: 50px auto;
  max-width: 400px;
  text-align: center;
}

#email,
#submit {
  display: block;
  margin: 10px auto;
  padding: 10px;
}

/* ✅ Media query included */
@media only screen and (max-width: 600px) {
  body {
    background-color: #00beef;
    padding-top: 140px;
  }

  #header {
    flex-direction: column;
    align-items: center;
  }

  #nav-bar ul {
    flex-direction: column;
  }

  #nav-bar li {
    margin: 10px 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/26.0.1 Safari/605.1.15

Challenge Information:

Product Landing Page - Build a Product Landing Page

16

In the future please don’t create duplicated topics, use your existing one. Thanks

Your code passes for me, what kind of bugs are you talking about? Please describe in more detail

17

Are you sure it keeps coming up with the 23 navbar error everything’s correct it’s the bug that’s delaying the completion of project?

18

All tests are completed, #23 is also ok

89a6e61e-1e2f-4ecd-aa90-ebc9f782f48d
89a6e61e-1e2f-4ecd-aa90-ebc9f782f48d1155×147 22.9 KB

19

Why do I see this error message have you fixed this bug?

20

I just ran your code, unedited
Please show the error message you’re getting