I did not understand this part of the instructions: Your #nav-bar
should always be at the top of the viewport. How to fix this?
body{
background-color: #eee;
font-family: 'Lato', sans-serif
}
#header-img{
max-width:300px;
height:100%;
width:100%;
}
.logo{
width:60vw;
}
#nav-bar{width:35vw;
font-weight:400;
position:fixed;
}
#header{
position:fixed;
display:flex;
flex-direction:row;
justify-content:space-around;
align-items:center;
}
ul{
display:flex;
flex-direction:row;
justify-content:space-around;}
li{list-style:none;}
#nav-link{
color:black;
text-decoration:none;
}
#hero{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
height:100px;
margin-top:50px;
}
#email{max-width:275px;
width:275px;
padding:5px;}
#submit{
background-color:f1c40f;
border:none;
padding:0px 15px;
height:30px;
border-radius:5px;
max-width:150px;
font-weight:900;
font-size:1em;
}
.container{
display:flex;
align-items:center;
}
#features{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
width:100%;
max-width:1000px;
}
.grid{
display:block;
flex-direction:row;
align-items:center;
justify-content:center;
max-width:800px;
width:100%;
}
.fa-solid{
color:darkorange;
font-size:50px;
}
.icon{
width:15vw;
display:flex;
justify-content:center;
align-items:center;
}
#how-it-works{
margin:30px;
display:flex;
justify-content:center;
align-items:center;
}
#pricing{
display:flex;
flex-direction:row;
width:100%;
justify-content:space-around;
}
.product{
display:flex;
flex-direction:column; text-align:center;
align-items:center;
width:calc(80%/3);
border: 1px solid black;
border-radius:3px;
margin:20px;
}
.level{
background-color:ddd;
color:black;
width:100%;
padding:15px 0px;
font-weight:700;
}
ol > li {
text-align:center;
margin-right:15px;
padding:5px;
}
.btn{
background-color:#f1c40f;
border:0;
font-weight:400;
padding:7px;
margin-bottom:10px;
border-radius:3px;
font-size:1em;
}
@media(max-width:700px){
#pricing{flex-direction:column;
align-items:center;}
.product{width:300px;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Product Landing Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/d528854f61.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="header" class="header">
<div class="logo"><img id="header-img" alt="logo" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"></div>
<nav id="nav-bar">
<ul>
<li><a id="nav-link" class="nav-link" href="#features">Features</a></li>
<li><a id="nav-link" class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a id="nav-link" class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<section id="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit"><input type="email" id="email" name="email" placeholder="Enter your email address" required/>
</form>
<form id="form">
<input type="submit" id="submit" value="GET STARTED"/>
</form>
</section>
<div class="container">
<div id="features">
<div class="grid">
<div class="icon">
<i class="fa-solid fa-fire-flame-curved"></i>
</div>
<div class="text">
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
<div class="grid">
<div class="icon">
<i class="fa-solid fa-truck"></i>
</div>
<div class="text">
<h2>Fast Shipping</h2>
<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="grid">
<div class="icon">
<i class="fa-sharp fa-solid fa-battery-full"></i>
</div>
<div class="text">
<h2>Quality Assurance</h2>
<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>
</div>
</div>
<div id="how-it-works">
<iframe id="video" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0" name="iframe_a" title="Productvideo" height="315"; width="500" frameborder="0"></iframe>
</div>
<div id="pricing">
<div class="product">
<div class="level">TENOR TROMBONE</div>
<h2>$600</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">SELECT</button>
</div>
<div class="product">
<div class="level">BASS TROMBONE</div>
<h2>$900</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">SELECT</button>
</div>
<div class="product">
<div class="level">VALVE TROMBONE</div>
<h2>$1200</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">SELECT</button>
</div>
</div>
</div>
</div>
</div>
</body>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: