QR Card Component

Hi, good job!

Here is some feedback - I hope you find it helpful :)

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. Change .container into a <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."

• "Improve your" should be a <h2>.

CSS:

• font-family should be placed on the body, not on *.

• 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 set margin: 0 on the body when it's already declared on *.

• Remove all positioning properties. A better way to center the card horizontally and vertically, is to use Flexbox on the body:

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;

Be sure to replace height with min-height - this way, the content will not get cut off if it grows beneath the viewport.

• div .qr-container and qr-container .image-qr-code are both descendant selectors, with added specificity. To keep the specificity flat, I would write .qr-container and .image-qr-code instead.

• max-width on the card should be in rem. Around 20rem(equals 320px will work fine.

• font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

• On the image, add display: block and change width to max-width: 100% - the max-width prevents it from overflowing its container.

• Instead of setting padding on .image and .content, I would add padding on the card itself:padding: 16px. The increase from 10px gives the card a bit more "space".