Skip to content
Submitted about 2 years ago

Testimonials Grid Section Main

Othman El Hassnaoui•70
@othmanhs
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

Feel free to leave any feedback and help me improve my solution or make the code clean! This design fully responsive I added some features i see them on @correlucas solution that's make me learn new things like 🎨 Focus effect on hover. 👨‍🔬 Focus effect on card hovered.

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello Othman El Hassnaoui, congratulations for your new solution!

    Great solution man! I can say you two things to improve it even more, one is the border-radius is too much rounded you can improve that with border-radius: 12px thats the original roundness for this challenge.

    I saw that you've add the effect focus on the card, there's on accessibility issue that makes the hover effect get sticky and stuck when you click on these cards on mobile. One way to improve this issue with sticky hover on mobile is use a special media query to avoid it on touch mobiles.

    @media (hover:hover) {
INSERT ALL THE CLASS WITH HOVER HERE
}

    All the classes with hover you add inside this media query will work only in desktop and non-touch devices.

    👾My rating for this solution: ⭐⭐⭐⭐⭐

    👋 I hope this helps you and happy coding!

    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