Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  • Failed:Your img element should have a display of block.

  • Failed:Your #image should have a max-width of 100%.
    I am getting stuck here
    thanks you
    Your code so far

<!-- file: index.html -->
<style>
  body
  {
    background-color: black;
    color: white;
    font-family: calibri;
  }
</style>
<main id="main">
<div id="main">
<h1 id="title">Dr. Norman Borlaug"</h1>
<div id="img-div">
<a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">
<img id="image" src="data:image/jpeg;base64,/9H/AAP/" alt="picture of "Dr. Norman Borlaug"></a>
<figcaption id="img-caption">Dr. Norman Borlaug</figcaption>
</div>
<p id="tribute-info">norman ernest borlaug</p>
<b>norman ernest</b>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</main>

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

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.0 Safari/605.1.15

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

Put all your css in the styles.css
Then link the styles.css to the index.html

3

thank you
it works :blush: :heart:

1 Like