Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

componente con vista previa de estadisticas grid/flex

Alexander 170

@Perr0fe0

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

@VCarames

Posted

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 helpful

1

@SamCastle16

Posted

¡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 un opacity: 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 helpful

1

Alexander 170

@Perr0fe0

Posted

@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

Please log in to post a comment

Log in with GitHub
Discord logo

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