Design comparison
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
- @correlucasPosted about 2 years ago
OI Bruno, beleza?
Duas dicas pra vc melhorar sua imagem. Para tornar sua imagem totalmente responsiva, adicione
display: block
emax-width: 100%
eobject-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
oumix-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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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