Submitted about 2 years ago

Stats Card Challenge with image "filtering" and display: flex.

ro_andrade• 80

@ro-andrade

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

Hello there!

Another challenge completed, with less headaches this time! Only trouble that this one gave me was the image color change. Used the filter: hue-rotate() property but it didn't work. The "filter" was nesting the images with reduced opacity inside a div with the color needed in the background.

As always, thank you for your time and feedback!

Community feedback

Channah Miryam• 190

@Channah-Miryam

Posted about 2 years ago

Hello,

it is a nice end result.

Some thoughts you might find useful: *** you may find it useful to use BEM. It looks like it might suit your coding style. ***you may use an external HTML validator before you submit the challenges, such as the Nu Html Checker - https://validator.w3.org/nu/ *** your project displays nicely on most screens. For tablets, you may wish to use the mobile version instead of the desktop version. You can use the Responsively app to check how your product looks on a variety of screens. In contrast to google developer tools, you will be able to get an overview of a wide variety of screens organised on a flex grid.

Obviously, these are minor recommendations since your work is already good.

Kind regards

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