box-shadow, display: flex, width, border-radius, background-color
Design comparison
Solution retrospective
Não sabia que no box-shadow podia deixar a sombra muito em negrito, achei esse estilo de card diferente. De diferente que eu faria era adicionar uma cor gradiente combinando com o fundo amarelo e a sombra do card.
What challenges did you encounter, and how did you overcome them?Os desafios que passei foi acertar o tamanho da imagem do card com os texto em baixo, mas com a ajuda do chatGPT, eu consegui ajustar o tamanho.
What specific areas of your project would you like help with?Queria entender melhor sobre como funciona o "transform" e o "translate" na parte do CSS.
Community feedback
- Account deleted
👋🏻 Hey @Carmo22b I have a few suggestions for your solution.
-
Avoid Using Margins for Alignment: Instead of using
margin
to align items, as you did in.Learning{}
, it's generally not the best practice to use margins for alignment. One solution could be to settext-align: start
to align the text properly. Another option is to make use of the Flexbox properties you have already set on the parent container. For example, you can usealign-items
andjustify-content
-
instead of manually adding
margin
you could use properties likegap
to manage spacing between items .
Other than that it looks perfect! 👍 I hope you find this helpful 😊
0 -
- @muriloviscondiPosted 4 months ago
Great job!
Only a few inconsistence about font size and text color, but your html and css are very organized
0 - @MrBradley815Posted 4 months ago
This looks really close! Only thing I would watch out for is your font. Your font sizing and line heights are a little off. Straighten those out and this will be great!
0
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