abyanfalah / frontend-mentor-qr-image

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

• Screenshot
• Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Acknowledgments

Screenshot

Links

• Solution URL: Here
• Live Site URL: Here

My process

• Create HTML structure
• Get fonts
• Add CSS variables
• Put .content class max-width to ~350px
• Put image
• Style the image
• Put texts
• style the texts
• add shadow to .content

Built with

• Flexbox
• Mobile-first workflow (tho i don't know if it does)

What I learned

• Setting margin, padding, size etc. with em unit which is pretty convenient.
• Setting max-width controls the maximum size of an element. Good for designing for various screen size.

Useful resources

W3School

Author

• Frontend Mentor - @abyanfalah

Acknowledgments

I (extremely) rarely use pure css. Most of the time I use CSS framework/library. Tried to google as minimum as possible.