One page · Front-end interface
Carte Recapitulatif Commande: Order Summary Card is a build based on the Frontend Mentor challenges, starting from an image design to recreate a one-page layout from scratch with HTML & CSS.
Order Summary Card is a build based on the Frontend Mentor challenges, starting from an image design to recreate a one-page layout from scratch with HTML & CSS.
With the order summary card, you are informed of every detail before making a decision. This card lets you display all the subscription information, including the cost, the plan type and other important details.
This exercise helps me keep my integration fundamentals sharp: faithfully reproducing a design, finely handling spacing and typography, hover states and readable CSS. It is a short format that concretely demonstrates my discipline with HTML and CSS, the foundation of any clean web interface.
The challenge
Faithfully reproduce an "Order Summary Card" design from a simple image, using only HTML and CSS.
The solution
- Clear HTML structure for the subscription summary card.
- Card layout in CSS with Flexbox and precise spacing management.
- Responsive integration with hover states on the action buttons.
Integration faithful to the design
A from-scratch reproduction of the design provided by Frontend Mentor, with care given to spacing, typography and colors to stay close to the original visual.
Layout in CSS
Card structure handled with Flexbox to align the illustration, plan name, price and buttons, in clean and maintainable HTML and CSS code.
Responsive card
The display adapts to mobile, tablet and desktop screens, with hover states on the actions for a more lively interface.
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.