Tell us what’s happening:
I keep getting the 2 errors about the nav-links:
- Each
.nav-linkelement should have anhrefattribute.
*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).
I have read over the code a dozen times and I don’t see the problem. I’ve tried the links and they work for me. I even pasted my code into chatgpt to see if it could detect a typo or syntax error that I was making. So far nothing has worked to pass these two tests.
Can anyone give me a hint about where the error is in my code? I don’t mind researching and troubleshooting if I know what’s wrong, but I don’t see what’s wrong here.
Thank you in advance.
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">
<title>Landing Page</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header id="header">
<img id="header-img" src="https://truebotanicals.com/cdn/shop/files/TB_Logo_Lockup_Rose_Gold_180x.png?v=1659511152">
<nav id="nav-bar">
<p class="nav-link"><a href="#hero">Learn</a></p>
<p class="nav-link"><a href="#video">Watch</a></p>
<p class="nav-link"><a href="#form">Order</a></p>
</nav>
</header>
<div class="body">
<section id="hero">
<h1> Clean Skincare Just Got Better</h1>
<p>See how our new serum can rejuvenate your skin in the blink of an eye!</p>
</section>
<section class="iframe">
<iframe id="video" frameborder="0" src="https://www.youtube.com/embed/C69PYkMJh90" allowfullscreen></iframe>
</section>
<section class="form">
<form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" required><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" placeholder="anyname@email.com" required><br>
<div class="custom"><input id="submit" type="submit" value="Submit">
</div>
</form>
</section>
</div>
</body>
</html>
/* file: styles.css */
* {
font-family: Noto Serif;
max-width: 1200px;
margin: 0 auto;
}
#header {
display: flex;
position: fixed;
top: 0;
justify-content: space-between;
align-items: center;
width: 100%;
height: 10rem;
z-index: 2;
background-color: #fff;
}
#header-img {
width: 150px; /
height: auto;
}
#nav-bar {
display: flex;
justify-content: flex-end;
}
.nav-link {
display: inline-block;
padding: 10px;
margin: 0 10px;
background-color: #c83e4d;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
}
.nav-link a {
color: #ffffff;
text-decoration: none;
}
.nav-link:hover {
background-color: #faaa8d;
}
.body {
margin-top: 10rem;
}
#hero, #testimonials {
box-sizing: border-box;
text-align: center;
}
h1 {
font-size: 42px;
margin-bottom: 2rem;
}
#hero p{
font-size: 21px;
}
.form {
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
#fname, #email, #submit {
padding: 5px;
margin: 5px;
}
#submit {
background-color: #c83e4d;
color: fff;
margin-top: 10px;
width: 12rem;
}
.iframe {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
z-index: 1;
overflow: hidden;
margin-top: 50px;
margin-bottom: 50px;
}
#video {
width: 85%;
height: 100%;
}
@media screen and (max-width: 768px) {
#header {
height: auto;
flex-direction: column;
align-items: flex-start;
}
#nav-bar {
justify-content: center;
margin-top: 15px;
font-size: 14px;
}
.nav-link {
margin: 5px;
}
.body {
margin-top: 12rem;
}
#hero, #testimonials {
padding: 0 20px;
}
h1 {
font-size: 31px;
margin-bottom: 1.5rem;
}
#hero p {
font-size: 18px;
}
.iframe {
height: auto;
margin-top: 20px;
}
#video {
width: 90%;
}
.form {
margin-top: 20px;
}
#fname, #email, #submit {
width: 100%;
}
#submit {
width: 100%;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page
Happy Coding 