QR code component

Hi!, I have some suggestions for your code.

I have checked and you could use another method to center the component on page, currently you use:

.card{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
}

And this can make it overlap other HTML elements like:

  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Your Name Here</a>.
  </div>

you could simplify it by using margins, using the viewport as a measure and so all your element would be centered without overlapping any other html element.

margin: 25vh auto;

Also your image and text at low resolutions will overflow the chart container since they have absolute sizes like:

.card{
  max-height: 499px;
}

img {
  height: 288px;
  width: 288px;
}

You can use percentages for the responsiveness of your image within its container so that it does not overflow. As well as removing the max-heigth of the card so that it adapts to the content inside it.

.card{
  max-width: 320px;
}
img {
  max-width: 100%;
}

I also recommend the use of relative units such as rem or em in the font-size as well as in other elements such as padding or margins.

/*  1rem = 16px  */

Hi, nice job, you can improve your QR code to be more accessible by wrapping your card with the main element, and using the article element as your card. e.g.

<main>
  <article>
    <h1>Heading required</h1>
  </article>
</main>

and you can center your card both vertically and horizontally by using flexbox and set both the align-items and justify-content to center, but first you have to place your card in a container with a height of 100vh .e.g.

.container{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}