Skip to content
Submitted over 4 years ago

Responsive Testimonial Section Using CSS Grid

ApplePieGiraffe•30,525
@ApplePieGiraffe
A solution to the Testimonials grid section challenge
Preview (opens in new tab)Code (opens in new tab)

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! 😁

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Roman Filenko•3,335
    @rfilenko

    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

  • Anna Leigh•5,135
    @brasspetals

    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!

  • BerylBucket•280
    @BerylBucket

    Looks awesome! Minor nitpick but the design called for a purple outline around the Patrick Abrams avatar you made it gray. Regardless, excellent work.

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