qr-code-component

Replace <p class="text1">I with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues.

Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

There is no need to give .card position: absolute, display flex and its properties, for a responsive content give .card a fixe max-width value and increase its padding value. max-width:320px padding:16px

There is no need to style .card-qr rather replace the width in the img with max-width for a responsive image.

Give . text a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1. Give p a margin-top or h1 a margin-bottom value for the space between the text.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING