.titulo-principal{
text-align: center;
font-size: 2em;
margin: 0 0 1em;
clear:left;
color: rgb(218, 0, 0)
.imagen-diferenciales{
width: 60%;
transition: 400ms;
box-shadow: 10px 10px 30px 15px #000000;
}
.imagen-diferenciales:hover{
opacity: 0.3;
}
}
¡Hola Charles!
Entiendo que quieres replicar lo que hicimos en clase. Sin embargo, en el código que compartiste, hay un error de sintaxis. La clase .imagen-diferenciales está dentro de la clase .titulo-principal, lo que no es correcto. Te sugiero que corrijas eso y lo coloques fuera de la clase .titulo-principal.
Una vez corregido eso, el código que compartiste debería funcionar correctamente. Básicamente, lo que hace es centrar el texto de la clase .titulo-principal, establecer un tamaño de fuente de 2em, agregar un margen inferior de 1em y un sombreado a una imagen con la clase .imagen-diferenciales. Además, cuando el cursor del mouse pasa sobre la imagen, se aplica una transición y se reduce la opacidad.
Espero que esto te haya ayudado. ¡Buenos estudios!