Stats preview card component(Vanilla CSS + Responsiveness with @media)

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Fala Yan, parabéns pela sua nova solução, ficou bem igual a imagem de referência.

  Se eu puder te dar uma sugestão seria somente sobre a imagem do componente, se você quiser acertar a cor igual ao design, você pode tentar mesclando a opacidade da imagem com o background. Eu olhei aqui no dev tools e o valor da cor seria mais ou menos esse aqui abaixo:

  main .photo .cover { background-color: hsl(277deg 88% 33% / 61%); }"

  Ou você pode fazer do jeito mais fácil simplesmente aplicando um mix-blend-mode e ajustar a opacidade. E importando a imagem através do HTML, aplicando isso aqui:

  img {mix-blend-mode: multiply; opacity: 0.75; }\

  Vi também que você importou a imagem através do css com o background-image um jeito mais semantico seria usando a tag <picture> que inclusive você pode setar ela pra trocar de imagem quando chegar no tamanho mobile.

  <picture><source media="(max-width:650px)" srcset="image-mobile.jpg"> <img src="image-desktop.jpg" alt="image" style="width:auto;"></picture>

  Enfim, parabéns pelo desafio! Espero ter te ajudo com as dicas.

  Marked as helpful

  1