Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

All tasks are done except task 16,17,19 but i have done what those tasks said but still says or is marked as cross, i have added display:block; to img as per 16, i have added max-width:100%; as per task 17, i also have centered img in its parent element as per19, but still says cross!

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">
  <link rel="stylesheet" href="style.css">
  <title>Tribute Page</title>
</head>
<body>
    <main id="main">
      <h1 id="title">Guido van Rossum</h1>
      <figure id="img-div">
        <img id="image" src="https://aem.dropbox.com/cms/content/dam/dropbox/blog/company/2019/guido_social.png" alt="image">
        <figcaption id="img-caption">Guido van Rossum, creator of Python, at a tech event.</figcaption>
      </figure>
      <div id="div1">
        <h3>About Guido van Rossum</h3>
        <p id="tribute-info">
          Guido van Rossum, a Dutch programmer, is best known as the creator of Python, a language that revolutionized modern programming with its simplicity and readability. Launched in 1991, Python's philosophy of clear, easy-to-understand code has made it one of the most popular languages worldwide, embraced by developers, scientists, and educators alike. Van Rossum’s vision for an accessible, high-level programming language fostered a thriving community that continues to grow. His influence on software development is profound, and his legacy as the “benevolent dictator for life” (BDFL) of Python will be remembered as a testament to his brilliance and generosity in the open-source world.
        </p>
        <blockquote>
          <p>"Guido's great genius isn't just creating Python. It's also knowing when to stop adding to it. Python is the rare language where the creator knew when to step back and let the community take over."</p>
          <cite>--Tim Peters</cite>
        </blockquote>
      </div>
      <div id="footer">
        <h3>If you have time you should <a id="tribute-link" href="https://example.com" target="_blank">learn more</a> about him</h3>
      </div>
      
    </main>
</body>
</html>

/* file: styles.css */
*{
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#main{
  width: 90%;
  background-color: rgb(216, 215, 215);
  margin: auto auto;
  margin-top:5vh;
  margin-bottom: 5vh;
}
#title{
  text-align: center;
  font-weight: 800;
  padding: 5vh 0 5vh 0;
}
#img-div{
  width: 99.5%;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#image{
  margin: 0 auto;
  width: 99%;
  padding-top: 1vh;
  display: block;
  max-width: 100%;
}
#img-caption{
  margin: auto auto;
}
#div1{
  text-align: center;
}
#div1 h3{
  padding-top: 6vh;
  padding-bottom: 1vh;
  color: rgb(1, 53, 85);
}
#tribute-info{
  width: 60%;
  margin: auto auto;
  padding-bottom: 10vh;
}
blockquote{
  width: 50%;
  margin: auto auto;
  text-align: left; 
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  color: rgb(62, 62, 62);
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 0.5vh 0 0.5vh 1vh;
}
blockquote p{
  padding-bottom: 2vh;
}
#footer h3{
  width: 100%;
  text-align: center;
  padding-top: 10vh;
  padding-bottom: 2vh;
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

you have a typo in the name of the stylesheet.
try fixing that first

2 Likes
3

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