Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening: Your #nav-bar should always be at the top of the viewport.This is the only part im missing i cant seem to get it done

Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css">
  <title>Product Landing Page</title>
</head>
<body>
<header id="header">

  <div class="logo-container">
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo"  width="420" height="50">
<nav id="nav-bar">
    <ul>
   
      <li>
        <a class="nav-link" href="#Features">Features</a>
        </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>
</div>

  
 
  </ul>
  </nav>
</header>
<div class="flex">
<div id="Features"></div>
<div id="How-It-Works"></div>
<div id="Pricing"></div>
</div>

<section id="email-section">
<h2>Handcrafted, home-made masterpieces</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit"> 
<input name="email" type="email" id="email" required="" placeholder="Enter your email address">

<input id="submit"  type="submit" value="GET STARTED"></div>
</form>
</section>

<section id="features">
  <div class="features">
    <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 class="features">
<h2>Fast Shipping</h2>
  <p>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.</p>
  </div>
  <div class="features">
    <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>
<video id="video" height="305" src="src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"">
</video>





  </body>
  </html>
  

/* file: styles.css */
#nav-bar{
  position: fixed;
top: 0;
}

ul{
margin: 75px;
}

li{
display: inline-block;
}

@media onlyscreen and(max-width:200px){

}
.flex{
display: flex;
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

1 Like
2

Hello.

move your </div> before <nav id="nav-bar">

Greets.

2 Likes
3

Thankyou it worked out.

2 Likes
4

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