Product Landing Page - Build a Product Landing Page

HTML-CSS
1

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:

2

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

3

Ok that did it. Thank you.