Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

I finished my code but it says that my image and image-caption need to be descendants of image-div, so I nested them but it is still showing an error

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang = "en">
  <link rel="stylesheet" href="styles.css">
  <head>
    <h1 id = "title">Abraham Lincoln</h1>
    <label>The man who abolished slavery in America</label>
  </head>
  <body>
    <main id = "main">
      <div class = "img-div">
      <img class = "image" id = "image"src = "https://presidentlincoln.illinois.gov/Resources/26f4d628-e0d4-49bc-abbf-fb882354462a/Picturing-Lincoln%20comparison.jpg" alt = "(if this is shown the image is currently  loading)">
      <div class = "img-caption" id = "img-caption">
        A picture of Abraham Lincoln in Feb 1864 and March 1865
      </div>
      </div>
      <h2 class = "tribute-info" id = "tribute-info">
        Abraham Lincoln was the 16th president who was famous for his Emancipation Proclamation which abolished all slavery in the United States of America
      </h2>
      <div id = "img-div">
      </div>
      <div class = "tribute-link">
        <a target= "_blank" id = "tribute-link"href = "https://presidentlincoln.illinois.gov/Resources/26f4d628-e0d4-49bc-abbf-fb882354462a/Picturing-Lincoln%20comparison.jpg" value = "Click on this link for more info"></a>
      </div>
    </main>
  </body>
  </html>

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

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/17.6 Safari/605.1.15

Challenge Information:

Tribute Page - Build a Tribute Page

2

are you sure there is something in this div?

3

Thank you I realized I had an extra #img-div and I was able to fix the program thank you so much!

1 Like