Responsive QR-Code-Component

wrap <div class="attribution"> within the footer tag to make the content/page accessible.

Give the alt attribute img a value. The value of the alt attribute is the description of the image. For decorative images like icons, there is no need to give it an alt value, for more on alt attribute Click here.

Give h1 and p the same font-size of 15px which is 0.9375rem, text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

To center .container on the page using grid, replace the height in the body with min-height: 100vh.

body{
min-height: 100vh;
display: grid;
place-items: center;
}

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

I like the attention to detail on the colors and typography. Here are some improvements you can consider:

The QR code <img> should have alt text that describes what the image shows. Maybe something like "QR code" or "QR code to Frontend Mentor website".

Also, notice the border radius of <img> shown in the design. It's actually smaller than the border radius for the card itself as opposed to being the same border radius size.