{"id":15817155,"url":"https://github.com/evavic44/stats-preview-card-frontendmentor","last_synced_at":"2025-09-04T00:10:00.065Z","repository":{"id":51291507,"uuid":"367042431","full_name":"Evavic44/Stats-Preview-Card-Frontendmentor","owner":"Evavic44","description":"Stats preview card coding challenge on Frontendmentor","archived":false,"fork":false,"pushed_at":"2021-07-10T13:31:50.000Z","size":115,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-06T05:22:18.311Z","etag":null,"topics":["challenge","coding","css3","frontendmentor","html5"],"latest_commit_sha":null,"homepage":"https://stats-preview-card-evavic44.netlify.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/Evavic44.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}},"created_at":"2021-05-13T12:31:22.000Z","updated_at":"2021-07-26T13:59:57.000Z","dependencies_parsed_at":"2022-09-24T14:00:51.019Z","dependency_job_id":null,"html_url":"https://github.com/Evavic44/Stats-Preview-Card-Frontendmentor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Evavic44/Stats-Preview-Card-Frontendmentor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Evavic44%2FStats-Preview-Card-Frontendmentor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Evavic44%2FStats-Preview-Card-Frontendmentor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Evavic44%2FStats-Preview-Card-Frontendmentor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Evavic44%2FStats-Preview-Card-Frontendmentor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Evavic44","download_url":"https://codeload.github.com/Evavic44/Stats-Preview-Card-Frontendmentor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Evavic44%2FStats-Preview-Card-Frontendmentor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273529788,"owners_count":25121868,"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-09-03T02:00:09.631Z","response_time":76,"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":["challenge","coding","css3","frontendmentor","html5"],"created_at":"2024-10-05T05:22:31.486Z","updated_at":"2025-09-04T00:10:00.006Z","avatar_url":"https://github.com/Evavic44.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch2 align=\"center\"\u003eFrontend Mentor - Stats preview card component\u003c/h2\u003e\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/5694d0ca-05cc-4784-b4c9-26a18ae3e113/deploy-status)](https://app.netlify.com/sites/stats-preview-card-evavic44/deploys)\n\n## Welcome! 👋\nThis is a solution to the [Stats preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62). Frontend Mentor challenges help you improve your coding skills by building realistic projects. \n\n### Overview\n\nThanks for checking out this front-end coding challenge.\n\n[Frontend Mentor](https://www.frontendmentor.io) challenges help you improve your coding skills by building realistic projects.\n\n**To do this challenge, you need a basic understanding of HTML and CSS.**\n\n### The challenge\n\nUsers should be able to:\n\n- View the optimal layout depending on their device's screen size\n\n### Screenshot\n\n\u003cimg src=\"https://user-images.githubusercontent.com/62628408/118499669-12127200-b71f-11eb-99e4-7bfdfaa4c9d2.png\" width=\"500px\"\u003e\n\n### Links\n\n- Solution URL: [GitHub](https://github.com/Evavic44)\n- Live Site URL: [Live](https://stats-preview-card-evavic44.netlify.app/)\n\n### Built with\n\n- Semantic HTML5 markup\n- CSS3 styling\n- No frameworks or programming language was used. Just plain old HTML, CSS\n\n### What I learned\n\u003ch4\u003eBuilding this project has helped me to fortify my CSS skills in the following departments\u003c/h4\u003e\n\n- Alignment: This is one of the issues I struggled with. After adding the flex property to the column classes, the card box was too spaced out and elements shrinked on smaller screens, by adding the `max-width` and ```margin: 0 auto;``` property, the text properly aligned to the container. _This might help if you plan on taking this challenge_\n\n### Code Snippets\nI added the provided color code pallete to a var property as seen below. This pallete was really helpful to me _adding it to a variable for easy reference is highly recommended_.\n\n```css\n:root {\n  --main-background: hsl(233, 47%, 7%);\n  --card-background: hsl(244, 38%, 16%);\n  --accent: hsl(277, 64%, 61%);\n  --main-heading: hsl(0, 0%, 100%);\n  --text-secondary: hsla(0, 0%, 100%, 0.75);\n  --text-secondary-card: hsla(0, 0%, 100%, 0.6);\n}\n```\n\n\nSince the font family was gracefully provided by [Frontend Mentor](https://www.frontendmentor.io) on google fonts, I added it to the `css` easily using the css import property. _Do check it out for adding the fonts easily [here](https://fonts.google.com/specimen/Inter?query=inter)_\n```css\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700\u0026family=Lexend+Deca\u0026display=swap');\n```\n\n### Continued development\nGoing forward, I would like to improve on my `CSS` skills -primarily on Alignment and Positioning. WHY!? well because I'm not quite satisfied with the length of `CSS` code I wrote to achieve this owing that to the alignment sections of this challenge.   \n\n### Useful resources\n\n- [Cooolors](https://www.cooolors.co) - This helped me to generate and convert the `HSL` css color codes to `HEX` which I'm probably more used to.\n\n### Author\n\n- Website - [Victor Eke](https://www.your-site.com)\n- Frontend Mentor - [@evavic44](https://www.frontendmentor.io/profile/evavic44)\n- Twitter - [@evavic44](https://www.twitter.com/evavic44)\n\n### Acknowledgments\n\nCredit goes to the team at [Frontend Mentor](https://www.frontendmentor.io) for putting out this challenge freely. You all ROCK! 💎 \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevavic44%2Fstats-preview-card-frontendmentor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevavic44%2Fstats-preview-card-frontendmentor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevavic44%2Fstats-preview-card-frontendmentor/lists"}