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

Español HTML-CSS
1

Como estan colegas espero esten bien: Estoy creando el proyecto pero cuando le doy en revisar me arroja varios errores como:
Tu elemento img debe tener un display: block; “El cual lo puse”.
Tu #image debe tener un max-width de 100%
Tu #image debe estar centrado con respecto al elemento que lo contiene.
Agradeceria su ayuda, cordial saludo comunidad gracias.

Tu código hasta el momento

 ```  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.2rem;
    line-height: 1.5;
    text-align: center;
    color: #fff;
}
#main {
    height: auto;
    background: #000;
    padding: 15px;
}
#title {
    font-size: 3.5rem;
    color: #fff;
    background-color: #000;
    text-shadow: 0px 0px 4px;
    text-align: center;
    margin-top: 50px;
}
.description {
    background-color: #000;
    margin-top: 2rem; 
    margin-bottom: 6rem;
    text-shadow: 0px 0px 2px #fff;
}
#img-div {  
    width: 100%;
    height: auto;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding-top: 2rem;
}
#image {
    max-width: 100%;
    display: block;
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 10px;
    border: 15px solid rgba(255, 255, 255, 1);
    box-shadow: 0px 10px 10px #000, 0px -10px 10px #000;
}
#img-caption {
    background-color: #000;
    padding: 2rem;
    margin-top: 4rem;
    border-radius: 18px;
    border: 1px solid #808080;  
    box-shadow: 0px 0px 4px #000;
}
#tribute-info {
    display: block;
}
#tribute-info h3 {
    margin-top: 2rem;
}
#tribute-info  ul {
    max-width: 600px;
    margin: 0 auto 50px auto;
    text-align: left;
    line-height: 1.6;

}
#tribute-info ul li {
    margin: 16px 0 0 10px;
}
#tribute-info ul li span {
    color: #ffcc00;
}
#tribute-info p {
    margin: 16px 0;
    text-align: left;
}
#motivación {
    margin: 16px 0;
}
#tribute-link {
    display: block;
    text-decoration: none;
    margin-top: 4px;
    color: #ffcc00;
} 


**Información de tu navegador:**

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

**Challenge:** Página del homenaje - Construye una página de homenaje

**Enlaza al desafío:**
https://www.freecodecamp.org/espanol/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page
2

Por lo que puedo ver el CSS no es el culpable de algunos de los errores, quizá sea cómo está implementado en el HTML ¿Podrías pasar el código?

1 Like
3

Gracias por responder Colega, cuando intento compartirte el código html no me deja enviar. Podrías inspeccionarlo en tu navegador favorito y darme la respuesta, te lo agradecería, no he podido pasar la prueba por esos 3 errores que tengo, reviso el código bien y no encuentro los errores.

1 Like
4

Hola @Criszafiro, revise tu codigo en mi navegador, que por cierto es el google chrome, y todo tu codigo de styles.css esta correcto.

Quiza te ayude el revisar que tu navegador este actualizado, o como muchos probar si tienes alguna extension o cortafuegos activado, utilizar firefox puede ser otra opcion.

Espero resuelvas tu problema. Saludos.