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.