{"id":23046811,"url":"https://github.com/ronylee11/qr-code-component","last_synced_at":"2026-01-15T22:09:55.744Z","repository":{"id":133181536,"uuid":"460865149","full_name":"ronylee11/qr-code-component","owner":"ronylee11","description":"Frontend Mentor project, making a qr code card","archived":false,"fork":false,"pushed_at":"2022-11-01T06:22:51.000Z","size":200,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T02:43:37.048Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ronylee11.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-02-18T13:32:30.000Z","updated_at":"2022-11-01T05:04:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"596583cd-885a-44e4-85cd-4491b225359d","html_url":"https://github.com/ronylee11/qr-code-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ronylee11/qr-code-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ronylee11%2Fqr-code-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ronylee11%2Fqr-code-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ronylee11%2Fqr-code-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ronylee11%2Fqr-code-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ronylee11","download_url":"https://codeload.github.com/ronylee11/qr-code-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ronylee11%2Fqr-code-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28472624,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-15T20:50:13.584Z","status":"ssl_error","status_checked_at":"2026-01-15T20:49:17.379Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2024-12-15T22:29:22.464Z","updated_at":"2026-01-15T22:09:55.727Z","avatar_url":"https://github.com/ronylee11.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - QR code component solution\n\nThis is a solution to the [QR code component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H). Frontend Mentor challenges help you improve your coding skills by building realistic projects.\n\n## Table of contents\n\n- [Overview](#overview)\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## Overview\n\n### Screenshot\n\n![](./images/screenshot.jpg)\n\n### Links\n\n- Solution URL: https://www.frontendmentor.io/solutions/qr-code-component-using-basic-html-css-and-flexbox-E7aSMMQjk\n- Live Site URL: https://ronylee11.github.io/qr-code-component/\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Flexbox\n- [Google Fonts](https://fonts.google.com/) - For font styles\n\n### What I learned\n\nI've refreshed my knowledge of html and css, tinkered around with paddings, widths, border-radius, etc. I've got pretty comfortable using them.\n\nI've used Flexbox in this project, which ultimately provides a clean look by centering it\n\n```html\n\u003csection class=\"card\"\u003e\n  \u003cimg src=\"./images/image-qr-code.png\" alt=\"qr-code\" /\u003e\n  \u003cp\u003eImprove your front-end skills by building projects\u003c/p\u003e\n  \u003cp\u003e\n    Scan the QR code to visit Frontend Mentor and take your coding skills to the\n    next level\n  \u003c/p\u003e\n\u003c/section\u003e\n```\n\n```css\n.card {\n  background-color: hsl(0, 0%, 100%);\n  border: hsl(0, 0%, 100%) solid 15px;\n  border-radius: 15px;\n  width: 300px;\n  height: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n```\n\n### Continued development\n\nI've found myself insufficient to give responsive units of widths and heights. I've used vh, %, and auto as the \"responsive units\", or so i thought, but i never really get the hang of it and just using them randomly. I need to learn more about this area.\n\n### Useful resources\n\n- [Flexbox in MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) - This has helped me to refresh my knowledge about Flexbox and knowing what options are there when it comes to using Flexbox.\n- [QR Code Component Challenge by Frontend Mentor](https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H) - This is an amazing hands-on starter project on Frontend Mentor, which is why I've started this project in the first place. It helped me finally understand Flexbox layout. I'd recommend it to anyone still learning web development.\n\n## Author\n\n- Github - [@ronylee11](https://github.com/ronylee11)\n- Frontend Mentor - [@ronylee11](https://www.frontendmentor.io/profile/ronylee11)\n- Twitter - [@rongyil33](https://twitter.com/rongyil33)\n- Instagram - [@rongyil33](https://www.instagram.com/rongyil33/)\n\n## Acknowledgments\n\nAll the images, design and materials are given by Frontend Mentor. Check them out on https://www.frontendmentor.io\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fronylee11%2Fqr-code-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fronylee11%2Fqr-code-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fronylee11%2Fqr-code-component/lists"}