Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
Even though my #nav-bar is staying at the top I can’t pass. I’ve done a lot of googling and can’t find the answer.
Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html lang='en'></html>
<head>
  <title>Playstation add</title>
  <meta charset='utf-8'/>
  <meta content='width=device width, initial-scale=1.0'/>
  <link href="styles.css" rel='stylesheet'>
  </link>
  </head>
  <header id='header'>
    <img id='header-img' src="https://logodownload.org/wp-content/uploads/2020/12/ps5-playstation-5-logo-1-1536x332.png"></img>
    </img>
    <h1 class='title'>Playstation 5</h1>
    <div id='nav-div'>
    <nav id='nav-bar'>
      <ul id='nav-ul'>
        <li id='nav-li1' class='nav-list' ><a class='nav-link' href="#specs-div">Features</a></li>
        <li id='nav-li2' class='nav-list'><a href='#games-intro' class='nav-link'>Games</a></li>
        <li id='nav-li3' class='nav-list'> <a href="#controller" class='nav-link'>Controller</a></li>
        </ul>
      </nav>
      </div>
    </header>
      <div class='container'>
    <body>
      <h2 class='intro'>We are very excited for you to experience the new Playstation 5!  Here are some of the features of the console.</h2>
      <div class='features-div boxes'id='specs-div' >
      <h3 class='features-head'>Specs</h3>
      <ul id='specs-list' class='features list'>
        <li><h4 class='list-subtitle'>CPU:</h4>
        <p> 8x Zen 2 Cores at 3.5GHz (variable frequency)</p></li>
        <li><h4 class='list-subtitle'>GPU:</h4>
        <p>10.28 TFLOPs, 36 CUs at 2.23GHz (variable frequency)</p>
        </li>
        <li><h4 class='list-subtitle'>GPU Architecture:</h4>
        <p>Custom RDNA 2</p>
        </li>
        <li><h4 class='list-subtitle'>Memory/Interface:</h4>
        <p>16GB GDDR6/256-bit</p></li>
        <li><h4 class='list-subtitle'>Memory Bandwidth:</h4>
        <p>448GB/s</p>
        </li>
        <li><h4 class='list-subtitle'>Internal Storage:</h4>
        <p>Custom 825GB SSD</p></li>
        <li><h4 class='list-subtitle'>IO Throughput:</h4>
        <p>5.5GB/s (Raw), Typical 8-9GB/s (Compressed)</p>
        </li>
        <li><h4 class='list-subtitle'>Expandable Storage:</h4>
        <p>NVMe SSD Slot</p></li>
        <li><h4 class='list-subtitle'>External Storage:</h4>
        <p>USB HDD Support</p></li>
        <li><h4 class='list-subtitle'>Optical Drive:</h4>
        <p>4K UHD Blu-ray Drive</p></li>
        </ul>
      </div>
      <h2 class='intro games-intro' id='games-intro'>We have tons of exciting games for the playstaion planned.  We are very excited to show you just how far our console, games, and controllers have advanced. Check out a few of our titles we have coming out</h2>
      <div class='games-div boxes' id='games'>
        <h3 class='games-head'>Games</h3>
        <ul class='games list'>
          <li class='ps5-games'><span class='game-name'>Spider-Man, Miles Morales</span><img id='spider-man' src='https://gameranc.files.wordpress.com/2020/07/img_20200712_031613.jpg' ></img> 
          <p>In the latest adventure in the Marvel’s Spider-Man universe, teenager Miles Morales is adjusting to his new home while following in the footsteps of his mentor, Peter Parker, as a new Spider-Man. But when a fierce power struggle threatens to destroy his new home, the aspiring hero realizes that with great power, there must also come great responsibility. To save all of Marvel’s New York, Miles must take up the mantle of Spider-Man and own it.</p>
           </li>
          <li class='ps5-games'><span class='game-name'>Final Fantasy XVI</span>
            <img src="https://static2.gamerantimages.com/wordpress/wp-content/uploads/2021/02/final-fantasy-16-logo-clive-rosfield.jpg" id='final-fantasy'></img>
            <p>An epic dark fantasy world where the fate of the land is decided by the mighty Eikons and the Dominants who wield them.
This is the tale of Clive Rosfield, a warrior granted the title “First Shield of Rosaria” and sworn to protect his younger brother Joshua, the dominant of the Phoenix. Before long, Clive will be caught up in a great tragedy and swear revenge on the Dark Eikon Ifrit, a mysterious entity that brings calamity in its wake.</p>
          </li>
          <li class='ps5-games'><span class='game-name'>God of War Ragnarok</span>
            <img src='https://th.bing.com/th/id/OIP.R8gkU6FGdLUl7E4sl4uMoAAAAA?pid=ImgDet&rs=1'id='god-of-war'></img>
            <p>Embark on an epic and heartfelt journey as Kratos and Atreus struggle with holding on and letting go. Fimbulwinter is well underway. Kratos and Atreus must journey to each of the Nine Realms in search of answers as Asgardian forces prepare for a prophesied battle that will end the world. Along the way they will explore stunning, mythical landscapes, and face fearsome enemies in the form of Norse gods and monsters. The threat of Ragnarök grows ever closer. Kratos and Atreus must choose between their own safety and the safety of the realms.</p>
          </li>
          </ul>
        </div>
      <h2 class='controller-intro intro' id='controller' >The Playstation 5 controller is ground breaking. Watch these videos to get a feel for which controller you want, the standard dualsense, or the Edge</h2>
      <div class='controller-div'>
        <div class='dualsense-div vid-div'>
    <h3 class='controller-name'>Dualsense
