Design comparison
Solution retrospective
this is my first challenge
Community feedback
- @correlucasPosted over 2 years ago
👾Fala Marco, tudo bem? Parabéns pela sua solução.
Vi aqui que você usou
overflow: hidden;
e faz sentido, mas se você prestar atenção quando a tela começa a diminuir e os elements de texto começam a se movimentar pra ajustar na tela, ooverflow: hidden;
começa a cortar o texto dentro container. Minha sugestão seria você ativar o media query um pouco antes dos textos começarem a cortar ou tirar o overflow.Pra bater exatamente o mesmo efeito de cor na imagem, você precisa adicionar a image no html com <img> e colocar no css o efeito
mix-blend-mode: multiply;
e opacidadeopacity: 0.7;
Espero ter te ajudo e parabéns, vi seu último projeto e ficou bem foda.
Marked as helpful1@MarcoFrancaPosted over 2 years ago@correlucas obrigado pelo feedback! é verdade, vou corrigir e me atentar nos outros códigos
quanto ao
mix-blend-mode: multiply;
com opacidade, eu desconhecia da existencia, muito obrigado por compartilhar o seu conhecimento.1 - @Luis15HerrPosted over 2 years ago
Hello, you could use a:
background-size: cover;
In your class: .card--img
So that the background-img of your div: fills all the free space.
Marked as helpful0@MarcoFrancaPosted over 2 years ago@Luis15Herr Hi, thanks a million for your explanation.
now my code is much better
1
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