Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
Hi! I am stuck here due to nav-bar error - " Your #nav-bar should always be at the top of the viewport.". I have done position:fixed and its even working well in preview. pls help…

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8">
<link href="./styles.css" rel="stylesheet">
</head>
<body>
  <form id="form" action="https://www.freecodecamp.com/email-submit" method="get">
    <label><h3>Handcrafted, home-made masterpieces</h3> </label>
    <input id="email" name="email" type="email" placeholder="Enter your email address" required>
    <p><input id="submit" type="submit" value="Get Started"></p>
   </form> 
  <header id="header">
    <img id="header-img" src="https://www.w3schools.com/images/img_girl.jpg"/>
<nav id="nav-bar">
  <a class="nav-link" href="#pm">Premium Materials</a> 
    
    <a class="nav-link" href="#fs">Fast Shipping</a> 
    <a class="nav-link" href="#qa">Quality Assurance</a>
    </nav>
  </header>
<main>
<section id="pm">
  <br>
  <br>
  <h2>Premium Materials</h2>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.
</section>
<section id="fs">
<h2>Fast Shipping</h2>
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.
</section>
<section id="qa"><h2>Quality Assurance</h2>
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.
</section>

<video id="video" width="320" height="240" controls> 
  <source src="https://onedrive.live.com/embed?resid=100C92A8B018F7D1%2119923&authkey=!APywk7qOuBm-JJI" type="video/mp4">
</video>
</main>
</body>   

</html>

/* file: styles.css */
#nav-bar{
  position: fixed;
  z-index:999;padding-bottom:5px;
  padding-top:5px;
  width:100%;
  display:flex;
  flex-direction: row;
  justify-content:right;
  background-color:blue;
  
}
body{margin:0;}

.nav-link{
  color:white;
  font-weight:bold;text-decoration:none;
  padding:10px;
 
  }
 @media only screen and (max-width: 2000px) {
  body {
    background-color: lightblue;
  }
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

1 Like
2

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

  • so why do you have form element showing before it? and various labels and inputs.

everyhting that is not navbar, except header element, should come after navbar

3

Hello.

Try this: change all your form code to the main and in your styles.css change #navbar by header

Grets.

4

Thanks CrlosZgz! I put header element before ‘form’ element and changed CSS to header #nav-bar and it worked ;). finally finished the project.

5

Thanks! it worked putting header element before ‘form’ element and changing CSS to header #nav-bar. :slight_smile:

6

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