All solutions

I found offsetting the elements to be difficult because I did not have prior practice of using transform: translateY.

One problem I had during the process was getting rounded corners on the QR code image. I tried to round the corners on the div in which I put the image in, but that did not work. So, I manually added a border-radius directly to the img element. I still can't figure out why I could not round the corners through the div element.

This project got me thinking about CSS best practices and how to properly organize a project before getting into the nitty gritty.

I still find concepts like flex a bit frustrating but I know they will become easier and easier with more project-like practice.

Can the community point me to some excellent resources in order further hammer down these concepts? (CSS best practices and flex)