Tribute Page - Build a Tribute Page

HTML-CSS
1

I don’t know what I am doing wrong. It asked me to set the display to block which I did, it asked to have the max-width of 100% , which I do and for the image to be centered. What am I doing wrong? I even tried it without the justify-content and align-items but it still didn’t work.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
<main id="main">
  <h1 id="title">Gone But Never Forgotten</h1>
  <div id="img-div">
    <img id="image" src="https://th.bing.com/th/id/OIP.D-PhcPQuRO-xZ0FKrI7sCgHaEK?rs=1&pid=ImgDetMain">
    <div id="img-caption">Forever Fly High</div>
    </img>
  </div>

  <div id="tribute-info">You will always be apart of us
    <a id="tribute-link" href="https://google.co.uk" target="_blank"></a>
  </main>
</body>
</html>

/* file: styles.css */
#image{
  display: block;
  max-width: 100%
  height: auto;
  justify-content: center;
  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/123.0.0.0 Safari/537.36 Edg/123.0.0.0

Challenge Information:

Tribute Page - Build a Tribute Page

2

HI @tomlinsontiana !

it looks like you have a few issues.

First issue is here

that is the incorrect file name

Then you have a syntax error here

once you fix that, then it should work

But also there are a few others issues in the HTML and CSS

For here, you are not using flexbox, so I would remove these properties

img elements are self closing.
they don’t have closing tags

For better semantic markup, you should use the figure element instead of divs here

hope that helps

1 Like
3

@jwilkins.oboe Thank you so much, I greatly appreciate your help! :slight_smile:

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.