Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
When I run the test it gives me an error that says " 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 still need help in that area and I would like to know how can I best maximise my understanding of navigation keys

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="#digital_mixers">How It Works</a>
    </li>
      <li>
        <a class="nav-link" href="#promotions">
          Promotions
        </a>
      </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="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 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>
  </body>

</html>

logo

Music Instruments

Your Best Sound Equipment

Instrument of your choice

We have every music instrument you will need to get set up and start playing your favorite instrument from home right to the stage.

Quality Instrument

All our instruments are checked first before issuing them out to our customers

Shipping within 5 days

We deliver your product to your doorstep with our trucks. You may return the product for an exchange of another one.

Promotions

DJ Bags Cases CD & Gear Protection

Odyssey Flight Case – Pioneer DDJ-800/XDJ-RR

Odyssey Flight Case Features:

  • Bottom 1U Rack Space
  • Rubber Feet
  • Cable Port Hole
  • Glide Platform Latch
  • Laptop Platform (Glide Style)
  • Removable Panel

FZGSPIDDJ8001 – Glide Style Controller Case Compatible with Pioneer Ddj-800, 1U Rack Space

Dj Bag Case

R7,495.00 Incl.

Add to Cart

    <h2> FZGSL12CDJWR Low Profile Glide Style™ Coffin</h2>
    <h3>Low Profile Glide Features:</h3>
  • Accomodates Most 12" Format DJ Mixer
  • Cable Port Hole
  • Laptop Platform (Glide Style)
  • Low Profile
  • Removable Panel
  • Wheels
    <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">

R7,295.00 Incl

Add to Cart

Odyssey FZGSPDJ12W - Universal 12″

Odyssey FZGSPDJ12W Features:

  • Removable Full Width Patented Glide Platform
  • Built-in Roller Wheels For Easy Transport
  • Heavy-Duty Ball Corners
  • Removable Front Mixer Angled V-Cut™ Panel
  • Mixer Well Holds Mixers With a Width of Up To Approximately 13", Depth Up To 15"
  • Mixer and Turntable Ventilation Pits
    <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">

R15 074,00 Incl.

Add to Cart

```

CSS

:root {--pale: hsl(32, 37%, 100%)}

body {background-color: var(--pale);}

#header-image {object-fit: contain;

width: 70px;}

.logo-container {display: flex;

align-items: center;}

.product {font-size: 30;

margin-right: 30px;

font-weight: 600;

font-family: Robot slab;}

.nav-links {list-style: none;

display: flex;

margin: 10px;}

#nav-bar {display: flex;

flex-direction: column;

align-items: center;

justify-content: space-around;

background-color:yellow;

position: fixed;

width: 100%;

padding: 10px;}

.nav-links a {text-decoration: none;

padding: 0 10px;}

#email-section {margin-top: 100px;}

section {margin: 40px 20px;

text-align: center;}

section::before

{display: block;

margin-top: -100px;

height: 100px;

visibility: hidden;

content: "";

pointer-events: none;}

h1 {padding: 30px;

font-family: Fantasy;

font-style: italic;

margin-bottom: -25px;}

input {padding: 8px;

border-radius: 5px;

border: 2px solid;}

#submit {background-color: grey;

cursor: pointer;

margin-bottom: 20px;}

.icon {color: grey;

margin-right: 30px;}

#features {text-align: left;

max-width: 800px;

margin: auto;

justify-content: center;}

.Features {list-style: none;

display: flex;

margin: 20px;

justify-content: center;

}

h2 {margin-bottom: 10px;}

#video {width: 100%;}

.instrument3 {object-fit: none;}

.flex {display: flex; margin-bottom: 15px; align-items: center; }

@media only screen {

.fadeInEffects {

display: block;

}

}

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:

  • these two don’t match with its “corresponding” elements

happy coding :slight_smile:

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