Frontend Mentor - Testimonials grid section solution

This is a solution to the Testimonials grid section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Screenshot

Links

• Solution URL: Frontend Mentor Solution
• Live Site URL: Live Site at Vercel

My process

Built with

• Semantic HTML5 markup
• Flexbox
• Grid
• Responsive Design
• CSS Animations
• Media queries
• Mediakit-animations

What I learned

The best thing I learned in this challenge is how to use a hover effect on an element that affect all elements before and after this element hovered. Using a an effect that works like a general sibling that select also the previous elements. You can see that in the focus effect that I apply on the card section of my website.

Useful resources

• CSS Previous sibling selectors - Previous sibling selectors
• Dealing With Hover on Mobile - Dealing With Hover on Mobile
• W3 - Figure Tag - W3 - Figure Tag
• Figure Tag Explained - Figure Tag Explained

Author

• Github - correlucas
• Frontend Mentor - @correlucas