QR code components

Hey! good work on the project.

Here are a few recommendations that I feel like would help:

HTML:

1. Every webpage should have <main> to wrap its main content around. Other tags include <header> <footer> but these are irrelevant for this current project. These are extremely important for accessibility. So wrap your card with <main> tag.
2. For this current project, you would need only one class for the card. That should be sufficient for this project.

CSS:

1. Include 1rem of padding on the body. That prevents the card from touching the edges on a small screen.
2. To try and center the div you can use Flexbox property. Here is a link that will help you with this.
3. One of the people from the community pointed out that I shouldn't use widths and heights because in web design, we need our components to adjust to the size of different screens. Setting it to px will fix them to those properties and they will not be able to adjust.
4. font-size should never be in px. This prevents the font from scaling. A better approach would be to use rem instead.
5. Put the font-family in the body. Remember to also specify a fallback font font-family: 'Outfit', 'san-serif';
6. You can use display: block; and max-width: 100% to prevent the content from overflowing.
7. Also, it would be a good idea to create a separate CSS file for all the styling. Makes it easier to debug and maintain.

These are all the tips I received when I submitted this challenge and I made almost the same mistakes. So I thought it would be helpful for you as well. :)