Tell us what’s happening:
Hello,
I’m currently doing the « Build a product landing page » project for the Responsive Web Design certification.
When I « Run the Tests » it’s all good but it doesn’t pass « Your nav-bar should always be at the top of the viewport ».
I’ve searched on the FCC help forum and tried a lot of different solutions (such as position: fixed on the #header or the #nav-bar) with no success and I still can’t figure it out.
Can someone help me with my code?
Thanks
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
</head>
<body>
<main>
<header id="header">
<h1><img id="header-img" src="https://cdn-icons-png.flaticon.com/512/96/96014.png" alt="logo" width="150"></h1>
<nav id="nav-bar">
<ul>
<li><a href="#features" class="nav-link">Features</a></li>
<li><a href="#video" class="nav-link">How it works</a></li>
<li><a href="#pricing" class="nav-link">Pricing</a></li>
</ul> </nav> </header>
<h2> Handcrafted, homemade masterpieces</h2>
<div id="formdiv">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input required type="email" id="email" name="email" placeholder="Enter your email address">
<input type="submit" id="submit" value="Get Started">
</form>
</div>
<div id="features">
<div class="feature">
<h3>Premium Materials</h3>
<p id="p-features">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
<div class="feature">
<h3>Fast Shipping</h3>
<p id="p-features">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
<div class="feature">
<h3>Quality Assurance</h3>
<p id="p-features">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
<div id="videoholder">
<iframe id="video" src="https://youtu.be/y8Yv4pnO7qc" height="300" width="500">
</iframe>
</div>
<div id="pricediv">
<div id="price0">
<h4 id="pricing">Tenor Trombone</h4>
<ul>
<li id="price">$600</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
<input type="button" value="Select" id="Select"></input>
</ul>
</div>
<div id="price1">
<h4>Bass Trombone</h4>
<ul>
<li id="price">$900</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
<input type="button" value="Select" id="Select"></input>
</ul>
</div>
<div id="price2">
<h4>Valve Trombone</h4>
<ul>
<li id="price">$1200</li>
<li>Plays similar to a Trumpet</li>
<li>Great for Jazz Bands</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
<input type="button" value="Select" id="Select"></input>
</ul>
</div>
</div>
<div id="informations">
<p>Privacy</p>
<p>Terms</p>
<p>Contact</p>
<p>Copyright 2016, Original Trombones</p>
</div>
</main>
</body>
</html>
main{
background-color: rgb(233, 232, 232);
}
html{
font-family: lato, sans-serif;
}
#header {
position: fixed;
top: 0;
width: 100%;
padding: 0px 10px;
z-index: 1000;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: rgb(233, 232, 232);
}
#nav-bar{
display: flex;
justify-content: flex-end;
}
nav ul{
padding: 0;
margin: 0;
display: flex;
gap: 50px;
font-size: 20
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
ul li a{
text-decoration: none;
color: black;
font-family: lato;
}
h2{
margin-top: 80px;
display: flex;
justify-content: space-evenly;
align-items: center;
padding-bottom: 20px;
}
#formdiv{
display: flex;
justify-content: center;
padding-bottom: 100px;
}
#email{
border-radius: 5px;
width: 230px;
height: 23px;
}
#submit{
background-color: rgb(255, 190, 89);
border: none;
font-family: lato;
font-weight: bold;
padding: 4px 15px;
font-size: 20
}
#submit:hover{
background-color: orange;
cursor: pointer;
}
input[type="button"]{
background-color: rgb(255, 190, 89);
border: none;
font-family: lato;
font-weight: bold;
padding: 8px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
input[type="button"]:hover{
background-color: orange;
}
#features{
padding-bottom: 150px;
display: flex;
flex-direction: column;
align-items: center
}
h3{
padding: 20px;
padding-left: 0;
width: 270;
font-family: lato;
}
.feature{
display: flex;
flex-direction: flex-start;
margin-bottom: 20px;
align-items: center;
gap: 20px;
max-width: 800px;
}
#p-features{
font-family: lato;
font-size: 18px;
}
#videoholder{
display: flex;
justify-content: center;
gap: 40px 0;
}
#video{
max-width: 100%;
height: 300px;
border: none;
}
#pricediv{
display: flex;
flex-direction: flex-start;
justify-content: space-evenly;
align-items: flex-start;
margin-top: 50px;
}
#pricediv h4{
margin-bottom: 15px;
}
#pricediv li{
margin-bottom: 15px;
}
h4{
font-size: 20px;
background-color: rgb(204, 199, 199);
text-align: center;
}
#price{
font-weight: bold;
font-size: 20px;
}
#price0{
border: solid 1px;
padding: 15px;
width: 200px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}
#price1{
border: solid 1px;
padding: 15px;
width: 200px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}
#price2{
border: solid 1px;
padding: 15px;
width: 200px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}
#informations{
background-color: rgb(203, 198, 198);
display: flex;
flex-direction: flex-end;
justify-content: flex-end;
padding: 15px;
gap: 20px;
}
@media (max-width: 150px){
html{
font-size: 15px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:143.0) Gecko/20100101 Firefox/143.0
Challenge Information:
Product Landing Page - Build a Product Landing Page