https://github.com/ayokanmi-adejola/simple-feature-section
A pixel-perfect, fully responsive feature section built for the devChallenges.io "Simple Feature Section" challenge. This project demonstrates modern HTML5 and CSS3 best practices, including semantic markup, Flexbox layouts, custom properties, and adaptive design for all devices.
https://github.com/ayokanmi-adejola/simple-feature-section
css3 flexbox-layout google-fonts html5 mobile-first-workflow
Last synced: 8 months ago
JSON representation
A pixel-perfect, fully responsive feature section built for the devChallenges.io "Simple Feature Section" challenge. This project demonstrates modern HTML5 and CSS3 best practices, including semantic markup, Flexbox layouts, custom properties, and adaptive design for all devices.
- Host: GitHub
- URL: https://github.com/ayokanmi-adejola/simple-feature-section
- Owner: Ayokanmi-Adejola
- Created: 2025-06-28T19:25:49.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-09-07T19:30:01.000Z (9 months ago)
- Last Synced: 2025-09-30T00:00:40.744Z (9 months ago)
- Topics: css3, flexbox-layout, google-fonts, html5, mobile-first-workflow
- Language: HTML
- Homepage: https://simple-feature-section-lovat.vercel.app
- Size: 4.18 MB
- Stars: 8
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Simple Feature Section | devChallenges.io
## Overview
This project is a solution to the [Simple Feature Section challenge](https://devchallenges.io/challenges-dashboard) on devChallenges.io. The goal was to build a pixel-perfect, responsive feature section using only HTML and CSS, closely matching the provided design.
| Desktop | Tablet | Mobile |
| ------- | ------ | ------ |
|  |  |  |
## Features
- ✋ Modern, accessible, and semantic HTML5 structure
- 🥅 Responsive layout for desktop, tablet, and mobile
- 💬 Clean, professional CSS with custom properties and media queries
- Uses emojis in colored circles for feature icons, as in the design
- Optimized images and assets
- Follows best practices for maintainable code
## Built With
- HTML5
- CSS3 (Flexbox, custom properties, media queries)
- [Poppins](https://fonts.google.com/specimen/Poppins) font (Google Fonts)
## Getting Started
1. Clone this repository or download the ZIP.
2. Open `index.html` in your browser to view the project.
3. All assets are included in the `resources/` folder.
## Responsive Design
The layout adapts to all screen sizes:
- **Desktop:** Three feature cards in a row, large header, and background pattern.
- **Tablet:** Cards stack vertically with adjusted spacing.
- **Mobile:** Single-column layout, smaller padding and font sizes.
## Folder Structure
```
├── index.html
├── README.md
├── thumbnail.jpg
├── design/
│ ├── Desktop_1350px.jpg
│ ├── Mobile_412px.jpg
│ └── Tablet_1024px.jpg
└── resources/
├── Background_image.svg
├── favicon.ico
├── photo_1.png
├── photo_2.png
└── photo_3.png
```
---
### Reflections
This project was a great exercise in:
- Practicing semantic HTML and modern CSS
- Building a fully responsive layout from scratch
- Matching a design pixel-perfectly using only code and provided assets