Product Landing Page - Build a Product Landing Page

Hi I don’t understand why my navigation links won’t work. They won’t let me link down to other sections of the webpage.

Your code so far

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.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>fender</title> 
  <link rel="syleesheet" href="styles.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  <header id="header">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Fender_guitars_logo.svg/1200px-Fender_guitars_logo.svg.png" id="header-img" alt="Fender guitars logo.svg">
 
    <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href="#highlights">Highlights</a></li>
      <li><a class="nav-link" href="#specs">Specs</a></li>
      <li><a class="nav-link" href="#support">Support</a></li>
    </ul>
   </nav>
  </header>
  <br>
  <p class="caption">Enter your email to get updates!</p>
<form id="form" action="https://www.freecodecamp.com/email-submit">

  <input style="margin-top: 100px" id="email" placeholder="enter email" type="email" name="email"></input> 
  <input id="submit" type="submit" name="submit">

  <main id="main-doc">

        <iframe id="video" src="https://www.youtube.com/embed/QdQNhwfgVyk" title="Exploring The American Professional II Jazz Bass | American Professional II Series | Fender" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    <section id="highlights" name="highlights">
      <div class="bar"><h4>Highlights</h4>
      </div>
      <article>
          <p>V-MOD II PICKUPS</p> 
          <p>V-Mod II Jazz Bass pickups are voiced specifically for each position, slightly overwound for punch and presence, yet retaining vintage warmth and clarity.</p>
        
          <p>NEW SCULPTED NECK HEEL</p>
          <p>The rounded neck heel and beveled neck-plate improve access to the upper register and make leads easy and comfortable.</p>

          <p>HIMASS™ VINTAGE BRIDGE</p>
          <p>This precision manufactured string-through or top load bridge adds sustain, resonance and improved attack thanks to a cold-rolled steel baseplate, high mass brass backstop, and chrome-plated brass saddles.</p>
        </article>
    </section>

    <section id="specs" name="specs">
      <div class="bar"><h4>Specs</h4> </div>
      <div class="grid">
          <div class="flex-box">
            <li><strong>BODY:</strong></li>
            <li>Body Material Alder,</li>
            <li>Finish
Gloss Urethane,</li>
            <li>Shape
Jazz Bass®</li>
          </div>
          <div class="flex-box">
            <li><strong>NECK:</strong></li>
            <li>Neck Material
Maple,</li>
            <li>Scale Length
34",</li>
            <li>Fret Size
Narrow Tall</li>
          </div>
          <div class="flex-box">
            <li><strong>ELECTRONICS:</strong></li>
            <li>Bridge Pickup
V-Mod II Single-Coil Jazz Bass®</li>
          </div>
        </div>
    </section>

    <section id="support" name="support">
      <div class="bar"><h4>Support</h4></div>
        <ul class="support-info">
          <a href=" "><li>Manual</li></a>
          <a href=" "><li>Warranty</li></a>
          <li>Support number: <a href=" ">999-999-9999</a></li>
        </ul>
    </section>
  </main>
</body>
</html>


body {
  font-family: sans-serif; 
}

header {
  background-color: #d3d3d3;
  padding: 18px 0 15px 10px; 
  height: 50px; 
  width: 100% auto;
  position: sticky; 
  top: 0; 
  display: flex; 
  justify-content: space-between; 
  margin-right: 5px;   
}

ul { 
  display: flex;
  float: right;
  list-style: none; 
}

a {
  color: black; 
  text-decoration: none; 
  margin-right: 15px; 
}

form {
  text-align: center;
  margin-top: -80px;  
}

.caption {
  text-align: center; 
  margin-bottom: -20px; 
}

input {
  padding: 10px; 
  border-radius: 10px; 
  margin-bottom: 30px; 
  position:relative;
  z-index: 999;
}

section {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding-top: 250px;
}

a:hover {
  color: red;
}

#highlights {
  padding-top: 575px;
}

#specs {
  padding-top: 35px;
}

#support {
  padding-top: 35px;
}

ul:last-child {
  display: flex; 
  width: 100%;
  justify-content: space-evenly; 
}

.bar {
  background-color: #d3d3d3; 
  padding: 15px 0 15px 0px; 
  height: 50px; 
  width: 100% auto;
}

h4 {
  text-align: center; 
}

.flex-box {
  list-style: none; 
  display: flex; 
  justify-content: space-evenly;
  border-bottom: 1px solid #e0e0e0;
  flex-wrap: wrap;
  flex-flow: row wrap;
  height: 30px;
  padding-top: 10px; 
}

.grid {
  padding-top: 15px; 
}

.support-info {
  padding-top: 10px; 
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

can you give an example of one of the links that you used that is not working and what you think it should be linking to ? (in the code of course)

so all of the nav links don’t connect to the sections. so like the hightlights, specs, and support links.

please, just one example (you can use a code block to show me what you did in the code)

ps. I just tried your highlights link and it worked for me. So unless you tell me exactly which one you believe is not working, I do not intend to spend any more time…

It is the video iframe that is on top of the links (its padding). If you change the padding to the top offset instead it won’t cover the nav.

Edit: I guess you can also just change the padding to margin to push the video down

But I’m not sure about using absolute position with the video anyway. I guess it depends on the look you are going for. But you have to be careful with absolute positioning.

thank you so much! I changed it to margin and it worked!