Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

It says my nav-bar should be at the top of the viewport, I really don’t understand what that means and I’m lost. I need help with that please

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.

* {
  box-sizing: border-box;
  margin: none;
}

body {
  font-family: "Aerial", sans-serif;
  text-align: center;
}

.title {
  width: 250px;
  margin: 0;
  color: rgba(0, 0, 0, 0.9);
  font-style: italic;
  padding-right: 100px;
  position: relative;
  bottom: 150px;
}


.sub-title {
  font-size: 10px;
  margin: 25px;
  text-align: center;
  position: relative;
  bottom: 150px;
}

img {
  width: 250px;
  height: 150px;
  position: relative;
  bottom: 150px;
}

header p {
  font-size: 10px;
  margin: 25px;
  background: lightgrey;
  color: green;
  position: relative;
  bottom: 150px;
}

.nav-link {
  color: #000;
}

nav ul {
  list-style: none;
  padding-bottom: 110px;
  padding-left: 150px;
  margin-left: 80px;
}

.nav-bar {
  display: flex;
}

nav ul li a {
  text-decoration: none;
}

nav ul li {
  position: relative;
  display: inline-block;
  font-size: 5px;
}

.hero {
  font-size: 10px;
  position: relative;
  bottom: 150px;
}

section.hero div ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

section.hero div ul li {
  display: block;
  justify-content: space-evenly;
  margin-bottom: 10px;
  margin-right: 50px;
  display: inline-block;
}

iframe {
  position: relative;
  bottom: 120px;
  width: 250px;
}

section.hero-2 div ul li {
  list-style: none;
  align-items: center;
}

#pricing {
  font-size: 10px;
  position: relative;
  bottom: 100px;
} 

.pricing-container {
  border-width: 2px;
  height: 28vh;
  display: flex;
  gap: 0.2rem;
}

.pricing-plan {
  border: 1px solid #000; 
}

#pricing h3 {
  font-size: 15px;
  border-bottom: 1px solid #000;
  background-color: lightgrey;
}

#pricing ul li {
  font-size: 1px;
  margin-right: 2rem;
}

#pricing p {
  font-size: 20px;
}

#pricing a {
  font-size: 15px;
  border: 1px solid #000;
  color: rgba(0, 0, 0, 0.9);
  text-decoration: none;
  background-color: #ccc;
}

.review {
  font-size: 10px;
  position: relative;
  bottom: 100px;
}

.contact { 
  font-size: 10px;
  position: relative;
  bottom: 80px;
}

form {
  position: relative;
  top: 40px; 
}

.email {
  border-right: 100px;
  position: relative;
}

.submit {
  position: relative;
  top: 20px;
}

footer {
  font-size: 5px;
}

@media (max-width: 730px) {
  .title {
    width: 250px;
  }
  body {
    font-family: "Aerial", sans-serif;
  }
}

Your mobile information:

23106RN0DA - Android 13 - Android SDK 33

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Hi,
it means you should style your navbar in a way that it’s always shown at the top of the screen, even when scrolling down the page. Try positioning the navbar to something and see which one works.
Good luck!

3

if you want help you will need to share also your html

4 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Solartech Panel</title>
</head>
<body>
    <section class="header">
    <header id="header">
      <div class="nav">
        <nav id="nav-bar" class=nav-bar">
          <ul>
            <li><a class="nav-link" href="#features">Features</li>
            <li><a class="nav-link" href="#how-it-works">How it works</a></li>
            <li><a class="nav-link" href="#pricing">Pricing</a></li>
          </ul>
        </nav>
      </div>
      <div>
        <h1 id="title" class="title">iStock Panels</h1>
        <p id="sub-title" class="sub-title">Power Your Home with SolarTech Panels</p>
        <img id="header-img" 
          src="https://www.soleosenergy.com/wp-content/uploads/2024/09/1650368737-5-environmental-benefits-of-solar-energy.jpg" 
          width="400"
          height="400"
          loading="lazy"
        />
        <p>Save money. Save the planet. Get clean energy today.</p>
      </div>
    </header>
    </section>
    <section class="hero" id="features">
      <div>
        <h3>
          Why Choose Our Panels?
        </h3>
        <ul>
          <li>
            ✅ High Efficiency
          </li>
          <li>
            ✅ 25-Year Warranty
          </li>
          <li>
            ✅ Easy Installation
          </li>
          <li>
            ✅ Affordable Pricing
          </li>
        </ul>
      </div>
    </section>
    <section id="how-it-works">
      <iframe id="video" src="https://www.youtube.com/embed/dySSgfd8FgQ?si=g8ZQWYVj5Q-vvmXE" width="350" height="200" frameborder="0" allowfullscreen></iframe>
    </section>
    <section id="pricing" class="hero-2">
      <div class="pricing-container">
        <div class="pricing-plan">
          <h3>Basic</h3>
          <p>$80</p>
          <ul>
            <li>100W</li>
            <li>Monocrystalline Panel</li>
          </ul>
          <a href="#" class="btn">Select</a>
        </div>
        <div class="pricing-plan">
          <h3>Pro</h3>
          <p>$150</150>
          <ul>
            <li>200W</li>
            <li>Monocrystalline Panel</li>
          </ul>
          <a href="#" class="btn">Select</a>
        </div>
        <div class="pricing-plan">
          <h3>Family</h3>
          <p>$220</150>
          <ul>
            <li>300W</li>
            <li>Monocrystalline Panel</li>
          </ul>
          <a href="#" class="btn">Select</a>
        </div>
      </div>
    </section>
    <section class="review">
      <h3>What Our Customers Say</h3>
      <blockquote>
        <hr />
        <p class="quote">
          "This solar panels saved me hundreds on my electricity bill!" - Jane D.
        </p>
        <p class="quote">
          "Easy to install, and I'm already seeing the savings!" – Michael T.
        </p>
        <hr />
      </blockquote>
    </section>
    <section class="contact">
      <h3>Get in touch</h3>
      <p>Interested in switching to solar? Request a free quote today!</p>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <div class="email">
          <input id="email" name="email" type="email" placeholder="Enter your email address" required />
        </div>
        <div class="submit">
          <input id="submit" type="submit" value="Request a Quote"></input>
        </div>
      </form>
    </section>
    <footer>
      <p>
        © 2025 SolarTech Panels. All rights reserved.
      </p>
    </footer>
