QR code

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

HTML

In order to fix the accessibility issue:

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

CSS

• If you want to center it correctly, you can use flexbox, and it is an easy way to center. You can update your body in this way:

body {
    background-color: hsl(212, 45%, 89%);
    min-height: 100vh;       // it is usually used as "min-height"
    width: 100vw;
    font-family: "Outfit", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

• and your .qr-component should be updated like this:

.qr-component{
     max-width: 320px;    // max-width makes it responsive
    text-align: center;
}

• If you want to update .attribution position, you can edit .attribution like this:

.attribution {  
   position: fixed;
   bottom: 0;
   font-size: 11px; 
   text-align: center; 
}

Hope I am helpful. :)

Hi Akisheva, you've done a very good job for this challenge!

To solve the accessibility reports, just change your qr-component element from "div" to "main" and trying always having everything in an header, nav, main or footer. This makes it simpler for screen reader users to go through your website.

It might be something you don't want in this challenge, but it will become useful in the future

Also, to center your div you can use a "display: grid" and "place-content: center" on the body element

I hope this helps! Keep on going!