Build a Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

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

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>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <header id="header">
    <img 
      src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" 
      id="header-img" 
      alt="Logo"
      width="300">
    
    <nav id="nav-bar">
      <ul>
        <li><a href="#features" class="nav-link">Features</a></li>
        <li><a href="#how-it-works" class="nav-link">How It Works</a></li>
        <li><a href="#pricing" class="nav-link">Pricing</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="features">
      <h2>Features</h2>
      <p>Some description of features...</p>
    </section>

    <section id="how-it-works">
      <h2>How It Works</h2>
      <iframe 
        id="video" 
        height="315" 
        src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0" 
        frameborder="0" 
        allowfullscreen>
      </iframe>
    </section>

    <section id="pricing">
      <h2>Pricing</h2>
      <p>Some pricing info...</p>
    </section>

    <form id="form" action="https://www.freecodecamp.org/email-submit">
      <input 
        name="email" 
        id="email" 
        type="email" 
        placeholder="Enter your email address" 
        required>
      <input id="submit" type="submit" value="Get Started" class="btn">
    </form>
  </main>

</body>
</html>


/* file: styles.css */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: gray;
  display: flex;
  justify-content: center;
  z-index: 1000;
  padding: 0px 30px;
  margin-top: 20px;

}

#nav-bar {
 position: fixed;
 top: 0px; 
}


 ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

 li {
  margin: 0 15px;
}

a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}


@media (max-width: 700px) {
  #nav-bar {
    font-size: 10px;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Safari/605.1.15

Challenge Information:

Build a Product Landing Page - Build a Product Landing Page
https://www.freecodecamp.org/learn/full-stack-developer/lab-product-landing-page/build-a-product-landing-page

2

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

3

hi, thanks for your help, but it still doesn’t work.

4

Your code still worked for me on Chrome. Have you tried all of the above steps and a different browser?

5

When I do it by chrome (not safari) It works, thank you.