</body>
</html>
5

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

6

your section.hero div ul li selector has the display property twice

for the failing test, there is a display property that makes things not move even when the page is scrolled, do you rememebr what it is? if not you could try researching it

7

Ok thanks. I set my nav-bar position to fixed but I’m not passing the step, what am I doing wrong please

8

please share your updated code

9 
* {
  box-sizing: border-box;
  margin: none;
}

body {
  font-family: "Aerial", sans-serif;
  text-align: center;
}

.title {
  width: 250px;
  margin: 0;
  color: rgba(0, 0, 0, 0.9);
  font-style: italic;
  padding-right: 100px;
  position: relative;
  bottom: 100px;
}


.sub-title {
  font-size: 10px;
  margin: 25px;
  text-align: center;
  position: relative;
  bottom: 100px;
}

img {
  width: 160px;
  height: 100px;
  position: relative;
  bottom: 50px;
}

header p {
  font-size: 10px;
  margin: 25px;
  background: lightgrey;
  color: green;
  position: relative;
  bottom: 60px;
}

.nav-link {
  color: #000;
}

nav ul {
  list-style: none;
  padding-left: 150px;
  margin-left: 80px;
}

#nav-bar {
  position: fixed;
  top: 0;
  left: 0;
}

nav ul li a {
  text-decoration: none;
}

nav ul li {
  position: relative;
  display: inline-block;
  font-size: 5px;
}

.hero {
  font-size: 10px;
  position: relative;
  bottom: 100px;
}

section.hero div ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

section.hero div ul li {
  display: block;
  justify-content: space-evenly;
  margin-bottom: 10px;
  margin-right: 50px;
  display: inline-block;
}

iframe {
  position: relative;
  bottom: 80px;
  width: 250px;
}

section.hero-2 div ul li {
  list-style: none;
  align-items: center;
}

#pricing {
  font-size: 10px;
  position: relative;
  border-width: 100px;
  bottom: 50px;
} 

.pricing-container {
  width: 2px;
  height: 28vh;
  display: flex;
  gap: 0.2rem;
}

.pricing-plan {
  border: 1px solid #000; 
}

#pricing h3 {
  font-size: 15px;
  border-bottom: 1px solid #000;
  background-color: lightgrey;
}

#pricing ul li {
  font-size: 1px;
  margin-right: 2rem;
}

#pricing p {
  font-size: 20px;
}

#pricing a {
  font-size: 15px;
  border: 1px solid #000;
  color: rgba(0, 0, 0, 0.9);
  text-decoration: none;
  background-color: #ccc;
}

.review {
  font-size: 10px;
  position: relative;
  bottom: 40px;
}

.contact { 
  font-size: 10px;
  position: relative;
  bottom: 20px;
}

form {
  position: relative;
  top: 40px; 
}

.email {
  border-right: 100px;
  position: relative;
}

.submit {
  position: relative;
  top: 10px;
}

footer {
  position: relative;
  font-size: 5px;
  top: 50px;
}

@media (max-width: 730px) {
  .title {
    width: 250px;
  }
  body {
    font-family: "Aerial", sans-serif;
  }
}
10

the test is checking for #header or one of its direct children, in your case that would be .nav or the other one. You need to change which element you are positioning, or change the structure of your html.

an other thing you should do is validate your html: use Ready to check - Nu Html Checker and fix all the errors

11

I don’t understand what you mean by that can you please explain

12

The instruction says my nav-bar should always be at the top of the viewport, I guess that means the nav-bar should be in a fixed position, that’s what I did but I’m not passing the step

13

Hi,
you’ve set the position to fixed, which works. But the problem is, your #nav-bar should be a direct discendant of the header element. Because the test is looking checking if any of the direct descendants of the header has a fixed position. You have added your #nav-bar inside another div which doesn’t make it a direct discendant, that’s why you should take it out of the div element.
Good luck