Responsive Testimonial Section Using CSS Grid
Design comparison
Solution retrospective
Hey, everybody! 👋
This was a nice, simple challenge that I enjoyed and in which I was reminded of the joys of using CSS grid! 😂
I added some subtle hover effects to the testimonial cards to keep things a little interesting. 😉
BTW, if anyone's interested, here's a little cheat sheet for CSS grid that I find is a nice, quick reference.
As always, feedback is welcome and appreciated! 😊
Happy coding! 😁
Community feedback
- @rfilenkoPosted about 4 years ago
Hey, great job on this one, specially css grid usage. Would maybe use more semantic tags. Also noticed stagering, wobbl text, when hover effect appears on a .card (scale is causing it, play around with values to fix it, adding line-height, backface-visibility or font-smoothing could help). Still don't understand what's the purpose of this hover effect - it's not an interactive element (button, link), but could rather confuse user from ux perspective😉, in my mind. Hope this was helpful.
Cheers, Roman
3@ApplePieGiraffePosted about 4 years ago@rfilenko
Thanks for the feedback!
I was wondering whether I should add any hover state to the cards since, as you said, there isn't much of a point in having one other than perhaps adding a little extra movement and bringing the hovered element into slightly more attention. But anyway, I'll look into those properties you suggested to see how I can make such animations smoother!
0 - @brasspetalsPosted about 4 years ago
Fantastic job and essentially pixel-perfect! 🙌 I actually like the hover effect (I think we're both a fan of adding little effects for fun), but I see Roman's point about UX and there is a subtle shifting with the text - always seems to be the pain with using scale. I don't detect it in Firefox, but it does show up in the Chromium browers with the author text.
Also thanks for the grid cheat-sheet share!
2 - @BerylBucketPosted about 4 years ago
Looks awesome! Minor nitpick but the design called for a purple outline around the Patrick Abrams avatar you made it gray. Regardless, excellent work.
1@ApplePieGiraffePosted about 4 years ago@BerylBucket
Haha... I actually noticed that but didn't bother to change it since it seemed like such a tiny detail! But thanks, anyways—you have great attention to detail! 😄
0
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