Product Landing Page - Build a Product Landing Page

Tell us what’s happening:

I keep getting the 2 errors about the nav-links:

  • 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).

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

1 Like

Look very closely here. Does the element with class nav-link also have an href attribute?

4 Likes

Hey ! Welcome to the FFC forum. Do same you did in previous JavaScript documentation project for nav-link .

1 Like
<a class="nav-link" href="#hero">hero</a>

<section id="hero">hero</section>
1 Like

Ah, yes, I see it now! Thank you so much for the tip!

2 Likes

You’re welcome :hugs: Happy Coding :grinning: