One page · Front-end interface
Testimonials is a build based on the Frontend Mentor challenges, starting from a design image to recreate a one-page layout from scratch with HTML & CSS.
Testimonials is a build based on the Frontend Mentor challenges, starting from a design image to recreate a one-page layout from scratch with HTML & CSS.
Testimonials are a great way to show potential customers what your clients think of your product or service.
This exercise highlights my command of pixel-perfect integration and of modern layout with CSS Grid. It demonstrates my ability to translate a design into a clean, responsive interface, to structure clear HTML and to handle the visual consistency of a set of repeated components, from large screens down to mobile.
The challenge
Faithfully reproduce, from a single image design, a multi-column testimonials grid in HTML and CSS, while ensuring a consistent responsive rendering from desktop to mobile.
The solution
- A from-scratch rebuild of the Frontend Mentor "Testimonials grid" challenge, without reusing any provided code.
- A grid of testimonial cards structured with CSS Grid for clean alignment across several columns.
- Semantic and lightweight HTML, with CSS dedicated to the spacing, rounded corners and typographic hierarchy of the cards.
- A responsive layout from desktop to mobile, faithful to the original design.
Layout with CSS Grid
Organizing the testimonial cards in a multi-column grid, with precise placement faithful to the original design.
Responsive integration
Adapting the grid from desktop to tablet then to mobile, without any framework, in pure HTML and CSS.
Pixel-perfect integration
A faithful reproduction of the design: typographic hierarchy, card colors, spacing and portraits respected down to the detail.
Desktop version
Tablet version
Carousel Vertical
Discover a new way to scroll through your photos, with a vertical carousel.
Carte Animee
The animated card is an interactive feature that lets users hide information on a card and reveal it on hover.
Carte QR Code
Carte QR Code is a build based on the Frontend Mentor challenges, starting from a design image to recreate a one-page layout from scratch with HTML & CSS.
A project along the same lines?
Tell me about your needs — I'll quickly let you know what's relevant and realistic.