This is a solution to the Order summary component challenge on Frontend Mentor.
The card was created in a mobile-first workflow with semantic HTML markup and Flexbox. Text color contrast ratios follow WCAG 2.0 level AA. Its button has hover and focus states to provide feedback to the user and ensure great tab navigation.
Users should be able to:
- See hover states for interactive elements
| Mobile | Desktop | |
|---|---|---|
 |
 |
In this project, I have practiced the following skills:
- Using Flexbox to create a card layout
- Using CSS relative units to ensure the text scales according to the user's font size settings
- Using CSS custom properties to allow easy customization and reusability of the card
- Using media queries to adapt the card's layout to larger screens
- Creating an accessible component by ensuring it uses WCAG 2.0 level AA contrast ratios in text
- Styling buttons with different states
- Styling elements with box shadows
- Positioning background images
- Using Git and GitHub
- A Complete Guide to Links and Buttons — Chris Coyier (CSS-Tricks) - This guide covers many of the aspects that should be considered when working with links, buttons and button-like inputs.
- Contrast Checker — WebAIM - An excellent tool that makes it easy to check if color contrast ratios meet WCAG.
- Frontend Mentor - @JulioCinquina