Submitted over 1 year ago

Stats-preview-card

Gastón Federico Nahuel Gómez• 370

@Morfeo1997

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Honestly it wasn't too difficult, although giving the purple color to the image was a bit of a headache, but I managed to do it. I'm not convinced about the size of the image when changing the screen size. Anyway, any suggestions are welcome.

Sinceramente no fue demasiado difícil, aunque darle el color purpura a la imagen fue un pequeño dolor de cabeza, pero logre hacerlo. No termina de convencerme el tamaño de la imagen al cambiar el tamaño de la pantalla. De todas formas cualquier sugerencia es bienvenida.

Community feedback

Vanza Setia• 27,795

@vanzasetia

Posted over 1 year ago

Hi, Gastón Federico Nahuel Gómez! 👋

For the purple overlay, I recommend using mix-blend-mode property. For your reference, you can see @DarrickFauvel's solution for this challenge.

Frontend Mentor | Stats preview card component - HTML / Sass / Grid coding challenge solution

The statistic numbers should not be <h3>. Also, the statistic should be a list of three bullet points.

Never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS

You should adjust the media query breakpoint. 375px breakpoint for the one-column layout is too late. Even on 700px width, the image is not filling the entire page and each statistic item starts having no space.

I hope this helps. Happy coding! 👍

Marked as helpful

Please log in to post a comment

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