Design comparison
SolutionDesign
Solution retrospective
This is my solution for this challenge.
I hope I'm getting better at this.
Community feedback
- @PipouwPieuwPosted over 1 year ago
This looks clean!
The hover effect on the image doesn't trigger though. Not sure why as I see you included an "overlay" element next to the image.
To center the card on your page, instead of setting a fixed padding to the body you can use :
body { display: flex; justify-content: center; // Center content horizontally align-items: center; // Center content vertically min-height: 100%; // So the body is at least as tall as the window }
Also your images are missing an alt attribute. This is important for accessibility. :)
Good job overall, you're getting there !
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