QR code component

Congratulations on completing your first challenge! you have done really well

I can suggest the following:

• To make your image look better you can apply the following changes, instead of setting it to width= 288px, better set it to 300px, that will make your image really occupy 100% of the width of your card (without exceeding the padding). With display: block you eliminate a white space that is generated below the image. And with border-radius you apply the borders to the image, as in the design:

img {
    max-width: 100%;
    width: 300px;
    height: auto;
    display: block;
    border-radius: 10px;
}

Hello @JeanJackcss!

Your solution looks excellent!

I have just one suggestion:

• Since you used grid on the body, but you didn't set the height of the grid rows, your footer is pushing your card up because it is taking more space than necessary. You can do this to set less space for the footer:

    grid-template-rows: 95% 1fr;

This is not a problem. But since the card is the main content on the screen, it shouldn't be pushed by other elements.

I hope it helps!

Other than that, great job!