Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/codingwithjiro/frontend-mentor-order-summary-component

A responsive order summary component built with HTML and CSS. Created as part of a Frontend Mentor challenge.
https://github.com/codingwithjiro/frontend-mentor-order-summary-component

4th-month css frontend-mentor git github html lighthouse netlify perfectpixel project vscode

Last synced: 2 months ago
JSON representation

A responsive order summary component built with HTML and CSS. Created as part of a Frontend Mentor challenge.

Awesome Lists containing this project

README 

          
# Order Summary Component



![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)

[![Frontend Mentor](https://img.shields.io/badge/Frontend%20Mentor-3e54a3?style=for-the-badge&logo=frontendmentor&logoColor=white)](https://www.frontendmentor.io/)

[![Visual Studio Code](https://img.shields.io/badge/VS%20Code-007ACC?style=for-the-badge&logo=visual-studio-code&logoColor=white)](https://code.visualstudio.com/)

[![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)](https://git-scm.com/)

[![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/)

[![Netlify](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white)](https://www.netlify.com/)

[![PerfectPixel](https://img.shields.io/badge/PerfectPixel-F56C94?style=for-the-badge)](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonecod/dkaagdgjmgdmbnecmcefdhjekcoceebi)

![Image → Code](https://img.shields.io/badge/Image%20→%20Code-✔️-6a1b9a?style=for-the-badge&labelColor=2e003e&logoColor=white)

![Semantic HTML](https://img.shields.io/badge/Semantic%20HTML-ff9800?style=for-the-badge)

![Accessible](https://img.shields.io/badge/Accessibility-A11Y-0052cc?style=for-the-badge)

![Responsive Layout](https://img.shields.io/badge/Responsive%20Layout-Full%20Support-blue?style=for-the-badge)

![Mobile First](https://img.shields.io/badge/Mobile--First-Design-orange?style=for-the-badge)

![Dark Mode](https://img.shields.io/badge/Dark--Mode-Available-111?style=for-the-badge&logo=halfbrickstudios&logoColor=white)

[![Google Lighthouse](https://img.shields.io/badge/Lighthouse-Audit-00B0FF?style=for-the-badge&logo=lighthouse&logoColor=white)](./assets/downloads/lighthouse-performance-report.pdf)



[![Netlify Status](https://api.netlify.com/api/v1/badges/34dc8bb6-b186-4055-afae-b89ee5937a04/deploy-status)](https://order-summary-component-fm-jiro.netlify.app/)

![Status](https://img.shields.io/badge/status-complete-brightgreen)

![Learning Path](https://img.shields.io/badge/learning%20path-month%204-blue)

![Views](https://visitor-badge.laobi.icu/badge?page_id=CodingWithJiro.frontend-mentor-order-summary-component&left_text=repo%20views)



## A Responsive Order Summary Component for a Radio Web App



| _Mobile Preview (375x812)_                                   | _Desktop Preview (1440x960)_                                    |

| ------------------------------------------------------------ | --------------------------------------------------------------- |

| ![Mobile](./assets/img/site-preview-mobile_375x812.png)      | ![Desktop](./assets/img/site-preview-desktop_1440x960.png)      |

| ![Mobile](./assets/img/site-preview-mobile-dark_375x812.png) | ![Desktop](./assets/img/site-preview-desktop-dark_1440x960.png) |



This is a fully responsive Order Summary card component that adapts to light/dark themes and various screen sizes and presents a fictional subscription plan with semantic HTML, accessible markup, and polished visuals.



Created as part of the building challenges from **[Frontend Mentor](https://www.frontendmentor.io/)**.



---



## Overview



This component simulates an order summary card for a radio or music streaming web app. It features a structured layout, an engaging hero image, plan details, and CTA buttons.



The design is responsive across breakpoints and supports light and dark themes through the use of the `prefers-color-scheme` media query. Extra attention was given to visual polish (shadows, hover states, transitions), as well as accessibility.



---



## Features



- Fully responsive card layout

- Dark mode and light mode support

- Mobile-first, fluid design

- Semantic and accessible HTML structure

- Hero image and plan icon in SVG format

- Custom CSS variables and transition effects

- Accessible focus states and hidden skip link

- Picture element with media + color-scheme queries for background art



---



## What I Learned



- How to inspect SVG image files in the browser using “View Page Source” to extract their inline code and manipulate fill color

- How to implement the `` element with both media and color-scheme queries

- Crafting accessible interactive elements (e.g., ``, ``)

- Designing adaptive dark mode themes with CSS variables

- Adding conditional transitions for `prefers-reduced-motion`

- Improving project polish during final stages (hover/focus effects, meta tags, shadows)



---



## Tech Used



- HTML5

- CSS3

- Git

- GitHub

- Netlify



---



## Design Reference & Tools



- JPG design image

- PerfectPixel



---



## How to Run



1. Clone the repository

2. Open `index.html` in your browser



---



## Live Demo



Or you can check out the **[live website here](https://order-summary-component-fm-jiro.netlify.app/)**



---



## Performance Report



A **Google Lighthouse** audit was conducted on the final version of this project. You can view the **[full report here](./assets/downloads/lighthouse-performance-report.pdf)**.



---



## Author



Created by **Elmar Chavez**



Month/Year: **July 2025**



Journey: **4th** month of learning _frontend web development_.