qr card component

Hey, wonderful job!

Some of the things I like about your submission:

• Custom Properties
• CSS Reset
• Font size in rem instead of px (this is an essential accessibility requirement!)
• No fixed widths or heights in px
• Max-width on the card

Most of these are usually missing from submissions, so again, well done!

A few tips:

HTML:

• Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Replace <article> with <main>.

• The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

• As the card heading would likely not be the main heading on a page, I would change it to a <h2>.

CSS:

• I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

• You don't need to declare font-weight: 400 on the body, as that is the default value.

• You also don't need min-height on the image wrapper.

• According to MDN, will-change "is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems."

Keep up the great work :)