Can someone tell me what the Tribute Project means?

I don’t know how to do #3 and #4 requirements in Tribute Project . I did manage to do it my own way, but I didn’t fulfill the projects requirement and don’t know what it is asking for.

My Code:
HTML

<main id="main">
  <title>Volodomyr Zelenskyy</title>
  <div class="item1"><h1><img src="https://assets.codepen.io/7855873/Vol.jpg" />A Tribute to Volodymyr Zelenskyy</h1></div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
  <div class="item4">item4</div>
</main>

and CSS

body {
  font-family: system-ui;
  background-color: gray;
  width: 100%;
}

h1 {
  text-align: center;
  color: white;
}
#main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:

    "header header header"
    "advert content content"
    "footer footer footer";
}

img {
  width: 100%;
}

.item1 {
  grid-area: header;
  background-color: salmon;
}

.item2 {
  grid-area: advert;
  background-color: purple;
}

.item3 {
  grid-area: content;
  background-color: blue;
}

.item4 {
  grid-area: footer; 
  background-color: orange;
}

The requirements the Tribute Project is asking for:
User Story #3: I should see either a figure or a div element with a corresponding id="img-div" .

User Story #4: Within the img-div element, I should see an img element with a corresponding id="image" .

I also want to know how to make the words go over the image. I don’t recall learning this from the freecodecamp.org lessons.

You need to add an id attribute to the img and the parent div as told in the requirements

Can someone please help me by telling me where to put the

<img src="location of image"> within my code below?

HTML window…

<header id="title">Prime Minister Volodymyr Zelenskyy</header>
<h1 id="main">Tribute to Volodymyr Zelenskyy<h1>
  <div id="img-div"></div>
  <div id="image"></div>
    

CSS window…

title {
  
}
#main {
  background-color: salmon;
  color: blue;
  text-align: center;
}

img-div {
  width: 80%;
}