Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

I am having trouble with: The navbar should always be at the top of the viewport.

Already looked the forum for answers, and nothing I try works.

There are little things in portuguese in the code, but that does not have a impact in the code

Please help lol

Your code so far

<!-- file: index.<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="styles.css">
    <title>Projeto de Landing Page Chainsaw Man</title>
  </head>



  <body>
    <header id="header">
      <div class="logo">
  <a href="#hero">
    <img id="header-img" src="https://1000logos.net/wp-content/uploads/2023/10/Chainsaw-Man-Logo.png" alt="logo">
  </a>
</div>
      <nav id="nav-bar">
  <ul>
    <li><a class="nav-link" href="#story">Story</a></li>
    <li><a class="nav-link" href="#read">Read</a></li>
    <li><a class="nav-link" href="#about">About the Author</a></li>
  </ul>
</nav>
    </header>




    <section id="hero">
    <h1>insert you email here to receive a message about a new chapter!</h1>

    <form id="form" method="post" action="https://www.freecodecamp.com/email-submit">

      <input name="email" type="email" id="email" placeholder="insert you email here to receive a message about a new chapter">
      
      <input id="submit" type="submit" value="Send Email">
    </form>
    </section>




    <section class="content">
      <div id="story">
        <img id="img-story" src="https://wallpapercave.com/wp/wp9420910.jpg" alt="image of a page from the manga"/>
        <p>Take a look at the new Tatsuki Fujimoto series "Chainsaw Man", being aired weekly on the magazine "Weekly Shonen Jump"</p>

        <iframe id="video" width="1264" height="711" src="https://www.youtube.com/embed/TsSwtw2Y__Y?list=RDTsSwtw2Y__Y" title="[MMV] CHAINSAW MAN x ONE OK ROCK" frameborder="0" allowfullscreen></iframe>


      </div>
      <div id="read">
        <p>You can buy the mangas in a book store, or read it in the <a href="https://mangaplus.shueisha.co.jp/titles/100037"> shonen jump website</a></p>
      </div>
      <div id="about">
      </div>
    </section>
  </body>

  <footer>
  </footer>
</html>html -->


/* file: styles.css */*{
  font-family: "Chelsea Market", system-ui;
  font-weight: 400;
  font-style: normal;
}

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


header {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0px;
    padding: 0.5em;
    min-height: 75px;
    display: flex;  
    flex-direction: row;
    justify-content: space-between;
    background-color: #e16735;
}


#header-img{
  width: 20%;
}


ul{
  list-style-type: none;
  display: flex;
  gap: 10px;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
}


a{
  text-decoration: none;
  color: #eeaa19;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}
  





body{
  background-color: #9d7557;
}


form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #e16735;
  border-color: black;
  min-width: 300px;
  border-radius: 10px 10px 10px 10px; 
}

#hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100px;
    margin-top: 230px;
    margin-bottom: 30px;
    
    }


.content{
  text-align: center;
  align-items: center;
  justify-content: center;
}


#img-story{
  margin: 1em;
  width: 80%;
  object-fit: cover;
}

#video{
  width: 80%;
  height: 80%;

}

@media screen and (max-width: 992px) {
    #video{
  width: 40%;
  height: 40%;

}

}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.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.

3

I Tried a different browser and it works.
No ideia of why that happens, but thanks ma dude!