https://github.com/0xabdulkhaliq/qr-code-component

This is solution to the QR code component challenge on Frontend Mentor
https://github.com/0xabdulkhaliq/qr-code-component

css css3 front-end frontend frontend-mentor frontendmentor html html5

Last synced: 7 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/0xabdulkhaliq/qr-code-component
• Owner: 0xabdulkhaliq
• Created: 2022-11-08T02:25:15.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-06-01T03:27:04.000Z (almost 3 years ago)
• Last Synced: 2025-03-28T22:25:11.954Z (about 1 year ago)
• Topics: css, css3, front-end, frontend, frontend-mentor, frontendmentor, html, html5
• Language: CSS
• Homepage: https://0xabdulkhalid.github.io/qr-code-component/
• Size: 199 KB
• Stars: 1
• Watchers: 1
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


  

  
QR Code Component Solution

  


    Frontend Mentor Challenge

    


    


    View Demo

     · 

    Report Bug

     · 

    Request Feature

  





  

  

    

       


  

  

    

     

  

  

    

  









## **Preview**










## **Links**

- Solution URL: [QR Code Component 🎯 [ SEMANTIC MARKUP + VANILLA CSS + BEM ]](https://www.frontendmentor.io/solutions/qr-code-component-but-slightly-tweaked-with-creativity-sG0vtRwcp5)

- Live Site URL: [https://0xabdulkhalid.github.io/qr-code-component/](https://0xabdulkhalid.github.io/qr-code-component/)




## **Built With**

- ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)   

- ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)   




## **Tools Used**

- ![Google](https://img.shields.io/badge/google-4285F4?style=for-the-badge&logo=google&logoColor=white)   

- ![Shell Script](https://img.shields.io/badge/Terminal-%23121011.svg?style=for-the-badge&logo=gnu-bash&logoColor=white)  

- ![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)  

- ![Arch](https://img.shields.io/badge/Arch%20Linux-1793D1?logo=arch-linux&logoColor=fff&style=for-the-badge)




## **Outcome**

* Used HTML5 **semantic elements** for better readability and structure

* Used CSS3's **flex** property to manage layout

* Used **Git** and **GitHub** for project management

* Tried to maintain **clean code**

* Used **media queries** for responsive design

* **Cross tested** on Firefox and Chromium based browsers




## **What I learned**

* Learned to set CSS **custom properties**

* Learned to use **Flexbox** effectively

* A lot of minor things




## **Acknowledgment**

* Inspiration by [Frontend Mentor](https://www.frontendmentor.io)




## **Let's Connect 👋**