Product landing page. Need help

HTML-CSS
1

in my product landing page https://codepen.io/GoodNGo/pen/NWpgbgO
I got #2 of content wrong, it says " My product landing page should have a header element with a corresponding id="header" ." but I have it written out here <img class= "logo-image" src="https://www.onlinelogomaker.com/blog/wp-content/uploads/2017/06/law-firm-logo.jpg" id="header-image" this happens with all the user stories I’m failing. any help?

2

Hi @GoodNGo !

You have to read the error message more carefully.

It says it is looking for an id of header but you don’t have one here.

<header>

I am also looking at your img tag but I don’t see the id of header-img here
Also, alt attributes need quotes.

  <img class= "logo-image" src="https://www.onlinelogomaker.com/blog/wp-content/uploads/2017/06/law-firm-logo.jpg" alt=law logo>

You have to read the test cases very carefully and make sure to include the ids in the elements it tells you to.

Hope that helps!

1 Like
3

Sorry but im confused, it was after the src, I don’t know why its not showing up when you pasted it. I also put it in the header as well <header id="header">

4

I just went back to your code and I don’t see any of those id’s I mentioned.

This is the current code I am looking at.

<header>
  <img class= "logo-image" src="https://www.onlinelogomaker.com/blog/wp-content/uploads/2017/06/law-firm-logo.jpg" alt=law logo>
    <nav>
      <ul>
        <li>Hire a Lawyer</li>
        <li><a href="#criminal-justice">Criminal Justice</a></li>
        <li>Insurance Law</li>
        <li>About Us</li>   
    </ul>
  </nav>  
</header>

I don’t see those ids here unless I am missing something.

5

maybe It didn’t save because of my wifi. can you check now? I just resaved it.

6

I can see your changes now.

You fixed one of the issues but this is still incorrect
id="header-image"

7

fixed that, it was supposed to be img instead of image.

1 Like
8

do I have to create a separate div class each time i want to have a clickable element?

9

I am not sure I understand your question.
Is this relating to another user story?

10

so at the bottom of my code I create a div element then connected that to my ordered list in order to create a clickable element. for ex. <div class="criminal-justice" id="criminal-justice"> <li><a href="#criminal-justice">Criminal Justice</a></li>
the id in the div class is the the id I used in the href. im asking if I would have to create a separate div class for each clickable element I make since the user story requires 3

11

For this user story
I can see at least three clickable elements inside the nav element, each with the class “nav-link”.

Edit:
The user story is not concerned with the divs at the bottom. It is looking for the anchor tags in the nav bar.

The way you are doing it now is fine

        <li><a href="#criminal-justice">Criminal Justice</a></li>

You just need to add the class and make sure there are a total of three.

12

so I add the classes in the div of criminal-justice?

13

The divs at the bottom are fine.

But if you want to pass the user story I pointed out, you need to have three anchor tags in the navbar and those tags need to have a class name of nav-link.

I am talking about this section

    <nav id="nav-bar">
      <ul>
        <li>Hire a Lawyer</li>
        <li><a href="#criminal-justice">Criminal Justice</a></li>
        <li>Insurance Law</li>
        <li>About Us</li>   
    </ul>
  </nav>

Hope that makes more sense

14

I know but you said add the class so there’s 3 total, and im saying do I add those classes to the div class at the bottom like this <div class="criminal-justice" id="criminal-justice" class="insurance-law" class="Hire-a-lawyer class="about us>

15

I dont see how else I can create the id tag to go in the href

16

Just to be clear,
You are asking about how to pass this user story, right?

I can see at least three clickable elements inside the nav element, each with the class “nav-link”.

17

yes I’m asking about that user story

18

Ok cool.

Forgot about those divs at the bottom.
It has nothing to do with the user story.

The user story is talking about the nav element.

This part

 <nav id="nav-bar">
      <ul>
        <li>Hire a Lawyer</li>
        <li><a href="#criminal-justice">Criminal Justice</a></li>
        <li>Insurance Law</li>
        <li>About Us</li>   
    </ul>
  </nav>

Right now you have one anchor tag in there which is this one.

You need to add the class of nav-link inside the anchor tag.

        <li><a class goes here href="#criminal-justice">Criminal Justice</a></li>

Then you need to create two more anchor tags inside the nav element.

Add an anchor tag inside here

and here

That is what the test is talking about.

When I make all of those changes, then the test passes for me.

1 Like
19

I added them but its still not passing, and the about us section has disappeared entirely

20

I added the classes at the bottom and they’re back up again, but its still not passing.