Aligning page components using CSS Flexbox

Hello, Great job. I would suggest you to import your google font like @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100&display=swap'); in your stylesheet as you already have a separate style.css.

And change the color to h1 by Grayish blue: hsl(220, 15%, 55%).

I think you should make you're site responsive by using media query as: 320px — 480px: Mobile devices 481px — 768px: iPads, Tablets 769px — 1024px: Small screens, laptops 1025px — 1200px: Desktops, large screens

You can learn more about that here

Really good job Almira!

just a couple of things I want to point out.

1. Typography: I think you can pay some more attention to the text font sizes.
2. you can consider specifying a particular width for your texts so that they are consistent across all widths. Personally, I use ch as the unit when specifying widths for my texts. You can check out other units also.
3. for this particular challenge, you need to have a uniform padding across all axis. I see you used 15px for top and bottom and 5px for left and right but you can keep it at 15px on both axis.
4. You can also consider using a border-radius twice the border radius of the QR code.

This are just my opinions, definitely not the only way to go about it and maybe not even the best but I think this tips could help improve your solution. overall, nice work you've done. Cheers 🍻 🥂