One page · Interface front-end
Testimonials : grille de témoignages responsive intégrée en HTML et CSS
Testimonials est un exercice d'intégration front-end inspiré du challenge « Testimonials grid » de Frontend Mentor. À partir d'une simple maquette image, j'ai reconstruit de zéro cette page unique présentant plusieurs cartes de témoignages. L'objectif : retrouver fidèlement la mise en page d'origine, sans framework, uniquement avec du HTML et du CSS.
Côté technique, la page repose sur CSS Grid pour organiser les cartes de témoignages selon une grille à plusieurs colonnes. Chaque carte combine portrait, nom, statut et citation, avec une hiérarchie typographique et un jeu de couleurs propres à chacune. Le HTML reste sémantique et léger, le CSS gère espacements, arrondis et superpositions pour coller au modèle fourni.
Cet exercice met en avant ma maîtrise de l'intégration pixel-perfect et de la mise en page moderne avec CSS Grid. Il démontre ma capacité à traduire une maquette en interface responsive propre, à structurer un HTML clair et à gérer la cohérence visuelle d'un ensemble de composants répétés, du grand écran jusqu'au mobile.
Le défi
Reproduire fidèlement, à partir d'une seule maquette image, une grille de témoignages multi-colonnes en HTML et CSS, tout en assurant un rendu responsive cohérent du desktop au mobile.
La solution
- Reconstruction de zéro du challenge Frontend Mentor « Testimonials grid », sans réutiliser de code fourni.
- Grille de cartes de témoignages structurée avec CSS Grid pour un alignement net sur plusieurs colonnes.
- HTML sémantique et léger, CSS dédié aux espacements, arrondis et hiérarchie typographique des cartes.
- Mise en page responsive du desktop au mobile, fidèle au modèle d'origine.
Mise en page en CSS Grid
Organisation des cartes de témoignages dans une grille à plusieurs colonnes, avec un placement précis fidèle à la maquette d'origine.
Intégration responsive
Adaptation de la grille du desktop à la tablette puis au mobile, sans framework, en pur HTML et CSS.
Intégration pixel-perfect
Reproduction fidèle de la maquette : hiérarchie typographique, couleurs des cartes, espacements et portraits respectés au détail près.
Version desktop
Version tablette
Carousel Vertical
Un exercice front-end où j'ai conçu un carrousel d'images à défilement vertical pour une présentation photo immersive, en HTML, CSS et JS.
Carte Animee
Exercice front-end one page : une carte interactive qui masque ses informations puis les révèle au survol, en HTML, CSS et JS.
Carte QR Code
Exercice Frontend Mentor : j'ai reproduit en pixel-perfect une carte affichant un QR code, intégrée de zéro en HTML et CSS.
Un projet dans le même esprit ?
Parlez-moi de votre besoin : je vous dis rapidement ce qui est pertinent et réaliste.