Design comparison
SolutionDesign
Solution retrospective
I made this with more advanced CSS by using some properties that I never used them before. I googled a lot and I found the following here: css-tricks.com.
- ::after : The ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML.
- :nth-child : The :nth-child selector allows you to select one or more elements based on their source order, according to a formula.
- em instead of rem : As Jeremy Church said: While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.
- object-fit: The object-fit property defines how an element responds to the height and width of its content box. It’s intended for images, videos and other embeddable media formats in conjunction with the object-position property.
Any feedback for improvement is welcome.
Community feedback
- @FlorianJourdePosted about 3 years ago
Prety cool ! I was waiting for a kind of API response, but it seems this challenge is static. However, you did a pretty nice job with pseudo elements. Also, responsive is really good !
My only suggestion would be to go by mobile-first workflow, but I guess it's a choice. Your integration seems pretty strong, so keep coding ! It's already great
1
Please log in to post a comment
Log in with GitHub
Join 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