QR component using html/css

It is good that you followed the design specs and your HTML semantics are very reasonable.

A few suggestions for your CSS code:

• You can remove the width: 100vw and the margin: auto you have already centered the card the flex stuff in your .container class.

• For accessibilty reasons, it is necessary to always use rem instead of px when adjusting the font-size. A visually impaired user might want to increase their deafult font-size in their settings and rem makes sure that the font size corresponds to thier change. Pixels does not do this making it an accessibilty concern.

• It is more safer to use max-width instead of width for your .container class, using width can cause overflow of content on smaller screens (although testing your website, I don't see this problem). By using max-width, you can choose a the width you want your container to be, while also ensuring that it will shrink on smaller screens.

Keep it up!

The project is structured properly. The code is easy to read and follow.

The project is not responsive to different screen sizes and could be improved by removing the additional scrolling. The CSS could be applied to fix the issue with overflowing elements.

The project is good and looks just like the design.