@fernandolapaz
Posted
Hola 👋, respecto a tus dudas:
🔹El problema con las media queries es que estás utilizando una demás, sólo hace falta una con el min-width correspondiente para pasar de una version a otra y listo. Las disculpas del caso porque no lo noté en la solución anterior que te comenté.
🔹Respecto al color de la imagen, hay varias formas de lograrlo pero la más sencilla y que implica menos código es utilizando la propiedad mix-blend-mode🔎.
Básicamente consiste en darle un background-color y luego opacity a la imagen para que se mezclen y se produzca ese efecto.
Quedaría de la siguiente forma:
header {
background-color: var(--Soft_violet);
}
img {
mix-blend-mode: multiply;
opacity: 0.8;
}
Un par de cosas más:
🔹Esta es una imagen decorativa y la forma de establecer una imagen como decorativa es con el atributo alt vacío para que un lector de pantalla lo ignore.
🔹Podrías usar el elemento <picture>🔎, que permite mostrar diferentes imágenes para diferentes dispositivos o tamaños de pantalla:
<picture>
<source media="(min-width: X)" srcset="images/image-header-desktop.jpg">
<img src="images/image-header-mobile.jpg" alt="">
</picture>
🔹El contenido principal de cada documento (todo el card en este caso) debe envolverse con la etiqueta <main>.
Cualquier otra cosa no dudes en consultar
Y me dices si te funciona 🙂
Saludos,
Marked as helpful
@axlsoto
Posted
@fernandolapaz Muchísimas gracias amigo, me solucionaste el problema del fondo de la imagen y sobre las Medias queries, acabo de subir otro proyecto en el cual utilicé la misma mala práctica de copiar todo el código nuevamente porque no vi tu comentario antes. Pero a partir de ahora ya sé la manera correcta de hacerlo, me encantaría si pudieras dejarme algún contacto ya sea e-mail o alguna RR.SS ya que la verdad yo soy bastante joven y nunca desde que comencé a estudiar programación he tenido la oportunidad de hablar con alguien que quiera dedicarse también a esto... :)
@fernandolapaz
Posted
@axlsoto De nada Axel,
Soy de los pocos que no usa redes sociales 🙂, sino encantado.
Pero seguiré por aquí así que estamos en contacto!
Marked as helpful
