Product Landing Page - Build a Product Landing Page

Programming
,
1

The code below is my code but I keep getting errors that which indicates that…

  1. You should have at least 3 .nav-link elements within the #nav-bar
  2. Each .nav-link element should have an href attribute.
  3. 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

but I think have done all these things, Am stuck here.
Anybody please help.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8"/>
  <title>FCC product landing page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <link rel="stylesheet" href="styles.css">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<header id="header">
  <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
  </img>
<nav id="nav-bar">
  <ul>
<nav-link>
  <a href="#feature"     class="feature">Features</a></nav-link>
<nav-link>
  <a href="#work" class="work">How It Works</a></nav-link>
<nav-link>
  <a href="#price" class="price">Pricing</a></nav-link>
  </ul>
</nav>
<h1>Handcrafted, home-made masterpieces</h1>
<input id="email" placeholder="Enter your email address"name="email"type="email"></input>
<input id="submit"type="submit"value="GET STARTED"></input>
</header>
<p><h3 id="feature">Premium Materials</h3>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
<p><h3 id="work">Fast Shipping</h3>
We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
<p><h3 id="price">Quality Assurance</h3>
For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
</p>
<video id="video" src="https://youtu.be/y8Yv4pnO7qc"></video>
</form>
</html>

/* file: styles.css */
@media (max-width: 768px){
}
.header{
  display:flex;  justify-content:center;
  align-items:center;
}
#submit{
background-color:orangered;
border:none;
border-radius:1em;
}

#nav-bar{
  position:fixed;
  top:0;
  left:70%;
  width:100%;
  align-items:right;
}
.img{
  position:fixed;
  top:0;
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2
  • is not a valid HTML element
  • ‘input’ elements do not have the closing tag etc.