Product Landing Page - Build a Product Landing Page

HTML-CSS
#1

Tell us what’s happening:

** Im getting the error Your #nav-bar should always be at the top of the viewport.

My header is staying pinned to the top but Im guessing because its not defined its not letting me pass… But im having no issues with the header… can someone please help me figure out what to fix… Thanks**

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

body{
  background-color:#EEE;
  font-family: 'Lato', sans-serif;
}

#header{
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  align-items:center;
  
}

.logo{
  width: 60vw;
}

#header-image{
  max-width:300px;
  width:100%;
  height:100%;
}

#nav-bar{
  font-weight:bold;
  width: 40vw;
  top: 0;
  
}

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

#hero input[type="email"]{
  max-width: 275px;
  min-width: 100px;
  width: 275px;
  height: 30px;
  margin-bottom:15px;
}

#hero input[type="submit"]{
  max-width: 275px;
  width: 100%;
  height:30px;
  background-color: #f1c40f;
  border: none;
  font-weight: 900;
  font-size: 1em;
  
}

.features{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 700px;
  margin: 0;
  padding: 0;
}

.grid{
  display: flex;
  flex-direction: row;

}

.icon{
  width: 15vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fa-solid{
  color: darkorange;
  font-size: 50px;
}

#howItWorks{
  margin: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pricing{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  margin-top: 60px;
  margin-bottom: 90px;
}

@media(max-width:500px){
  #pricing{
    flex-direction: column;
  }
}

.product{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: calc(80%/3);
  border: 1px solid black;
  margin: 20px;
  border-radius: 3px;
}

.level{
  background-color: #DDD;
  color: black;
  width: 100%;
  padding: 15px 0;
  font-weight: 700;
}

ol > li{
  margin: 2px;
}

.btn{
  background-color: #f1c40f;
  margin: 15px 0;
  font-weight: 400;
  border: 0;
  width: 30%;
  height: 30px;
  font-size: 1em;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

#2

We need to see your HTML as well.

But I don’t see position: fixed or position: sticky in your CSS. The header should stay at the top even when the page is scrolled down.

#4 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Product Landing Page</title>
    <link rel="stylesheet" href="styles.css"/>
    <script src="https://kit.fontawesome.com/f8f61e487a.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <header id="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 class="nav-link" href="#features">Features</a></li>
          <li><a class="nav-link" href="#howItWorks">How It Works</a></li>
          <li><a 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 name="email" type="email" id="email" placeholder="Enter Your Email Address" required/>
          <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>
          </div>

          <div id="features">
          <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 finished making it. We also free returns if your not satisfied</p>
            </div>
          </div>

          <div id="features">
          <div class="grid">
            <div class="icon">
              <i class="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 id="howItWorks">
          <iframe id="video" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0" height="350" width="500" title="Product Video" 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">VAVLE 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>
        </div>
      </div>
   </body>
</html>
#5

image
image1589×814 231 KB

I did end up passing this from adding position:fixed in #nav-bar but it dosent make sense because the nav bar becomes unfixed. so not sure about that seems like a bug

#6

I don’t know what you mean by that. It should say fixed at the offset provided.

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: orange;
}

It does however get taken out of the normal flow and you have to compensate for that. By pushing the content that comes after it down manually.

The example project code and your code are a little too close to each other. You have to be careful about that. The point isn’t to copy the example page anyway (and definitely not the code).

1 Like