
Design comparison
Solution retrospective
I'm proud about using translate
& transition
property. because it made elements looks more lively
Also, I just known about using CSS Selector
in another CSS Selector because it maybe opens up my creativity but it seems to have some issues. Maybe there is more ways to do stuff like that
Aligning elements vertically is somehow difficult than horizontally because i tried to use align-items: center but its not working for me so i'm searching for any methods and i found out that i need another container element to wraps up the card itself and its now works perfectly fine
About the label name "Learning" (which i called info-status
in this project) it stretches out by parent element which i set the property as display: flex
and it uses all the width of the element and i asking people if there any solutions there and i got some tips from @gracesnow that i can use display: inline-block
for a single child element in Flexbox and its worked
I don't know if is there any better way to do this or more accurate than this. I want to know if there any best practices or more tips & tricks about this
Community feedback
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