Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
Describe your issue in detail here.
Each .nav-link element should have an href attribute.
In my code, I already have:
Video
Bottom
Form
Top
Im not sure how .nav-link class doesn’t have hrev#values.
Please tell me how to fix my code.
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' />
    <title>Tisu Products</title>
    <link rel='stylesheet' href='styles.css' />
  <section class='head'>
      <header id='header'><h2>Tisu</h2>
      <img id='header-img' src='' />
      <nav id='nav-bar'>
        <ul>
        <li class='nav-link' href='#video'><a href='#video'>Video</a></li>
        <li class='nav-link' href='#footer'><a href='#footer'>Bottom</a></li>
        <li class='nav-link' href='#form'><a href='#form'>Form</a></li>
        <li class='nav-link' href='#header'><a href='#header'>Top</a></li>
        </ul>
      </nav>
      <iframe id='video' width='420' height='236.25' src='https://www.youtube.com/embed/pPmo21gkETU' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowfullscreen></iframe>
    </header>
    </section>
    <br>
    <section>
<body>
  <form id='form' action='https://www.freecodecamp.com/email-submit'>
    <label for='email' class='email-label'>
Enter your email for our mailing list!
    </label>
    <div class='email-div'>
      </div>
      <div class='email-div'>
      </div>
      <input id='email' name='email' type='email' required placeholder='ex. abcd@zyx.net'>
      </input>
  <br>
  <br>
        <input id='submit' name='submit' type='submit'>
        </input>
    </label>
      </form>
  </body>
  <div id='footer'>
    </div>
  </section>
    </html>

/* file: styles.css */
*{
  font-family: Georgia;
background-color: grey;
scroll-behavior: smooth;
}
#header{
  text-align: center;
  font-size: 2.75rem;
}
.nav-link:hover {
  background-color: maroon;
  padding: 5px;
  cursor: pointer;
}
h2{
  display: inline-block;
}
.nav-link{
display:inline-block;
position: 0;
  color:maroon;
  padding: 15px;
  display: flex;
justify-content: space-evenly;
}
a{
  color: white;
  padding: 5px;
}
h2{
  background-color: maroon;
  padding-left:50%;
  padding-right:50%;
  padding-top: 1rem;
}
.email-label{
  font-size: 1.25rem;
  padding: 1rem;
  background-color: maroon;
}
.email-div{
  display: inline-block;
  padding: 0.1rem;
justify-content: space-evenly;
}
#submit{
  height: 2rem;
  width: 5rem;
}
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

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:

Theres an issue here. The href belongs to the anchor tag. So having the href after your class like the way you have it is not how its used

For some reason, the original problem still persists, and it now also says

  • Failed:Each .nav-link element should have an href attribute.

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

Is your nav-link class still in your li? Since the li does not have an href then you need to move your nav-link class to the place where there is a href

1 Like

It worked! Tysm for helping me!

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.