</h3>
<video class='cont-vid' id='video' src="https://youtu.be/SebzB8W3bVU" controls><p><a href='https://youtu.be/SebzB8W3bVU'>Press here to learn all the features</a></p>
  </video>
          </div>
          <div class='edge-div vid-div'>
            <h3 class='controller-name'>Dualsense Edge</h3>
            <video class='cont-vid' id='video2' src='https://media.direct.playstation.com/is/content/sierialto/dualsense-edge-ps5-controller-features-trailer' controls><p><a href='https://media.direct.playstation.com/is/content/sierialto/dualsense-edge-ps5-controller-features-trailer'>Press here to learn all the features</a></p>
            </video>
            </div>
        </div>
        <form id='form' action='https://www.freecodecamp.com/email-submit'>
          <label for="email" class='email'>For More News, Enter Your Email: <input id="email" type="email" placeholder='ex: jerry.baggins@gmail.com' name='email' required /></label>
          </input>
         <input id='submit' type='submit' value='submit'></input>
        </form>
        </div>
      </body>

:root{
  --playstation-color1: #2e6db4;
  --playstation-color2: #DF0024;
  --playstation-color3: #00AC9F;
  --playstation-color4: #F3C300;
}
*{
  scroll-behavior: smooth;
}
body{
  z-index: 0;
  background-color: var(--playstation-color4);
}
.container{
  max-width: 900px;
  box-sizing: border-box;
  margin: auto;
  overflow-x: hidden;
}
}
#header-img{
  padding: 2px;
}
.title{
  font-family: Helvetica;
  width: 100%;
  display: flex;
  justify-content: center
}
#nav-bar{
  z-index: 100;
  overflow-x: hidden;
  top: 0px;
  left: 0px;
  position: fixed;
  width: 100%;
  height: 55px;
  background-color: #2e6db4;
  color: white;
  display: flex;
  border: 2px solid black;
}
ul > li > a{
  text-decoration: none;
  color: white;
  display: block;
}
ul > li > a:hover{
  color: var(--playstation-color4);
}
nav > ul{
  display: flex;
  width: 100%;
  height: 20px;
  justify-content: space-evenly;
  align-items: center;
}
nav > ul > li{
  list-style-type: none;
  font-size: 20px;
}
header{
  z-index: 99;
  margin: 65px 10px 10px 10px;
  border-bottom: 2px solid var(--playstation-color2);
}
.intro{
  font-family: Helvetica;
  font-size: 1.7rem;
  text-align: center;
  padding-top: 25px;
}
.boxes{
  margin: auto;
  padding: 10px;
}
.list{
  font-size: 1.3rem;
  letter-spacing: .8px;
  padding: 0;
  list-style-type: none;
  text-align: center;
}
.list-subtitle{
  font-weight: bold;
  color: var(--playstation-color3);
  
}
h3{
  font-weight: bold;
  font-size: 1.8rem;
  text-align: center;
  padding-top: 20px;
  font-family: Helvetica;
}
.games-head{
  color: var(--playstation-color3);
}
.features-head{
  color: var(--playstation-color1);
}
.games-div{
  border: 4px solid var(--playstation-color3);
}
.features-div{
  border: 4px solid var(--playstation-color1);
}

.games-div > ul > li > p{
  font-size: 1.3rem;
  letter-spacing: .8px;
  display: flex;
  
}
img{
  width: 100%;
}
.game-name{
  font-size: 2.5rem;
  padding-bottom: 20px;
  display: flex;
  margin: auto;
  justify-content: center;
  color: var(--playstation-color2);
}
.controller-div{
   grid-column: 1 / 2;
  letter-spacing: 0.6px;
  column-width: 20rem;
  text-align: jusify;
  grid-template-columns: repeat(2, 1fr);
  border: 4px solid var(--playstation-color2);
  padding: 10px;
}
.edge-div{
  z-index: 2;
border: 2px solid transparent;
width: auto;
height: auto;
}
.dualsense-div{
  z-index: 0;
width: auto;
height: auto;
}
.cont-vid{
  z-index: 0;
  width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.vid-div{
  z-index: 0;
  margin: auto;
  align-item: center;
}
.controller-name{
  color: var(--playstation-color1)
}
form{
  width: 100%;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  *padding-bottom: 2em;
}
form{
  padding: 20px;
}
input{
  width: 100%;
}
label{
  font-family: Helvetica;
  font-size: 1.3rem;
}
input[type='submit']{
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.3rem;
background-color: var(--playstation-color3);
z-index: 0;
}
input[type='submit']:hover{
  background-color: var(--playstation-color1);
}
@media only screen and (max-width: 720px) {
  .container {
    grid-template-columns: 1fr;
  }

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

Hey, so the built in help system for FCC did not copy your CSS. Do you think you could post that?

Also, is the Nav bar the only test that isn’t passing?

1 Like

I think my CSS posted below my HTML you just have to scroll down. I probably posted it wrong.
Yes the only thing that’s not passing is the nav bar not staying at the top, even though it is.

I don’t know for sure if this is it, but could it be because the nav bar is inside this div? I’m not near a PC to find out if having it inside the div is tripping it up

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