All solutions

I'm slowly getting the hang of positioning objects with Flex. My biggest issue was figuring out how exactly to get that divider to be perfect. I was eyeballing the design. Even with a tiny border of 1px, the divider looks a lot thicker than the one in the design template.

Additionally, I've noticed that I seem to be writing a lot of unneccessary CSS when some of it could be consolodated into one rule.

• I had trouble centering the card vertically, but it turns out you need to specify the height in the html and body. Interesting.

• Other than forgetting some padding, I think I managed to do it somewhat well :)

• The CSS is a bit of a mess, I'm sure I can refactor it and make it more efficient / less repetitive.

• I had problems trying to get the image to fit into the div with equal white space on all sides. I had to manually adjust the padding-top to make it "fit" (i eyeballed it), because it always seemed to be less than the padding on all sides, even if set with the same values.
• I also had trouble getting the card to appear in the middle of the page rather than be aligned with the top.

• I'm fairly confident with my HTML so far, but I'm a little bit unsure with CSS. I'm still wondering when I should re-use an existing CSS rule, or if I should make a new one specifically for a certain element.

• First time submitting a solution / deploying a Vercel page, so apologies if I broke or missed anything :)