Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

I am trying to pass test #23 (the one where the nav-bar should always be at the top of the viewport), but I am having trouble doing so. I know I am doing something wrong with the navigation bar but I cannot find out what I am doing wrong.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Product Landing Page</title>
      <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
      <header id="header">
      <nav id="nav-bar">
      <ul>
   <img id="header-img" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"></img>
   <h1>CodingCamp Cat Toys</h1>
     <li><a class="nav-link" href="#About">About</a></li>
     <li><a class="nav-link" href="#Examples">Examples</a></li>
     <li><a class="nav-link" href="#Prices">Prices</a></li>
     <li><a class="nav-link" href="#Form">Form</a></li>
     </ul>
      </nav>
      </header>
      <main id="main">
               <section class="main-section" id="About">
         <header>About</header>
         <p>CodingCamp Cat Toys exists to give away cat-toys so that you can have hours of fun with your cat.</p>
         <p>Our toys include catnip toys, laser pointers, and cat trees.</p>
         <p>Buy a cat toy today in order to give your cat something to do!</p>
       </section>
       <section class="main-section" id="Examples">
         <header>Examples</header>
<iframe id="video" src="https://m.youtube.com/watch?v=Vo4yZ_bM8io&pp=ygUXY2F0IHJ1bm5pbmcgYWZ0ZXlgbGFzZXI%3D"></iframe>
       </section>
       <section class="main-section" id="Prices">
         <header>Prices</header>
         <p>Catnip toys are only $5.00.</p>
         <p>Laser pointers are only $5.00.</p>
         <p>Cat trees cost $30.00.</p>
       </section>
       <section class="main-section" id="Form">
         <header>Form</header>
         <form id="form" action="https://www.freecodecamp.com/email-submit">
           <input id="email" type="email" name="email" placeholder="type your email here"></input>
           <input id="submit" type="submit"></input>
         </form>
       </section>
      </main>
    </body>
    </html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

header {
  text-align: center;
  padding: 15px;
  background-color: #ffffff;
  color: #0a0a24;
  font-size: 15px;
  overflow: hidden;
  top: 0;
}

nav {
  width: 100%;
  max-width: 1000px;
  height: 100px;
}

#nav-bar {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;  padding-inline-start: 0;
  margin-block: 0;
  height: 100%;
  top: 0px;
}

body { 
margin: 0;
font-family: sans-serif;
}



@media (max-width: 599px) {
  
body {
  background-color: #E4E7F3;
  }
}

@media (min-width: 600px) {
  
body {
  background-color: #CBEFD4;
  }
}

img {
  width: 30%;
  max-width: 30%;
  display: block;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

try removing the img element from the ul. try keeping it outside the ul element and check if you will pass it

3

It means that it should stay at the top of the viewport even while scrolling.

1 Like
4

I would suggest googling "how to get navbar to stay at top while scrolling css" and that will help. Once you do that, you layout will change a bit so you will need to update your CSS to account for that. But the tests should pass when you do that.

Remember that googling when you are stuck can help you get unstuck :+1:

1 Like
5

I did just that. The problem does not seem to come from the image being in the ul element, as test 23 still has not passed.

6

Hi @c.kerr13

At the moment, the #nav-bar scrolls with the rest of the page.
As @jwilkins.oboe suggested, search online to see how to make the #nav-bar selector stay in the same spot on the page.

Happy coding

7

Putting more focus into researching my problem has once again helped me, so thank you for suggesting that!

1 Like