Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

I’m finishing my Build a Product Landing Page but I can’t figure why the “#nav-bar should always be at the top of the viewport” test fails. I have been dealing with this for a few days. I guess its something with the CSS code but can’t figure out what.

Any help will be appreciated

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="styles.css">
    <title>Landing Page</title>
</head>


<body>
  
  <div id="header-div">
    <header id="header">
      <img id="header-img" src="https://images.seeklogo.com/logo-png/42/1/apple-music-logo-png_seeklogo-426386.png" alt="original music logo">    
      <div id="site-name">
        Game <br>
        music
      </div>
      <nav id="nav-bar">
        <a class="nav-link" href="#newly">Newly discovered</a>
        <a class="nav-link" href="#best">Best</a>
        <a class="nav-link" href="#all">All</a>
      </nav>
    </header>
  </div>

<div class="div-border">

</div>


<h2 id="newly" class="newly">Newly discovered</h2>

  <div class="videos-container">
    <div class="video-div new-video1">
  <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/P2NVJSJVGVQ" frameborder="0" allowfullscreen></iframe>
    </div>
    
    <div class="video-div new-video2">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/2clUY-OsCpY" frameborder="0" allowfullscreen></iframe>
    </div>

    <div class="video-div new-video3">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/AnMR6SOBa9k" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>


<h3>Subscribe to our Newsletter and enjoy Newly discovered music!</h3>
<form id="form" action="https://www.freecodecamp.com/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>




<h2 id="best" class="best">Best</h2>

  <div class="videos-container">
    <div class="video-div video1">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/iqkQRgGdAPo" frameborder="0" allowfullscreen></iframe>
    </div>
    
    <div class="video-div video2">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/9F1l6xXLSI0" frameborder="0" allowfullscreen></iframe>
    </div>

    <div class="video-div video3">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/rXk2XGGkD-Y" frameborder="0" allowfullscreen></iframe>
    </div>

    <div class="video-div video4">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/tL_TFXbSnLY" frameborder="0" allowfullscreen></iframe>
    </div>

    <div class="video-div video5">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/c7I7BUNANwA" frameborder="0" allowfullscreen></iframe>
    </div> 



  </div>


<h2 id="all" class="all">All</h2>

  <div class="videos-container">

    <div class="video-div other-video1">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/6fILxnBH1Tg" frameborder="0" allowfullscreen></iframe>
    </div>

       <div class="video-div new-video1">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/P2NVJSJVGVQ" frameborder="0" allowfullscreen></iframe>
    </div>
    
    <div class="video-div new-video2">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/2clUY-OsCpY" frameborder="0" allowfullscreen></iframe>
    </div>

    <div class="video-div new-video3">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/AnMR6SOBa9k" frameborder="0" allowfullscreen></iframe>
    </div>

    <div class="video-div video1">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/iqkQRgGdAPo" frameborder="0" allowfullscreen></iframe>
    </div>
    
    <div class="video-div video2">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/9F1l6xXLSI0" frameborder="0" allowfullscreen></iframe>
    </div>

    <div class="video-div video3">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/rXk2XGGkD-Y" frameborder="0" allowfullscreen></iframe>
    </div>

    <div class="video-div video4">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/tL_TFXbSnLY" frameborder="0" allowfullscreen></iframe>
    </div>

    <div class="video-div video5">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/c7I7BUNANwA" frameborder="0" allowfullscreen></iframe>
    </div> 



  </div>

</body>

</html>


body{
  margin:0;
  padding:0;
  border:0;
  background-color:rgb(91, 106, 131);
  font-family:"Trebuchet MS", sans-serif;
}

#header-div{
  width:100%;
}

#header{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  background-color:white;
  height:10vh;
  width:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:1000;
  border-radius:0 0 30px 30px;
  padding-left:20px;
}

#header-img{
  height:90%;
  width:auto;
  margin-right:20px;
}

#site-name{
  font-size:30px;
  margin-right:30px;
  font-weight:bold;
  color:black;
  justify-content:center;
}

#nav-bar{
  display:flex;
  flex: 1;
  height:100%;
  gap:50px;
  margin-left:30px;
  justify-content:center;
  align-items:center;
  background-color:rgb(46, 60, 85);
  border-radius:0px 0px 30px 0px;
  margin: 0px 0px 0px 0px;
  top:0;
}

#nav-bar a{
  text-decoration:none;
  color:white;
  font-size:25px;
  font-weight:bold;
  display:flex;
  align-items:center;
}

.div-border{
  height:10vh;
}

.newly, .best, .all{
  margin:2rem 1rem 1rem 1rem;
  font-size:50px;
  color:white;
  scroll-margin-top:12vh;
}

.videos-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  padding:20px;
}

.video-div{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:3%;
  border-radius:10px;
}

.video-div iframe{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  border:none;
  border-radius:5px;
  display:block;
}

.new-video1{background-color:rgb(56, 86, 119);}
.new-video2{background-color:rgb(96, 76, 45);}
.new-video3{background-color:black;}

.video1{background-color:rgb(56, 59, 65);}
.video2{background-color:rgb(116, 170, 199);}
.video3{background-color:rgb(233, 233, 233);}
.video4{background-color:rgb(5, 5, 5);}
.video5{background-color:rgb(0, 0, 0);}
.other-video1{background-color:rgb(56, 59, 65);}

h3{
  margin:50px 22px 10px 22px;
  font-size:25px;
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
}

form{
  margin-left:22px;
  margin-top:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

#email{
  height:30px;
  width:15%;
  text-align:center;
  border-radius:5px;
  border:none;
}

.btn{
  padding:2px 24px;
  font-size:14px;
  font-weight:500;
  height:30px;
  background-color:white;
  border:none;
  border-radius:10px;
  cursor:pointer;
}

@media(max-width:900px){
  .videos-container{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
  #site-name{font-size:25px;}
  #nav-bar a{font-size:18px;}
}

@media(max-width:600px){
  .videos-container{grid-template-columns:1fr;}
  h3{font-size:20px;}
  #site-name{font-size:18px;}
  #nav-bar a{font-size:14px;}
  #email{width:70%;}
}

Your browser information:

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

Challenge Information:

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.

1 Like
3

I tried restarting the page and using incognito mode, which didn’t work.
I completed the project once I run the tests on a new browser (Chrome).

Thank you for the help!