Product Landing Page - Build a Product Landing Page

Please I need help with this code I’ve tried using position : fixed on the #nav-bar to make it remain at the top of the viewport but its still not accepting the code. please can someone point out where I’m wrong

Your code so far

<!-- file: index.html -->
<html>
<head>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<header id="header">
  <div>
  <img id="header-img" src="" />
  <nav id="nav-bar">
      <a href="#features" 
class="nav-link">Features</a>
      <a href="#how-it-works" class="nav-link">How it works</a>
      <a href="#pricing" class="nav-link">Pricing</a>
  </nav>
</header>
<iframe id="video" src=""></iframe>
 <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input name="email" type="email" id="email" placeholder="Enter your email" required>
    <input type="submit" value="Submit" id="submit">
  </form>
  <div class="container">
    <section id="features">

    </section>
    <section id="how-it-works"></secton>
    <section id="pricing"></section>
  </div>
</body>
</html>
/* file: styles.css */
body {
  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1em;
}

#nav-bar {
  display: flex;
  justify-content: space-around;
  background-color: #444;
  padding: 0.5em;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.nav-link {
  color: white;
  text-decoration: none;
}

#video {
  width: 100%;
  height: 400px;
}

#form {
  text-align: center;
  padding: 2em;
}

#email {
  padding: 0.5em;
  width: 70%;
  margin-bottom: 1em;
}

#submit {
  padding: 0.5em 1em;
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
}

@media (max-width: 600px) {
  #nav-bar {
    flex-direction: column;
  }
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

delete this div in front of the nav it s not closed…
add left 0 to #nav-bar

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