Tell us what’s happening:
Describe your issue in detail here.
I have no idea what is going wrong with the navbar, it says :
Each .nav-link element should have an href attribute.
which it does, and:
Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer ).
which it also does.
On top of that it throws: Your #nav-bar should always be at the top of the viewport.
I thought I’d done that by removing the margins and the barriers but I’m just confused, I’ve looked online and taken bits of code from here and there but I’m just lost.
Your code so far
/* file: index.html */
<!DOCTYPE html><html lang="en">
<head>
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<meta charset="utf-8">
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<nav id="nav-bar" class="nav-link">
<ul class="no-bullets">
<li class="nav-link"><a href="#features">Features</a></li>
<li class="nav-link"><a href="#how">How it works</a></li>
<li class="nav-link"><a href="#pricing">Pricing</a></li>
</ul>
</nav>
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Original Trombone Logo">
</header>
<body>
<iframe id="video" src="https://youtu.be/y8Yv4pnO7qc"></iframe>
<section id="features">
<p>Features</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
</section>
<section id="how">
<p>How It Works</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
</section>
<section id="pricing">
<p>Pricing</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label>Email Address:</label>
<input type="email" name="email" placeholder="johnsmith@email.com" id="email">
<input type="submit" id="submit" ">
</form>
</body>
</html>
/* file: styles.css */
.navbar {
position: fixed;
top: 0;
text-decoration: none;
display: in-line block;
margin: 0;
padding: 0;
width: 60px;
}
.no-bullets {
list-style-type: none;
margin: 0;
padding: 0;
}
@media (max-width: 600px) {
header {
flex-wrap: wrap;
}
}
.flex-container {
display: flex;
}
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 Edg/119.0.0.0
Challenge Information:
Product Landing Page - Build a Product Landing Page
