{"id":29247834,"url":"https://github.com/codingwithjiro/frontend-mentor-four-card-feature-section","last_synced_at":"2026-05-09T06:34:40.804Z","repository":{"id":301508453,"uuid":"1009464645","full_name":"CodingWithJiro/frontend-mentor-four-card-feature-section","owner":"CodingWithJiro","description":"A responsive four card feature section page built with HTML and CSS and created as part of a Frontend Mentor challenge.","archived":false,"fork":false,"pushed_at":"2025-06-27T07:28:51.000Z","size":930,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-27T08:30:53.415Z","etag":null,"topics":["3rd-month","css","frontend-mentor","git","github","html","netlify","perfectpixel","project","vscode"],"latest_commit_sha":null,"homepage":"https://four-card-feature-section-fm-jiro.netlify.app/","language":"HTML","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-06-27T07:13:10.000Z","updated_at":"2025-06-27T07:28:54.000Z","dependencies_parsed_at":"2025-06-27T08:32:11.742Z","dependency_job_id":"cb408a24-5eaa-427d-91e2-b61689bc0480","html_url":"https://github.com/CodingWithJiro/frontend-mentor-four-card-feature-section","commit_stats":null,"previous_names":["codingwithjiro/frontend-mentor-four-card-feature-section"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CodingWithJiro/frontend-mentor-four-card-feature-section","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Ffrontend-mentor-four-card-feature-section","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Ffrontend-mentor-four-card-feature-section/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Ffrontend-mentor-four-card-feature-section/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Ffrontend-mentor-four-card-feature-section/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodingWithJiro","download_url":"https://codeload.github.com/CodingWithJiro/frontend-mentor-four-card-feature-section/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Ffrontend-mentor-four-card-feature-section/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263421912,"owners_count":23464047,"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":["3rd-month","css","frontend-mentor","git","github","html","netlify","perfectpixel","project","vscode"],"created_at":"2025-07-04T00:01:46.531Z","updated_at":"2026-05-09T06:34:40.792Z","avatar_url":"https://github.com/CodingWithJiro.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Four-Card Feature Section\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)](./lighthouse/google-lighthouse-evaluation.pdf)\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/e6c40eff-4412-41e3-ba56-522caa2bd82c/deploy-status)](https://four-card-feature-section-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%203-blue)\n![Views](https://visitor-badge.laobi.icu/badge?page_id=CodingWithJiro.frontend-mentor-four-card-feature-section\u0026left_text=repo%20views)\n\n## A Clean and Responsive Four-Card Feature Section for an AI Company\n\n| _Mobile Preview (375x812)_                            | _Desktop Preview (1440x960)_                             |\n| ----------------------------------------------------- | -------------------------------------------------------- |\n| ![Mobile](./img/site-preview-mobile_375x812.png)      | ![Desktop](./img/site-preview-desktop_1440x960.png)      |\n| ![Mobile](./img/site-preview-mobile-dark_375x812.png) | ![Desktop](./img/site-preview-desktop-dark_1440x960.png) |\n\nA clean, accessible, and responsive layout that showcases four key features of an AI-driven company.\n\nCreated as part of the building challenges from **[Frontend Mentor](https://www.frontendmentor.io/)**.\n\n---\n\n## Overview\n\nThis project presents a four-card layout showcasing key offerings of a fictional AI company. It features fully semantic HTML, responsive design for mobile and desktop, and thoughtful accessibility considerations.\n\nSubtle hover transitions, dark mode support, and reduced motion preferences are integrated for a smoother and more inclusive experience. The project was coded to mirror the reference layout as closely as possible, using pixel-perfect alignment tools.\n\n---\n\n## Features\n\n- Responsive 1-to-4 card layout using CSS Grid\n- Mobile-first design approach\n- Dark mode support using `prefers-color-scheme`\n- Reduced motion compliance using `prefers-reduced-motion`\n- Custom CSS variables and utility classes\n- Semantic HTML5 elements\n- Accessible skip link and ARIA attributes\n- Clean, maintainable code with comments and structure\n\n---\n\n## What I Learned\n\n- Creating semantic, accessible HTML5 structure\n- Using ARIA labels and roles effectively\n- Implementing dark mode with media queries and variables\n- Respecting motion preferences with CSS media queries\n- CSS Grid layout with `grid-template-areas`\n- Utility class management (`.sr-only`, `.container`, etc.)\n- How to mirror JPEG image designs in code using tools like **[PerfectPixel](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonecod/dkaagdgjmgdmbnecmcefdhjekcoceebi)**\n\n---\n\n## Tech Used\n\n- HTML5\n- CSS3\n- Git\n- GitHub\n- Netlify\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://four-card-feature-section-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](./lighthouse/google-lighthouse-evaluation.pdf)**.\n\n---\n\n## Author\n\nCreated by **Elmar Chavez**\n\nMonth/Year: **June 2025**\n\nJourney: **3\u003csup\u003erd\u003c/sup\u003e** month of learning _frontend web development_.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingwithjiro%2Ffrontend-mentor-four-card-feature-section","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodingwithjiro%2Ffrontend-mentor-four-card-feature-section","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingwithjiro%2Ffrontend-mentor-four-card-feature-section/lists"}