Skip to content
Submitted over 1 year ago

Stats Card usando flex e grid

João Paulo•70
@JoaoPaul-S
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

O projeto foi bem fácil, inicialmente usei apenas flex, mas com o grid alguns pequenos problemas foram resolvidos, o único que restou foi quanto a coloração da imagem pra isso usei um overlay com a cor fornecida pelo arquivo do desafio, mas ficou diferente acho que tem a ver mais com a saturação da cor mas não conseguir fazer funcionar, a forma que fiz está correta? Há uma forma melhor de fazer? e quanto a saturação de cor nas imagens tem como mexer com isso?

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Sean Buckle•410
    @seanbuckle

    In this particular example, colour saturation is not needed.

    I would recommend the following:

    • Remove the .overlay
    • Add background-color: var(-accent-color); to .workspace
    • Remove background-color and opacity from img
    • Add mix-blend-mode: multiply; to img

    Here is a link for mix blend mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

    Marked as helpful

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