Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
I try everything, the error are:
Your img element should have a display of block.
Your #image should have a max-width of 100%.

Your code so far

<!-- file: index.html -->
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="Tribute Page" content="Project/>
    <title>Tribute Page/title>
    <link rel="stylesheet" href="styles.css" />
  </head>


<main id="main">
  <header id="title">
    <h1>Dr. Norman Borlaug</h1>
    </header>
    <body>
      <div id="img-div">
      <div id="img-caption">The man who saved a billion lives</div>
      <img id="image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" width="100%" max-width="100%" display="block">
      </div>
      <div id="tribute-info">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.</div>
      <a id="tribute-link" href="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" target="_blank">

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

/* file: styles.css */
/* file: styles.css */
#image, img {
  display: block;
  max-width: 100%;
  height: auto;

}

Your browser information:

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

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

Hi there and welcome to our community!

You have two typos in your document head, which are preventing your CSS code from being linked to the HTML document.

  1. You have a missing quotation mark in one of your meta elements.
  2. You have a missing angle bracket in your title element.
1 Like
4

Instructions:
Your img element should have a display of block.
Your #image should have a max-width of 100%.

You need separate selector for both your #image id and img element.
Also check those errors, mentioned by @igorgetmeabrain
@yousfzrizk

5

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