I am stuck at Product Landing Page Certification! I can’t seem to complete this " Your #nav-bar
should always be at the top of the viewport."
I have tried
Position: Fixed;
but it is not working. Any help would be kind. I have been trying for a day to fix this!
here is my code so far-
html-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scal=1.0"/>
<title>IPhone 15 Pro Max</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<header id="header">
<div class="logo">
<img src="https://www.freepnglogos.com/uploads/apple-logo-png/apple-logo-png-dallas-shootings-don-add-are-speech-zones-used-4.png" id="header-img" alt="logo">
</div>
<nav id="nav-bar">
<ul id="nav-list">
<li><a href="#Features" class="nav-link">Features</a></li>
<li><a href="#Images" class="nav-link">Images</a></li>
<li><a href="#Product" class="nav-link">Product</a></li>
<li><a href="#Price" class="nav-link">Price</a></li>
<li><a href="#Buy" class="nav-link">Buy</a></li>
</ul>
</nav>
</header>
<main>
<section id="preview-product">
<h1>IPhone 15 Pro Max</h1>
<img src="https://png.monster/wp-content/uploads/2023/09/PNG.monsterblack-apple-iphone-15-pro-max-iphone-15-pro%20png.png" id="iphone" alt="iphone 15 pro max">
</section>
<section id="Features">
<h2 class="features">Features</h2>
<ul>
<li>Dynamic Island</li>
<li>Always-On display</li>
<li>ProMotion technology with adaptive refresh rates up to 120Hz</li>
<li>HDR display</li>
<li>True Tone</li>
<li>48MP Main Camera</li>
<li>4k Video Upto 60fps</li>
<li>5x Optical Zoom</li>
<li>Action mode up to 2.8K at 60 fps</li>
<li>Face ID</li>
</ul>
</section>
<h1 class="product-img">Product Images</h1>
<section id="Images">
<img src="https://www.zdnet.com/a/img/resize/7c135e7748ad80aa72743c58c1d067ba1a0fddcf/2023/10/06/4e7663f4-fe43-424e-8fde-64a5612cdfd7/img-1950.jpg?auto=webp&width=1280" class="grid">
<img src="https://www.apple.com/newsroom/images/2023/09/apple-unveils-iphone-15-pro-and-iphone-15-pro-max/tile/Apple-iPhone-15-Pro-lineup-hero-230912.jpg.news_app_ed.jpg" class="grid">
<img src="https://www.notebookcheck.net/fileadmin/_processed_/4/d/csm_Bild_Apple_iPhone_15_Pro_Max-Intro_b632e0fbb1.jpg" class="grid">
<img src="https://images.macrumors.com/t/SuHt0iQuSjaO-ExOZzJieONGf_I=/2500x/article-new/2023/09/iPhone-15-Pro-Lineup-Feature.jpg" class="grid">
<img src="https://i.blogs.es/718a10/img_2085/500_333.jpeg" class="grid">
<img src="https://i.pcmag.com/imagery/articles/054MeBU03lfqMB5KxVPEQtI-6..v1694632329.jpg" class="grid">
</section>
<section id="Product">
<p class="promo">Promo Video</p>
<iframe id="video" src="https://www.youtube.com/embed/wqcjKkyuoZk" title="Introducing iPhone 15 Pro Max | Apple" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</section>
<section id="Price">
<div class="price-box">
<p class="price-header">Iphone 15 Pro Max</p>
<p class="storage">128GB</p>
<p class="cost">999$</p>
<button class="select">Select</button>
</div>
<div class="price-box">
<p class="price-header">Iphone 15 Pro Max<p>
<p class="storage">256GB</p>
<p class="cost">1099$</p>
<button class="select">Select</button>
</div>
<div class="price-box">
<p class="price-header">Iphone 15 Pro Max<p>
<p class="storage">512GB</p>
<p class="cost">1199$</p>
<button class="select">Select</button>
</div>
</section>
<section id="Buy">
<h2>Buy the IPhone Now</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input name="email" id="email" type="email" placeholder="Enter your email address" required>
</input>
<input id="submit" type="submit" value="Buy">
</input>
</form>
</section>
</main>
<footer>
<p>Copyright ©2024 Apple</p>
</footer>
</body>
</html>
CSS-
* {
margin: 0;
overflow-x: hidden;
}
body {
background-color: white;
font-family: Lato, sans-serif;
}
/*HEADER AREA*/
#header-img {
max-width: 40px;
}
header {
position: fixed;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
z-index: 1;
background-color: white;
width: 100%;
padding: 20px;
}
@media (max-width: 400px) {
.logo {
text-align: center;
margin-left: 40px;
padding: 20px;
}
}
.logo {
width: 55vw;
}
#nav-list {
display: flex;
justify-content: space-around;
width: 40vw;
}
@media (max-width:400px) {
header {
display: flex;
flex-direction: column;
margin: -38px;
}
#nav-list {
display: flex;
flex-direction: column;
align-items: center;
}
}
@media (max-width: 800px) {
.logo {
width: 30vw
}
}
li {
list-style: none;
font-weight: 500;
}
.nav-link {
color: black;
}
a {
text-decoration: none
}
main {
margin-top: 40px;
}
@media (max-width: 400px) {
main {
margin-top: 130px;
}
}
/*PREVIEW OF THE PRODUCT*/
#preview-product {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 30px;
}
h1 {
font-family: Poppins, sans-serif;
font-size: 70;
color: black;
}
@media (max-width: 600vw) {
h1 {
text-align: center;
font-size: 60px;
}
}
#iphone {
width: 500;
position: relative;
top: -80;
}
/*FEATURES*/
#features {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
height: 70vh;
background: linear-gradient(32deg, rgba(27,27,27,1) 0%, rgba(0,0,0,1) 100%);
padding: -70px;
}
#features h2 {
font-size: 50;
padding: 20;
}
#features ul {
margin-left: 50;
}
#features li {
font-weight: 600;
margin-bottom: 3px;
}
/*IMAGE FLEX*/
#Images {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px;
justify-content: center;
align-content: center;
margin-top: -30px;
}
.grid {
width: 200px;
height: 200px;
object-fit: cover;
transform: scale(1);
transition: transform 0.3s;
}
.grid:hover {
transform: scale(1.3);
z-index: 1;
}
.product-img {
margin-top: 50px;
}
/*VIDEO*/
#Product {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 10px 50px;
height: 100vh
}
#video {
width: 560px;
height: 315px;
}
.promo {
color: black;
font-size: 40px;
padding-bottom: 11px;font-weight: 550;
}
@media (max-width: 400px) {
.promo {
text-align: center;
}
#video {
width: 256px;
height: 144px;
}
#content {
height: 60vh;
}
}
/*PRICE*/
#Price {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
height: 100vh;
margin-top: -70px;
}
.price-box {
display: flex;
flex-direction: column;
border-radius: 4px;
padding: 15;
text-align: center;
color: white;
background-color: #0f0f0f;
font-weight: 550;
}
.select {
border: none;
border-radius: 20px;
padding: 10px;
background-color: #1778ff;
margin-top: 15px;
cursor: pointer;
font-family: Poppins, sans-serif;
}
.select:hover {
background-color: #549bff
}
.price-header {
position: relative;
left: -20;
width: 100%;
padding: 20px;
border: none;
margin-top: -15px;
margin-bottom: 20px;
background-color: #121212;
font-size: 20px;
}
.storage {
font-size: 30px;
padding: 20px;
}
.cost {
color: grey;
margin-top: -5px;
margin-bottom: 5px;
}
@media (max-width: 800px) {
#Price {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
}
#price-box {
padding: 500;
height: 100vh
}
}
/*buy*/
#Buy {
display: flex;
flex-direction: column;
align-items: center;
margin-top: -60px;
margin-bottom: 30px;
}
#Buy h2 {
font-size: 50px;
font-weight: 550;
padding: 60px;
color: black;
}
#form {
display: flex;
flex-direction: column;
margin-top: -20px
}
#email {
height: 30px;
margin-bottom: 10px;
padding: 5px;
}
#submit {
border: none;
border-radius: 20px;
height: 40px;
background-color: #1778ff;
cursor: pointer;
font-family: Poppins, sans-serif;
}
#submit:hover {
background-color: #0040a6
}
@media (max-width: 600px) {
#buy h2 {
text-align: center;
}
}
/*FOOTER*/
footer {
text-align: center;
color: white;
height: 40px;
width: 100%;
margin-top: 20px;
background-color: #121212;
}