Conditions not met in Product Landing Page - Build a Product Landing Page

I keep getting an “X” on this condition " Each .nav-link element should have an href attribute." and the 3 ones that come after it + the last 3 conditions. I don’t see what is wrong with my code so any help would be appreciated. Thank you!

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Shop</title>
</head>
<body>
<header id="header">
        <img src="candles.png" alt="candles logo" id="header-img">
        <nav id="nav-bar">
            <ul>
                <li id="home" class="nav-link"><a href="#home_text"><i class="bi bi-house"></i> Home</a></li>
                <li id="video" class="nav-link"><a href="#video"><i class="bi bi-youtube"></i> Video</a></li>
                <li id="newsletter" class="nav-link"><a href="#form"><i class="bi bi-newspaper"></i> Newsletter</a></li>
                <li id="products" class="nav-link"><a href="#fc"><i class="bi bi-cart2"></i> Products</a></li>
            </ul>
        </nav>
</header>

<main>
    
    <section id="home_text">
        <h3>Welcome to our shop!</h3>
        <p>Here you will find a list of over 20 candles that we handmake individually. <br>
        You may join our newsletter below to get discounts and be notified when we drop a new candle scent!
        </p><br>
        <p class="comment"><i>The photos below were taken from <a href="https://www.bathandbodyworks.com" target="_blank">Bath & Body Works website</a>. I own no rights whatsoever.</i></p>
    </section>
    
    
    <iframe width="560" height="315" src="https://www.youtube.com/embed/GjtlkpnW1J0?controls=0" title="YouTube video player" id="video"></iframe>
    <div id="form_div">
    <form id="form" action="https://www.freecodecamp.com/email-submit">
        <label>Join our newsletter : <input type="email" id="email" name="email" placeholder="email address"></label>
    <input type="submit" value="Submit" id="submit">
    </form>
</div>
<div id="products">
    <div class="prod" id="fc">
        <img src="https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.21a/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dw430e7c6c/hires/026597001.jpg?sh=471&yocs=q_s_" alt="" class="candle_photo"> 
       <h2>Laundry Day</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis, dolor quis facilisis ultricies, tellus enim tincidunt sapien, nec feugiat ipsum nisi aliquet turpis.</p> 
        <button class="buy">Add to cart</button>
    </div>
    <div class="prod" id="sc">
        <img src="https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.21a/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dwcda2cc8e/hires/026588599.jpg?sh=471&yocs=q_s_" alt="" class="candle_photo">
        <h2>Paris Café</h2>
       <p>Sed enim nunc, venenatis a dui non, imperdiet venenatis dolor. Integer vehicula justo vel neque varius eleifend. Aliquam et imperdiet dui. In volutpat et enim nec luctus.</p>
       <button class="buy">Add to cart</button>
    </div>
    <div class="prod" id="tc" class="candle_photo">
        <img src="https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.21a/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dwf67d42d4/hires/026577556.jpg?sh=471&yocs=q_s_" alt="" class="candle_photo">
        <h2>Fresh Balsam</h2>
       <p>Donec consectetur convallis metus, sit amet dictum dolor. Curabitur fringilla dui eu pellentesque interdum. Nam ultrices felis nunc, et rutrum erat lacinia nec.</p>
       <button class="buy">Add to cart</button>
    </div>
    <div class="prod" id="foc">
        <img src="https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.21a/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dw57901366/hires/026619695.jpg?sh=471&yocs=q_s_" alt="" class="candle_photo">
        <h2>White Tea & Sage</h2>
       <p>Praesent molestie tempor tortor tincidunt lobortis. Maecenas pellentesque tellus eget nisi semper, nec hendrerit ligula eleifend. Sed mattis ac arcu sed finibus.</p>
       <button class="buy">Add to cart</button>
    </div>
</div>

</main>
<div id="footer">
<a href="https://www.flaticon.com/free-icons/horror" title="horror icons">Horror icons created by Freepik - Flaticon</a>
<p>The above link is for the candles logo (copyrights owned by the author).</p>

</div>
</body>
</html>

/*CSS*/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: #FEFEFEff;
}
body, a, ul {
    color: #1f0c07;
}
#header img {
    width: 70px;
    height: 70px;
}
main {
    position: relative;
}
#header {
    display: flex;
    
    top: 0;
    justify-content: space-between;
    align-items: center;
}
#header li {
    display: inline-block;
    padding-left: 30px;
    padding-top: 15px;
}
#header li:last-of-type {
    padding-right: 15px;
}

#header-img {
    width: 40px;
    height: 40px;
    margin: 15px;
}
a, ul {
    text-decoration: none;
}
#nav-bar {
    list-style: none;
}
#home_text {
    margin-top: 100px;
    text-align: center;
}
h3 {
    font-weight: 600;
}
#products {
    display: flex;
    justify-content: space-around;
    align-items: center;
    
}
.prod {
    border: 2px solid black;
    margin: 20px;
}
iframe {
    display: block;
    margin: 50px auto;
    
}
#products h2 {
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
    font-size: 25px;
}
#products p {
    text-align: justify;
    padding: 0 15px 15px 15px;
    font-size: 14px;
    color: rgb(90, 0, 0)
}
.candle_photo {
    width: 110px;
    height: 100%;
    display: block;
    margin: 0 auto;
    
    
}
.buy {
    cursor: pointer;
    background-color: #D0DCA0ff;
    display: block;
    margin: 0 auto 5px auto;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    border: 2px solid #D0DCA0f3;
    

}
.buy:hover {
   
    background-color: #D0DCA0c3;
}


#footer {
    text-align: end;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 10px;
    width: 100%;
    height: 30px;
    background-color: lightgray;
    
}
#footer a:hover {
    color: rgba(90, 0, 0, .6);
}
#form_div {
    text-align: center;
    margin: 50px auto;
    
}
.bi {
    padding-right: 5px;
}
.comment {
    font-size: 12px;
    
}
@media only screen and (max-width: 585px) {
    #products {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; 
    }
    #header img {
        position: relative;
        margin: 10px auto;
        
    }
    nav {
        margin: 10px auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        
      }
      iframe {
        height: 50%;
        width: 50%;
    }
    #header {
        flex-wrap: wrap;  
    }
    nav li {
        padding: auto 5px;
      }
      nav > ul {
          flex-direction: column;
        }
    
    .candle_photo {
        width: 40%;
        height: 40%;
    }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:108.0) Gecko/20100101 Firefox/108.0

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

I think the nav-link class needs to go on the a element, not the li element.

Thank you!
I used the CSS below to make my navbar fixed to the top, but the test still has it as X. Can anyone tell me what is wrong? Thank you!

#header {
position: fixed;
width: 100%;
display: flex;
top: 0;
justify-content: space-between;
align-items: center;
background: linear-gradient(0deg, #FEFEFEff, rgb(192, 155, 192));
}

The test is:

“Your #nav-bar should always be at the top of the viewport.”

Setting the #header to a fixed position isn’t necessarily going to fulfill this requirement, especially since you have an img before the #nav-bar.

If you need more help with this then I would open a new topic (since this one is marked resolved) and be sure to include your most current HTML and CSS.

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