{"id":16386668,"url":"https://github.com/cosmoart/frontend-challenges","last_synced_at":"2026-04-16T15:31:41.679Z","repository":{"id":186620930,"uuid":"675434424","full_name":"cosmoart/frontend-challenges","owner":"cosmoart","description":"🖼️ Solutions to some frontend mentor challenges made with different technologies.","archived":false,"fork":false,"pushed_at":"2023-08-07T01:16:13.000Z","size":1387,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-10T13:06:29.163Z","etag":null,"topics":["challenge","front-end","frontend-mentor","html-challenges","html-css-javascript","javascript","js-challenges"],"latest_commit_sha":null,"homepage":"https://frontend-solutions.netlify.app","language":"CSS","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/cosmoart.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}},"created_at":"2023-08-06T22:40:46.000Z","updated_at":"2023-10-23T20:01:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"d4765616-8c33-487a-8e2f-643388da932b","html_url":"https://github.com/cosmoart/frontend-challenges","commit_stats":null,"previous_names":["cosmoart/frontend-challenges"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmoart%2Ffrontend-challenges","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmoart%2Ffrontend-challenges/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmoart%2Ffrontend-challenges/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmoart%2Ffrontend-challenges/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cosmoart","download_url":"https://codeload.github.com/cosmoart/frontend-challenges/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240156777,"owners_count":19756835,"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":["challenge","front-end","frontend-mentor","html-challenges","html-css-javascript","javascript","js-challenges"],"created_at":"2024-10-11T04:23:14.445Z","updated_at":"2026-04-16T15:31:36.618Z","avatar_url":"https://github.com/cosmoart.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv id=\"top\"\u003e\u003c/div\u003e\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://www.instagram.com/cosmo_art0/\"\u003e\u003cimg src=\"./readme/header.webp\" alt=\"Instagram\" /\u003e\u003c/a\u003e\n\u003cbr/\u003e\n\u003cbr /\u003e\n\n  # Frontend Mentor Solutions by Cosmo\n\n  A collection of my solutions to the challenges on [Frontend Mentor](https://www.frontendmentor.io/).\n\n  \u003ca href=\"https://frontend-solutions.netlify.app\"\u003eView Demo\u003c/a\u003e\n  ·\n  \u003ca href=\"https://github.com/cosmoart/frontend-challenges/issues\"\u003eReport Bug\u003c/a\u003e\n  ·\n  \u003ca href=\"https://github.com/cosmoart/frontend-challenges/issues\"\u003eRequest Feature\u003c/a\u003e\n\u003c/div\u003e\n\n\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n\u003csummary\u003eTable of contents\u003c/summary\u003e\n\n- [About The Project](#about-the-project)\n- [Screenshots](#screenshots)\n- [Solutions](#solutions)\n- [License](#license)\n- [Contact](#contact)\n\u003c/details\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n## About The Project\n\nA collection of my solutions to the challenges on [Frontend Mentor](https://www.frontendmentor.io/).\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#top\"\u003e⬆ Back to top\u003c/a\u003e\u003c/p\u003e\n\n\n\u003c!-- SCREENSHOTS --\u003e\n## Screenshots\n\n\u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n          \u003cimg src=\"./readme/mobile-preview.webp\" width=\"100%\" title=\"Mobile solution\"  /\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n          \u003cimg src=\"./readme/tablet-preview.webp\" width=\"100%\" title=\"Tablet solution\"/\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n          \u003cimg src=\"./readme/desktop-preview.webp\" width=\"100%\" title=\"Desktop solution\"/\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#top\"\u003e⬆ Back to top\u003c/a\u003e\u003c/p\u003e\n\n\n### Solutions\n\n\u003ctable\u003e\n\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/tree/main/src/components/advice-generator-app target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/advice-generator-app.webp\" width=\"100%\" title=\"Advice generator app\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tAdvice generator app\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/tree/main/src/components/article-preview-component target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/article-preview-component.webp\" width=\"100%\" title=\"Article preview component\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tArticle preview component\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/tree/main/src/components/expenses-chart-component target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/expenses-chart-component.webp\" width=\"100%\" title=\"Expenses chart component\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tExpenses chart component\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/tree/main/src/components/intro-component-with-sign-up-form target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/intro-component-with-sign-up-form.webp\" width=\"100%\" title=\"Component with sign up form\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tComponent with sign up form\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/tree/main/src/components/ping-coming-soon-page target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/ping-coming-soon-page.webp\" width=\"100%\" title=\"Ping coming soon page\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tPing coming soon page\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/tree/main/src/components/age-calculator target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/age-calculator.webp\" width=\"100%\" title=\"Age calculator\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tAge calculator\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/blob/main/src/pages/project/stats-preview-card.html target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/stats-preview-card.webp\" width=\"100%\" title=\"Stats preview card\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tStats preview card\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/blob/main/src/pages/project/single-price-grid.html target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/single-price-grid.webp\" width=\"100%\" title=\"Single price grid\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tSingle price grid\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/blob/main/src/pages/project/four-card-feature-section.html target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/four-card-feature-section.webp\" width=\"100%\" title=\"Four card feature section\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tFour card feature section\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/blob/main/src/pages/project/huddle-landing-page.html target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/huddle-landing-page.webp\" width=\"100%\" title=\"Huddle landing page\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tHuddle landing page\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/blob/main/src/pages/project/3-column-preview-card.html target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/3-column-preview-card.webp\" width=\"100%\" title=\"3 column preview card\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t3 column preview card\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/blob/main/src/pages/project/fylo-data-storage.html target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/fylo-data-storage.webp\" width=\"100%\" title=\"Fylo data storage\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tFylo data storage\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/blob/main/src/pages/project/social-proof-section.html target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/social-proof-section.webp\" width=\"100%\" title=\"Social proof section\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tSocial proof section\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/blob/main/src/pages/project/testimonials-grid-section.html target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/testimonials-grid-section.webp\" width=\"100%\" title=\"Testimonials grid section\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tTestimonials grid section\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/blob/main/src/pages/project/interactive-rating.html target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/interactive-rating.webp\" width=\"100%\" title=\"Interactive rating component\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tInteractive rating component\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/blob/main/src/pages/project/product-preview-card.html target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/product-preview-card.webp\" width=\"100%\" title=\"Product preview card\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tProduct preview card\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/blob/main/src/pages/project/coming-soon-page.html target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/coming-soon-page.webp\" width=\"100%\" title=\"Coming soon page\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tComing soon page\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/blob/main/src/pages/project/order-summary.html target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/order-summary.webp\" width=\"100%\" title=\"Order summary\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tOrder summary\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/blob/main/src/pages/project/profile-card.html target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/profile-card.webp\" width=\"100%\" title=\"Profile card\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tProfile card\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/blob/main/src/pages/project/qr-code.html target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/qr-code.webp\" width=\"100%\" title=\"Qr code\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tQr code\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ca href=https://github.com/cosmoart/frontend-challenges/blob/main/src/pages/project/nft-preview-card.html target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\t\t\t\t\t\t\t\t\t\t\u003cimg src=\"./public//assets/previews/nft-preview-card.webp\" width=\"100%\" title=\"Nft preview card\" /\u003e\n\t\t\t\t\t\t\t\t\t\t\t\tNft preview card\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#top\"\u003e⬆ Back to top\u003c/a\u003e\u003c/p\u003e\n\n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the MIT License. See `LICENSE.txt` for more information.\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#top\"\u003e⬆ Back to top\u003c/a\u003e\u003c/p\u003e\n\n\n\n\u003c!-- CONTACT --\u003e\n## Contact\n\n-   My website - [https://cosmoart.vercel.app](https://cosmoart.vercel.app)\n-   Twitter - [@CosmoArt0](https://twitter.com/cosmoart0)\n-   Instagram - [@cosmo_art0](https://www.instagram.com/cosmo_art0/)\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#top\"\u003e⬆ Back to top\u003c/a\u003e\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcosmoart%2Ffrontend-challenges","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcosmoart%2Ffrontend-challenges","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcosmoart%2Ffrontend-challenges/lists"}