QR code component

Some recommendations regarding your code that could be of interest to you.

HTML

In order to fix the accessibility issues:

• You need to replace <div class="attribution"> with the <main> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.

• Another issue is that your <img> tag should include alt ="" attribute. You can apply like this:

<img src="./image-qr-code.png" alt="qr-code">

• Each main content needs to start with an h1 element. Your accessibility report states page should contain a level-one heading. So, you need to use a <h1> element in the <main> tag instead of using <h3>. You can replace your <h3>Improve your front-end Skills by building projects</h3> element with the <h1>Improve your front-end skills by building projects</h1> element.

CSS

• You can apply this style below if you want to apply background-color for body

body {
  background: #d6e2f0;
}

• and if you want, you can update h1 (but now h3 in your code, if you change it, please pay attention to it) and p in this way:

h1 {                 // when you change h3 as h1, you update like this please :)
    font-size: 1.3rem;
    text-align: center;
    font-weight: 700;
    color: #1f3251;
    padding: 0 2rem;
    margin-bottom: 5px;
}

   p {
    font-size: 1rem; 
    font-weight: 400;
    text-align: center;
    color: #7b879d;
    padding: 0 3rem;
    margin-bottom: 3rem;
}

Hope I am helpful. :)