Product Landing Page - Build a Product Landing Page

HTML-CSS
1

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:

2

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

3

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

4

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
5

It worked! Tysm for helping me!

1 Like