Tell us what’s happening:
I am frustrated with this project, I have posted 3 times so far about the same problem and it seems like I have messed up the code bcos my elements were initially aligned. It has been 2 weeks doin this project and I don’t seem to complete it.
I got the same error again after fixing it
" 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 )."
I have inserted the footer and things got worse
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 href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
<header id="header">
<nav id="nav-bar">
<div class="logo-container">
<img id="header-img"
src=
"https://soundselect.co.za/pub/media/soundselect19052023/musical-instrument.webp"
alt="logo"/>
<span class="product">Music Instruments</span>
</div>
<ul class="nav-links">
<li>
<a class="nav-link" href="#features">Features
</a>
</li>
<li>
<a class="nav-link" href="#How_It_Works">How It Works</a>
</li>
<li>
<a class="nav-link" href="#promotions">
Promotions
</a>
<li><a class="nav-link" href="#footer">Footer</a></li>
</li>
</ul>
</nav>
</header>
<section id="email-section">
<h1>Your Best Sound Equipment</h1>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input id="email" type="email" placeholder="enter your emil address" name="email" required/>
<input id="submit" type="submit" value="GET STARTED"/>
</section>
</form>
<section id="features">
<div class="Music_feature">
<i class="ri-file-paper-2-fill ri-5x icon"></i>
<h2>Instrument of your choice</h2>
<p>We have every music instrument you will need to get set up and start playing your favorite instrument from home right to the stage.</p>
</div>
<div class="features">
<i class="ri-folder-music-fill ri-5x icon"></i>
<h2>Quality Instrument</h2>
<p>All our instruments are checked first before issuing them out to our customers</p>
</div>
<div class="Shipping">
<i class="ri-truck-fill ri-5x icon"></i>
<h2>Shipping within 5 days</h2>
<p>We deliver your product to your doorstep with our trucks. You may return the product for an exchange of another one.</p>
</div>
</section>
<section id="How_It_Works">
<section id="audip">
<iframe id="video"
height="315"
src="https://www.youtube.com/embed/QgaTQ5-XfMM" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</section>
</section>
<section id="Promotions">
<h2>Promotions</h2>
<div class="product-instruments">
<div class="instrument">
<div class="instrument-image instrument1">
</div>
<div class="DJ-Bag">DJ Bags Cases CD & Gear Protection</div>
<h2>Odyssey Flight Case – Pioneer DDJ-800/XDJ-RR</h2>
<h3>Odyssey Flight Case Features:</h3>
<ul class="Odyssey-Flight-Case">
<li>Bottom 1U Rack Space</li>
<li>Rubber Feet</li>
<li>Cable Port Hole</li>
<li>Glide Platform Latch</li>
<li>Laptop Platform (Glide Style)</li>
<li>Removable Panel</li>
</ul>
<p>FZGSPIDDJ8001 – Glide Style Controller Case Compatible with Pioneer Ddj-800, 1U Rack Space</p>
<img src="https://www.odysseygear.com/wp-content/uploads/fzgspiddj8001_01-500x500.jpg" alt="Dj Bag Case">
</div>
<div class="flex">
<p class="price">R7,495.00 Incl.</p>
<button class="add">
<p style="margin-left: 5px">Add to Cart
</p>
</button>
</div>
<div class="instrument">
<div class="instrument-image instrument2">
<h2> FZGSL12CDJWR Low Profile Glide Style™ Coffin</h2>
<h3>Low Profile Glide Features:</h3>
<ul class="Low-Profile-Glide">
<li>Accomodates Most 12" Format DJ Mixer</li>
<li>Cable Port Hole
</li>
<li>Laptop Platform (Glide Style)</li>
<li>Low Profile</li>
<li>Removable Panel</li>
<li>Wheels</li>
</ul>
<p>Black Low Profile 12″ Format DJ Mixer and Two Large Format Media Players Flight Coffin Case with Wheels and Glide Platform</p>
<img src="https://www.djmixclub.co.za/wp-content/uploads/2023/02/Odyssey-Coffin-Case-FR12CDJWE.jpeg" alt="Coffin Case">
</div>
<div class="flex">
<p class="price">R7,295.00 Incl</p>
<button class="add">
<p style="margin-left: 5px">Add to Cart
</p>
</button>
</div>
</div>
</div>
<div class="instrument">
<div class="instrument-image instrument3"></div>
<h2>Odyssey FZGSPDJ12W - Universal 12″ </h2>
<h3>Odyssey FZGSPDJ12W Features:</h3>
<ul class="Odyssey-FZGSPDJ12W">
<li>Removable Full Width Patented Glide Platform</li>
<li>Built-in Roller Wheels For Easy Transport</li>
<li>Heavy-Duty Ball Corners</li>
<li>Removable Front Mixer Angled V-Cut™ Panel</li>
<li>Mixer Well Holds Mixers With a Width of Up To Approximately 13", Depth Up To 15"</li>
<li>Mixer and Turntable Ventilation Pits</li>
</ul>
<p>Format DJ Mixer and Two Standard Position Turntables Flight Coffin Case with Full Glide Platform</p>
<img src="https://i.ebayimg.com/images/g/Re4AAOSwq1pkXAww/s-l1600.jpg" alt="Dj Coffin">
</div>
<div class="flex">
<p class="price">R15 074,00 Incl.</p>
<button class="add">
<p style="margin-left: 5px">Add to Cart
</p>
</button>
</div>
</div>
</div>
</section>
<div>
<footer>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span>Copyright 2016, Music Instruments</span>
</footer>
</div>
</body>
</html>
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: