QR code component

Replace <div class="card"> with the main tag and <h3> with <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html

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

Give the img a max-width of 100% for a responsive image.

Give .card_text a margin value for all the sides and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Nice solution for this challenge!

But I would like to advise not randomly use a heading (in your case the h3). Always use a h1 first and after that h2, 3 etc. in ascending order. You should use the h1 only once per page, the others can be used more if needed.

You should also take a look at semantic HTML (link) code, for example in your code put the <div class="card"> element between <main></main> tags. This combined with the right headings makes your webpage usable for screenreading software and such.

Hope this was helpfull and happy coding!