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: