Skip to content
Submitted about 2 months ago

Tarjeta de vista previa estadísticas con BEM, flexbox y first-mobile

juan-mentor•290
@juan-mentor
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

  • En este caso de medio acabar el reto. No lo he terminado por dos razones:

    • El color de fondo no se corresponde con el efecto final de la solución.
    • La imagen no se adapta al contenedor en los estados intermedios.

  • Claramente debería de poner un background-image: url( ruta imagen);

  • Sería más fácil variar la ruta que poner dos imágenes y que se visualice una.

  • Utilizaría Css grid Para colocar mejor la imagen.

What challenges did you encounter, and how did you overcome them?
  • Principalmente dos
    • Colocar un filtro a la imagen para que se viera como en la vista previa.
    • Adecuar la imagen al contenedor para que no se vea tan fea, ni recortada.
  • Al final hice lo que pude, pero no encontré una solución aceptable. Tendré que mirar otras soluciones para ver en que me he equivocado.
What specific areas of your project would you like help with?

  • Sobre todo cuando tengo una imagen que tiene el 100% del ancho del contenedor (móvil) y tiene que ponerse a un 50% del contenedor (escritorio), adaptándose a una altura que crece conforme se hace más ancho el contenedor padre.

  • Toda sugerencia o ayuda es bienvenida. Gracias.

Community feedback

Please log in to post a comment

Log in with GitHub

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