Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I got stuck in
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 lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>build a product landing page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header id="header">
      <img src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png" alt="logo" width="100" id="header-img"/>

      <nav id="nav-bar">
        <ul>
          <li>
            <a href="#Home" class="nav-link">Home</a>
            </li>

          <li>
            <a href="#Project" class="nav-link">Project</a>
            </li>

          <li><a href="#footer" class="nav-link">Feature</a></li>
        </ul>
      </nav>

      <section id="home">
        <h1 class="title">My First App Design</h1>
        <p class="subtitle">My dream in life isto become a proffesioner web and software developer</p>
      </section>

      <section id="project">
        <video id="video"width="240" height="80" control>
          <source src="https://player.vimeo.com/external/348824308.sd.mp4?s=b6596c8a1d0ef5b350af2a2cebc6fdb12bfa56d0&profile_id=164&oauth2_token_id=57447761" type="video/mp4">
          <source src="movie.ogg" type="video/ogg">
          Birds in the field.
        </video>
        <br>

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

                <input id="email" type="email" name="email" placeholder="enter your email">

<input id="submit" type="submit" value="Submit">
        
        
        </form>
      </section>

      <section id="feature">

          <footer id="footer">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Contact</a>

      </footer>

      
      </section>
      
    </header>
  </body>
</html>

/* file: styles.css */
/* file: styles.css */
*{
  margin:2px;
}
.header-img{
  width:100;
object-fit:contain;

}
#nav-bar{
display:flex;
flex-direction:row;
align-items:center;
list-style:none;
position: fixed;
top: 0;
left: 0;

}
.nav-links{
  display:flex;
  list-style:none;
  position:fixed;

  }

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Ids are case sensitive, so Home and home are two different ids

2 Likes
3

I think you didn’t get what I’m asking

4

Please elaborate on what you are asking then because @partum is correct that at least one of the issues in your code is that the href attribute value does not match your element id names.

2 Likes
5

can you please give me the complete solution

6

I wish I could help but if I do so, you’ll never learn.
Besides, it’s not allowed on the forum.
Sorry

3 Likes
8

No nobody have give me fair solution and I’m also want to learn on my own but, I want to compare my code I’m also want to learning that’s why I ask for code because I’ll compare my code to you and after that I’ll do it myself not copy paste your code of and till now I’ve done by my own now I’m getting only one error and you are saying that I’m directly telling you to give me your first examine my complete code than put any comment is that clear.

9

I’m about to complete but, I’m getting only one error that’s why I’m saying to you that provide me complete solution.

11

Hello!
As other users have said giving out full solutions is not allowed on the forum. As a moderator if I see anyone giving a coding solution I have to remove it from their comment and tell them to stop giving solutions.

Now, as for your code:

Your href here has a capital letter.

   <a href="#Home" class="nav-link">Home</a>

Your id has a lower case letter.

   <section id="home">

The capitalisation must be exactly the same for the hrefs and ids to work correctly.

3 Likes
12

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