Product Landing Page step 23

HTML-CSS
1

Tell us what’s happening:

stuck on step 23 #nav-bar should always be at top of viewport. Mine is fixed to the top but won’t pass code. I’ve tried using the #nav-bar selector and still won’t pass. Any clues??

Your code so far

<!-```

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Prodct Landing Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <section class="navi">
  <header id="header">
  <img id="header-img" src="https://cdn.prod.website-files.com/659a9ef71c962485037fcc8f/66854aece1e4d28d5a361380_X%20box%20logo.png"/>
  <h1 id="title">Xbox Series X</h1>
    <nav id="nav-bar">
      <ul class="nav-links">
      <li><a class="nav-link" href="#features">Features</a></li>
      <li><a class="nav-link" href="#setup_install">SetUp & Install</a></li>
      <li><a class="nav-link" href="#video">Learn More</a></li>
      </ul>
    </nav>
  </header>
  </section>
  
       <section id="features">
<h1 class="title2">Features</h1>
         <p>The Xbox Series X boasts impressive specifications, including a custom 8-core AMD Zen 2 CPU running at 3.8 GHz, 16 GB of GDDR6 memory, and a 1 TB NVMe SSD for ultra-fast storage and load times. Its GPU delivers 12 teraflops of processing power, supporting true 4K gaming and advanced features like hardware-accelerated ray tracing. The console also includes HDMI 2.1 output, support for up to 120 FPS, and a dedicated cooling system to maintain optimal performance during extended gaming sessions.</p>
        <ul>
      <li>Optical Drive: 4K UHD Blu-ray</li>
      <li>Expandable Storage: 1 TB Expansion Card (proprietary)</li>
      <li>Wireless: Wi-Fi 802.11ac, Bluetooth 5.0</li>
      <li>Ports: 3x USB 3.1, Ethernet, HDMI 2.1</li>
      <li>Audio: Dolby Digital 5.1, DTS 5.1, Dolby TrueHD with Atmos</li>
      <li>Dimensions: 15.1 cm x 15.1 cm x 30.1 cm</li>
      <li>Weight: 4.45 kg (9.8 lbs)</li>
        </ul>
      </section>

      <section id="setup_install">
        <h1 class="title2">Setup & Install</h2>
        <p>Follow these steps to set up and start using your Xbox Series X:</p>
        <ol>
            <li>
                <strong>Unbox and Connect:</strong>
                <ul>
                    <li>Remove the console and accessories from the box.</li>
                    <li>Connect the power cable and HDMI cable to your TV or monitor.</li>
                    <li>Insert batteries into the wireless controller.</li>
                </ul>
            </li>
            <li>
                <strong>Power On:</strong>
                <ul>
                    <li>Press the Xbox button on the console or controller to turn it on.</li>
                </ul>
            </li>
            <li>
                <strong>Initial Setup:</strong>
                <ul>
                    <li>Follow on-screen instructions to select your language, region, and network.</li>
                    <li>Sign in with your Microsoft account or create a new one.</li>
                </ul>
            </li>
            <li>
                <strong>Update Console:</strong>
                <ul>
                    <li>Allow the console to download and install any available system updates.</li>
                </ul>
            </li>
            <li>
                <strong>Install Games:</strong>
                <ul>
                    <li>Insert a game disc or download games from the Microsoft Store or Xbox Game Pass.</li>
                </ul>
            </li>
            <li>
                <strong>Enjoy Gaming:</strong>
                <ul>
                    <li>Launch your game and start playing!</li>
                </ul>
            </li>
        </ol>
      </section>
     

        <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/0tUqIHwHDEc?si=y1ZO-i4kQfIX9dUL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

  <form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
  <laebl for="email">SignUp For Mailing List
    <input id="email" type="email" name="email" placeholder="Email@email.com" required>
    <input id="submit" type="submit"><a href="https://www.freecodecamp.com/email-submit"></a>
  </form>


  </body>
  </html>- file: index.html -->


/* file: styles.css */
*{ 
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: copperplate, sans-serif;
}

 #header{
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   background-color: hsl(120, 61%, 42%);
   color: white; 
   position: fixed;
   z-index: 1;
   top: 0px;
   width: 100%;
 } 
 
#header-img{
  width: 200px;
  height: 80px;
}

 .title2{
   font-size: 40px;
   padding-bottom: 25px;
 }

#nav-bar li{
  list-style-type: none;
  display: inline-block;
  padding: 0;
  margin: 0;
}

#nav-bar a{
  text-decoration: none;
  padding: 0 25px;
  font-size: 24px;
  color: white;
}

#nav-bar a:hover{
  background-color: hsl(120, 75%, 10%)
}

#features{ 
  text-align: center;
  margin-top: 100px;
}

#features p, ul{
  font-size: 24px;
}

#features p{
  line-height: 1.5:
}

#features ul{
  margin-top: 40px
}

#setup_install{
  text-align: center;
  margin-top: 50px;
  font-size: 24px;
}

#setup_install  {
  font-size: 24px;
  line-height: 1.5;
}

#video{
  display: flex;
  margin: 0 auto;
  margin-top: 50px;
  border: 10px groove green;
}

form{
  font-size: 40px;
  text-align: center;
  margin-top: 40px;
}

#email{
  width: 400px;
  height: 40px;
  display: flex;
 margin: 10px 740px;
 font-size: 24px;
}

#submit{
  font-size: 30px;
  border-radius: 20px;
  width: 300px;
  height: 40px;
  background: hsl(120, 61%, 42%);
}

@media(max-width:1280px){
  header{ 
    width: 100%;
  }
}

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/17.5 Safari/605.1.15

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.

3

just tried these and nothing helped, also there’s no restart step on this exercise

4

you tried to update your browser, tried to turn off your extensions, tried a different browser… ?

ok, can you share what errors appear in the browser console? not the console in the editor, the native console of the browser

5

I’m not sure what you’re asking for but I did try to run it thru chrome, I have no extensions, didn’t update browser

6

It would be really useful if you could open the browser console, and share the errors that appear there when you run the tests. You can find how to open the console for your specific browser doing a search on the internet. I use F12 with Google Chrome

7

is this what you requested?

[Warning] 40 console messages are not shown.
[Error] Unrecognized Content-Security-Policy directive ‘require-trusted-types-for’.

[Error] SecurityError: Cache storage is disabled because the context is sandboxed and lacks the ‘allow-same-origin’ flag
(anonymous function) (www-embed-player.js:2107)
Global Code (www-embed-player.js:2335)
[Error] ReferenceError: Can’t find variable: writeEmbed
Global Code (0tUqIHwHDEc:10:1416)
[Info] Successfully preconnected to https://i.ytimg.com/
[Error] SyntaxError: Unexpected identifier ‘timeout’
(anonymous function) (dom-test-evaluator.js:2:255522)
(anonymous function) (dom-test-evaluator.js:2:255835)
(anonymous function) (dom-test-evaluator.js:2:256114)
handleMessage (dom-test-evaluator.js:2:256339)
onmessage (dom-test-evaluator.js:2:256446)
[Warning] The resource https://www.youtube.com/s/player/a61444a1/player_ias.vflset/en_US/embed.js was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it wasn’t preloaded for nothing.
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 2)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 6)
[Error] Unrecognized Content-Security-Policy directive ‘require-trusted-types-for’.

[Error] SecurityError: Cache storage is disabled because the context is sandboxed and lacks the ‘allow-same-origin’ flag
(anonymous function) (www-embed-player.js:2107)
Global Code (www-embed-player.js:2335)
[Error] ReferenceError: Can’t find variable: writeEmbed
Global Code (0tUqIHwHDEc:10:1416)
[Info] Successfully preconnected to https://i.ytimg.com/
[Error] SyntaxError: Unexpected identifier ‘timeout’
(anonymous function) (dom-test-evaluator.js:2:255522)
(anonymous function) (dom-test-evaluator.js:2:255835)
(anonymous function) (dom-test-evaluator.js:2:256114)
handleMessage (dom-test-evaluator.js:2:256339)
onmessage (dom-test-evaluator.js:2:256446)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 2)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 6)
[Error] Unrecognized Content-Security-Policy directive ‘require-trusted-types-for’.

[Error] SecurityError: Cache storage is disabled because the context is sandboxed and lacks the ‘allow-same-origin’ flag
(anonymous function) (www-embed-player.js:2107)
Global Code (www-embed-player.js:2335)
[Error] ReferenceError: Can’t find variable: writeEmbed
Global Code (0tUqIHwHDEc:10:1416)
[Info] Successfully preconnected to https://i.ytimg.com/
[Error] SyntaxError: Unexpected identifier ‘timeout’
(anonymous function) (dom-test-evaluator.js:2:255522)
(anonymous function) (dom-test-evaluator.js:2:255835)
(anonymous function) (dom-test-evaluator.js:2:256114)
handleMessage (dom-test-evaluator.js:2:256339)
onmessage (dom-test-evaluator.js:2:256446)
[Warning] The resource https://www.youtube.com/s/player/a61444a1/player_ias.vflset/en_US/embed.js was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it wasn’t preloaded for nothing.
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 2)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 6)
[Error] Unrecognized Content-Security-Policy directive ‘require-trusted-types-for’.

[Error] SecurityError: Cache storage is disabled because the context is sandboxed and lacks the ‘allow-same-origin’ flag
(anonymous function) (www-embed-player.js:2107)
Global Code (www-embed-player.js:2335)
[Error] ReferenceError: Can’t find variable: writeEmbed
Global Code (0tUqIHwHDEc:10:1416)
[Info] Successfully preconnected to https://i.ytimg.com/
[Error] SyntaxError: Unexpected identifier ‘timeout’
(anonymous function) (dom-test-evaluator.js:2:255522)
(anonymous function) (dom-test-evaluator.js:2:255835)
(anonymous function) (dom-test-evaluator.js:2:256114)
handleMessage (dom-test-evaluator.js:2:256339)
onmessage (dom-test-evaluator.js:2:256446)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 2)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 6)
[Error] Unrecognized Content-Security-Policy directive ‘require-trusted-types-for’.

[Error] SecurityError: Cache storage is disabled because the context is sandboxed and lacks the ‘allow-same-origin’ flag
(anonymous function) (www-embed-player.js:2107)
Global Code (www-embed-player.js:2335)
[Error] ReferenceError: Can’t find variable: writeEmbed
Global Code (0tUqIHwHDEc:10:1416)
[Info] Successfully preconnected to https://i.ytimg.com/
[Error] SyntaxError: Unexpected identifier ‘timeout’
(anonymous function) (dom-test-evaluator.js:2:255522)
(anonymous function) (dom-test-evaluator.js:2:255835)
(anonymous function) (dom-test-evaluator.js:2:256114)
handleMessage (dom-test-evaluator.js:2:256339)
onmessage (dom-test-evaluator.js:2:256446)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 2)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 6)
[Error] Unrecognized Content-Security-Policy directive ‘require-trusted-types-for’.

[Error] SecurityError: Cache storage is disabled because the context is sandboxed and lacks the ‘allow-same-origin’ flag
(anonymous function) (www-embed-player.js:2107)
Global Code (www-embed-player.js:2335)
[Error] ReferenceError: Can’t find variable: writeEmbed
Global Code (0tUqIHwHDEc:10:1416)
[Info] Successfully preconnected to https://i.ytimg.com/
[Error] SyntaxError: Unexpected identifier ‘timeout’
(anonymous function) (dom-test-evaluator.js:2:255522)
(anonymous function) (dom-test-evaluator.js:2:255835)
(anonymous function) (dom-test-evaluator.js:2:256114)
handleMessage (dom-test-evaluator.js:2:256339)
onmessage (dom-test-evaluator.js:2:256446)
[Warning] The resource https://www.youtube.com/s/player/a61444a1/player_ias.vflset/en_US/embed.js was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it wasn’t preloaded for nothing.
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 2)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 6)
[Error] Unrecognized Content-Security-Policy directive ‘require-trusted-types-for’.

[Error] SecurityError: Cache storage is disabled because the context is sandboxed and lacks the ‘allow-same-origin’ flag
(anonymous function) (www-embed-player.js:2107)
Global Code (www-embed-player.js:2335)
[Error] ReferenceError: Can’t find variable: writeEmbed
Global Code (0tUqIHwHDEc:10:1416)
[Info] Successfully preconnected to https://i.ytimg.com/
[Error] SyntaxError: Unexpected identifier ‘timeout’
(anonymous function) (dom-test-evaluator.js:2:255522)
(anonymous function) (dom-test-evaluator.js:2:255835)
(anonymous function) (dom-test-evaluator.js:2:256114)
handleMessage (dom-test-evaluator.js:2:256339)
onmessage (dom-test-evaluator.js:2:256446)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 2)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 6)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 2)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 6)
[Error] Unrecognized Content-Security-Policy directive ‘require-trusted-types-for’.

[Error] SecurityError: Cache storage is disabled because the context is sandboxed and lacks the ‘allow-same-origin’ flag
(anonymous function) (www-embed-player.js:2107)
Global Code (www-embed-player.js:2335)
[Error] ReferenceError: Can’t find variable: writeEmbed
Global Code (0tUqIHwHDEc:10:1416)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 2, x2)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 6)
[Error] Unrecognized Content-Security-Policy directive ‘require-trusted-types-for’.

[Error] SecurityError: Cache storage is disabled because the context is sandboxed and lacks the ‘allow-same-origin’ flag
(anonymous function) (www-embed-player.js:2107)
Global Code (www-embed-player.js:2335)
[Error] ReferenceError: Can’t find variable: writeEmbed
Global Code (0tUqIHwHDEc:10:1416)
[Info] Successfully preconnected to https://i.ytimg.com/
[Error] SyntaxError: Unexpected identifier ‘timeout’
(anonymous function) (dom-test-evaluator.js:2:255522)
(anonymous function) (dom-test-evaluator.js:2:255835)
(anonymous function) (dom-test-evaluator.js:2:256114)
handleMessage (dom-test-evaluator.js:2:256339)
onmessage (dom-test-evaluator.js:2:256446)
[Warning] The resource https://www.youtube.com/s/player/a61444a1/player_ias.vflset/en_US/embed.js was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it wasn’t preloaded for nothing.
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 2)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 6)
[Error] Unrecognized Content-Security-Policy directive ‘require-trusted-types-for’.

[Error] SecurityError: Cache storage is disabled because the context is sandboxed and lacks the ‘allow-same-origin’ flag
(anonymous function) (www-embed-player.js:2107)
Global Code (www-embed-player.js:2335)
[Error] ReferenceError: Can’t find variable: writeEmbed
Global Code (0tUqIHwHDEc:10:1416)
[Info] Successfully preconnected to https://i.ytimg.com/
[Error] SyntaxError: Unexpected identifier ‘timeout’
(anonymous function) (dom-test-evaluator.js:2:255522)
(anonymous function) (dom-test-evaluator.js:2:255835)
(anonymous function) (dom-test-evaluator.js:2:256114)
handleMessage (dom-test-evaluator.js:2:256339)
onmessage (dom-test-evaluator.js:2:256446)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 2)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 6)
[Error] Unrecognized Content-Security-Policy directive ‘require-trusted-types-for’.

[Error] SecurityError: Cache storage is disabled because the context is sandboxed and lacks the ‘allow-same-origin’ flag
(anonymous function) (www-embed-player.js:2107)
Global Code (www-embed-player.js:2335)
[Error] ReferenceError: Can’t find variable: writeEmbed
Global Code (0tUqIHwHDEc:10:1416)
[Info] Successfully preconnected to https://i.ytimg.com/
[Error] SyntaxError: Unexpected identifier ‘timeout’
(anonymous function) (dom-test-evaluator.js:2:255522)
(anonymous function) (dom-test-evaluator.js:2:255835)
(anonymous function) (dom-test-evaluator.js:2:256114)
handleMessage (dom-test-evaluator.js:2:256339)
onmessage (dom-test-evaluator.js:2:256446)
[Warning] The resource https://www.youtube.com/s/player/a61444a1/player_ias.vflset/en_US/embed.js was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it wasn’t preloaded for nothing.
[Error] undefined
(anonymous function) (base.js:6374)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 2)
[Error] Viewport argument key “inital-scale” not recognized and ignored. (about:srcdoc, line 6)
[Error] Unrecognized Content-Security-Policy directive ‘require-trusted-types-for’.

[Error] SecurityError: Cache storage is disabled because the context is sandboxed and lacks the ‘allow-same-origin’ flag
(anonymous function) (www-embed-player.js:2107)
Global Code (www-embed-player.js:2335)
[Error] ReferenceError: Can’t find variable: writeEmbed
Global Code (0tUqIHwHDEc:10:1416)
[Error] SyntaxError: Unexpected identifier ‘timeout’
(anonymous function) (dom-test-evaluator.js:2:255522)
(anonymous function) (dom-test-evaluator.js:2:255835)
(anonymous function) (dom-test-evaluator.js:2:256114)
handleMessage (dom-test-evaluator.js:2:256339)
onmessage (dom-test-evaluator.js:2:256446)
[Info] Successfully preconnected to https://i.ytimg.com/
[Warning] The resource https://www.youtube.com/s/player/a61444a1/player_ias.vflset/en_US/embed.js was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it wasn’t preloaded for nothing.
[Error] undefined
(anonymous function) (base.js:6374)
[Error] undefined
(anonymous function) (base.js:6374)

8

there is a series of errors that make it look like the navbar test is not compatible with the browser you are using, but I would not know why. I will bring this up internally

9

ok I’ll wait to hear back. Just will skip for now