QR Code Component Solution using Bootstrap Cards

Hi 👋, perhaps some of this may interest you:

• It is convenient to separate the code in different files (HTML, CSS) for a better organization and easier maintenance.

HTML / ACCESSIBILITY:

• The main content of every page (the card in this case) should be wrapped with the <main> tag.

• Every page should have an <h1> to improve user experience and because it is an important element when it comes to SEO. It is good not to skip heading levels.

• In general, styles shouldn't be added inline (as you did with the card width), better to write all CSS rules together in an external file.

CSS:

• The page content could be centered using Grid or Flexbox. For example as follows:

body {
min-height: 100vh;
display: grid;
place-content: center;
}

And removing the margins.

I hope you find it useful, any questions do not hesitate : )

Regards,

Nice work 😁! I like the coloring! Try to remove width from your HTML, it should center the card in a small screen

<div class="card" style="width: 20rem;">