Hi everyone! I’m having a hard time figuring out how to get the header to extend all the way. I’m also having a hard time trying to fix the following errors and any help from a more knowledable and experienced programmer would be very helpful! thank you!
-
Failed:9. Each
.nav-linkelement should have anhrefattribute. -
Failed:10. Each
.nav-linkelement should link to a corresponding element on the landing page (has anhrefwith a value of another element’s id. e.g.#footer)
Failed: 23. Your #nav-bar should always be at the top of the viewport.
<!DOCTYPE html>
<html lang="en">
<head id="header">
<title>WTS Candles</title>
<meta charset= "utf-8">
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<ul>
<h1>WTS? Candles</h1>
<img id="header-img" src="https://yankeecandle.imgix.net/8c48fae0-7e3d-3d7e-822e-35c72b784e52/8c48fae0-7e3d-3d7e-822e-35c72b784e52.tif?auto=format,compress&w=972&fm=avif" alt="Halloween Candle" />
<li class="nav-link"><a href="#about">About</a></li>
<li class="nav-link"><a href="#products">Products</li>
<li class="nav-link"><a href="#prices">Prices</li>
</ul>
</nav>
</header>
<div class="form">
<h2>Natural & Organic Materials</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit" >
<label>Cool Candles Info</label>
<input id="email" type="email" placeholder="sample@email.com" name="email">
<input id="submit" type="submit" name="email">
</form>
</div>
<div class="">
<h3>Quality Offerings</h3>
<section>
<h4 id="about">About</h4>
<p>At WTS? Candles, we are passionate about delivering high-quality candles that enrich everyday life. Founded in 1401, we prioritize sustainability and customer satisfaction in everything we do.</p>
</section>
<section>
<h4 id="products">Products</h4>
<p>We offer a diverse range of candles designed to meet your needs, including our holiday season collection. Each item is crafted with care and attention to detail, ensuring quality and style.</p></section>
<section>
<h4 id="prices">Prices</h4>
<p>We provide fast and reliable shipping, with free shipping on orders over $12+ within USA. Orders are processed within 1-2 days, and tracking information is available for your convenience.</p></section>
</div>
<div class="video">
<video id="video" width="500px"
height="400px"
controls="controls">
<source src="https://youtube.com/shorts/Rs8peo7l35E?si=Xu0BKq9TlzAUzrcz" type="video/mp4" />
</video>
</div>
<div id="product-flex">
<div><section><h5>Spooky Holloween Collection</h5><p>Embrace the eerie ambiance of autumn with our Spooky Halloween Collection, featuring captivating scents that bring your favorite Halloween vibes to life.</p></section></div>
<div><section><h5>Happy Holiday Collection</h5><p>Celebrate the magic of the season with our Happy Holiday Collection, filled with joyful scents that evoke warmth and cheer.</p></section></div>
<div><section><h5>Seasonal Collection</h5><p>Discover the essence of each season with our Seasonal Collection, featuring an array of scents that capture nature’s ever-changing beauty.</p></section></div>
</div>
<footer>
</footer>
</body>
</html>
*{
font: serfs, arial;
color:white;
text-decoration: none;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
border: 2px solid white;
background-color: maroon;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
#form {
margin-top: 100px;
text-align: center;
}
nav li {
display: inline;
border: 1px solid white
}
nav li a {
color: white;
text-align: center;
margin: 1px;
padding: 2px;
}
nav li a:hover{
background-color: black;
}
.active{
background-color: black;
}
body{
background-color:maroon;
}
h1{
color: white;
margin-bottom: 22px;
margin-right: 100px;
width: 100%;
height: 100%;
}
video{
display: block;
margin: auto
}
#header-img{
width: 10%;
height: auto;
margin: 0px;
padding: 4px;
position: absolute;
left: 3%;
top: 0;
}
#product-flex{
display: flex;
margin-top: 150px;
flex-direction: column;
}
footer{
background: white;
}
@media (orientation: landscape){
body {
color: white;
}
