{"id":16078581,"url":"https://github.com/craigdoescode/component-card-fm","last_synced_at":"2025-04-03T06:13:14.467Z","repository":{"id":111898008,"uuid":"380597608","full_name":"CraigDoesCode/component-card-fm","owner":"CraigDoesCode","description":"Component card exercise from frontend mentor.","archived":false,"fork":false,"pushed_at":"2021-06-27T11:38:13.000Z","size":592,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-08T19:45:23.401Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/CraigDoesCode.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}},"created_at":"2021-06-26T21:17:16.000Z","updated_at":"2021-06-27T11:38:15.000Z","dependencies_parsed_at":"2023-05-06T00:01:06.165Z","dependency_job_id":null,"html_url":"https://github.com/CraigDoesCode/component-card-fm","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CraigDoesCode%2Fcomponent-card-fm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CraigDoesCode%2Fcomponent-card-fm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CraigDoesCode%2Fcomponent-card-fm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CraigDoesCode%2Fcomponent-card-fm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CraigDoesCode","download_url":"https://codeload.github.com/CraigDoesCode/component-card-fm/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246944388,"owners_count":20858773,"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":[],"created_at":"2024-10-09T10:20:29.412Z","updated_at":"2025-04-03T06:13:14.450Z","avatar_url":"https://github.com/CraigDoesCode.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Stats preview card component solution\n\nThis is my solution to the [Stats preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62). \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  - [Useful resources](#useful-resources)\n- [Author](#author)\n- [Acknowledgments](#acknowledgments)\n\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\n### Desktop view\n\n![](resources/images/desktop-view.png)\n\n### Mobile View\n![](resources/images/mobile-view.png)\n\n### Links\n- Live Site URL: [craig1001.github.io/component-card-fm/](https://craig1001.github.io/component-card-fm/)\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Flexbox\n\n\n### What I learned\n\nTwo different menthod of creating colour overlays, firstly setting the image and the background of a containger and adding and overlay element on top\n, secondly making the background the desired color and reducing the opacity of the image to greate the appearance of an overlay.\n\nSee two versions below:\n\nV1 (overlay):\n```html\n\u003cdiv class=\"image desktop\"\u003e\n  \u003cdiv class=\"overlay\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n```css\n.image {\n    width: 50%;\n    background-image: url(\"../images/image-header-desktop.jpg\");\n}\n.overlay{\n    background-color: hsla(277, 64%, 61%, 60%);\n    width: 100%;\n    height: 100%;\n}\n```\nV2 (underlay):\n```html\n\u003cdiv class=\"mobile overlay\"\u003e\n          \u003cimg class=\"mobile\" src=\"resources/images/image-header-mobile.jpg\" alt=\"\" /\u003e\n        \u003c/div\u003e\n```\n```css\n  img {\n        opacity: 40%;\n  }\n  .overlay {\n      background-color: hsl(277, 64%, 61%);\n  }\n```\n\n### Continued development\n\nMoving forward I want to further my understanding of flex and responsive design so im able to organsie my css better.\n\n## Author\n\n- Website - [Craig Noford](https://www.linkedin.com/in/craig-norford-9a33838a/)\n- Frontend Mentor - [@craig1001](https://www.frontendmentor.io/profile/craig1001)\n- Twitter - [@craignorford](https://www.twitter.com/craignorford)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcraigdoescode%2Fcomponent-card-fm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcraigdoescode%2Fcomponent-card-fm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcraigdoescode%2Fcomponent-card-fm/lists"}