Product Landing Page - Build a Product Landing Page

Keep getting the “Your #nav-bar should always be at the top of the viewport. error”
but I’m pretty sure it is.

Thanks

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta  name="description" content="useful">
  <title>Catalin Girjoaba</title>
  <link rel="stylesheet" href="styles.css">
  <script defer src="script.js"></script>
</head>

<main>


<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">
 <a class="nav-link" href="#submit">Features</a>
  <a class="nav-link" href="#email">How it Works</a>
   <a class="nav-link" href="#form">Pricing</a>
</nav>
</header>
<div class="mano">
<iframe id="video" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0" frameborder="0"></iframe>

  <form id="form" action="https://www.freecodecamp.com/email-submit">
<input name="email" id="email" type="email" placeholder="Email" name="email" type="email">
    <input type="submit" id="submit" >
  </form>

</div>
  </main>
/* file: styles.css */
header > img{
  width:100%;
  max-width:300px;
  height:100%;
}

header .nav-link{
  display:inline-block;
  border: 2px solid red;
  margin-right: 20px;
}

header{
    display:flex;
    justify-content: space-around;
}

.mano{
  display: grid;
  justify-content: center;
}

*{
  margin-bottom:30px;
}

@media ( max-width:600px ){
  main{
  background-color: grey;
  color: white;
  }
}

#nav-bar{
  margin: 0;
  padding: 0;
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

Hello and welcome to the community!

Try adding position: fixed to the #nav-bar in css.

I am sure that should solve it for you.

Great progress!

Happy coding!:slight_smile:

Thanks for the fast answer!
Did not realize thats what it meant

1 Like

You are very welcome!

You are doing awesome!

Happy coding! :slight_smile:

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