Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • Useful resources
• Author

Overview

It's not that hard project. It is based on Box-Model in which we create the a div then go forward.

Screenshot

Links

• Solution URL: QR-code

My process

1. creat a div of class-name: card then center that div by giving the margin: 10rem(top/bottom) auto(left/right) and gave the width of 25rem and height 37.5rem and the background-color White: hsl(0, 0%, 100%).
2. Add img and the width and height is 23.75 and 25 respectivly and the margin: 1.25rem 0 0 0.625rem.
3. I gave the marging of 1.875rem to the left and right and align the text in center.

Built with

• Semantic HTML5 markup
• CSS custom properties

Useful resources

• Text align - This helped me for Text Align. I really liked this pattern and will use it going forward.

Author

• Linkedin - Sameer
• Frontend Mentor - @ThePlator
• GitHub - @ThePlator