Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

Although I’ve placed my #nav-bar on the top of the viewport, it still doesn’t pass this rule:
Your #nav-bar should always be at the top of the viewport.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div>
      <header id="header">
        <img id="header-img" src="https://cdn2.scratch.mit.edu/get_image/user/68069435_60x60.png">
        <nav id="nav-bar">
          <ul class="navbar">
            <li><a class="nav-link" href="#video">Video</a></li>
            <li><a class="nav-link" href="#form">Form</a></li>
            <li><a class="nav-link" href="#rdt">RDT</a></li>
          </ul>
        </nav>
      </header>
    </div>
    <main>
      <iframe id="video" height="400" width="600" src="https://www.youtube.com/watch?v=bTHLJWzF6XQ" allowfullscreen></iframe>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" type="email" name="email" placeholder="abc.xyz@gmail.com">Enter Email:</input>
        <input id="submit" type="submit"></input>
      </form>
      <script>
        console.log("Never Gonna Give You Up")
      </script>

      <div>
        <p id="rdt">Random text</p>
      </div>
    </main>
  </body>
</html>

/* file: styles.css */
* {
  margin: 0px;
  margin-bottom: 5px;
  background-color: #000077;
}
body {
  padding: 20px;
  margin: 0;
}
input#email {
  color: #ffffff;
}
a, p {
  color: #ffffff;
}
header, ul.navbar {
  display: flex
}
li, a.nav-link {
  background-color: #555588;
  padding: 10px 20px;
}
@media (max-width: 1000px) {
  * {
    background-color: #000033;
  }
}
header {
  position: fixed;
}
div {
  width: 100%;
  height: 10%;
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

because all elements are given default margins and padding sometimes by the browser, the best thing to do is to select your nav-bar element in the css and apply position: fixed and top: 0 to it (and make sure it has 0 padding on top and 0 margin on top too)

3

Thank you very much for helping! I passed that criterion.

1 Like