Frontend Mentor | QR code component

Hi there - good job!

A few tips:

HTML:

• In most cases, it's recommended to use classes instead of IDs.

• I would remove "illustration" from the alt text - screen readers announce images as "image" by default. 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."

• .attribution should be a <footer>, which needs to be outside of the <main>.

CSS:

• Including a CSS Reset at the top is good practice.

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

• I would move the properties on main to the body, and also add gap: 2rem to create space between the main and the footer.

• The max-width on the card looks good, but it should be in rem, so change it to 20rem, which equals 320px.

• 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, remove the max-width and max-height in px.add display: block and max-width: 100% - the max-width prevents it from overflowing its container.

• The card should have equal padding on all sides, so change padding: 1rem 0 to padding: 1rem.

• I would remove position: fixed on the footer.