qr-code-component

Hello!

Great solution! A few suggestions.

• HTML
  • use semantic elements. Wrap your code in main element or rename div class="box" to main class="box". Use h1 instead of general div element
  • don't use <br> because screen readers will make pause in these places which will break the whole message, just let the text wrap by itself or use padding/margin to limit available space
  • read this article about Alternative Text
  • don't set width and height attributes in img element, specify those with CSS like this max-width: 100% that way image will occupy available space and resize according to it

• CSS
  • I wouldn't set * { margin: auto; }. It can create problems later on because in different cases margin: auto; behaves differently. Plus you use margin afterward and thus you overide previous rule.
  • there's no need in specifying background-color for each element as by default it is set to transparent
  • don't limit width and height of card component, set only width or better max-width
  • to create space around image and text use padding on .box

Great job! Goodbye!