Tribute Page - Build a Tribute Page - Image element

HTML-CSS
1

The part of the image element does not pass and I can not figure out why.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tribute Page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main id="main">
      <div class="top">
        <h1 id="title">Dr. Norman Borlaug</h1>
        <p>The man who saved a billion lives</p>
      </div>
      <figure id="img-div" class="image-div">
        <img
          src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg"
          alt="Main Image"
          id="image"
        />
        <figcaption id="img-caption">
          Dr. Norman Borlaug, third from the left, trains biologists in Mexico
          on how to increase wheat yields - part of his life-long war on hunger.
        </figcaption>
      </figure>
      <div id="bio" class="bio">
        <h2 id="tribute-info">Here is a timeline of Dr. Borlaug's life:</h2>
        <ul>
          <li><b>1914</b> - Born in Cresco, Iowa</li>
          <br />
          <li>
            <b>1933</b> - Leaves his family's farm to attend the University of
            Minnesota, thanks to a Depression era program known as the "National
            Youth Administration"
          </li>
          <br />
          <li>
            <b>1935</b> - Has to stop school and save up more money. Works in
            the Civilian Conservation Corps, helping starving Americans. "I saw
            how food changed them", he said. "All of this left scars on me."
          </li>
          <br />
          <li>
            <b>1937</b> - Finishes university and takes a job in the US Forestry
            Service
          </li>
          <br />
          <li>
            <b>1938</b> - Marries wife of 69 years Margret Gibson. Gets laid off
            due to budget cuts. Inspired by Elvin Charles Stakman, he returns to
            school study under Stakman, who teaches him about breeding
            pest-resistent plants.
          </li>
          <br />
        </ul>
        <p>
          "Borlaug's life and achievement are testimony to the far-reaching
          contribution that one man's towering intellect, persistence and
          scientific vision can make to human peace and progress."<br />

          -- Indian Prime Minister Manmohan Singh
        </p>
      </div>
      <div id="wiki" class="wiki">
        If you have time, you should read more about this incredible human being
        on his
        <a href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank" id="tribute-link"
          >Wikipedia entry</a
        >.
      </div>
    </main>
  </body>
</html>


/* file: styles.css */
main {
    background: rgb(245, 242, 242);
}
.top {
    text-align: center;
      }
  h1 {
    font-size: 45px;
    padding-top: 40px;
  }

img {
    display: block;
    max-width: 100%;
    height: auto;
    text-align: center;
  }
  figure {
    background-color: white;
    padding: 20px 0px 20px 0px;
    margin-left: 10px;
    margin-right: 10px
  }
.bio {
    text-align: center;
    width: 400px;
    box-sizing: border-box;
    margin: auto;
  }
  ul {
    text-align: left;
  }
.wiki {
    text-align: center;
    margin: auto;
    font-size: 20px;
    font-weight: bold;
  }

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

whats the error message

3

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.

4

put a . in front of img in css

5

not sure if that’ll do it but thats my best guess

6

It gives the same error messages. But thank you for your help anyway, I appreciate it.

7

These two mean you need to have a style using the id image. You are trying to do these two thing in your element style not id style

8

I changed it to this:

img {
display: block;
text-align: center;
}
image {
max-width: 100%;
height: auto;

But it gives me the same error message. Am I putting the id style wrong?

9

I dont see an id style in the new code you provided. An id has the # before the name or element

10

img {
display: block;
}
#image {
max-width: 100%;
height: auto;
text-align: center;
}

Like this? It gives the same error messages still.

11

its styles.css not style.css

fix that and you should pass

1 Like
12

Yes! It did pass, that was the error, and an embarrassing one at that :sweat_smile: Thank you so much for your help and the time you took! :pray:

13

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