Simple HTML CSS

HTML:

• There are 2 src attributes on the image. I assume you meant to use alt for the second one. All images must have the alt attribute. If the image is decorative, the alt text should be empty:alt="". This image has meaning, so it needs a short description. The alt text should be written naturally, without using - between the words. A good alt text would be "QR code leading to the Frontend Mentor website."

• I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components

• I would remove the id from the <footer>. It is common to use classes instead. This article explains when should you use an id.

• <main> and <footer> are separate top-level landmarks, meaning one cannot be inside another. Move the footer outside of the main, so they become siblings, both being direct children of the body.

CSS:

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

• Remember to specify a fallback font:font-family: 'Outfit', sans-serif;.

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

• Remove all widths.

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

• Since all of the text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

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

• To create the space between the image and the edge of the card, set padding on all 4 sides of the card: padding: 16px.

• On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container. Remove the margin, the space around is created by the padding on the card. You can add a bit of margin-bottom, though.

• Remove position: absolute on the footer. Add gap: 2rem on body to create some space between the main and the footer.

• Remove margin-left and margin-right on the <h1>, it is not needed because the card itself has padding. Quick tip: if you ever want to set the same value for margin-left and margin-right, you can use the shorthand margin-inline.

nicee