{"id":17560975,"url":"https://github.com/timbar09/fem-four-card-feature-section","last_synced_at":"2025-07-31T03:33:32.777Z","repository":{"id":137771481,"uuid":"531154790","full_name":"Timbar09/FEM-four-card-feature-section","owner":"Timbar09","description":"This is a four card feature section challenge from frontendmentor.io which I will be attempting to  solve.","archived":false,"fork":false,"pushed_at":"2022-09-07T15:02:14.000Z","size":313,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-04T10:49:00.212Z","etag":null,"topics":["css3","front-end","grid","html5"],"latest_commit_sha":null,"homepage":"https://mt-four-card-feature.netlify.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/Timbar09.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":"2022-08-31T15:54:24.000Z","updated_at":"2022-11-05T06:39:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"ef68bcc8-c14e-41e3-b383-b69b081483bc","html_url":"https://github.com/Timbar09/FEM-four-card-feature-section","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/Timbar09%2FFEM-four-card-feature-section","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timbar09%2FFEM-four-card-feature-section/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timbar09%2FFEM-four-card-feature-section/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timbar09%2FFEM-four-card-feature-section/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Timbar09","download_url":"https://codeload.github.com/Timbar09/FEM-four-card-feature-section/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246174606,"owners_count":20735417,"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":["css3","front-end","grid","html5"],"created_at":"2024-10-21T11:44:05.850Z","updated_at":"2025-03-29T11:13:13.814Z","avatar_url":"https://github.com/Timbar09.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Four card feature section solution\n\nThis is a solution to the [Four card feature section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK). 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- [Acknowledgments](#acknowledgments)\n\n## Overview\n\nThis is the second challenge from Frontend Mentor that i have completed. It was a bit more difficult than the last one but I took less time to complete it than I initially anticipated.\n\n### The challenge\n\nThe site is responsive and viewers can view the optimal layout of the site accross multiple screen sizes such as mobiles phones, tablets and destktops.\n\n### Screenshot\n\n![](./screenshot/Desktop-view.png)\n![](./screenshot/Tablet-view.png)\n![](./screenshot/Mobile-view.png)\n\n### Links\n\n- Solution URL: [https://github.com/Timbar09/four-card-feature-section.git]\n- Live Site URL: [https://mt-four-card-feature.netlify.app/]\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Flexbox\n- CSS Grid\n- Mobile-first workflow\n- [SASS](https://sass-lang.com/) - CSS3 extension\n\n### What I learned\n\nI have learned to use Github (Desktop version) for thje very first time with this challenge. I have also learned that I can insert SVG code of an image directly into the html markup as opposed to linking the image to html with css as well as interchanging flexbox and grid for the same elements within different viewports.\n\nSee snippets below:\n\n```html\n\u003ch1\u003eSome HTML code I'm proud of\u003c/h1\u003e\n\n\u003cdiv class=\"feature__card-icon\"\u003e\n  \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"64\" height=\"64\"\u003e\u003cg fill=\"none\"\u003e\u003cpath fill=\"#EFEFF4\" d=\"M64 14.454v41.788H0V14.454l3.75-3.787h56.5z\"/\u003e\u003cpath fill=\"#DADAE5\" d=\"M64 14.454v41.788H32V10.667h28.25z\"/\u003e\u003cpath fill=\"#474F54\" d=\"M0 0h64v15.515H0z\"/\u003e\u003cpath fill=\"#32393F\" d=\"M32 0h32v15.515H32z\"/\u003e\u003cg fill=\"#FF637B\"\u003e\u003cpath d=\"M7.758 5.818h3.685v3.879H7.758zM15.128 5.818h3.685v3.879h-3.685zM22.497 5.818h3.685v3.879h-3.685z\"/\u003e\u003c/g\u003e\u003cpath fill=\"#FF637B\" d=\"M45.576 42.245V64H34.355v-3.71h-3.74V64H19.394V42.245l11.37-9.275h3.105z\"/\u003e\u003cpath fill=\"#DADAE5\" d=\"M11.636 22.303h41.697v3.879H11.636z\"/\u003e\u003cpath fill=\"#C9C9D3\" d=\"M32 22.303h20.364v3.879H32z\"/\u003e\u003cpath fill=\"#E63950\" d=\"M45.576 42.245V64H33.939v-3.71H32V32.97h1.435z\"/\u003e\u003cpath fill=\"#EFEFF4\" d=\"M30.061 45.576h3.878v3.879h-3.878z\"/\u003e\u003cpath fill=\"#DADAE5\" d=\"M32 45.576h1.939v3.879H32z\"/\u003e\u003cpath fill=\"#676E74\" d=\"M50.424 45.779l-2.452 2.706-15.487-13.526-15.488 13.526-2.452-2.706 17.94-15.718z\"/\u003e\u003cpath fill=\"#474F54\" d=\"M32 30.061l18.424 15.718-2.518 2.706L32 34.959z\"/\u003e\u003c/g\u003e\u003c/svg\u003e\n\u003c/div\u003e\n```\n```css\n.proud-of-this-css {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1.5rem;\n  justify-content: center;\n  align-items: center;\n\n  @include breakpoint-up(large) {\n    display: grid;\n    grid-template-columns: repeat(3, auto);\n    grid-template-rows: repeat(4, auto);\n  }\n}\n```\n### Continued development\n\nI want to continue using Github as it is relatively new to me and I am beggining to see the benefits of it in my coding development. I would also like to use javaScript and javaScript frameworks such as React in future challenges in oder to add to my skills.\n\n## Author\n\n- Frontend Mentor - [@Timbar09](https://www.frontendmentor.io/profile/yourusername)\n\n## Acknowledgments\n\nFirstly I would like to thank muself for copleting this challenge and I also want to thank Frontend Mentor for helping me and so many others by giving us access to these challenges and helping us develop our coding skills.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimbar09%2Ffem-four-card-feature-section","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimbar09%2Ffem-four-card-feature-section","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimbar09%2Ffem-four-card-feature-section/lists"}