Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML + CSS responsive page

@BernardoHollmann

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I know it's not perfect and that I did a lot of mistakes, but I hope this is ok. Maybe a grid approach would be better for this type of project.

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Fala Bernardo, tudo bem? Parabéns pelo desafio!

Mto boa sua solução, a única coisa que eu mudaria era o código pra fazer esse efeito roxo na foto, da pra encurtar. 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;}

Aqui a documentação explicando esse efeito mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

👋 Espero ter ajudado e continue no foco!

Marked as helpful

1

@BernardoHollmann

Posted

@correlucas Wow! Realmente fica muito melhor com o mix-blend-mode: multiply! Obrigado pela dica, Lucas!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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