QR code Component

Greetings! you have done a great job 😎

📌 Some accessibility and semantics recommendations for your HTML

• To improve the semantics of your HTML, you can change your <div class="wrapper"> to a <main class="wrapper"> and the <div class="attribution"> to a <footer class="attribution">
• Remove that loose div
• The attribution should go outside the main
• I can only mention an accessibility issue, you can add a short description to your image with the alt attribute. In case it is just a decorative image, such as an icon or logo, you can leave it empty: alt="". More info

📌 Some suggestions

• Add a padding to generate interior space on your card. This prevents you from using margin or padding on child elements to achieve the same result
• I think that the img of the banner does not occupy the corresponding width because you applied a height:200px, at least on desktop screens, this causes the borders to not be seen correctly. To solve it, you could leave the height: auto, add max-width: 100% and correct the border-radius: 16px
• Some elements do not have the color set in the design, but they look good the same
• Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:

body {
    background: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    gap: 20px;
    flex-direction: column;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 500px;
    max-width: 350px;
    background: white;
    border-radius: 25px;
    text-align: center;
    padding: 16px 16px 30px 16px;
    box-shadow: 1px 1px 10px hsl(212, 45%, 89%);
}