{"id":29247273,"url":"https://github.com/codingwithjiro/frontend-mentor-order-summary-component","last_synced_at":"2026-04-17T12:34:52.014Z","repository":{"id":302273909,"uuid":"1011841056","full_name":"CodingWithJiro/frontend-mentor-order-summary-component","owner":"CodingWithJiro","description":"A responsive order summary component built with HTML and CSS. Created as part of a Frontend Mentor challenge.","archived":false,"fork":false,"pushed_at":"2025-07-01T12:29:44.000Z","size":4647,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-01T13:42:01.371Z","etag":null,"topics":["4th-month","css","frontend-mentor","git","github","html","lighthouse","netlify","perfectpixel","project","vscode"],"latest_commit_sha":null,"homepage":"https://order-summary-component-fm-jiro.netlify.app/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodingWithJiro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-01T12:17:37.000Z","updated_at":"2025-07-01T12:29:47.000Z","dependencies_parsed_at":"2025-07-01T13:55:02.907Z","dependency_job_id":null,"html_url":"https://github.com/CodingWithJiro/frontend-mentor-order-summary-component","commit_stats":null,"previous_names":["codingwithjiro/frontend-mentor-order-summary-component"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CodingWithJiro/frontend-mentor-order-summary-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Ffrontend-mentor-order-summary-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Ffrontend-mentor-order-summary-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Ffrontend-mentor-order-summary-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Ffrontend-mentor-order-summary-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodingWithJiro","download_url":"https://codeload.github.com/CodingWithJiro/frontend-mentor-order-summary-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Ffrontend-mentor-order-summary-component/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263421887,"owners_count":23464046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["4th-month","css","frontend-mentor","git","github","html","lighthouse","netlify","perfectpixel","project","vscode"],"created_at":"2025-07-04T00:01:20.146Z","updated_at":"2026-04-17T12:34:52.008Z","avatar_url":"https://github.com/CodingWithJiro.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Order Summary Component\n\n![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white)\n[![Frontend Mentor](https://img.shields.io/badge/Frontend%20Mentor-3e54a3?style=for-the-badge\u0026logo=frontendmentor\u0026logoColor=white)](https://www.frontendmentor.io/)\n[![Visual Studio Code](https://img.shields.io/badge/VS%20Code-007ACC?style=for-the-badge\u0026logo=visual-studio-code\u0026logoColor=white)](https://code.visualstudio.com/)\n[![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge\u0026logo=git\u0026logoColor=white)](https://git-scm.com/)\n[![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://github.com/)\n[![Netlify](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge\u0026logo=netlify\u0026logoColor=white)](https://www.netlify.com/)\n[![PerfectPixel](https://img.shields.io/badge/PerfectPixel-F56C94?style=for-the-badge)](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonecod/dkaagdgjmgdmbnecmcefdhjekcoceebi)\n![Image → Code](https://img.shields.io/badge/Image%20→%20Code-✔️-6a1b9a?style=for-the-badge\u0026labelColor=2e003e\u0026logoColor=white)\n![Semantic HTML](https://img.shields.io/badge/Semantic%20HTML-ff9800?style=for-the-badge)\n![Accessible](https://img.shields.io/badge/Accessibility-A11Y-0052cc?style=for-the-badge)\n![Responsive Layout](https://img.shields.io/badge/Responsive%20Layout-Full%20Support-blue?style=for-the-badge)\n![Mobile First](https://img.shields.io/badge/Mobile--First-Design-orange?style=for-the-badge)\n![Dark Mode](https://img.shields.io/badge/Dark--Mode-Available-111?style=for-the-badge\u0026logo=halfbrickstudios\u0026logoColor=white)\n[![Google Lighthouse](https://img.shields.io/badge/Lighthouse-Audit-00B0FF?style=for-the-badge\u0026logo=lighthouse\u0026logoColor=white)](./assets/downloads/lighthouse-performance-report.pdf)\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/34dc8bb6-b186-4055-afae-b89ee5937a04/deploy-status)](https://order-summary-component-fm-jiro.netlify.app/)\n![Status](https://img.shields.io/badge/status-complete-brightgreen)\n![Learning Path](https://img.shields.io/badge/learning%20path-month%204-blue)\n![Views](https://visitor-badge.laobi.icu/badge?page_id=CodingWithJiro.frontend-mentor-order-summary-component\u0026left_text=repo%20views)\n\n## A Responsive Order Summary Component for a Radio Web App\n\n| _Mobile Preview (375x812)_                                   | _Desktop Preview (1440x960)_                                    |\n| ------------------------------------------------------------ | --------------------------------------------------------------- |\n| ![Mobile](./assets/img/site-preview-mobile_375x812.png)      | ![Desktop](./assets/img/site-preview-desktop_1440x960.png)      |\n| ![Mobile](./assets/img/site-preview-mobile-dark_375x812.png) | ![Desktop](./assets/img/site-preview-desktop-dark_1440x960.png) |\n\nThis 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.\n\nCreated as part of the building challenges from **[Frontend Mentor](https://www.frontendmentor.io/)**.\n\n---\n\n## Overview\n\nThis 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.\n\nThe 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.\n\n---\n\n## Features\n\n- Fully responsive card layout\n- Dark mode and light mode support\n- Mobile-first, fluid design\n- Semantic and accessible HTML structure\n- Hero image and plan icon in SVG format\n- Custom CSS variables and transition effects\n- Accessible focus states and hidden skip link\n- Picture element with media + color-scheme queries for background art\n\n---\n\n## What I Learned\n\n- How to inspect SVG image files in the browser using “View Page Source” to extract their inline code and manipulate fill color\n- How to implement the `\u003cpicture\u003e` element with both media and color-scheme queries\n- Crafting accessible interactive elements (e.g., `\u003cbutton\u003e`, `\u003ca\u003e`)\n- Designing adaptive dark mode themes with CSS variables\n- Adding conditional transitions for `prefers-reduced-motion`\n- Improving project polish during final stages (hover/focus effects, meta tags, shadows)\n\n---\n\n## Tech Used\n\n- HTML5\n- CSS3\n- Git\n- GitHub\n- Netlify\n\n---\n\n## Design Reference \u0026 Tools\n\n- JPG design image\n- PerfectPixel\n\n---\n\n## How to Run\n\n1. Clone the repository\n2. Open `index.html` in your browser\n\n---\n\n## Live Demo\n\nOr you can check out the **[live website here](https://order-summary-component-fm-jiro.netlify.app/)**\n\n---\n\n## Performance Report\n\nA **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)**.\n\n---\n\n## Author\n\nCreated by **Elmar Chavez**\n\nMonth/Year: **July 2025**\n\nJourney: **4\u003csup\u003eth\u003c/sup\u003e** month of learning _frontend web development_.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingwithjiro%2Ffrontend-mentor-order-summary-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodingwithjiro%2Ffrontend-mentor-order-summary-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingwithjiro%2Ffrontend-mentor-order-summary-component/lists"}