QR code component solution With HTML and CSS

Hi 👋, I leave this here in case you want to take a look:

HTML 🧱, ACCESSIBILITY ⚖:

🔹Semantic elements:

• The main content of every page (the whole card in this case) should be wrapped with the <main> tag.
• Every page should have an <h1>, and it's good not to skip heading levels (start with <h1>, then <h2>, and so on).

🔹This is a meaningful image and in case the user can't see it, the alt text should give a good description, maybe something like 'Qr code to visit the Frontend Mentor site'.

CSS 🎨:

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

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

🔹Length units such as pixels may not be the best alternative because screen sizes and user preferences vary, and absolute units don’t scale. Relative units like em or rem are a better option for scalable layouts (the page will adjust to the user's browser settings) and maintenance (to make changes without having to adjust every pixel value).

🔹You don't need to use font-weight of 400 and 700 as these are the default values for the normal and bold font respectively. So, these are the default values for paragraphs and headings.

Please let me know if you disagree with something or if you would like more information on any of these topics.

If you have any questions I’m here to answer so don't hesitate 🙂

Regards,

Editing of the code on 4/23/2023 Thanks to my dear friend @fernandolapaz who sent me a good feedback that I could write my codes more fundamentally.