Skip to content
Submitted about 2 years ago

Vanilla CSS, Media query, Flexbox

Bruno Afonso•110
@BrunoAfonsoOliveira
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

I felt a big struggle with the image, i didn´t know how to manipulate it, and i think i used so much media queries. Feel free to suggest improvements!

Community feedback

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

    OI Bruno, beleza?

    Duas dicas pra vc melhorar sua imagem. Para tornar sua imagem totalmente responsiva, adicione display: block e max-width: 100% e object-fit: cover para fazer o corte automático da imagem ao redimensionar dentro da coluna:

    img {
    display: block;
    object-fit: cover;
    max-width: 100%;
}

    Para adicionar exatamente o mesmo efeito de sobreposição roxo para a imagem, combinando os arquivos de design que você pode usar, filter, background-blend-mode ou mix-blend-mode: multiply; (a melhor escolha na minha opinião). Veja o código abaixo ```

    img { mix-blend-mode: multiply; opacity: 0.8;}

    Espero que ajude e continue no foco
    Marked as helpful
    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