Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
The problem I’m having is what part of the code is not being accepted. The solution requires I have and img element with an id of image and You should have a figcaption or div element with an id of img-caption. Adding an attribute isn’t complicated. From my understanding it follows the properties of 'attribute="identifier, which I’ve done. What’s wrong with my code as to why it’s not acceptable??
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 id='title'>Tribute Page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <main id='main'>
      <figure id="image"></figure>
      <figure id="img-div">
        **<img id="image"** src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.imdb.com%2Fname%2Fnm0628520%2F&psig=AOvVaw1rXsohL3eXlHLR85YJ_nsd&ust=1683501278652000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCKix0Y_p4f4CFQAAAAAdAAAAABAE">
      </figure>
      <figure id='img-div'>
      <figure id="img-caption">
        **<figcaption id="img-caption">**Huey P. Newton holding a shotgun</figcaption>
      </figure>
      <figure><p id="tribute-info">Huey Pierce Newton was co-founder of the Black Panther Party for Self-Defense</p>
      <p>Origin of the <a id="tribute-link" href="https://www.archives.gov/research/african-americans/black-power/black-panthers#:~:text=The%20Black%20Panther%20Party%20for,defense%2C%20particularly%20against%20police%20brutality." target="_blank">Black Panther Party<a/> for Self-Defense</p>
      </figure>
    </main>
  </body>
</html>

/* file: styles.css */
image {
  display: block;
  height: auto;
  max-width: 100%;
  align-items: center;
}

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

HI @bdavidprice !

Welcome to the forum!

You have a few issues with your code.

No.1
You need to use the correct file name here

No.2:
You can’t have duplicate ids.
You wrote id=image twice.

same goes for img-div
You can’t have duplicate ids.

No.3:
It looks like you don’t need all of these figure elements.
It looks like using one figure element will do the trick

No4:
Your image is not showing up on the page.
You can try this image address instead

       <img alt="Huey P. Newton" id="image" src="https://m.media-amazon.com/images/M/MV5BOTA4ZmYwOTUtZWE0Zi00YzY4LWJlODItMzFjYjgzMWRhNjA1XkEyXkFqcGdeQXVyNjUxMjc1OTM@._V1_.jpg">

Overall, you need to do some cleanup in your html and then the tests will start passing

2 Likes
3

For your css, image is not an HTML element.
You need to change this to target the id called image instead

4

Thank you so much for your help. I didn’t know I could have too much code.

5

I enjoyed the breakdown, but I seems to have similar issues, image not showing on the browser, how do I rectify this? Thank you once more

6

HI @Agada !

Please create a a new topic with your question and code and people can help you from there.

Thanks

2 Likes