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.