Tell us what’s happening:
I can’t pass the Test 23. I tried everything that the nav-bar / header is fixed a the top. But the test just don’t pass and i dont know why.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<nav id="nav-bar">
<div class="logo">
<img id="header-img" src="https://raw.githubusercontent.com/feathericons/feather/master/icons/music.svg" alt="Schlagzeug">
<span class="logo-text">Banger Drums</span>
</div>
<ul class="nav-items">
<li><a class="nav-link" href="#bennefits">Bennefits</a></li>
<li><a class="nav-link" href="#video">How to Play</a></li>
<li><a class="nav-link" href="#prices">Price</a></li>
</ul>
</nav>
</header>
<div class="page">
<div class="email-form">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<span>The best Product you can get</span>
<input type="email" id="email" placeholder="@Email" name="email">
<input id="submit" type="submit">
</form>
</div>
<div class="bennefits" id="bennefits">
<div class="grid">
<img class="bennefits-icon" src="https://raw.githubusercontent.com/feathericons/feather/master/icons/tool.svg">
<div class="info">
<h3>Hand Crafted</h3>
<p>Our drums are hand crafted with care, giving each instrument a unique character and exceptional sound quality</p>
</div>
</div>
<div class="grid">
<img src="https://raw.githubusercontent.com/feathericons/feather/master/icons/truck.svg">
<div class="info">
<h3>Free Shipping</h3>
<p>Enjoy free and reliable shipping throughout Germany, Austria and Switzerland, so you can get your drums delivered straight to your door without any extra cost</p>
</div>
</div>
<div class="grid">
<img src="https://raw.githubusercontent.com/feathericons/feather/master/icons/check-square.svg">
<div class="info">
<h3>Money-Back</h3>
<p>Enjoy our 30 day money back guarantee - if you're not completely satisfied, you'll get a full refund</p>
</div>
</div>
</div>
<iframe id="video" src="https://www.youtube.com/embed/SYHJWr1DhG0" frameborder="0" allowfullscreen></iframe>
<div class="prices" id="prices">
<div class="price-card">
<h4>Basic Beat</h4>
<p>
<strong>200$</strong><br>Snare Drum<br>Bass Kick<br>Hi-Hat<br>Tom Toms
</p>
<button type="button">Select</button>
</div>
<div class="price-card">
<h4>Gold Groove</h4>
<p>
<strong>450$</strong><br>Maple Shells<br>Chrome Hardware<br>Double Pedal<br>Cymbal Pack
</p>
<button type="button">Select</button>
</div>
<div class="price-card">
<h4>Ultra Vibe</h4>
<p>
<strong>800$</strong><br>Carbon Shells<br>Heavy Duty<br>Electronic Pads<br>Professional Cymbals
</p>
<button type="button">Select</button>
</div>
</div>
</div>
</body>
</html>
/* file: styles.css */
* {
font-family: Calibri;
font-size: 18px;
margin: 0;
padding: 0;
}
header {
position: fixed;
width: 100%;
background-color: white;
z-index: 1000;
}
#nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
background-color: white;
padding: 5px 20px;
height: 60px;
max-width: 1200px;
margin: 0 auto;
z-index: 1001;
}
.logo {
display: flex;
align-items: center;
gap: 5px;
margin-left: 20px;
}
#header-img {
width: 40px;
height: 40px;
}
.logo-text {
font-weight: bold;
font-family: Consolas;
font-size: 18px;
}
.nav-items {
list-style-type: none;
display: flex;
gap: 30px;
margin-right: 40px;
}
.nav-items li a {
text-decoration: none;
color: black;
}
body {
padding-top: 80px;
}
.page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.email-form form {
margin-top: 5%;
font-weight: bold;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
#submit {
background-color: lightblue;
border: none;
padding: 8px;
border-radius: 9px;
}
#email {
padding: 8px;
}
.grid {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 20px;
margin: 20px auto;
max-width: 800px;
}
.info h3 {
margin-bottom: 0;
}
.info p {
margin-top: 0;
}
#video {
margin: 30px;
width: 600px;
height: 350px;
}
@media (max-width: 600px) {
#video {
width: 100%;
height: auto;
}
}
.prices {
display: flex;
flex-wrap: wrap;
gap: 20px;
width: 100%;
justify-content: center;
padding: 0 40px;
max-width: 1200px;
margin: 0 auto;
}
.price-card {
flex: 1 1 100px;
max-width: 350px;
display: flex;
flex-direction: column;
border: 1px solid black;
min-height: 300px;
margin: 10px;
}
.price-card h4 {
padding: 25px 0;
text-align: center;
background-color: lightgrey;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.price-card p {
text-align: center;
padding: 15px 20px;
flex-grow: 1;
}
.price-card p strong {
display: block;
margin-bottom: 15px;
}
.price-card button {
background-color: lightblue;
border: none;
padding: 10px;
border-radius: 9px;
margin: 10px 20px 20px 10px;
}
@media (max-width: 600px) {
#nav-bar {
flex-direction: column;
height: auto;
padding: 10px 20px;
}
.nav-items {
flex-direction: column;
gap: 10px;
margin-right: 0;
align-items: center;
}
.logo {
margin-left: 0;
margin-bottom: 10px;
}
body {
padding-top: 120px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.0
Challenge Information:
Product Landing Page - Build a Product Landing Page