Tell us what’s happening:
for some reason it doesn’t detect that I have the navbar on top of the view port whenever I run the test code
Your code so far
I know the code is kinda messy
<!DOCTYPE html>
<html lang="en">
<head>
<title>product landing page</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<header id="header">
<div class="navbar">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="an image of your mom of course" id="header-img"/>
<nav id="nav-bar">
<ul class="nav-links">
<li><a href="#premium" class="nav-link">features</a></li>
<li><a href="#video" class="nav-link">how it works</a></li>
<li><a href="#box" class="nav-link">Pricing</a></li>
</ul>
</nav>
</div>
</header>
<h4>Handcrafted, home-made masterpieces</h4>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<fieldset>
<label><input type="email" placeholder="enter your email address" required id="email" name="email"/></label>
<br>
<label><input type="submit" value="get started" id="submit"></label>
</fieldset>
</form>
<div class="text-to-trick-our-customers wrap">
<div class="premium">
<h3 id="premium">Premium Materials</h3>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
<div class="slow-shipping">
<h3>fast shipping</h3>
<p>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="I-am-not-sure">
<h3>Qaulity Assurance</h3>
<p>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>
<iframe width="300" height="290"
src="https://www.youtube.com/watch?v=y8Yv4pnO7qc&feature=youtu.be&ab_channel=TheUnitedStatesArmyFieldBand" id="video"></iframe>
<div class="flex-container" id="box">
<div class="box1">
<div class="text">Tenor Trombone</div>
<h2>$600</h2>
<ol>
<li>
Lorem ipsum.
Lorem ipsum.
Lorem ipsum dolor.
Lorem ipsum.
</li>
</ol>
<label><input type="submit" value="SELECT"></label>
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div>
<footer id="footer">
<ul class="footer-links">
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contract</a></li>
</ul>
<span>Copyright 2016, Original Trombones</span></footer>
</body>
</html>
css code:
body {
background-color: #eee;
font-family: sans;
}
#header-img {
display: block;
width: 300px;
padding: 9px;
}
.nav-links > li {
display: inline;
float: left;
}
.nav-links > li > a {
display: block;
padding: 2px 40px;
text-decoration: none;
}
a:link {
color: #000;
}
.nav-links {
list-style-type: none;
overflow: hidden;
display: inline-block;
}
.navbar {
position: fixed;
width: 100%;
top: 0%;
left: 56%;
}
fieldset {
border: none;
display: block;
margin: 0.5em auto;
text-align: center;
}
h4 {
text-align: center;
margin-bottom: 0px;
}
input[value="get started"] {
margin: 1em auto;
background-color: yellow;
width: 150px;
border: none;
height: 30px;
border-radius: 3px;
font-weight: bold;
font-size: 17px;
cursor: pointer;
}
.text-to-trick-our-customers {
height: 10px;
line-height: 15px;
position: relative;
left: 190px;
word-break: break-all;
}
.I-am-not-sure > p {
vertical-align: middle;
margin-top: -15px;
}
.premium > p {
vertical-align: middle;
margin-top: -15px;
}
.slow-shipping > p {
vertical-align: middle;
margin-top: -15px;
}
.wrap {
width: 80vw;
border: 1px solid none;
}
.slow-shipping, .premium, .I-am-not-sure {
margin-bottom: 50px;
}
iframe {
margin: 300px 0px 0px 490px;
overflow: hidden;
}
.box1 {
width: 300px;
height: 350px;
border: 1px solid #000;
margin: 10px;
}
.box2 {
width: 300px;
height: 350px;
border: 1px solid #000;
margin: 10px;
}
.box3 {
width: 300px;
height: 350px;
border: 1px solid #000;
margin: 10px;
}
.flex-container {
display: flex;
justify-content: center;
}
.text {
text-align: center;
background-color: red;
height: 30px;
padding-top: 10px;
}
h2 {
text-align: center;
}
input[value="SELECT"] {
margin: 100px;
background-color: yellow;
width: 100px;
border: none;
height: 30px;
border-radius: 3px;
font-weight: bold;
font-size: 17px;
cursor: pointer;
}
#footer {
margin: 20px 20px 0px 20px;
border: 1px solid none;
background-color: grey;
height: 60px;
width: 90vw;
}
#footer > span {
display: flex;
justify-content: flex-end;
}
.footer-links {
list-style-type: none;
overflow: hidden;
display: flex;
justify-content: flex-end;
}
.footer-links > li > a {
padding: 2px 5px;
text-decoration: none;
}
@media only screen and (max-width: 400px) {
.navbar {
position: relative;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:94.0) Gecko/20100101 Firefox/94.0
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: