{"id":31766264,"url":"https://github.com/ayokanmi-adejola/preview-card-component","last_synced_at":"2025-10-10T00:30:39.360Z","repository":{"id":308992267,"uuid":"1001584673","full_name":"Ayokanmi-Adejola/Preview-Card-Component","owner":"Ayokanmi-Adejola","description":"A responsive 3-column preview card component built with HTML5 and CSS Flexbox. Showcasing three different car categories (Sedans, SUVs, and Luxury) with distinct color schemes and interactive elements. Features include responsive design for mobile and desktop and hover states for buttons.","archived":false,"fork":false,"pushed_at":"2025-06-13T16:28:47.000Z","size":132,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-30T00:00:38.633Z","etag":null,"topics":["css3","flexbox","html5","mobile-first-workflow"],"latest_commit_sha":null,"homepage":"https://preview-card-component-steel-delta.vercel.app","language":"CSS","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-13T16:26:14.000Z","updated_at":"2025-08-27T21:10:02.000Z","dependencies_parsed_at":"2025-08-09T05:51:03.558Z","dependency_job_id":"e08c6b6a-46a4-4d3e-8447-ddfa30fd6a15","html_url":"https://github.com/Ayokanmi-Adejola/Preview-Card-Component","commit_stats":null,"previous_names":["ayokanmi-adejola/preview-card-component"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ayokanmi-Adejola/Preview-Card-Component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FPreview-Card-Component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FPreview-Card-Component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FPreview-Card-Component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FPreview-Card-Component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ayokanmi-Adejola","download_url":"https://codeload.github.com/Ayokanmi-Adejola/Preview-Card-Component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FPreview-Card-Component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002362,"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","html5","mobile-first-workflow"],"created_at":"2025-10-10T00:30:06.904Z","updated_at":"2025-10-10T00:30:39.355Z","avatar_url":"https://github.com/Ayokanmi-Adejola.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - 3-column preview card component solution\n\nThis is a solution to the [3-column preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/3column-preview-card-component-pH92eAR2-). Frontend Mentor challenges help you improve your coding skills by building realistic projects. \n\n## Table of contents\n\n- [Overview](#overview)\n  - [The challenge](#the-challenge)\n  - [Screenshot](#screenshot)\n  - [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n  - [Continued development](#continued-development)\n- [Author](#author)\n\n## Overview\n\n### The challenge\n\nUsers should be able to:\n\n- View the optimal layout depending on their device's screen size\n- See hover states for interactive elements\n\n### Screenshot\n\n![](./design/desktop-preview.jpg)\n\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Flexbox\n- Mobile-first workflow\n\n### What I learned\n\nI learned how to better utilize CSS Flexbox to create a responsive layout. I also practiced using CSS custom properties to make the code more maintainable.\n\n```css\n.proud-of-this-css {\n  color: papayawhip;\n}\n```\n\n### Continued development\n\nI want to continue to focus on creating more complex layouts with CSS Grid and Flexbox. I also want to practice more with JavaScript to add more interactivity to my projects.\n\n## Author\n\n- Frontend Mentor - [@Ayokanmi-Adejola](https://www.frontendmentor.io/profile/Ayokanmi-Adejola)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayokanmi-adejola%2Fpreview-card-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayokanmi-adejola%2Fpreview-card-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayokanmi-adejola%2Fpreview-card-component/lists"}