qr-code-component- HTML, CSS, Flexbox

Hi there!

For accessibility issues, you always need one landmark. Here is some documentation

I suggest using the <main> as it is required. You can surround the entire content within the body tag.

To center your card vertically, add the height: 100vh; the .container css to:

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

then remove the margin-top: 100px from your qr-code css class.

This will center your card better! Nice Work!

Hope that helps!

Steven

Hello Adriel, congratulations for your solution!

I saw that you comment that was hard to guess the elements sizes. My tip for you is that you use Figma and follow the reference image files. Note that in Figma you can also create a rectangle and measure the component elements to guess the possible width for each one. This helps you to have an idea of the elements dimension, about fonts is something you've to play with values to match.

But there's a lots of useful information inside the styleguide.md file. Its something to check before each challenge.

Hope it helps and happy coding!