Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

my #image on css has this code
#image {
max-width: 100%;
height: auto; display: block;
margin: 0 auto;
}

But task 16 and 17 still show incomplete. Help

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tribute Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main id="main">
    <!-- Title -->
    <h1 id="title">Nikola Tesla</h1>

    <!-- Image Section -->
    <figure id="img-div">
      <img 
        id="image" 
        src="https://upload.wikimedia.org/wikipedia/commons/d/d4/N.Tesla.JPG" 
        alt="Portrait of Nikola Tesla">
      <figcaption id="img-caption">
        Nikola Tesla, visionary inventor and electrical engineer, known for his pioneering work on alternating current (AC).
      </figcaption>
    </figure>

    <!-- Tribute Info -->
    <section id="tribute-info">
      <p>
        Nikola Tesla (1856–1943) was a Serbian-American inventor, electrical engineer, and futurist 
        who made groundbreaking contributions to the design of the modern alternating current (AC) 
        electricity supply system. He was also known for his work with wireless energy transmission, 
        radio waves, and early innovations in robotics and radar technology.
      </p>
      <p>
        Despite facing financial hardships and limited recognition during his lifetime, 
        Tesla’s legacy continues to inspire scientists, engineers, and innovators worldwide. 
        Today, he is celebrated as one of the greatest minds in history.
      </p>
    </section>

    <!-- External Link -->
    <p style="text-align: center;">
      Learn more about Nikola Tesla on his 
      <a id="tribute-link" href="https://en.wikipedia.org/wiki/Nikola_Tesla" target="_blank">
        Wikipedia page
      </a>.
    </p>
  </main>
</body>
</html>

/* file: styles.css */
body {
  font-family: Georgia, serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background: #f0f4f8;
  color: #333;
}

#main {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

#title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #2c3e50;
}

#img-div {
  text-align: center;
  margin: 20px 0;
}

#image {
max-width: 100%;
  height: auto; display: block;
margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

#img-caption {
  margin-top: 10px;
  font-style: italic;
  color: #555;
}

#tribute-info {
  margin: 30px 0;
  font-size: 1.1rem;
  text-align: justify;
}

a#tribute-link {
  color: #0077cc;
  text-decoration: none;
  font-weight: bold;
}

a#tribute-link:hover {
  text-decoration: underline;
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

Can you test and confirm if any of your CSS is working?

Try a big obvious change like setting the background color or giving everything a red border.

If it’s not working, why wouldn’t any CSS be applying?