Skip to content
Submitted about 2 years ago

Stats preview card component

Artur Neri•230
@Artur-Neri
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

Man, I struggled to set up the desktop layout after setting up the mobile version, especially the margins/paddings of the text content... That's what I struggled the most with.

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👏Fala Arthur, beleza? Parabéns pela sua nova solução!👏

    Cara, ficou muito foda, acabei de ver o slider de comparação e ficou quase pixel perfect. Nessa você mandou muito.

    A única coisa que faltou acertar é o efeito de sobreposição na imagem, que é difícil de saber de cabeça, mas caso você queira mudar é só aplicar no seletor da imagem mix-blend-mode: multiply com opacidade em 75 porcento.

    Boa!

    Marked as helpful
    0
    Artur Neri•230
    @Artur-NeriPosted about 2 years ago

    @correlucas Vlw! Uma hora o pixel perfect vem, hahah. Vou dar uma olhada nessa propriedade, nunca tinha visto. Um comentário seu = um recurso novo pra eu aprender. Obrigado mais uma vez!

    1

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