https://github.com/twinklebyte/qr-code-component
A qr code preview using CSS Grid
https://github.com/twinklebyte/qr-code-component
Last synced: about 1 month ago
JSON representation
A qr code preview using CSS Grid
- Host: GitHub
- URL: https://github.com/twinklebyte/qr-code-component
- Owner: TwinkleByte
- Created: 2024-05-20T17:37:01.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-23T19:14:25.000Z (over 1 year ago)
- Last Synced: 2025-11-09T09:32:05.666Z (9 months ago)
- Language: CSS
- Homepage:
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Contact form solution
This is a solution to the [Contact form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/contact-form--G-hYlqKJj). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Author](#author)
**Note: Delete this note and update the table of contents based on what sections you keep.**
## Overview
### Screenshot
### Links
- Solution URL: [Solution](https://github.com/TwinkleByte/QR-code-component)
- Live Site URL: [Live site URL](https://twinklebyte.github.io/QR-code-component/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Mobile-first workflow
**Note: These are just examples. Delete this note and replace the list above with your own choices**
### What I learned
I learned CSS Grid, Rem, Media Queries, HTML Structuring, Image Manipulation.
To see how you can add code snippets, see below:
```html
Improve your front-end skills by building projects
Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
```
```css
.container {
background-color: var(--bg-2);
display: block;
border-radius: 0.8rem;
margin: auto;
margin-top: 12rem;
width: max-content;
height: 33.333rem;
box-shadow: 0rem 1rem 1rem 2px rgba(0, 0, 0, 0.15);
}
```
## Author
- Frontend Mentor - [@TwinkleByte](https://www.frontendmentor.io/profile/TwinkleByte)
- Github - [@TwinkleByte](https://github.com/TwinkleByte)