Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
Describe your issue in detail here.

I keep failling the .nav-link href attribute portion. I don’t understand.

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" />
    <link rel="stylesheet" href="styles.css">
    <title>Product Landing</title>

  </head>
  <body>
    <header id="header"> <!-- header -->
        <img id="header-img" src="https://images.pexels.com/photos/15658302/pexels-photo-15658302.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" >
        <h3>Accounting </h3>
        <nav id="nav-bar">      <!-- nav -->
          <ul>
            <li class="nav-link"><a href="#video">Video</a></li>
            <li class="nav-link">
              <a href="#payroll">Payroll</a></li>
            <li class="nav-link">
              <a href="#invoice">Invoicing</a></li> 
          </ul>
        </nav>
    </header>

    <div id="main"> <!-- overall container -->
        <form id="form" method="post" action="https://www.freecodecamp.com/email-submit">
         <label>Enter your email</label>
         <input id="email" type="email" name="email" placeholder="name@email.com" >
          <input id="submit" type="submit" > 
          
        </form>

<!-- video -->        
        <iframe id="video" width="360" height="215" src="https://www.youtube.com/embed/zJSY8tbf_ys" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> 


    <div class="payroll-invoice"> 
<!-- payroll -->
        <div id="payroll" class="payroll" >
            <h3>Payroll service </h3>
            <p>$300 </p>
            <p>Lorem ipsum dolor sit amet. </p>
            <p> Qui fugiat tenetur qui voluptas voluptatem et quos dignissimos a saepe facere qui sunt deleniti.  </p>
        </div>

<!-- invoicing -->
        <div id="invoice" >
          <h3>Invoicing </h3>
          <p>$250 </p>
            <p>Lorem ipsum dolor sit amet. </p>
            <p> Qui fugiat tenetur qui voluptas voluptatem et quos dignissimos a saepe facere qui sunt deleniti.  </p>
        </div>

      </div>

    </div>


  
  </body>
</html>
/* file: styles.css */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

#header {
  display: flex;
  border: 2px solid blue;
  width: 100%;
  height: 10%;
  position: fixed;
  top: 0;
  background-color: rgb(0, 255, 160);
  
}
/* navigation */
#nav-bar ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 25px;
}

.nav-link  {
  list-style: none;
  padding: 0px 15px
}



#main {
  display: flex;
  flex-direction: column;
  border: 2px dashed green;
  padding-top: 60px;
}

#form {
  display: flex;
  
  width: 100%;
  padding-top: 30px;
  padding-left: 20px;
  border: 2px solid purple;
}

#submit {
  background-color: rgb(0, 190, 150);
  width: 100px;
  height: 40px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  margin-left: 5px;
}

#video {
  margin-left: 50px;
  border: 2px dashed orange;
}

#payroll, #invoice {
  width: 70%;
  padding-left: 100px;
}

#payroll p:nth-child(2) {
  font-size: 1.5rem;
} 

#invoice p:nth-child(2){
  font-size: 1.5rem;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

“Each .nav-link element should have an href attribute.”

What element has an href attribute? The anchor (a) element, or what we commonly call a link. So each link needs to have a class of nav-link. You have the nav-link class set on the li elements instead.

Ok that did it. Thank you.

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