Product Landing Page - Build a Product Landing Page

HTML-CSS
1

How will be #nav-bar be on top of the viewport?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="vieport" content="width=device-width, initial-scale=1.0">
    <title>Product Landing Page</title>  
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>
    <main>
      <header id="header">
        <img id="header-img" class="img-header" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
        <nav id="nav-bar">
          <ul>
            <li>
          <link class="nav-link" href="#nav-bar" rel="features">
          </li>
          <li>
          <link class="nav-link" href="#header-img" rel="How it works">
          </li>
          <li>
          <link class="nav-link" href="#header" rel="pricing">    
          </li>
          </ul>
        </nav>
      </header>

      <section>
        <video id="video"width="240" height="80" control>
          <source src="https://player.vimeo.com/external/348824308.sd.mp4?s=b6596c8a1d0ef5b350af2a2cebc6fdb12bfa56d0&profile_id=164&oauth2_token_id=57447761" type="video/mp4">
          <source src="movie.ogg" type="video/ogg">
      </section>

      <section>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" placeholder="enter your email" type="email" name="email">Email
        <input id="submit" type="submit" value="submit">
      </form>
      </section>
    </main>

  </body>
  
</html>


/* file: styles.css */
nav > ul {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;
  padding-inline-start: 0;
  margin-block: 0;
  height: 100%;
  
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; rv:109.0) Gecko/20100101 Firefox/115.0

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Hello.

You need to use in your styles position and top

As we want nav to be at the top we will use 0 at the top. And so that it is always visible, we will give a fixed value to the position.

Grets.