Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

I built the following html and css code in line with the requirements for the tribute page.
However, it does fail the following 3 requirements, even though I think I surely fulfilled them in my css code:

  1. “Failed: Your img element should have a display of block.”

→ My #image selector sets the image to ‘display: block;’

  1. “Failed: Your #image should have a max-width of 100%.”

→ My #image selector sets the image to ‘max-width: 100%;’

  1. “Failed: Your #image should be centered within its parent.”

→ My #img-div is set to ‘display: flex;’ with ‘justify-content: center;’ and ‘align-items: center;’ , which should center the image within it.

Please help. I really can’t figure out why my code doesn’t fulfill those 3 requirements.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="tribute-page.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;1,300&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
  <title>Tribute Page</title>
</head>
<body>
  <main id="main">
    <h1 id="title">Tribute to Snorlax - The Sleeping Giant</h1>

    <figure id="img-div">
      <img id="image" src="background.png" alt="Snorlax">
      <figcaption id="img-caption">Snorlax in its natural habitat.</figcaption>
    </figure>

    <article id="tribute-info">
      <p>Snorlax is a beloved Pokémon known for its tremendous appetite and ability to sleep anywhere...</p>
    </article>

    <a id="tribute-link" href="https://en.wikipedia.org/wiki/Snorlax" target="_blank">Learn more about Snorlax</a>

    <section id="projects">
      <h2 id="project-section-header">Snorlax Overview</h2>
    </section>

    <section id="contacts">
      <p>Contact me to exchange memories about Snorlax.</p>
      <p>E-Mail: snorlaxlover@pokemon.com</p>
    </section>
  </main>
</body>
</html>


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

body {
  font-family: Montserrat, Arial; 
  margin: 0px;
}

#main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#title {
  margin-top: 20px;
  text-align: center;
}

#img-div {
  position: relative;
  width: 100%;
  max-width: 600px; /* Adjust as needed */
  display: flex;
  justify-content: center;
  align-items: center;
}

#image {
  max-width: 100%;
  height: auto;
  display: block;
}

#img-caption {
  position: absolute;
  bottom: 10px; /* Adjust as needed */
  left: 0;
  width: 100%;
  text-align: center;
  color: white; /* Adjust as needed */
  background: rgba(0, 0, 0, 0.5);
  padding: 5px;
}

#tribute-info {
  width: 80%; /* Adjust as needed */
  max-width: 800px; /* Adjust as needed */
  margin-top: 20px;
  text-align: center;
}

#tribute-link {
  display: block;
  margin-top: 20px;
  text-align: center;
  color: blue; /* Adjust as needed */
  font-size: 20px; /* Adjust as needed */
}

#projects {
  background-color: black;
  color: white;
  padding: 20px;
  width: 100%;
}

#project-section-header {
  margin-bottom: 20px;
}

#contacts {
  background-color: rgba(209, 209, 170, 0.858);
  padding: 20px;
  width: 100%;
  text-align: center;
}

#contacts p {
  margin-bottom: 10px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:121.0) Gecko/20100101 Firefox/121.0

Challenge Information:

Tribute Page - Build a Tribute Page

2

Hello @BabaKush !
The project fails to pass some tests because your HTML is not properly linked with the CSS file. You used the file name tribute-page.css while the provided file name is styles.css, the file name you provided won’t be located.

3 Likes
3

Gotcha! I missed that in the requirements, thank you so much.

4

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