Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

i have been struggling with step 23 (your #nav-bar should always be at the top of the viewport) could someone explain what this means and the code to use

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Product Landing Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header id="header">
      <img src="https://en.cap3000.com/-/media/cap3000/images/enseignes/logos/christian-dior-parfum-logo-344x193.png?as=0&w=650&hash=3D601DD24651C406A1F9EF79AC2103E2" alt="Dior logo" id="header-img"/>
      <nav id="nav-bar">
        <a class="nav-link" href="#Clothes">Clothes</a>
        <a class="nav-link" href="#Accessories">Accessories</a>
        <a class="nav-link" href="#Fragrance">Fragrance</a>
      </nav>
    </header>
    <h1 id="top">Quality, Luxurious products</h1>
    <form action="https://www.freecodecamp.com/email-submit" id="form">
      <label>
        <input id="email" placeholder="Enter your email address" type="email" name="email"></input>
        <input id="submit" type="submit" value="submit">
      </label>
    </form>
    <form id="info">
      <h2 class="imp">High Quality</h2>
      <p class="more">Our products are made from high quality materials that are ethically acquired. From clothes, to acccessories to even fragrances, prepare for a memorable experience.</p>
      <h2 class="imp">Fast Shipping</h2>
      <p class="more">Reliable logistics that ensure that your products are delivered to you in due time and in excellent shape.</p>
      <h2 class="imp">Refund Policy</h2>
      <p class="more">Products can be returned before 72hrs pass after purchase.</p>
    </form>
    <iframe src="https://youtu.be/d6EvH5wRyOQ?si=Gerxi6szmD_CChjT" id="video" width="560" height="315"  ></iframe>
    <section id="Clothes">
  <h2>Clothes</h2>
  <p>Quality clothes for everyone</p>
</section>

<section id="Accessories">
  <h2>Accessories</h2>
  <p>Top fashion accessories</p>
</section>

<section id="Fragrance">
  <h2>Fragrance</h2>
  <p>long lasting scents</p>
</section>
  </body>
</html>

#nav-bar {
  position: fixed !important;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  font-weight: 400;
}

#header, main, section, form, h1, iframe {
  margin-top: 80px; 
}

* {
  background: white
}

#top {
  text-align: center
}

#submit {
  display: block;
  margin: auto;
}

#email {
  display: block;
  margin: auto
}

#header-img {
  display: block;
  margin: 0 auto;
}

.more {
  margin-top: 0;
  margin-left: 20px;
}

h2 {
  margin: 0

}

#info {
  margin-top: 60px
}

@media only screen and (max-width: 600px) {
  #nav-bar {
    flex-direction: column; 
    text-align: center;
  }
}

body {
  padding-top: 60px; 
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:139.0) Gecko/20100101 Firefox/139.0

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

What styling have you applied to the nav’s containing element?

3

none, i tried applying position:fixed and top:0 but it still wouldn’t accept my code

4

nav is a child element inside header so your focus should be on positioning what element?

5

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.

6

And this works because position: fixed takes the nav out of the normal document flow? So, then it doesn’t matter how nav’s parent element is styled?