Design comparison
Solution retrospective
Hello again!
One more time here I am.
In this card I didn't put the image when move the cursor over the central image (:hover), if someone know how to put that I'm here to learn. furthermore, I'm improving my skills on css, and some things didn't turn out the way I wanted (filter and opacity), but I know I'm going the right way.
Some tips and suggestions are welcome. Thank You!
Community feedback
- @correlucasPosted about 2 years ago
👾Oi de novo Eliseu , tudo bem? Parabéns pelo desafio!
Acabei de ver sua solução e tenho algumas dicas pra melhorar o código e o design:
1.Adicione uma transição pra fazer os efeitos de hover ficarem mais suaves entre o estado ativo e inativo. Um bom valor pra esse hover é
transition: all ease-in 0.5s
.2.Você pode criar uma media query pra fazer o conteúdo da section do preço pra cada informação ficar em uma linha diferente quando o card começar a diminuir muito:
@media (max-width: 350px) { .eth { width: 100%; display: flex; margin-top: 20px; flex-direction: column; align-items: center; justify-content: center; } }
3.Pra melhorar a performance em diferentes dispositivos e tipos de tela você pode usar
rem
eem
ao invés depx
.👋 Espero ter ajudado e continue no foco!
Marked as helpful0
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