Hello, all.
I’m having problems to solve the following items of the Certification project:
- Your
imgelement should have adisplayofblock. - Failed:Your
#imageshould have amax-widthof100%. - Failed:Your
#imageshould be centered within its parent.
You can find all the code below. As you can see, the first two items are there. I cannot find what went wrong. Can anybody help me or give me a hint?
Thanks!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Página tributo</title>
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
<!-- Font family -->
<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=Open+Sans:ital,wght@0,300;0,400;1,300;1,400&display=swap"
rel="stylesheet"
/>
</head>
<body>
<main id="main">
<!-- Título -->
<h1 id="title">Jorge Luis Borges</h1>
<h2>Exponente de las letras argentino</h2>
<!-- Imagen -->
<figure id="img-div">
<img id="image" src="img/borges-frente.avif" alt="borges de frente" />
<figcaption id="img-caption">
Cada 24 de agosto se conmemora el nacimiento de Jorge Luis Borges y se
celebra el Día del Lector
</figcaption>
</figure>
<!-- Texto -->
<section id="tribute-info">
<p>
Jorge Francisco Isidoro Luis Borges (Buenos Aires, 24 de agosto de
1899-Ginebra, 14 de junio de 1986) fue un escritor, poeta, ensayista y
traductor argentino, extensamente considerado una figura clave tanto
para la literatura en habla hispana como para la literatura universal.
En homenaje al escritor de cuentos, ensayos y poemas, hoy se conmemora
el Día del Lector.
</p>
<!-- Lista de obras -->
<h3>Cronología con algunas de las obras más influyentes de Borges</h3>
<h4><strong>Narrativa</strong></h4>
<ul>
<li>1942.- "<i>El jardín de senderos que se bifurcan</i>"</li>
<li>1944.- "<i>Ficciones</i>"</li>
<li>1949.- "<i>El Aleph</i>"</li>
<li>1951.- "<i>La muerte y la brújula</i>"</li>
</ul>
<h4><strong>Poesía</strong></h4>
<ul>
<li>1923.- "<i>Fervor de Buenos Aires</i>"</li>
<li>1960.- "<i>El hacedor</i>"</li>
<li>1969.- "<i>El otro, el mismo</i>"</li>
<li>1969.- "<i>Elogio de la sombra</i>"</li>
<li>1972.- "<i>El oro de los tigres</i>"</li>
<li>1981.- "<i>La cifra</i>"</li>
</ul>
<h4><strong>Ensayo</strong></h4>
<ul>
<li>1925.- "<i>Inquisiciones</i>"</li>
<li>1926.- "<i>El tamaño de mi esperanza</i>"</li>
<li>1928 "<i>El idioma de los argentinos</i>"</li>
<li>1932.- "<i>Discusión</i>"</li>
<li>1936.- "<i>Historia de la eternidad</i>"</li>
<li>1952.- "<i>Otras inquisiciones</i>"</li>
</ul>
</section>
<footer>
<p>
Si tenés tiempo, te recomendamos leer más sobre el genial autor
argentino. Podés empezar por su
<a
href="https://es.wikipedia.org/wiki/Jorge_Luis_Borges"
id="tribute-link"
target="_blank"
>página en Wikipedia</a
>
</p>
</footer>
</main>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: "Open Sans", sans-serif;
}
body {
font-family: sans-serif;
font-size: 1rem;
color: #333;
margin: 0;
}
h1 {
font-size: 6rem;
margin: 0;
text-align: center;
}
h2 {
font-size: 3rem;
font-family: sans-serif;
font-weight: 300;
font-style: italic;
text-align: center;
}
main {
margin: 30px 8px;
padding: 15px;
border-radius: 5px;
background: #eee;
}
/* Imagen */
img {
display: block;
}
#image {
max-width: 100%;
height: auto;
align-items: center;
}
#img-div {
background-color: white;
padding: 10px;
margin: 0;
}
#img-caption {
font-size: 1.5rem;
margin: 15px 0 5px 0;
}