Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
Describe your issue in detail here: I am stuck on trying to get the nav-bar to remain static and also on the flex-box issue.I have worked on this for too long and help is required.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <header id="header">
<img id ="header-img" src="https://img.freepik.com/free-psd/logo-mockup-grey-wall_35913-2122.jpg?size=626&ext=jpg" alt="Logo" width="250" height="150">
  <nav id="nav-bar">
  <li><a class="nav-link" href="#header">Header</a></li>
  <li><a class="nav-link" href="#video">Video</a></li> 
  <li><a class="nav-link" href="#nav-bar">Navigation</a></li>
 <li> <a class="nav-link" href="#form">Form</a></li>
</nav>
  <video id="video" width="320" height="240" controls>
  <source src="https://joy.videvo.net/videvo_files/video/free/video0455/large_watermarked/_import_609113a1be0e89.39394997_preview.mp4" type="video/mp4">
  <source src="https://joy.videvo.net/videvo_files/video/free/video0455/large_watermarked/_import_609113a1be0e89.39394997_preview.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
  </header>
  <br>
  <body>
   <div class="flex-container">
  <div><a href=""">Product item 1</a></div>
  <div><a href="">Product item 2</a></div>
  <div><a href="">Product item 3</a></div>
</div> 
<br>

<form id="form" action="https://www.freecodecamp.com/email-submit" method="get">
  <label for="name">First name:</label>
  <input type="text" id="name" name="name" placeholder="John"><br><br>
  <label for="surname">Last name:</label>
  <input type="text" id="surname" name="surname" placeholder="Smith"><br><br>
  <input type="email" id="email" name="email" placeholder="your email@ whatever.com"><br><br>
  <input id="submit" type="submit" value="Submit">
</form>

  </body>
  </html>
/* file: styles.css */
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}
@media screen and (min-width: 40px) {
video {float:right; width:70%;}
body {float:right;width: 77%;}
}

.img {
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: -1;
}
#nav-bar {
  position: fixed; 
  top: 0px; 
  width: 100%;
  left:0px;
  z-index:9999;
  
}
body {
    align-text:center;
    overflow: hidden !important;
    width: 100%;
    height: 100%;
}

.header{ 
  position: fixed;
  width:0px;
    top: 0px;
    left:0px;
    z-index: 99999;
  font-family: Helvetica, sans-serif;
  padding: 1em;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item-left {
  flex: 50%;
}

.flex-item-right {
  flex: 50%;
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

hi there, try to tackle one issue at a time.
What have you tried to resolve this error specifically?

Your #nav-bar should always be at the top of the viewport.

Hie!! Thanks for the response. I have tried formatting the #nav-bar as follows:
#nav-bar {
position: fixed;
top: 0px;
width: 100%;
left:0px;
z-index:9999;

}

Okay but do you see the image is above the navbar? The requirement states:

And right now the image is at the top?

I tried putting the above the image and ran the tests but still got the same problem. Right now the image is at the top.

can you post your new code so I can take another look?

<!DOCTYPE html>
<html>
  <header id="header">
 <nav id="nav-bar">
  <li><a class="nav-link" href="#header">Header</a></li>
  <li><a class="nav-link" href="#video">Video</a></li> 
  <li><a class="nav-link" href="#nav-bar">Navigation</a></li>
 <li> <a class="nav-link" href="#form">Form</a></li>
</nav>  
<img id ="header-img" src="https://img.freepik.com/free-psd/logo-mockup-grey-wall_35913-2122.jpg?size=626&ext=jpg" alt="Logo" width="250" height="150">
  <div class="flex-container">
  <div><a href=""">Product item 1</a></div>
  <div><a href="">Product item 2</a></div>
  <div><a href="">Product item 3</a></div>
</div> 
<br> 
  <video id="video" width="320" height="240" controls>
  <source src="https://joy.videvo.net/videvo_files/video/free/video0455/large_watermarked/_import_609113a1be0e89.39394997_preview.mp4" type="video/mp4">
  <source src="https://joy.videvo.net/videvo_files/video/free/video0455/large_watermarked/_import_609113a1be0e89.39394997_preview.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
  </header>
  <br>
  <body>
   

<form id="form" action="https://www.freecodecamp.com/email-submit" method="get">
  <label for="name">First name:</label>
  <input type="text" id="name" name="name" placeholder="John"><br><br>
  <label for="surname">Last name:</label>
  <input type="text" id="surname" name="surname" placeholder="Smith"><br><br>
  <input type="email" id="email" name="email" placeholder="your email@ whatever.com"><br><br>
  <input id="submit" type="submit" value="Submit">
</form>

  </body>
  </html>

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.

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

/// Thanks for the advice. I am new to this coding stuff.///

i noticed that you haven’t linked the stylesheet. So this would explain why the layout is still not changed.

1 Like

I think the problem is the current load shedding. When I am busy coding and the electricity goes, the code reverts back to the first saved one. Thanks a lot for all the help!!! Really appreciate it!!

1 Like

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