Data

Tools

Indexes

Applications

Experiments

Awesome

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

https://github.com/codingwithjiro/frontend-mentor-four-card-feature-section

A responsive four card feature section page built with HTML and CSS and created as part of a Frontend Mentor challenge.
https://github.com/codingwithjiro/frontend-mentor-four-card-feature-section

3rd-month css frontend-mentor git github html netlify perfectpixel project vscode

Last synced: about 1 month ago
JSON representation

A responsive four card feature section page built with HTML and CSS and created as part of a Frontend Mentor challenge.

Awesome Lists containing this project

README 

          
# Four-Card Feature Section



![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)](./lighthouse/google-lighthouse-evaluation.pdf)



[![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/)

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

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

![Views](https://visitor-badge.laobi.icu/badge?page_id=CodingWithJiro.frontend-mentor-four-card-feature-section&left_text=repo%20views)



## A Clean and Responsive Four-Card Feature Section for an AI Company



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

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

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

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



A clean, accessible, and responsive layout that showcases four key features of an AI-driven company.



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



---



## Overview



This 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.



Subtle 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.



---



## Features



- Responsive 1-to-4 card layout using CSS Grid

- Mobile-first design approach

- Dark mode support using `prefers-color-scheme`

- Reduced motion compliance using `prefers-reduced-motion`

- Custom CSS variables and utility classes

- Semantic HTML5 elements

- Accessible skip link and ARIA attributes

- Clean, maintainable code with comments and structure



---



## What I Learned



- Creating semantic, accessible HTML5 structure

- Using ARIA labels and roles effectively

- Implementing dark mode with media queries and variables

- Respecting motion preferences with CSS media queries

- CSS Grid layout with `grid-template-areas`

- Utility class management (`.sr-only`, `.container`, etc.)

- How to mirror JPEG image designs in code using tools like **[PerfectPixel](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonecod/dkaagdgjmgdmbnecmcefdhjekcoceebi)**



---



## Tech Used



- HTML5

- CSS3

- Git

- GitHub

- Netlify

- 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://four-card-feature-section-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](./lighthouse/google-lighthouse-evaluation.pdf)**.



---



## Author



Created by **Elmar Chavez**



Month/Year: **June 2025**



Journey: **3rd** month of learning _frontend web development_.