https://github.com/mohamedaridah/frontendmentor_qr-code-component

This is my solution to the QR code component challenge on Frontend Mentor.
https://github.com/mohamedaridah/frontendmentor_qr-code-component

challenge css3 easy frontend-mentor frontendmentor html newbie qr qr-code qr-code-component qrcode qrcode-component responsive-design

Last synced: 7 months ago
JSON representation

This is my solution to the QR code component challenge on Frontend Mentor.

Host: GitHub
URL: https://github.com/mohamedaridah/frontendmentor_qr-code-component
Owner: MohamedAridah
Created: 2022-03-23T19:06:17.000Z (about 4 years ago)
Default Branch: main
Last Pushed: 2022-03-24T12:15:23.000Z (about 4 years ago)
Last Synced: 2025-04-12T21:36:08.223Z (about 1 year ago)
Topics: challenge, css3, easy, frontend-mentor, frontendmentor, html, newbie, qr, qr-code, qr-code-component, qrcode, qrcode-component, responsive-design
Language: CSS
Homepage: https://mohamedaridah.github.io/frontendmentor_qr-code-component/
Size: 85 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

          ![Challenge Design](https://raw.githubusercontent.com/MohamedAridah/frontendmentor_qr-code-component/main/design/desktop-design.jpg)



 QR Code component

 

    

      Live

    

     | 

    

      Solution

    

     | 

    

      Challenge

    

  

  

     Source of the project from frontendmentor.io.

  

  

    



      

      

    

  









## Table of content:

1. [About the project](#about-the-project)

1. [Built with](#built-with)

1. [What I learned](#what-i-learned)

1. [What I Want](#what-i-want...?!)

1. [Useful resources](#useful-resources)

1. [Acknowledgments](#acknowledgments)

1. [Follow me](#follow-me)

   


   


## About the project

This is my 4^th Frontend Mentor challenge.

This is my solution to the QR code component challenge on Frontend Mentor. The goal of this challenge is to build out a QR code component and get it looking as close to the [design](./design/desktop-preview.jpg) as possible.

## Built with

For this project i used:

- Semantic HTML5 markup

- CSS

  - CSS custom properties

  - Flexbox

- Mobile-first workflow

## What i learned

It was simple project and didn't take long time so that's great!

## What i want...?!

I need your opinions, feedbacks , how do you find my code structure? or any suggestions i can do to make my projects better. Also if you guys like my content, follow me this makes me happy❤👍.

## Useful resources

- **Adobe Xd** - I use adobe xd to check the size of elements.

## Acknowledgments

- I want to say **Thanks** to anyone who see my work and react with it, give me his feedback and helped me to improve myself. So thank you❤.

## Follow me

- My website - Well I haven't made my portfolio yet, but gonna make it soon.

-   Github - [@FedLover](https://github.com/MohamedAridah)

-   Codepen - [@FedLover](https://codepen.io/FedLover)

-   Frontend Mentor - [@mo](https://www.frontendmentor.io/profile/MohamedAridah)

**See you in another project!** 👋👩‍💻