Tell us what’s happening:
I am getting this error:
"Each .nav-link
element should have an href
attribute.
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
)." even though everything is linking correctly so far.
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"><title>Product Landing Page</title>
<main>
<header id="header">
<img src="https://stringrays.github.io/odds-and-ends/pngkey.com-generic-logo-png-1416946.png" id="header-img" alt="generic logo">
<nav id="nav-bar">
<ul>
<li class="nav-link">
<a href="#our-products">Our Products</a>
</li>
<li class="nav-link">
<a href="#product-description">Product Description</a>
</li>
<li class="nav-link">
<a href="#email-list">Newsletter</a>
</li>
</ul>
</nav>
</header>
<video width="320" id="video" src="https://stringrays.github.io/odds-and-ends/rickroll.mp4" autoplay muted>
</video>
<div class="center" id="product-description">
<h1> Our Product </h1>
<hr>
<p> This is where a product description can go. Typically this involves a paragraph of technical or dramatic description of why a person should buy this item. Some strategies include humor, listing technical specifications, and comparing performance of product to leading brands. </p>
<p>Price: $99,999.99</p>
</div>
<div class="center" id="add-to-cart">
<button id="buy">Add to Cart</button>
</div>
<div class="productBox" id="our-products">
<div class="emptyCell">
<h1>Other Product</h1>
<p><img src="https://stringrays.github.io/odds-and-ends/pngkey.com-generic-logo-png-1416946.png" id="product-picture-repeat" alt="logo">
</p>
<p>Description of other product can be placed here.</p>
</div>
<div class="emptyCell">
<h1>Other Product</h1>
<p><img src="https://stringrays.github.io/odds-and-ends/pngkey.com-generic-logo-png-1416946.png" id="product-picture-repeat-one" alt="logo">
</p>
<p>Description of other product can be placed here.</p>
</div>
<div class="emptyCell">
<h1>Other Product</h1>
<p><img src="https://stringrays.github.io/odds-and-ends/pngkey.com-generic-logo-png-1416946.png" id="product-picture-repeat-two" alt="logo">
</p>
<p>Description of other product can be placed here.</p>
</div>
</div>
<div class="center" id="email-list">
<p> If you would like to be added to our monthly mailing list, please input your email below:</p>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label>Email:</label>
<input type="email" id="email" name="email" placeholder="blank@blank.blank"/>
<input type="submit" id="submit"/>
</form>
</div>
</main>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36
Challenge: Build a Product Landing Page
Link to the challenge: