Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

Currently my code is not doing the following and I can’t figure out why:

  • 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.
    I assume my CSS is off, but I’m not sure, I thought I was adding these things in correctly, any help would be appreciated!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
link rel="stylesheet" href="styles.css">
<main id='main'>
  <h1 id='title'>Dr. Norman Borlaug</h1>
  <div id='img-div'><img id='image'><img src='https://www.pbs.org/wgbh/americanexperience/media/filer_public_thumbnails/filer_public/56/7c/567c2141-1572-4455-9078-3ddc8609e127/borlaug-article-1.jpg__1000x567_q85_crop_subsampling-2.jpg'></img><span><figcaption id='img-caption'>Dr. Norman Borlaug basking in the glory of his discoveries</figcaption></span></div>

  <h3 id='tribute-info'>Dr. Borlaug made advances in the food industry that allowed for a more plentiful harvest of grain, which would help to feed a tremendously greater amount of people. To learn more visit <a href="https://www.nobelprize.org/prizes/peace/1970/borlaug/biographical/" target='_blank' id='tribute-link'>here</a></h3>
</main>
</html>

/* file: styles.css */
img{
  width:max;
  max-width:100%;
  height:auto;
  justify-content:center;
  display:block;
  position:relative;
  
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

Hey.
nice work.
Your missing an opening tag in the rel link;)
Hope this helps!

3

Hey there!
You have an extra img tag. You didn’t need to create a second img element for adding id attribute and value. Add it within the existing one.

And img element is self closing, it’s didn’t need closing tag.

img and #image are both different. When you create a CSS rule using img, that’s mean you are targeting your img element within the HTML. And when you create a selector using #, that’s mean you are targeting an element by id, you have within your HTML.
@joshbailey

4

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