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: