Blog Preview Card using Flexbox

What challenges did you encounter, and how did you overcome them?

I changed from a static to a variable font file because the static files only contained higher weights, which were very different from the design prompt provided.

I intially struggled to achieve the desired 3D effect for the card. I tried using border-style: outset, but that still gave a 2D shape.

I also experimented with box-shadow, which added density to the shape, but the opacity didn't match the design prompt. After researching the box-shadow property on the W3Schools website, I set the blur to 0, which resulted in a block color.

Additionally, I encountered an issue where the illustration image overflowed into the padding of its parent container. Through research, I discovered that setting the max-width property helped keep the image within the confines of its parent div’s content section.