Submitted about 2 years ago

Tarjeta de Estadísticas. [BEM]

Axel Soto•160

@axlsoto

Preview site View code

This is a solution for...Stats preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Este proyecto realmente fue un reto para mi, tanto el layout como el tener que hacerlo responsive de la mejor manera posible. En este proyecto me encontré con 2 problemas:

1- Hubo un apartado el cual no pude lograr y fue el ponerle el filtro morado a la imagen principal que se observa en el diseño de ejemplo.

2- Yo sé que en las Media queries solamente se deben estilizar los elementos y propiedades que vayas a cambiar por lo que no se debe copiar todo el código nuevamente pero a mi me pasa que si no coloco todo no se me heredan y simplemente es como que no tuviera CSS.

Si alguien pudiera ayudarme a saber la forma de corregir lo mencionado lo agradecería muchísimo.

Esta vez mis medidas si fueron todas en REM.

Me encantaría que me ayuden a mejorar y me dejen sus opiniones acerca de este proyecto ya que personalmente ha sido el que más me ha costado hasta ahora, por lo que creo que quizá pueden haber muchos detalles a mejorar, tanto en la estética como en la semántica.

¡Todas las críticas serán recibidas de la mejor manera posible! ;)

Please log in to post a comment

Community feedback

Fer•3,970
@fernandolapaz
Posted about 2 years ago
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
Juan•110
@JuanitoNieves
Posted about 2 years ago
Hola Amigo, felicitaciones por terminar el reto! 🥳🥳

A veces es dificil encontrar como hacer distintas cosas, pero que bueno que tengas el animo de mejorar!

Lo que yo hize para que se viera color morado fue poner un <div> padre dentro del background de la imagen, o la imagen como tal, le puse un fondo morado y un opacity : 70%; . Esa puede ser una solucion como muchas otras maneras que se puede hacer. 👌

¡Espero que sigas mejorando y programando!
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord