QR code component solution

👾Hello Ralph Custodio, congratulations for your new solution!

👏 Great start and great first solution! You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:

1.A best practice to have all the image inside the container scaling and respecting the size of the container, you need to add max-width: 100% and add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

img {
    object-fit: cover;
    max-width: 100%;
    /* width: 100%; */
    border-radius: 0.625rem;
    /* max-height: 18rem; */
    /* max-width: 18rem; */
    display: block;
}

2.You’ve used <div> to wrap the card container, in this case you need to use <main> since this is the main block of this page.

3.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

✌️ I hope this helps you and happy coding!

Hello Raph,

Great job on the design...!!!😊

The image paths should have a forward slash instead of backward slash.

Also, images should have an alt attribute for better accessibility for screen readers.