Product Landing Page - Build a Product Landing Page

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;
}

position: fixed can work, but you also need to give a top value

1 Like

Thanks! I just fixed it. I had set the padding which created the problem

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.