Tell us what’s happening:
Hi ! There’s something going on with my nav element, the errors that are getting thrown are:
-
each .nav-link element should have an href.
-
each .nav-link element should link to the corresponding element on the landing page.
Everything but my instruction video is connecting*
3.Your #nav-bar should always be at the top of the viewport
**My nav bar is at the top.
I am open to all other advise as well. Thank you!
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, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="styles.css">
<title>Product Landing Page Project</title>
</head>
<body>
<header id="header">
<nav id="nav-bar" class="nav-bar">
<ul>
<li class="nav-link"><a href="#Features">Features</a></li>
<li class="nav-link"><a href="#instruction-vid">How it Works
</a></li>
<li class="nav-link"><a href="#Pricing">Pricing</a></li>
</ul>
</nav>
<h1>Hands-Free Dog Leash </h1>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" placeholder="Enter Email Address" required type="email" name="email"></input>
<input id="submit" type="submit"></input>
</form>
<div>
<img src="https://reviewed-com-res.cloudinary.com/image/fetch/s--VD-rEa7l--/b_white,c_limit,cs_srgb,f_auto,fl_progressive.strip_profile,g_center,q_auto,w_972/https://reviewed-production.s3.amazonaws.com/1714158134000/20240426_handsfreeleashHero.jpg" id="header-img" height="450px" alt="brown chiuahua in pink hands free leash harness laying on brindge in NYC">
</header>
<ol class="Features" id="Features">
<li>
<h2>Versatility</h1>
<p>It can be worn around the waist or shoulder using our ultra resistant hardware, or even as a regular leash. 3 different ways to use. 4 colors to choose from.</p>
</li>
<li>
<h2>Fast Shipping</h1>
<p>Our current processing time is less than 24 hours!</p>
</li>
<li>
<h2>Quality Assurance</h1>
<p>Custom woven nylon webbing, Clips have screw fastening for added security</p>
</li>
</ol>
<iframe width="950" height="534" src="https://www.youtube.com/embed/BTmtIW42K9s" title="How To Correctly Use A Hands-Free Leash" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen id="video" class="instruction-vid"/></iframe>
</body>
<ul class="Pricing" id="Pricing">
<li>
<h2>Hands Free Leash</h2>
<p>Adjustable shoulder and waist attachment piece and
Leash attachment</p>
<h3>$30</h3>
</li>
<li>
<h2>Hands Free Leash & Harness</h2>
<p>Made with the softest neoprene you’ve ever felt! Front & back D-ring placements for convenient latching and fastening.</p>
<h3>$40</h3>
</li>
<li>
<h2>Hands Free Walking Kit</h2>
<p>Get everything you need with the Hands Free Leash, the ultra versatile harness, and the Treat Round Pouch to hold your dog walking essentials!</p>
<h3>$50</h3>
</li>
</ul>
<footer></footer>
</html>
/* file: styles.css */
#nav-bar ul{
list-style-type:none;
background-color:grey;
padding:0;
margin:0px;
overflow:hidden;
}
#nav-bar a{
color:white;
text-decoration:none;
padding:15px;
display:block;
}
#nav-bar a:hover{
background-color:pink
}
.nav-bar li{
float:right;
}
header{
text-align:center;
font-size:20px;
}
h1{
text-align:center;
border-style:dotted;
}
#form{
text-align:center;
}
ul{
list-style-type:none;
display:flex;
}
@media(max-width:960px){
img{
padding:2rem;
}
}
ol{
list-style-type:none;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15
Challenge Information:
Product Landing Page - Build a Product Landing Page
