QR Code Component using Flexbox

Your site looks pretty good. To answer your question, I personally think its better for you to use a regular <img> tag to insert the QR code. The reason being that the QR code is apart of the page's main content so it should be inserted using the img tag, whereas background-image is usually used for things that are not apart of the page's main content.

Additionally, when you use an <img> tag it allows you to use an "alt" attribute to describe your image. This may be useful when the image fails to load, and the alt text appears to let users know that something failed to load. Also, the "alt" text can be detected by screen readers, whereas background-image can't be detected. So its important for accessibility purposes.

Hello!

I'm not entirely sure if that is a good practice or not, but I could share a piece of advice that I just received as well.

I noticed that you used "height: 100vh" there. That is going to cause problems if you zoom by ctrl + "+". (go more than 150% and your content will be cropped)

The reason is this: when you zoom, the size of everything else changes, but the size of your container will stay constant at whatever 100vh is. (This happens because your viewport has the same height whether you zoom or not. So 100vh will be the translated to the same value in pixels before and after the zoom)

If the size of everything else increases but the container's height is the same, it leads to overflow and that's why you see the component appear as cropped.

The solution is to use min-height: 100vh;

Also, congrats for your submission! The card looks neat!

I hope I was clear enough and please take what I said with a grain of salt and do your own research as what I just told you is my own interpretation of my own research and I do not claim to be 100% right.