QR Code Component

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 the "main" section of a page. Wrap all of the code in a <main>.

• Use classes instead of IDs for styling.

• The alt text should be written naturally, with lowercase letters and without using - between the words. It must also say where it leads(frontendmentor.io).

CSS:

• It's good practice to include a CSS Reset at the top.

• Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

• On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

• Remove gap, it isn't a valid value without declaring display: flex.

• I would use em for word-spacing instead of px. I don't think you need it on this challenge, though.

• Remove the margin on the image, and change max-width to 100% - the max-width prevents it from overflowing its container. Also remove cursor: pointer - it should be used for interactive elements, like links.

• Add around 1rem of padding on the card, to create the space between the image and the card edges.