Product Preview Card

What are you most proud of, and what would you do differently next time?

I wanted to make my code efficient and maintainable by defining global variables in the :root (such as fonts, colors, and spacing). It was really satisfying to write code faster this way.

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

For the product photo, I noticed in the mobile version of the Figma design that the image wasn’t properly centered and had been manually repositioned along the X and Y axes for aesthetic purposes. To match the design, I used the object-position CSS property, which allowed me to replicate the original look.