Design comparison
Solution retrospective
Its been quite some time since I did any challenges. S I'm just really happy I managed to complete this task with the result I did.
What challenges did you encounter, and how did you overcome them?It took me a while to figure out how to set the grid.
I ended up setting two grids, each as display: inline-grid
.
One for the two left "cards" and then one for the remaining elements.
Would there have been a way to do this challenge with just one single grid?
I also added a small hover effect to the cards, so that they translate(-10px,-10px)
and a box-shadow
shows when you over over it. How could I slow down these effects so that its a bit easier on the eyes?
Community feedback
- @KareemaymanPosted 24 days ago
Good job on choosing the right dimensions and proper pixels for the design, It looks identical 👏
To answer your questions, yes you could do the challenge with just 1 grid by dividing the container into more rows. I recommend looking up grid-column & grid grid-row properties on child elements as they allow you to have full control of the container grid.
And to make the hovering effect slower & easy on the eyes you can use transition property for both translate & box-shadow properties so when you hover it changes state slower.
2
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