Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

So far everything is working and running but the task won’t accept my img display: block; in my stylesheet. Can anyone help figure out please?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="UTF-8" />
    <title id="title">Impa Tribute</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>Impa<h1>
        <h2>The Guardian of Zelda</h2>
    </header>
    <main id="main">
      <div id="img-div">
       <img id="image" src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/hyrule-warriors-age-of-calamity/e/e6/Impa_art_thumb.png?width=640" alt="Impa from Hyrule Warriors Age of Calamity" />
        <div id="img-caption">
        <p>Artwork of Impa from Hyrule Warriors - Age of Calamity</p>
        </div>
      </div>
      <div id="tribute-info">
        <h3>About:</h3>
          <p>There are many versions of Impa throughout the timeline and lore of the Zelda universe, much like with Link and Zelda. Every iteration of Impa depicts her as Zelda's friend. While Link is Zelda's protector, Impa is her guardian. She often is the character that gives Link guidence throughout the game. She is a member, and in most cases the leader, of the Sheikah tribe located in Kakariko Village of Hyrule.</p>
      </div>
      <div id="Family">
        <h3>Impa's Family</h3>
          <ul>
            <li>Purah - older sister</li>
            <li>Paya - granddaughter</li>
          </ul>
      </div>
      <div id="Main-Appearances">
        <h3>Main Game Appearances:</h3>
          <ul>
            <li>The Legend of Zelda</li>
            <li>The Adventure of Link</li>
            <li>Ocarina of Time</li>
            <li>Oracle of Seasons</li>
            <li>Oracle of Ages</li>
            <li>Skyward Sword</li>
            <li>A Link Between Worlds</li>
            <li>Breath of the Wild</li>
            <li>Hyrule Warriors - Age of Calamity</li>
            <li>Tears of the Kingdom</li>
        </ul>
      </div>
      <h1>Learn more about Impa by clicking <a id="tribute-link" target="_blank" href="https://zelda.fandom.com/wiki/Impa">here</a>.</h1>
    </main>
  </body>
</html>

/* file: styles.css */
img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}
#image {
  max-width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
header {
  display: flex;
  justify-content: center;
  text-align: center;
}
#img-caption {
  display: flex;
  justify-content: center;
  text-align: center;
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

This is your img element and it currently has an id of image
When we look at your css we see two rules that apply

Since the #image is the one that follows after the img block, the rules from #image will override anything you wrote in img.
So the display applied to #image (which is also the img) will be flex, and not block.

3

Amazing, that worked. Thank you so much!

1 Like
4

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