Tell us what’s happening:
Hello!
I’m at a loss. Currently working on Build a Product Landing Page. I have successfully passed every test except this one:
10. 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).
My .nav-link elements have hrefs with the correct corresponding element. The syntax is correct, the spelling is correct…Am I missing something? Is it me? Is it the website? Any help would be appreciated. Thank you.
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.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=Outfit:wght@100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<title>Product Landing Page</title>
</head>
<body>
<header id="header">
<img id="header-img" src="./images/candle_pink.png" alt="pink candle">
<h1>Candles & Co.</h1>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#form">Home</a></li>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#video">Video</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<main>
<section class="form-section" >
<h2>Find true relaxation, one breath at a time.</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit" >
<input id="email" name="email" type="email" placeholder="Enter your email address" required class="input-style">
<input id="submit" type="submit" value="submit" class="input-style button-style" >
</form>
</section>
<section >
<div class="container">
<div>
<span class="material-symbols-outlined">
thumb_up
</span>
</div>
<div id="features" class="info">
<h2>Premium materials</h2>
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Curae nulla feugiat nisi viverra fringilla erat tristique porttitor. Hac platea aliquet vitae feugiat ullamcorper ornare fringilla imperdiet senectus</p>
</div>
</div>
<div class="container">
<div>
<span class="material-symbols-outlined">
pets
</span>
</div>
<div class="info">
<h2>Pet safe</h2>
<p>Hac platea aliquet vitae feugiat ullamcorper ornare fringilla imperdiet consectetuer adipiscing elit.</p>
</div>
</div>
<div class="container">
<div>
<span class="material-symbols-outlined">
local_shipping
</span>
</div>
<div class="info">
<h2>Fast Shipping</h2>
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Curae nulla feugiat nisi viverra fringilla erat tristique porttitor. Hac platea aliquet vitae feugiat ullamcorper ornare fringilla imperdiet senectus</p>
</div>
</div>
<div class="container">
<div>
<span class="material-symbols-outlined">
verified
</span>
</div>
<div class="info">
<h2>Quality Assurance</h2>
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Curae nulla feugiat nisi viverra fringilla erat tristique porttitor. Hac platea aliquet vitae feugiat ullamcorper ornare fringilla imperdiet senectus</p>
</div>
</div>
</section>
<section >
<div class="candle-video">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/B9asozzeAwY?si=f3lF8--viN9NE_bb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</section>
<section id="pricing">
<div class="pricing-card input-style">
<h2>Single-Wick Candles</h2>
<h3>$15</h3>
<ol>
<li>Lasts for months.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
</ol>
<button type="submit" name="select-button" class="button-style input-style">Select</button>
</div>
<div class="pricing-card input-style">
<h2>Wood-Wick Candles</h2>
<h3>$20</h3>
<ol>
<li>Lorem ipsum.</li>
<li>Lasts for months.</li>
<li>Lorem ipsum.</li>
</ol>
<button type="submit" name="select-button" class="button-style input-style">Select</button>
</div>
<div class="pricing-card input-style">
<h2>Three-Wick Candles</h2>
<h3>$30</h3>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lasts for months.</li>
</ol>
<button type="submit" name="select-button" class="button-style input-style">Select</button>
</div>
</section>
</main>
<footer>
<div class="footer-div-links">
<ul>
<li>
<a class="nav-link nav-link:hover" href="#">Contact</a>
</li>
<li>
<a class="nav-link nav-link:hover" href="#">Privacy</a>
</li>
<li>
<a class="nav-link nav-link:hover" href="#">Terms</a>
</li>
</ul>
</div>
<div class="copyright-disclaimer">
<p>Copyright 2024, Candles & Co.</p>
<p><span> Disclaimer: This is not a real candle selling website.</span></p>
</div>
</footer>
</body>
</html>
*, *::after, *::before{
box-sizing: border-box;
font-size: 62.5%;
margin:0;
padding:0
}
body{
background-image:linear-gradient(to right,
#f7e2dcd7,
#d1947c5e);
margin:0;
color:#543A14;
font-size: 1.5rem;
font-family: "Outfit", sans-serif;
font-weight: 500;
}
header {
display:flex;
width:100%;
align-items: center;
height:10.5rem;
position:fixed;
top:0;
background-color: #f7e2dc;
}
header img{
width:70px;
margin:0 10px;
}
h1{
font-size:5rem;
width:50%
}
h2{
font-size: 3rem;
}
nav {
width: 50%;
max-width: 500px;
}
nav > ul{
display:flex;
justify-content: space-around;
align-items: center;
list-style: none;
}
.nav-link {
text-decoration: none;
color:#543A14;
font-size: 2rem;
}
.nav-link:hover{
color:#FFF0DC;
background-color: #a3725fc7;
border-radius: 2px;
opacity: 0.7;
border:none;
}
main{
width: 75%;
margin: 20rem auto 0 auto;
border-radius: 5px;
}
.input-style{
color:#543A14;
font-weight: 500;
/* background-color: #fff9f8d7; */
border-radius: 4px;
border:2px inset #a3725fc7;
border-style:inset;
padding:1.5rem .8rem;
}
.button-style{
margin: 10px;
padding:5px;
width:50%;
background-color: #fff9f8d7;
}
.button-style.input-style:hover{
color:#fff9f8d7;
background-color:#a3725fc7;
border-color:#fff9f8d7;
cursor: pointer;
font-weight: 600;
}
.form-section {
text-align: center;
margin:10px;
}
input {
display:block;
margin:1rem auto 0 auto;
width:30%;
height:3rem;
background-color: #fff9f8d7;
}
#submit {
width:15%;
margin-left:200px;
padding:0;
}
.material-symbols-outlined{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin:40px
}
#features{
margin: 5rem 0 5rem 0;
}
#features p{
margin-bottom: 5rem;
font-size: 2rem;
}
.container{
display:flex;
}
.info{
display:flex;
flex-direction: column;
padding-top:30px;
}
.candle-video{
display:flex;
justify-content: center;
margin-top:10rem;
}
#pricing{
display:flex;
text-align:center;
margin:10px;
}
.pricing-card{
margin: 10rem auto;
padding:0;
width:28%;
min-width: 200px;
}
.pricing-card h2{
background-color:#a3725fc7;
padding:1rem;
font-weight: 400;
}
.pricing-card h3{
font-size: 3rem;
font-weight: 400;
margin:2rem;
}
.pricing-card ol li{
text-decoration: none;
list-style: none;
margin:2rem;
}
.pricing-card button{
margin-bottom: 3rem;
}
footer{
background-color:#e99f8177;
}
.footer-div-links ul{
display: flex;
justify-content: space-around;
margin-right: 4rem;
}
.footer-div-links ul li{
list-style: none;
margin: 1rem 4rem;
}
.footer-div-links a{
font-size: 1rem;
}
.copyright-disclaimer{
display: flex;
flex-direction: column;
align-items: center;
}
.copyright-disclaimer p{
margin-bottom: 1rem ;
}
.copyright-disclaimer span{
margin-bottom: .5rem;
}
@media (max-width:850px) {
#pricing{
flex-direction: column;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page
