Skip to content
Submitted over 3 years ago

Testimonials Grid Section | Animated! | Subttle Gradients | BEM

Demian•245
@denik1981
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi Devs!

Add a little animation at load time (desktop only) There is a small vanilla JS snippet that prevents the animation from running twice when the user resizes the window or disables it completely when it is rendered on a mobile device.

Cards are styled with subtle gradients, drop, and inner shadows to give them a little bit of texture and prevent them look flat.

Any feedback is very welcome :)

Community feedback

  • Grace•31,270
    @grace-snowPosted over 3 years ago

    This looks good (viewing on mobile). I really like gradients, improves readability I think

    You need to rethink the html semantics on this though. You could use figures and/or blockquotes... But most importantly what you currently have as h2s don't make sense as headings and the rest of the content is in a div when it needs to be in a meaningful element. Remember whole sentences wouldn't be headings. I find it helpful to think: what would be the heading (where needed) if this had no styling at all and was written as a normal document.

    Marked as helpful
    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