Product Landing Page STUCK IN STEP 5

HTML-CSS
1

Tell us what’s happening:

Im stuck in step 5. I already added the href to .nav-link, and already gave it an ID. No matter what i try i still cant get through it… Am I doing something wrong?

Your code so far

<!-- file: index.html -->
<html>
  <head>
     <link rel="stylesheet" href="styles.css">
    <title>Product</title>
    </head>
    <body>
      <header id="header"><img src="https://upload.wikimedia.org/wikipedia/commons/4/47/SeBlackRed.jpg" id="header-img">
      <nav id="nav-bar" class="nav-link">
        <a class="nav-link" href="#About">About us</a>
        <a class="nav-link" href="#demonstration">Get started</a>
        <a class="nav-link" href="#submit">Contact</a>
      </nav>
      </header>
<h1 id="About">Where do we get our nuclear weapons?</h1>
<p>We steal them from the government! Philanthropy!
<h1>Do we harm humanity?</h1>
<p>Yes.</p>
<h1>How do I evade law enforcment?</h1>
<p>It's  actually pretty simple! There so happens to be a very helpful individual, who's willing to sacrifice it's time in order to waste yours even more! <a href="https://www.youtube.com/@MikeTheGoon">Check it out!</a>
<h3 id="demonstration">If the link above doesn't work beacause the NSA took it down again, watch this introductory tutorial.</h3>
<iframe src="https://www.youtube.com/watch?v=wdvfaMQIADU&ab_channel=MikeTheGoon" id="video" title="Player"></iframe>
<h1>Already convinced? Tell us!</h1>
<form id="form" action="https://www.freecodecamp.com/email-submit">
  <input required type="email" id="email" placeholder="Do it." name="email"></input>
  <input id="submit" type="submit" value="Sell your soul"></input>
</form>

/* file: styles.css */
#header-img {
  width: 100px;
  height: 80px;
}

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

Welcome to the forum :wave:

When you click a .nav-link button in the nav element, you are taken to the corresponding section of the landing page

When you click your links, do they work? Does it take you to the correct <section> of the page?

Hm, actually it looks like that might be part of a bug.

I would take the instructions literally about sections of the page.

3

Yeah it just breaks the screen. When you click the element it shows the main freecodecamp page. What do you mean by the sections? I got kinda lost in there

4

Hi,
it’s not working because you have added the same class of nav-link to your #nav-bar.
Happy coding!

2 Likes
5

Exactly! I cant believe i didnt realise, thank you very much