Social Proof Section – Customer Ratings & Testimonials

📸 Screenshot

📄 Overview

This is a responsive layout that showcases customer ratings and user testimonials for a product. It uses a clean, modern design with flexbox and CSS grid to display a main heading, rating blocks, and individual user cards.

🧩 The Challenge

Create a social proof component that includes:

• A main title and paragraph
• Multiple 5-star rating badges
• Three testimonial cards with user photos, names, and quotes
• Fully responsive layout for both desktop and mobile

🛠️ Built With

• HTML5
• CSS3 (Flexbox & Grid)
• Custom properties (--vars) for colors and spacing
• Media queries for responsive adjustments
• Semantic HTML and accessibility basics

🎯 What I Learned

How to align and space elements using flexbox and gap Nesting grids inside flex layouts Styling interactive star ratings with visuals only Building card components that are clean and responsive

🚀 Continued Development

Add hover effects or transitions for more interactivity Convert the ratings to actual interactive components (e.g. using JavaScript) Add a form for users to submit their own testimonials