Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

I cannot get these 3 rules to pass no matter what I try. I have read forums, and searched websites, and watched YouTube videos to try and figure these out and at this point, I’m confused and think I’ve just messed up the coding somewhere along the way… I need help. lol Im new to this stuff and I want to learn and be better.
" Your img element should have a display of block ."
" Your #image should have a max-width of 100% ."
" Your #image should be centered within its parent."

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title id="title">The Life of Amelia Earhart</title>
  <head>
    <link rel="stylesheet" href="styles.css">
    <main id="main">
      <body>
        <header>
  <h1 id="tribute-info"><a id="tribute-link" href="http://collections.lib.purdue.edu/aearhart/biography.php" target="_blank">Amelia Earhart</a></h1>
  </header>
        <div id="img-div">
          <figure>
          <img  id="image" src="https://earchives.lib.purdue.edu/digital/iiif/epurdue/352/full/full/0/default.jpg" max-width="100%" alt="Amelia Earhart in front of her plane."> 
            <figcaption id="img-caption">Amelia Earhart with arms spread in front of her plane, ca. February 12, 1937 [original and one duplicated copy]</figcaption></div>
          </figure>
            </div>


      </body>
        </main>
        </head>
        </html>

/* file: styles.css */
html, body{
  text-align: center;
  min-width: 260px;

body {
  background-color: lightgrey;
  font-family: Tahoma, sans-serif;
  font-size: 16em;
  color: black;
}

figure {
text-align: center;
}

#img-div {
  display: flex;
  align-items: center;
  max-width: 100%;
  justify-content: center;
}

#image {
  height: auto;
  width: auto;
  max-width: 100%;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
 justify-content: center;

}

#img-caption {
  font-size: 12px;
  margin: 3px 0 5px 0;
  text-align: center;
  font-family: Tahoma;
}

h1 {
  font-size: 60px;
  font-family: Tahoma;
  margin: 25px 30px 0 30px;
  text-align: center;
  padding: 20px 10px 20px 10px;
}

#main {
  margin: 30px auto;
  padding: 15px;
  border: 0px solid;
  border-radius: 5px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15

Challenge Information:

Tribute Page - Build a Tribute Page

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Welcome to the forum @Hay1

Please close the selector.

Then add the display property asked for in the instructions.

Your img element should have a display of block .

Happy coding

1 Like
4

I feel silly :laughing: thank you! that was the error

1 Like