Tell us what’s happening:
is about build a landing page project, i have tried all possibile method and research to pass test 23, make sure your #nav-bar is always at top of the view port
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header id="header">
<nav id="nav-bar">
<img id="header-img" src="http://www.w3schools.com/images/img_girl.jpg" alt="Product logo" />
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-is-done">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<div class="grid-container">
<div class="hero-section">
<h1>Day in the life of a Software Engineer | How i got a Job In 2025</h1>
</div>
<div id="features">
<figure class="figure1">
<iframe src="https://www.youtube.com/embed/pRmqzyV51Ww" title="How I Use AI To Build An App That ACTUALLY Makes Money" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<figcaption><h2>How I Use AI To Build An App That ACTUALLY Makes Money</h2>
<p>In this episode i made us eof an AI to build an application that makes real money from scratch to producion</p>
</figcaption>
</figure>
<figure class="figure2">
<iframe src="https://www.youtube.com/embed/uZGuwX3St_c" title="Spring Security JWT: User Sign Up + Login with Email Verification in Spring Boot" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<figcaption><h2>Spring security JWT: User sign up + Login with email verification in spring boot</h2>
<p>In this comprehensive tutorial, I will guide you through the process of setting up secure user authentication in a Spring Boot application. You'll learn how to implement user registration, login, and email verification using JWT (JSON Web Tokens). We'll cover essential security configurations with Spring Security, enabling you to protect your application with robust authentication mechanisms. By the end of this tutorial, you'll have a fully functional authentication system, complete with JWT handling and email verification, ready to be integrated into your Spring Boot projects.</p></figcaption>
</figure>
<figure class="figure3">
<iframe src="https://www.youtube.com/embed/JGWabJWC24U" title="My Last Week as an Amazon Software Engineer" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<figcaption>
<h2>My Last Week As An Amazon Software Engineer</h2>
<p>Come with me on my last week as a software engineer intern at Amazon in Toronto! The tech job market is so cooked in 2025, so let's see if I get that return offer...</p>
</figcaption>
</figure>
</div>
<div id="how-it-is-done">
<div class="hero-section">
<h2>How It Works</h2>
</div>
<figure>
<iframe id="video" src="https://www.youtube.com/embed/G-aSkfQ8v_E" title="Day in the Life of a Software Engineer | How I Got A Job In 2025" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</figure>
</div>
<form id="form" action="https://www.freecodecamp.org/email-submit">
<input type="email" id="email" placeholder="name@email.com" name="email" required/>
<input type="submit" id="submit" value="Get Started"/>
</form>
<div id="pricing">
<div class="div-card1"><h3>Tenor Trombone</h3>
<p>$600</p>
<ul>
<li>Good for beginners</li>
<li>Excellent sound quality</li>
<li>Great for Jazz Bands</li>
<li>Nice and shiny</li>
</ul>
</div>
<div class="div-card2"><h3>Bass Trombone</h3>
<p>$900</p>
<ul>
<li>Sound quality is unmatched</li>
<li>Best for professionals</li>
<li>Absolutely stunning</li>
<li>Durable and long lasting</li>
</ul>
</div>
<div class="div-card3"><h3>Valve Trombone</h3>
<p>$1200</p>
<ul>
<li>Plays similar to a Trumpet</li>
<li>Great for Jazz Bands</li>
<li>Beautiful in sound and appearance</li>
<li>Just amazing</li>
</ul>
</div>
</div>
<div class="footer">
<footer class="footer1">
<div class="footer-card1">
<ul>
<li>Privacy</li>
</ul>
</div>
<div class="footer-card2">
<ul>
<li>Contact</li>
</ul>
</div>
<div class="footer-card3">
<ul>
<li>Terms of condition</li>
</ul>
</div>
</footer>
</div>
</div>
</body>
</html>
/* file: styles.css */
*,
::before
::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
margin: 0 auto;
}
body{
padding: 10px;
margin: 0 auto;
font-family: sans-serif, vertica;
width: 100vw;
height: 100vh;
line-height: -100px;
background: linear-gradient(to right, midnightblue, black);
color: white;
}
iframe{
width: 380px;
height: 180px;
}
#header-img{
position: sticky;
}
#nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%; /* ✅ safer than 100vw */
z-index: 100; /* ✅ makes sure it stays above all content */
}
h2{
font-size: 1.9rem;
}
h3{
font-size: 1.7rem;
}
p{
font-size: 1.5rem;
}
#nav-bar ul{
list-style-type: none;
display: flex;
justify-content: space-around;
font-weight: bold;
font-size: 1.5rem;
}
#nav-bar li{
padding: 12px;
font-weight: bold;
}
a{
color: white;
text-decoration: none;
}
.hero-section{
display: flex;
justify-content: center;
padding-top: -3px;
font-size: 1.9rem;
flex-wrap: nowrap;
padding: 60px 50px;
}
.hero-section h1{
text-align: center;
width: 75%;
}
.grid-container{
margin-top: 80px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"hero-section hero-section hero-section"
"form form form"
"features features features"
"how-it-is-done how-it-is-done how-it-is-done"
"pricing pricing pricing"
"footer footer footer";
grid-template-rows: auto;
gap: 60px;
}
#header{
grid-area: header;
}
.form{
grid-area: form;
display: block;
width: 100%;
margin: 0 auto;
padding: 30px auto 10px 60px; }
#features{
grid-area: features;
display: block;
}
#features .figure1{
display: block;
grid-area: figure1;
text-align: center;
margin: 75px;
}
#features .figure2{
display: block;
grid-area: figure2;
text-align: center;
margin: 75px;
}
#features .figure3{
display: block;
grid-area: figure3;
text-align: center;
margin: 75px;
}
#how-it-is-done{
grid-area: how-it-is-done;
margin: 0 auto;
}
#pricing{
grid-area: pricing;
display: flex;
justify-content: space-between;
text-align: center;
}
#pricing li{
list-style-type: none;
font-size: 1.5rem;
}
.footer{
grid-area: footer;
}
.footer .footer1{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: "footer-card1" "footer-card2" "footer-card3";
gap: 10px;
padding: 20px;
background-color: gray;
}
.footer-card1{
grid-area: footer-card1;
}
.footer-card2{
grid-area: footer-card2;
}
.footer-card3{
grid-area: footer-card3;
}
footer ul{
list-style-type: none;
font-size: 1.5rem;
padding: 10px;
width: 100%;
margin: 0 auto;
}
.hero-section{
grid-area: hero-section;
}
#email{
border: px border transparent;
padding: 10px 50px;
margin: -50px 0 20px 290px;
width: 100%;
font-size: 1.5rem;
background-color: transparent;
color: white;
text-align: left;
}
#submit{
background-color: green;
color: white;
padding: 30px 10px 10px 10px;
margin: 20px 0px 290px 350px;
width: 100%;
font-size: 1.9rem;
flex-wrap: nowrap;
text-align: center;
}
@media (max-width: 768px) {
#nav-bar ul {
flex-direction: row;
align-items: center;
}
iframe {
width: 100%;
height: 180px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0
Challenge Information:
Build a Product Landing Page - Build a Product Landing Page