Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

Your #nav-bar should always be at the top of the viewport. I do not understand please

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 id="header">
    <img id="header-img" src="https://www.example.com/logo.png" alt="Logo">
    <nav id="nav-bar">
      <a href="#home" class="nav-link">Home</a>
      <a href="#about" class="nav-link">About</a>
      <a href="#services" class="nav-link">Services</a>
    </nav>
  </header>

  <section id="home">
    <h2>Home</h2>
    <p>Content for Home section.</p>
  </section>

  <section id="about">
    <h2>About</h2>
    <p>Content for About section.</p>
  </section>

  <section id="services">
    <h2>Services</h2>
    <p>Content for Services section.</p>
  </section>

  <section id="video-section">
    <h2>Watch Our Product Video</h2>
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/your-video-id" frameborder="0" allowfullscreen></iframe>
  </section>

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


/* file: styles.css */
form {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
     @media only screen and (max-width: 600px) {
      #nav-bar {
        flex-direction: column;
        }

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Hi @Marshal12

You need to make the navbar stay at the top of the page, even when you scroll down.

Happy coding

3

how do I do that please.. I have tried different things

4

oh. I finally got it…thanks

1 Like