componente con vista previa de estadisticas grid/flex
Design comparison
Solution retrospective
Hola buenas!.
Aquí mi solución para esta actividad, ocupé grid para poder posicionar la parte de la información y las imágenes, y use flex para la zona de las estadísticas.
cada feedback me sirve mucho!.
Hi there!.
here's my solution for this activity, I use grid to be able to position the part of the information and the images, and flex for the stats zone.
Every feedback helps me a lot!.
Community feedback
- @VCaramesPosted about 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
-
The purpose of the Main Element is to identify the main content of your page. It is not the container of you component. After the main element, you want add a container to wrap you separate components in.
-
The only heading in this component is the “Get insights that help your business grow” everything else will be wrapped in a Paragraph Element.
-
The statistics component is a list of statistics, so it should be built using an Unordered List along with a List Items Element.
If you have any questions or need further clarification, let me know.
Happy Coding! 👻🎃
Marked as helpful1 -
- @SamCastle16Posted about 2 years ago
¡Hola bro! Muy buena solución, felicitaciones 🎉.
Si quieres lograr el exactamente el efecto de color en la imagen, puedes hacer lo siguiente:
- A las imágenes les colocas:
mix-blend-mode: multiply;
y unopacity: 80%;
.
Quedaría así:
.imagen-color { background-color: hsl(277, 64%, 61%); } picture img { mix-blend-mode: multiply; opacity: 80%; }
Lo puedes ver un poco más claro en mi solución.
¡Muchos éxitos! ✌
Marked as helpful1@Perr0fe0Posted about 2 years ago@SamCastle16 me estaba quebrando un poco la cabeza para hacer que el color calzara lo mas posible jajajaja!.
Muchas gracias por compartir esta ayudita!!.
1 - A las imágenes les colocas:
Please log in to post a comment
Log in with GitHubJoin 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