Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
Describe your issue in detail here.

   **Your code so far**
/* file: index.html */
<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="styles.css" rel="stylesheet">
<title>Product Landing Page</title>

 </head>
 <body>
   <header id="header">
     <img id="header-img" src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png" alt="freecodecamp logo">
    
     <header>
       <h1>Product Landing Page</h1>
        <nav id="nav-bar">
      <p><a class="nav-link" href="#Premium_Materials">Premium Materials</a></p>
      <p><a class="nav-link" href="#Fast_Shipping">Fast Shipping</a></p>
      <p><a class="nav-link" href="#Quality_Assurance">Quality Assurance</a></p>
   </nav>
   </header>
   <video id="video" src="movie.ogg" width="300" height="200" controls>
 <source src="movie.mp4" type="video/mp4">
 <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<section class="main-section" id="Premium_Materials">
  <header><h2>Premium Materials</h2></header>
  <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
   <section class="main-section" id="Fast_Shipping">
     <header><h2>Fast Shipping</h2></header>
     <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>
      <section class="main-section" id="Quality_Assurance">
  <header><h2>Quality Assurance</h2></header>
  <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>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input id="email" type="email" name="email" placeholder="Enter your email">
    <input id="submit" type="submit" value="Submit" />

  </form>
 </body>
</html>
/* file: styles.css */
#nav-bar {
 position:fixed;
 display: flex;
 top: 0%;
 width: 100%;
 max-width: 500px;
 justify-content: inline;
 font-size: 15px;
 float: left;
 padding-top: 25px;
 margin-top: 10px;
 height: 20px;
 font-family: sans-serif;
 gap: 0.5rem;
 background-color: orange;
}

#header-img{
 display: auto;
 width: 150px;
 top: 50%;
 right: 0%;
 padding-top: 150px;
}

@media only screen and (max-width: 500px) {
 #nav-bar {
   max-width: 300px;
 }
}


   **Your browser information:**

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

Your #nav-bar should always be at the top of the viewport.
The solution doesn’t work for me please.

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