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: