{"id":31766244,"url":"https://github.com/ayokanmi-adejola/simple-feature-section","last_synced_at":"2025-10-10T00:30:24.863Z","repository":{"id":301784058,"uuid":"1010301671","full_name":"Ayokanmi-Adejola/Simple-Feature-Section","owner":"Ayokanmi-Adejola","description":"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.","archived":false,"fork":false,"pushed_at":"2025-09-07T19:30:01.000Z","size":4379,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-30T00:00:40.744Z","etag":null,"topics":["css3","flexbox-layout","google-fonts","html5","mobile-first-workflow"],"latest_commit_sha":null,"homepage":"https://simple-feature-section-lovat.vercel.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ayokanmi-Adejola.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-28T19:25:49.000Z","updated_at":"2025-09-26T11:39:52.000Z","dependencies_parsed_at":"2025-06-28T20:43:03.224Z","dependency_job_id":null,"html_url":"https://github.com/Ayokanmi-Adejola/Simple-Feature-Section","commit_stats":null,"previous_names":["ayokanmi-adejola/simple-feature-section"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ayokanmi-Adejola/Simple-Feature-Section","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FSimple-Feature-Section","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FSimple-Feature-Section/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FSimple-Feature-Section/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FSimple-Feature-Section/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ayokanmi-Adejola","download_url":"https://codeload.github.com/Ayokanmi-Adejola/Simple-Feature-Section/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FSimple-Feature-Section/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002359,"owners_count":26083356,"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","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css3","flexbox-layout","google-fonts","html5","mobile-first-workflow"],"created_at":"2025-10-10T00:29:58.029Z","updated_at":"2025-10-10T00:30:24.852Z","avatar_url":"https://github.com/Ayokanmi-Adejola.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple Feature Section | devChallenges.io\n\n![Simple Feature Section Screenshot](./thumbnail.jpg)\n\n\n\n## Overview\nThis 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.\n\n\n\n| Desktop | Tablet | Mobile |\n| ------- | ------ | ------ |\n| ![Desktop](./design/Desktop_1350px.jpg) | ![Tablet](./design/Tablet_1024px.jpg) | ![Mobile](./design/Mobile_412px.jpg) |\n\n## Features\n- ✋ Modern, accessible, and semantic HTML5 structure\n- 🥅 Responsive layout for desktop, tablet, and mobile\n- 💬 Clean, professional CSS with custom properties and media queries\n- Uses emojis in colored circles for feature icons, as in the design\n- Optimized images and assets\n- Follows best practices for maintainable code\n\n## Built With\n- HTML5\n- CSS3 (Flexbox, custom properties, media queries)\n- [Poppins](https://fonts.google.com/specimen/Poppins) font (Google Fonts)\n\n## Getting Started\n1. Clone this repository or download the ZIP.\n2. Open `index.html` in your browser to view the project.\n3. All assets are included in the `resources/` folder.\n\n## Responsive Design\nThe layout adapts to all screen sizes:\n- **Desktop:** Three feature cards in a row, large header, and background pattern.\n- **Tablet:** Cards stack vertically with adjusted spacing.\n- **Mobile:** Single-column layout, smaller padding and font sizes.\n\n## Folder Structure\n```\n├── index.html\n├── README.md\n├── thumbnail.jpg\n├── design/\n│   ├── Desktop_1350px.jpg\n│   ├── Mobile_412px.jpg\n│   └── Tablet_1024px.jpg\n└── resources/\n    ├── Background_image.svg\n    ├── favicon.ico\n    ├── photo_1.png\n    ├── photo_2.png\n    └── photo_3.png\n```\n\n\n\n---\n\n### Reflections\nThis project was a great exercise in:\n- Practicing semantic HTML and modern CSS\n- Building a fully responsive layout from scratch\n- Matching a design pixel-perfectly using only code and provided assets\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayokanmi-adejola%2Fsimple-feature-section","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayokanmi-adejola%2Fsimple-feature-section","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayokanmi-adejola%2Fsimple-feature-section/lists"}