Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

My code can’t pass the test " * Your #image should be centered within its parent.". I suppose it’s something to do with messy margin management in my code but I can’t quite problem-solve it. Could someone more experienced please help?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tribute for Harambe</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <main id="main">
      <section class="section1">
      <h1 id="title">In Memory of Harambe.</h1>
    <div id="img-div">
    <div id="donation">
      <img id="image" src="https://akm-img-a-in.tosshub.com/indiatoday/images/story/201606/story-size-647_060116120504.jpg?VersionId=FADSBR0yE_9qzxXWcBn3xkUv5mA3kBa0">
      <a href="https://trollface.dk/"><button class="btn">Donate</button></a>
    </div>
    <div id="img-caption">
      <p><i>"he was a good gorilla."</i></p>
    </div>
    </section>
    
    <section>
      <div id="tribute-info">
      <h1 id="legacy">His Legacy</h1>
      <ul>
        <li>Ate 102 bananas</li>
        <li>10-Decibel Chest Thump</li>
        <li>Gyatt</li>
        <li>Disciplined</li>
        <li>Loved kids</li>
        <li>Hated Andre the Zookeeper</li>
      </ul>
      <div class="btnalign">
      <a href="https://trollface.dk/" target="_blank" id="tribute-link"><button id="tribute-btn"><strong>Learn more on his Wikipedia Page</strong></button></a>
      </div>

      </div>

    </div>
    </section>

    <footer>
      <div id="footertext">
      <p>This website was created on FreeCodeCamp.org</p>
      <p>For enquiries, please direct them to Andre the Zookeeper at andrethezookeeper@gmail.com</p>
      </div>
    </footer>
    </main>
</html>

/* file: styles.css */
* {
  margin: 0;
}

body {
  background-color: #EBECF0;
}

.section1 {
  background-color: black;
}

#image {
  display: block;
  max-width: 100%;
  height: auto;
  box-shadow:0px 0px 20px #999;
  box-shadow:0px 0px 20px #999;
  margin: 0;
  padding: 3px;
  border-radius: 15px;
  background-color: white;
}

#donation {
  position: relative;
  width: 90%;
  margin: auto;
}

#donation .btn {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
;
  color: white;
  font-size: 16px;
  padding: 6px 15px;
  border: solid 2px;
  cursor: pointer;
  border-radius: 20px;
}

#img-caption {
  color: white;
  padding: 10px;

}

p {
  text-align: center;
  padding: 10px;
  font-size: 16px;
}

#title {
  text-align: center;
  padding: 20px;
  font-size: 2.5em;
  color: white;
}

#tribute-info {
  width: 60%;
  margin: auto;
  margin-top: 2em;
  position: relative;
}

ul {
  padding: 20px;
  margin-top: 0;
}

li {
  margin-top: 10px;
}

#legacy {
  font-size: 2.5em;
  padding: 10px;
  border-bottom: solid 2px;
}

#tribute-btn {
  background-color: rgba(0, 0, 0, 0);
;
  color: black;
  font-size: 18px;
  padding: 8px 16px;
  border: solid 2px;
  cursor: pointer;
  border-radius: 20px;
  margin-bottom: 2em;
}

.btnalign {
  text-align: center;
  margin: 0;
}

footer {
  background-color: black;
  color: white;
}

footer p{
  padding: 5px;
}

#footertext {
  padding: 1em;
  border-bottom: solid 2px white;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Tribute Page - Build a Tribute Page

2

you have to close your <div id="img-div">

3

You can add an auto margin to the image.

You have centered the image container so for the image to be centered it would have to be the same width as the container. You want to center the image, not the container.

As said, the #img-div element is auto-closing and it might not be where you expect it to close. Although it would make sense for it to close after the caption, which it is.

4

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