Need help finishing my project on FreeCode Camp I can't pass all the tests

my pen: https://codepen.io/kaique-guimaraes/pen/wQqxPO
requirements: https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-tribute-page

The codepen in your link does not have the test script. How are you testing this? The error messages from the tests offer some very helpful clues.

Put this code at the beginning of your HTML so that you can run the tests as you make corrections

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

You have two (three actually) problems resulting from not having the correct id attribute.

  • User Story #5: Within the img-div element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in img-div .

Your image needs a caption as described above. Look at yours more closely. It is not exactly as required.

  • User Story #7: I should see an a element with a corresponding id="tribute-link" , which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to _blank in order for your link to open in a new tab (i.e. target="_blank" ).

Look at your a element more closely. It does not meet these requirements.

Once you have fixed these two a third similar error will become apparent. Read the error messages (lower button test suite) to determine what else is missing.

When you get those fixed post again for help on styling the image

the errors:

    1. Within the “img-div” element, I should see an element with a corresponding id=“img-caption” that contains textual content describing the image shown in “img-div”.

your div have "image-caption" != "img-caption"

    1. I should see an <a> element with a corresponding id=“tribute-link”, which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to “_blank” in order for your link to open in a new tab (i.e. target="_blank").

your link id= "tribute-info" change it to id="tribute-link". When you do this there is another problem since the test also require a element whit id= “tribute-info”.

    1. I should see an element with a corresponding id=“tribute-info”, which contains textual content describing the subject of the tribute page.

put the id on a div that surround the section after the imagen(the part that actually have de information). Or you can use section, article or something that make sense. You can use one of the p tags and ad this id after all they have info abaout Arnold.

    1. The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.

use something like this:

#img-div img{
  width: 100%;
}

the image also should be centered so display: block; and margin:auto;. Also the image should not be bigger than his actual size (1024), so max-width:1024px;. So finally the rule may look similar to:

#img-div img{
  width: 90%;
  display:block;
  margin:auto;
  max-width: 1024px;
}