{"id":18927852,"url":"https://github.com/0xabdulkhaliq/qr-code-component","last_synced_at":"2025-10-07T20:15:48.282Z","repository":{"id":86598913,"uuid":"563151952","full_name":"0xabdulkhaliq/qr-code-component","owner":"0xabdulkhaliq","description":"This is solution to the QR code component challenge on Frontend Mentor","archived":false,"fork":false,"pushed_at":"2023-06-01T03:27:04.000Z","size":204,"stargazers_count":1,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T22:25:11.954Z","etag":null,"topics":["css","css3","front-end","frontend","frontend-mentor","frontendmentor","html","html5"],"latest_commit_sha":null,"homepage":"https://0xabdulkhalid.github.io/qr-code-component/","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/0xabdulkhaliq.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-11-08T02:25:15.000Z","updated_at":"2024-03-15T17:50:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"02bcaf13-2b28-4cf8-8d39-6a5a794bd82d","html_url":"https://github.com/0xabdulkhaliq/qr-code-component","commit_stats":null,"previous_names":["0xabdulkhaliq/qr-code-component"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xabdulkhaliq%2Fqr-code-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xabdulkhaliq%2Fqr-code-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xabdulkhaliq%2Fqr-code-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xabdulkhaliq%2Fqr-code-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0xabdulkhaliq","download_url":"https://codeload.github.com/0xabdulkhaliq/qr-code-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249080673,"owners_count":21209560,"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":["css","css3","front-end","frontend","frontend-mentor","frontendmentor","html","html5"],"created_at":"2024-11-08T11:21:04.964Z","updated_at":"2025-10-07T20:15:43.249Z","avatar_url":"https://github.com/0xabdulkhaliq.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n  \u003cimg src=\"https://www.frontendmentor.io/static/images/logo-mobile.svg\" alt=\"frontendmentor\" width=\"80\"\u003e\n\n  \u003ch2 align=\"center\"\u003eQR Code Component Solution\u003c/h2\u003e\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H\" target=\"_blank\"\u003e\u003cstrong\u003eFrontend Mentor Challenge\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://0xabdulkhalid.github.io/qr-code-component/\" target=\"_blank\"\u003eView Demo\u003c/a\u003e\n    \u0026nbsp;·\u0026nbsp;\n    \u003ca href=\"https://github.com/0xabdulkhalid/qr-code-component/issues\" target=\"_blank\"\u003eReport Bug\u003c/a\u003e\n    \u0026nbsp;·\u0026nbsp;\n    \u003ca href=\"https://github.com/0xabdulkhalid/qr-code-component/issues\" target=\"_blank\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003c!-- Bagdes --\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003c!-- Profiles --\u003e\n  \u003ca href=\"https://www.frontendmentor.io/profile/0xabdulkhalid\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Profile-0xAbdulKhalid-eee?style=for-the-badge\u0026logo=frontendmentor\" alt=\"Abdul's Profile\"\u003e\n  \u003c/a\u003e  \u0026nbsp;\u0026nbsp;\u0026nbsp;\n\n  \u003c!-- Status --\u003e\n  \u003ca href=\"#\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Status-Completed-brightgreen?style=for-the-badge\" alt=\"Status Completed\"\u003e\n  \u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\n\n\n  \u003c!-- Difficulty --\u003e\n  \u003ca href=\"https://www.frontendmentor.io/challenges?difficulties=1\"  target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Difficulty-Newbie-61BECD?style=for-the-badge\u0026logo=frontendmentor\" alt=\"Challenge Difficulty - Newbie\"\u003e\n  \u003c/a\u003e\n\n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\n\n## **Preview**\n\n\u003cdiv align='center'\u003e\n\u003cimg src=\"./design/desktop-preview.jpg\"\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n## **Links**\n\n- Solution URL: [QR Code Component 🎯 [ SEMANTIC MARKUP + VANILLA CSS + BEM ]](https://www.frontendmentor.io/solutions/qr-code-component-but-slightly-tweaked-with-creativity-sG0vtRwcp5)\n- Live Site URL: [https://0xabdulkhalid.github.io/qr-code-component/](https://0xabdulkhalid.github.io/qr-code-component/)\n\u003cbr\u003e\n\n## **Built With**\n\n- ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white)   \n- ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge\u0026logo=css3\u0026logoColor=white)   \n\n\u003cbr\u003e\n\n## **Tools Used**\n\n- ![Google](https://img.shields.io/badge/google-4285F4?style=for-the-badge\u0026logo=google\u0026logoColor=white)   \n- ![Shell Script](https://img.shields.io/badge/Terminal-%23121011.svg?style=for-the-badge\u0026logo=gnu-bash\u0026logoColor=white)  \n- ![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge\u0026logo=visual-studio-code\u0026logoColor=white)  \n- ![Arch](https://img.shields.io/badge/Arch%20Linux-1793D1?logo=arch-linux\u0026logoColor=fff\u0026style=for-the-badge)\n\n\u003cbr\u003e\n\n## **Outcome**\n\n* Used HTML5 **semantic elements** for better readability and structure\n* Used CSS3's **flex** property to manage layout\n* Used **Git** and **GitHub** for project management\n* Tried to maintain **clean code**\n* Used **media queries** for responsive design\n* **Cross tested** on Firefox and Chromium based browsers\n\n\u003cbr\u003e\n\n## **What I learned**\n\n* Learned to set CSS **custom properties**\n* Learned to use **Flexbox** effectively\n* A lot of minor things\n\n\u003cbr\u003e\n\n\u003c!-- ACKNOWLEDGMENTS --\u003e\n## **Acknowledgment**\n\n* Inspiration by [Frontend Mentor](https://www.frontendmentor.io)\n\n\u003cbr\u003e\n\n## **Let's Connect 👋**\n\n\u003cdiv align=center\u003e\n\n  \u003ca href=\"https://linkedin.com/in/0xabdulkhalid\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/linkedin%20Profile-%2300acee.svg?color=405DE6\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" alt=Linkedin\u003e\n  \u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\n\n  \u003ca href=\"https://www.frontendmentor.io/profile/0xabdulkhalid\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/FEM%20Profile-f8f9f8?style=for-the-badge\u0026logo=Frontend-Mentor\u0026logoColor=black\" alt=\"Frontend-Mentor\"\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\n\n  \u003ca href=\"https://www.github.com/0xabdulkhalid/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Github%20Profile-131313?style=for-the-badge\u0026logo=github\u0026logoColor=white\" alt=\"Personal Website\"\u003e\n  \u003c/a\u003e\n\n\u003c/div\u003e\n\n\u003cbr\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xabdulkhaliq%2Fqr-code-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0xabdulkhaliq%2Fqr-code-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xabdulkhaliq%2Fqr-code-component/lists"}