Tribute Page - Build a Tribute Page

HTML-CSS
1

Getting the following error:-

  • Your img element should have a display of block.

  • Failed:Your #image should have a max-width of 100%.

  • Failed:Your #image should be centered within its parent.
    Describe your issue in detail here.

Your code so far

HTML…

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <head>
    <link rel="stylesheet" href="styles.sheet">
  </head>
  <body>
    <main id="main">
      <h1 id="title">
        Dr. Norman Borlaug
      </h1>
      <p>The man who saved a billion lives
      </p>
      <div id="img-div">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="Dr. Norman Borlaug seen standing in Mexican wheat field with a group of biologists" 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>
      </div >
      <div id="tribute-info">
<h3>Here's a time line of Dr. Borlaug's life:</h3>
      </div>
    <h3>If you have time, you should read more about this incredible human being on his
<a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Wikipedia entry</a>
  </h3>
    </main>
  </body>    
</html>

CSS page…

#image{

max-width: 100%;

height:auto;

margin:0px auto;

}

img{

display:block;

}

#img-div{

display:flex;

align-items:center;

justify-content:center;
}

…pls provide me solution with due codes.
Thanx

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

Make your img element selector in the css rule , display block.
And make id #image selector width 100% and margin left and right auto .
@kamkibaat354

4

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

5

I’m seeing this in the head of your HTML page:

<link rel="stylesheet" href="styles.sheet">

Maybe I’m missing something – someone with more experience will need to answer this for sure – but will this work? I think it needs to be styles.css and your css page needs to be named that. If the CSS page isn’t properly linked, it’s not going to work.

1 Like
6

yes bro, this bulshit i made…i have fixed it…thanx alot.

7

that didn’t work…i have fixed 2 errors …now 1 is pending as follows…


Your `#image` should be centered within its parent.

css

#image{

max-width: 100%;

height:auto;

margin-left: auto;

margin-right: auto;

}

img{

display:block;

}

#img-div{

display:flex;

align-items:center;

justify-content:center;
}

html…

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main">
      <h1 id="title">
        Dr. Norman Borlaug
      </h1>
      <p>The man who saved a billion lives
      </p>
      <div id="img-div">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="Dr. Norman Borlaug seen standing in Mexican wheat field with a group of biologists" 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>
      </div >
      <div id="tribute-info">
<h3>Here's a time line of Dr. Borlaug's life:</h3>
      </div>
    <h3>If you have time, you should read more about this incredible human being on his
<a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Wikipedia entry</a>
  </h3>
    </main>
  </body>    
</html>
8

Hi @kamkibaat354

You have three tests failing.
Fixing the typo in the filename will solve two tests.

<link rel="stylesheet" href="styles.sheet">

The error message mentions centering the #image within its parent.

So you need to remove the styling for that div element, and only place properties which will center the its contents.

Happy coding

9

thanx sir, after a many trials…finally i passed out this test.

1 Like
10

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