Mobile-first solution using Flexbox

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

QR iMAGE ALT TEXT 📸:

• The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.

• The alt with Image of a QR code is not even explaining for what the QR image need to be used.

• So update the alt with meaningful text which explains like QR code to frontendmentor.io

• Example: <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Hey @ricochet69!

Congrats on solving this challenge, the result looks great - it's very close to the design!

Your initial idea of using a main tag to wrap everything is good. To be accessible and semantically correct, every page needs a main landmark, which in this case is the card itself. However, I would alter your HTML structure slightly: you can remove the main.container and apply its styles to the body element. Then, you can change the div.card to main.card. This way, you save on unnecessary elements and make your code clearer while still being semantically correct.

Your margin and padding look good to me, but you could make it even simpler if you applied the padding to div.card-details. Since both the heading and paragraph are direct children, they would be moved into position by that change. I am not sure if you even need this padding, though, might be unnecessary. The margin on both elements looks good.

I am not sure why you went with height: calc(100vh - 1px) on the container? You should be able to use min-height: 100vh without the need for calculations.

Let me know if you have any questions and keep up the good work!