Testimonial Page: UI Layout

Note

This repository contains a legacy project from my early days as a programmer

This project represents a significant step forward in my early learning path. After mastering basic positioning, I moved on to exploring modern layout techniques and relative sizing to create more scalable components.

---

🚀 Demo

SEE DEMO HERE

---

Screenshot

---

📋 Evolution & Context Note

⚠️ Note on my trajectory: This repository serves as a record of my technical growth and is not indicative of my current Fullstack capabilities. In this specific project, I transitioned from using fixed pixels to relative units (rem) and made my first incursions into CSS Grid and Media Queries. It marks the moment I began thinking about responsiveness and code reusability.

📋 Technical Milestones of this Stage

In this phase, I focused on evolving my CSS toolkit with:

• Grid & Flexbox Integration: Using display: grid for the main two-column layout and display: flex for internal component alignment (stars, list items).
• Scalable Sizing: Transitioning to rem units for padding, margins, and font sizes, ensuring a more consistent professional structure.
• Advanced SVG Styling: Implementing internal SVG definitions like <linearGradient> and filter: drop-shadow to achieve custom visual effects directly in the code.
• Responsive Foundations: First implementation of @media queries to adapt the layout for different screen widths (Mobile and Desktop views).
• Pseudo-elements: Use of ::before to create decorative background shapes behind icons.

🛠️ Technologies (at the time)

• HTML5: Structured sections using <main> and <section>.
• CSS3: CSS Grid, Media Queries, and advanced SVG filtering.
• Google Fonts: Integration of the 'Sora' typeface family.