Product Landing Page - Build a Product Landing Page

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:

look into ‘position’

one of the values of position will place the element so its stuck to the top of the screen at all times.

remember to use ‘top’ and ‘left’, and get rid of all margins and padding from the nav element

The margin-top on #hero is pushing the nav down. You can use padding on it instead.


The logo and nav are going to overlap if you set the nav to be fixed without giving it a left or right offset. I would just remove the position fixed from the nav and keep it on the header element, that way the flexbox on the header will work as expected.

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