Skip to content
Submitted 10 months ago

Stats Card usando flex e grid

João Paulo•70
@JoaoPaul-S
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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?

Community feedback

  • Sean Buckle•390
    @seanbucklePosted 10 months ago

    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
    0
    João Paulo•70
    @JoaoPaul-SPosted 10 months ago

    @seanbuckle Thank you very much, until now I had never seen this property, the whole problem was solved, really thank you, it will help me a lot in the future

    0

Please log in to post a comment

Log in with GitHub

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