Skip to content
Submitted over 2 years ago

Responsive stats preview card with Flexbox, Grid and media queries

Julio Cinquina•270
@JulioCinquina
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

Hi, everyone! 👋🏻

This was my first time using Grid in a Frontend Mentor challenge, and I can't wait to learn more about it. I have two questions about the card's image:

I inserted the image with background-image so that I could use background-blend-mode: multiply to create the purple color effect. For the containing <div> to match the size of the background image, I added it in the markup too — with the <picture> element — and set its visibility to none.

This feels like a hack — adding the image "twice" —, but it was the easiest way I could find to make the <div> match the background image size exactly. Questions:

  • Since the images in the <picture> element and in background-image are the same, I imagine that this would not affect performance — the image would only be downloaded once. Is this correct?
  • Is there a better way to make the <div> match the size of the background image?

Any other feedback will be much appreciated. Thank you!

Community feedback

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

    Fala Júlio, parabéns pela sua nova solução!

    Sua solução ficou muito boa, tá quase tudo batendo com a imagem do desafio.

    Vi que você tem usado BEM, minha dica pra você é usar Bem em projetos maiores, tipo uma landing page. Nesse projeto aqui você consegue limpar 50% do código so excluindo as classes e usando os seletores diretos para cada elemento tipo h1, p, ul, picture deixando o código o mais limpo possível, visto que nesse desafio não mais de um elemento de cada tipo. E nesse caso os nomes das classes com BEM vão ser gigantes.

    Pro efeito overlay use mix-blend-mode: multiply e opacidade 75 que você já consegue a cor exata do desafio.

    Continue no foco, gosto muito dos seus feedbacks nas soluções dos outros 👏

    Marked as helpful
    1
    Julio Cinquina•270
    @JulioCinquinaPosted over 2 years ago

    Muito obrigado, Lucas!

    Atualizei o código com a sua dica e a solução ficou ainda mais próxima da imagem do desafio. Coloquei um agradecimento a você no repositório!

    Tenho visto seus feedbacks aqui no site também, eles são sempre completos e muito úteis, ajudam bastante a comunidade!

    1
    Lucas 👾•104,400
    @correlucasPosted over 2 years ago

    @JulioCinquina Valeu Julio, fiquei feliz pela menção =)

    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