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
  • What I learned
  • Useful resources
• Author

Overview

Screenshot

Links

• Live Site URL: https://scan-qr-code.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS Flexbox

What I learned

• How to build a "card" and center it
• Add box-shadow to the container to give it paper-card like effect, as such:

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

Useful resources

• Flexbox Froggy - This game helped me clear my concepts regarding CSS flexbox.

Author

• Frontend Mentor - @anu-codes
• Twitter - @anucodes