Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

I been trying a lot and I can not figured out what I’m doing wrong with this item, Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer).

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    <title>Product Landing Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <header id="header">
    <h1>Cat Posse</h1>
    <img src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.catposse.org%2F&psig=AOvVaw3SE8brfXyIKsPIsI3bU9hq&ust=1732732484785000&source=images&cd=vfe&opi=89978449&ved=0CBQQjRxqFwoTCMDqr9PR-okDFQAAAAAdAAAAABAE" alt="cat" id="header-img"/>

    <nav id="nav-bar">
      <a href="home" class="nav-link" >Home</a>
      <a href="projects" class="nav-link" >Projects</a>
      <a href="about" class="nav-link" >About</a>
    </nav>
  </header>
  <body>
    <section id="home"></section>
    <section id="projects"></section>
    <section id="about">
       <iframe src="https://youtu.be/ZAk_wXcbLZc?si=zEAHGyZypZuSHaa1" id="video" frameborder="0"></iframe> 
    </section>
  </body>
  <footer>
    <form action="https://www.freecodecamp.com/email-submit" id="form">
    <input type="text" id="text" name="text" placeholder="Question" required />
    <br>
    <input type="email" id="email" name="email" placeholder="YourEmail" required />
    <br>
    <input type="submit" id="submit" value="Submit"
     class="submit" />
    </form>
  </footer>
</html>

/* file: styles.css */
header {
  position: fixed;
  top: 0px;
  widht: 100%;
  height: 20px;
  padding: 25px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: black;
  opacity: 0.8;

}

@media (max-width: 500px){
  body {
    flex-wrap: wrap;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Okay. Do you know what that test is asking you to do?

3

Yeah I do know but i had link de corresponding element but i don’t know why a failing

4

Hi there!

Remove space in the end of opening anchor tag before class value in each anchor.

The body closing tag should be in the end , before html closing tag.

5

Hello @uenshyn !

Great attempt!

The links here are missing the id # before their section identifying name.

Example: <a href="#code">Code</a>

I tried it to make sure this was the issue, and it will help you pass.
As mentioned the body element should come just before the closing html tag.
But, I did not move it and it worked.
Still it is the correct method to follow, along with my suggestion.

Wishing you good progress on your coding journey. :slightly_smiling_face:

1 Like
6

The issue lies in the href attributes of your .nav-link elements. :sneezing_face: