Responsive QR code website using CSS Flexbox

Hi @Zidan-Niyas,

Your solution looks very close to the design, good job! I like that you experimented with flex.

There are a couple reasons why your card wasn't aligning vertically, let me try to explain:

• The body element has the property display: block by default. Which causes it to scale with the content inside it. If you add min-height: 100% to the body it will take up 100% of the height of the screen at a minimum. You'll be able to center your card then using flex.

• You mixed up align-content: center; and align-items: center; You can read up what the difference between the two is here.

I suggest reading this article if you want to learn more about flex. It helped me out a lot in the past and I still use it as a cheatsheet.

A bit of friendly constructive feedback:

• I suggest using clear and descriptive classes for your elements, this helps other developers understand your code.

• You could try experimenting using gap in combination with flex to set the spacing between elements instead of padding. It's a handy property.

• CSS variables could make your code more reusable and helps you remember values like hex-code colors easily by assigning a name to them.

I hope you find my feedback helpful and my explanation makes sense. Let me know if you have more questions I could help with.

Happy coding!