Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Your #nav-bar should always be at the top of the viewport.
some can help thank you

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css">
  <header id="header">
      <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
      <nav id="nav-bar">
        <ul>
        <li><a class="nav-link" href="#home">Home</a></li>
        <li><a class="nav-link" href="#about">About</a></li>
        <li><a class="nav-link" href="#contact">Contact</a></li>
        </ul>
      </nav>
      <video id="video" src="#"></video>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input id="email" placeholder="Insert Email" type="email" name="email" required></input>
      <input id="submit" type="submit">
      </input>
      </form>
      <div class="container">
        <section id="home"></section>
        <section id="about"></section>
        <section id="contact"></section>
      </div>
  </header>
</html>

/* file: styles.css */
@media (max-width: 500){
  .nav-bar{
    display: flex;
  }
}
.nav-bar, li, a{
  float: left;
  display: block;
  padding: 8px;
}
img {
  width: 50%;
  object-fit: cover;
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Hello!

Here some hints:

  • Your navbar has an ID, not a class. Remember which symbol refers to IDs in the CSS. You need to separate it from li and a elements, they are classes.

  • To have a navbar always on top, use position: fixed and top: 0.

These changes will let you pass.

3 
.nav-bar{
  position: fixed;
  top: 0;
  display: flex;
}

but nothings change
4

I got it thank you so much

5

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