Tell us what’s happening:
i don’t now what’s going on, it keeps telling me the nav-bar shall be on top, there shall be a media query and my page shall utilize css… i’ve done everything please help
thanks
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Landing Page</title>
</head>
<header id="header">
<h1>Gaming Laptop</h1>
<img width="10%"
src="https://previews.123rf.com/images/putracetol/putracetol1805/putracetol180503262/101270344-laptop-game-logo-icon-design.jpg"
alt=""
id="header-img"
/>
<nav id="nav-bar">
<a href="#Quality" class="nav-link">Quality</a>
<a href="#Details" class="nav-link">Details</a>
<a href="#QualityAssurance" class="nav-link">Quality Assurance</a>
</nav>
</header>
<body>
<section id="Quality">
<div>
<h2>Quality</h2>
<p> The 2021 ASUS ROG Strix G17 drops some of the fancy materials and features available with the higher-tier Scar 17 lineup, but doesn't compromise on the performance, screen, IO, or inputs, and sells for significantly less. Thus, I'd expect this to be on many of your maps, as one of the better-value A-brand performance 17-inch laptops in the first part of 2021.</p>
</div>
</section>
<section id="Details">
<div>
<h2>Details</h2>
<p>Display: 17.3-inch, 16:9, non-touch, matte, Sharp LQ173M1JW04 panel.
Processor: AMD Cezanne, Ryzen 7 5800H, 8C/16T.Memory: 32 GB DDR4. Storage: 1 TB NVMe SSD.
</p>
</div>
</section>
<section id="QualityAssurance">
<div>
<h2>Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will provide shipment tracking and full refund.</p>
</div>
</section>
<iframe src="https://youtu.be/fKcTAEJP6ro" id="video" class="video" frameborder="0"></iframe>
</body>
<footer>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input type="text" id="text" name="text" placeholder="Question?" required/>
<br>
<input type="email" id="email" name="email" placeholder="what is your email?" required/>
<input type="submit" id="submit" value="ask" class="submit"/>
</form>
<p>Copyright 2023, Gaming Laptop</p>
</footer>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</html>
/* file: styles.css */
#head {
position: fixed;
top: 0px;
width: 100%;
height: 20px;
padding: 25px 0px;
display: flex;
justify-content: space-between;
align-items: center;
}
body {
display: flex;
}
#nav-bar {
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: flex-end;
}
#header-img{
width: 10%
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
z-index: 100;
}
#nav-bar {
position: sticky;
top: 0;
}
/* Add a top margin to the content below the fixed header */
main {
margin-top: 100px; /* Set this value to be the same as the header's height */
}
@media screen and (max-width: 768px) {
#video {
display: none;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:102.0) Gecko/20100101 Firefox/102.0
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge:
