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.
- Create HTML structure
- Get fonts
- Add CSS variables
- Put
.content
classmax-width
to ~350px - Put image
- Style the image
- Put texts
- style the texts
- add shadow to
.content
- Flexbox
- Mobile-first workflow (tho i don't know if it does)
- 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.
- Frontend Mentor - @abyanfalah
I (extremely) rarely use pure css. Most of the time I use CSS framework/library. Tried to google as minimum as possible.