Página del homenaje - Construye una página de homenaje

Español HTML-CSS
1

Cuéntanos qué está pasando:

A pesar de que mi código cumple con todos los requisitos especificados y tiene todos los elementos correctamente implementados, aún no pasa los siguientes tests:
16. Tu img el elemento debe tener un display de block.
17. Tu #image debería tener un max-width de 100%.
19. Tu #image debe estar centrado dentro de su padre.
Gracias por su atención y por cualquier revisión que puedan realizar para ayudarme a resolver este inconveniente.

Tu código hasta el momento

<!-- 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> Homenaje Mike Tyson</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main id="main">
        <h1 id="title">Homenaje a Mike Tyson</h1>
        <p id="subtitulo">Solo quiero ser humilde en todo momento.</p>
        
        <!-- Contenedor de la imagen y la leyenda -->
        <figure id="img-div">
            <img id="image" src="./img/mike.png" alt="Mike Tyson sparring" />
            <figcaption id="img-caption">Foto Mike Tyson en sparring</figcaption>
        </figure>

        <!-- Información adicional sobre Mike Tyson -->
        <div id="tribute-info">
            <p>Mike Tyson es considerado uno de los más grandes boxeadores de todos los tiempos. Conocido por su increíble poder de knockout, se convirtió en el campeón mundial más joven de los pesos pesados.</p>
        </div>

        <!-- Enlace externo con más información sobre Mike Tyson -->
        <a id="tribute-link" href="https://es.wikipedia.org/wiki/Mike_Tyson" target="_blank">Más información sobre Mike Tyson</a>
    </main>    
</body>
</html>

/* file: styles.css */
html {
    font-size: 10px; /* Facilita el cálculo con rem */
  }
  
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.6rem; /* 1.6rem == 16px */
    line-height: 1.5;
    text-align: center;
    color: #333;
    margin: 0;
  }
  
  h1 {
    font-size: 4rem; /* 40px */
    margin-bottom: 0;
  }
  
  @media (max-width: 460px) {
    h1 {
      font-size: 3.5rem; /* Ajuste para pantallas más pequeñas */
      line-height: 1.2;
    }
  }
  
  h2 {
    font-size: 3.25rem;
  }
  
  a {
    color: #477ca7;
  }
  
  a:visited {
    color: #74638f;
  }
  
  #main {
    margin: 30px 8px;
    padding: 15px;
    border-radius: 5px;
    background: #eee;
  }
  
  @media (max-width: 460px) {
    #main {
      margin: 0;
    }
  }
  
  #image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Centrado horizontal */
  }
  
  #img-div {
    background: white;
    padding: 10px;
    margin: 0;
  }
  
  #img-caption {
    margin: 15px 0 5px 0;
  }
  
  @media (max-width: 460px) {
    #img-caption {
      font-size: 1.4rem;
    }
  }
  
  #subtitulo {
    text-align: center;
    margin-top: 10px; /* Espaciado superior */
  }
  
  #tribute-info {
    margin: 20px;
    font-size: 1.1rem;
    line-height: 1.6;
  }
  
  #tribute-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    font-size: 1.2rem;
    color: #007bff;
    text-decoration: none;
  }
  
  #tribute-link:hover {
    text-decoration: underline;
  }

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Información del Desafío:

Página del homenaje - Construye una página de homenaje

2

your mistake is here

1 Like