Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

Nav-links don’t work, I’m sure it’s not my code because i already checked, whenever I press the link it sends me to the fcc page instead of sending me to the section with the corresponding id, I already tried pressing and it always sends me to the fcc page, is this just me?

Your code so far

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

    <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=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
  </head>



  <body>
    <header id="header">
      <img id="header-img" src="https://www.cerave.com/-/media/project/loreal/brand-sites/cerave/shared/baseline/cerave-logo-top.svg?w=0&hash=239AA06EAC9D269F3D17D7645863F4C0" />
      <nav id="nav-bar">
        <ul>
          <li>
            <a class="nav-link" href="#features">Features</a>
          </li>
          <li>
            <a class="nav-link" href="#how_it_works">How It Works</a>
          </li>
          <li>
            <a class="nav-link" href="#pricings">Pricings</a>
          </li>

        </ul>
        
      </nav>
    </header>
    <div class="line"></div>

    <main>
      <div class="banner-div">
        <img class="banner" src="https://www.walgreens.com/images/adaptive/lp/1722622_Cerave-Desktop-Slices_03.jpg">
        <div id="banner-text"><span class="center-text">Body</span> <br>Moisturizers</div>
      </div>
      <div class="email-form">
        <form id="form" action="https://www.freecodecamp.com/email-submit" >
          <input id="email" name="email" type="email" placeholder="Enter your email here"/>
          <input id="submit" type="submit"/>

        </form>
      </div>
      <header>Features</header>
      <section class="features-section" id="features">

      </section>


      <header>How it works</header>
      <section class="how-it-works-section" id="how_it_works">
        <iframe width="320" height="240" src="https://www.youtube.com/embed/muMSjyKM2k0" id ="video">
        </iframe>
      </section>


      <header>Pricings</header>
      <section class="pricings-section" id="pricings">
        
      </section>
    </main>
  </body>
</html>

/* file: styles.css */
body {
  margin: 0;
  font-family: helvetica;
  padding-bottom: 1000px;
}

main {
  padding-top: 100px;
}
#header-img {
  padding-left: 5%;
  height: 100%;
}

#header {
  width: 100%;
  height: 70px;
  position: fixed;
  display: flex;
  background-color: white;
  margin-bottom: 0;
}

#nav-bar {
  top: 0px;
  left: 40%;
  width: 100%;
}

nav > ul {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;
  padding-inline-start: 0;
  margin-block: 0;
  height: 100%;
}

nav > ul > li{
  color: rgb(150, 150, 150);
  display: block;
}

nav > ul > li:hover {
  cursor: pointer;

}

.nav-link {
  text-decoration: none;
  color: inherit;
  font-size: 18px;
}

.line {
  position: fixed;
  width: 100%;
  height: 5px;
  top: 72px;
  background-color: lightgray;
  padding: 0;
  margin-top: -1px;

}

.banner-div {
  display: flex;
  position: relative;
  align-items: right;
  justify-content: right;
  background-color: rgba(0,145,205,255);
  z-index: -1;
}

.banner {
  width:  60%;
  height: 200px;
  display: block;
  border-radius: 10%;
  object-fit: cover;
}

#banner-text {
  font-family: "Roboto-Mono", monospace;
  position: absolute;
  top: 46%;
  left: 20%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: 800;
  font-size: 4.5vw;
  text-align: center;
}

.center-text {
  font-size: 3.5vw;
}

.email-form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 15vh;
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

there is this issue open about it: page rendered in preview from clicking on anchor element with id selector · Issue #59257 · freeCodeCamp/freeCodeCamp · GitHub

that should not stop the tests from checking your app correctly