QR Code First Solution using margin and padding

Hi,

I'm not sure where I got the shadow on the QR code in all honesty lol. I put one on my solution but I think I meant to put it on the whole card itself. Looking at it now, there seems to be a subtle shadow at the bottom of the card, so it looks as if it is raised from the page slightly.

Either way, it's just one of these: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

If you Google 'css box shadow' there are websites which allow you to visually tweak a box shadow and then copy paste the css over.

Sorry for the confusion.

For the centring, I was doing this:

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

Looks good to me. If I had to nit-pick a few things:

• Missing the shadow on the QR code image.
• The card isn't vertically aligned with the page and so does not stay centred when you zoom out. Consider making the body element 100% of the viewport height and using flexbox to vertically align, rather than using top-margin as you have.

Hey Alan,

Thank you for your feedback, when you mentioned the shadow on the QR code image, do you have the command/coding example for it? Personally, I can't tell the difference between my design and its solution.

Also, for the body element 100% of the viewport height, is this the right command? body { height: 100%; }