Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

Você #imagedeve ter um heightde auto( esta aprecendo que estar faltando)
mais ja esta incluso no css #img{}
Você #imagedeve ter um heightde auto
#image {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}

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>Minha Página de Homenagem</title>
    <link rel="stylesheet" href="styles.css"> 
</head>
<body>
    <main id="main">
        <h1 id="title">Albert Einstein</h1>
        <div id="img-div">
            <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Albert_Einstein_1921.jpg/220px-Albert_Einstein_1921.jpg" alt="Foto de Albert Einstein" width="220" height="220">
            <figcaption id="img-caption">Albert Einstein em 1921</figcaption>
        </div>
        <div id="tribute-info">
            Albert Einstein foi um físico teórico alemão nascido em 14 de março de 1879. Ele é amplamente considerado um dos físicos mais importantes do século XX e um dos cientistas mais influentes de todos os tempos. 
            Einstein é conhecido por sua teoria da relatividade, que revolucionou a compreensão do espaço, do tempo e da gravidade. Ele também fez contribuições importantes para a física quântica e a cosmologia.
        </div>
        <a id="tribute-link" href="https://en.wikipedia.org/wiki/Albert_Einstein" target="_blank">Saiba mais sobre Albert Einstein</a>
    </main>
</body>
</html>

/* file: styles.css */
#main {
  max-width: 800px; /* Define a largura máxima do container principal */
  margin: 0 auto; /* Centraliza o container horizontalmente */
  padding: 20px; /* Adiciona espaçamento interno */
}

#title {
  text-align: center; /* Centraliza o título */
  font-size: 2.5em; /* Define o tamanho da fonte do título */
  margin-bottom: 20px; /* Adiciona espaçamento abaixo do título */
}

#img-div {
  text-align: center; /* Centraliza a imagem */
  margin-bottom: 20px; /* Adiciona espaçamento abaixo da imagem */
}

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

#img-caption {
  font-style: italic; /* Define o estilo da fonte da legenda como itálico */
  margin-top: 10px; /* Adiciona espaçamento acima da legenda */
}

#tribute-info {
  font-size: 1.2em; /* Define o tamanho da fonte do texto descritivo */
  line-height: 1.6; /* Define o espaçamento entre linhas */
  margin-bottom: 20px; /* Adiciona espaçamento abaixo do texto descritivo */
}

#tribute-link {
  display: inline-block; /* Permite que o link seja tratado como um bloco */
  padding: 10px 20px; /* Adiciona espaçamento interno ao link */
  background-color: #4CAF50; /* Define a cor de fundo do link */
  color: white; /* Define a cor do texto do link */
  text-decoration: none; /* Remove a underline do link */
  border-radius: 5px; /* Define o arredondamento das bordas do link */
}

#tribute-link:hover {
  background-color: #3e8e41; /* Muda a cor de fundo do link ao passar o mouse */
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

Hi there!
Instructions is:
Your #image should use max-width and height properties to resize responsively, relative to the width of its parent element, without exceeding its original size
Your img element should be centered within its parent element.

Your #image selector is right. But You didn’t have img element selector within the CSS file.