Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

I am trying to ensure that the #nav-bar always appears at the top of the viewport by applying some CSS to the navbar but my answer is still not accepted in this “Product-Landing-Page_Challenge”

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Products</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header id="header">
      <nav id="nav-bar">
        <ul>
          <li>
            <a class="nav-link" href="#form">Form</a>
            </li>
          <li>
            <a class="nav-link" href="#header-img">Header</a>
            </li>
          <li>
            <a class="nav-link" href="#video">Video</a>
            </li>
        </ul>
      </nav>
      <img id="header-img" src="https://th.bing.com/th/id/R.9fd7d19ae53173743d8b8f863e4af412?rik=r8h8k3XuSr3bCA&riu=http%3a%2f%2fwww.bestchoicereviews.org%2fwp-content%2fuploads%2f2012%2f12%2fDEWALT-DCD710S2.jpg&ehk=rIQVxBCaaoVsWcykLUYE26Eio67Oh6VMg2SwwJH%2btQE%3d&risl=&pid=ImgRaw&r=0" width="200" alt="product-logo">
      <video id="video" src="video.mp4" type="video/mp4" alt="product-video" controls>
    </header>
    <form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
      <input id="email" type="email" name="email" placeholder="Enter your email" required>
      <a href="https://www.freecodecamp.com/email-submit"><input id="submit" type="submit" value="submit"></a>
    </form>
  </body>
</html>

/* file: styles.css */
@media only screen and (max-width: 1200px) {

* {
  margin: 0;
  padding: 0;
}

#navbar {
  position: fixed;
  margin:0;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

#form {
  display: flex;
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Hi,
Your nav id is nav-bar, but in your styles you have written #navbar.
it should be #nav-bar. just add the hyphen and it will work.

1 Like
3

you should write #nav-bar in css because id= nav-bar

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.