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 a page's "main" section. Change .container to a <main>.

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

• .attribution should be a <footer>, and you should use <p> for the text inside.

CSS:

• Move box-sizing: border-box;from .card to *.

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

• Move font-family to the body.

• Move the properties on .container to body, this way you get to center the footer as well. Add justify-content: center, flex-direction: column and gap: 2rem, and change height to min-height - this way, the content will not get cut off if it grows beneath the viewport. Remove the width, as block elements are 100% wide by default.

• Remove the margin on the card - it is centered horizontally using Flexbox.

• Remove all widths and heights in px.

• Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

• 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.

• Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

• I would increase the padding on the card to 16px.

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