Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

  1. Your #nav-bar should always be at the top of the viewport. Need help checking my code.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="ru">
  <head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Original Trombones</title>
  </head>
  <body>    
    <header id="header"> 
      <nav id="nav-bar">
        <ul>
          <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>     
      <img id="header-img" src="https://www.cannonballmusic.com/img/tb20l.jpg" alt="Trombone"/>      
    </header>
    <main>
      <video id="video" src="https://www.youtube.com/watch?v=y8Yv4pnO7qc"></video>
      <form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
        <label for="email">Enter your email: </label>
        <input id="email" name="email" placeholder="Your email" type="email"/>
        <input id="submit" type="submit" value="Send"/>
      </form>
      <p id="Features">Features</p>
      <p id="How_it_works">How it works</p>
      <p id="Pricing">Pricing</p>
    </main>
    <footer></footer>
  </body>
</html>

/* file: styles.css */
*{
  margin:0;
  padding:0;
}

ul {
  display: flex;
  gap: 5px;
  list-style: none;
  justify-content: flex-end;
}

a{
  text-decoration: none;
  color: black;
}

img{
  width: 200px;
  height:200px;
}

@media (min-width: 700px){
  img{
  width: 500px;
  height:500px;
}
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

It should always remain at the top even while scrolling.