Testimonials Grid Section

A responsive testimonials grid section built as part of a Frontend Mentor challenge, focusing on layout composition, layering, and scalable CSS architecture.

---

🔧 Built With

• HTML5 (semantic markup)
• CSS3
• CSS Grid
• Flexbox
• Sass (SCSS)

---

🧠 Methodology

• BEM (Block, Element, Modifier) naming convention
• Mobile-first workflow
• Component-based CSS structure
• Separation of layout styles and component styles

---

✨ Features

• Fully responsive layout (mobile → tablet → desktop)
• Accurate spacing, typography, and alignment based on Figma design
• Decorative SVG quotation mark layered behind content
• Clean and maintainable SCSS structure
• Consistent card styling with modifier-based variations

---

🧠 What I Learned

• How to layer decorative elements using position and z-index
• The difference between layout responsibility (Grid) and content flow (Flexbox)
• How to structure BEM modifiers for card variants
• How small CSS decisions (gap vs padding) affect scalability
• How to balance pixel accuracy with maintainability

---

📸 Screenshot

---

🚀 Live Demo

View live on GitHub Pages