Testimonials Grid Section

This is a solution to the Testimonials Grid Section challenge on Frontend Mentor. The challenge is to build a responsive testimonials grid using HTML and CSS.

Overview

The project consists of a testimonials section that displays multiple user testimonials in a responsive grid layout. The design adapts to different screen sizes for optimal viewing.

Features

• Responsive design for both mobile and desktop views.
• Clean and modern grid layout.
• Optimized images and accessible markup.

Lesson

• Implemented CSS Grid and Flexbox for advanced layout control.
• Practiced using custom properties and responsive design techniques.

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: Vercel

Built With

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

Design

The design includes:

Colors

• Purple 50: hsl(260, 100%, 95%)

• Purple 300: hsl(264, 82%, 80%)

• Purple 500: hsl(263, 55%, 52%)

• White: hsl(0, 0%, 100%)

• Grey 100: hsl(214, 17%, 92%)

• Grey 200: hsl(0, 0%, 81%)

• Grey 400: hsl(224, 10%, 45%)

• Grey 500: hsl(217, 19%, 35%)

• Dark blue: hsl(219, 29%, 14%)

• Black: hsl(0, 0%, 7%)

Typography

Body Copy

• Font size (paragraph): 13px

Fonts

• Family: Barlow Semi Condensed
• Weights: 500, 600

Author

• Frontend Mentor - @boompow

Acknowledgments

Designs provided by Frontend Mentor.

Special thanks to the Frontend Mentor community for their support and feedback.