All solutions

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

• Looks Identical to the original design
• Used semantic HTML
• Cared about tiny details

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

I realized that different software tools treat borders differently. This made a 2px difference in the overall width of the card, But I managed to work around this by decreasing the overall padding to make it look pixel-perfect. so here's a list of challenges I did encounter:

• Borders are treated differently between software tools
• In this project I needed to specify the correct image height

What specific areas of your project would you like help with?

I wish to understand the pixel-perfect difference in padding-margin added by default to the text in design software. because I find that the vertical space between an element and a text can be larger by a few pixels than what the software shows/tells.

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

Attention to small details, adding and altering shadows based on screen size, and pixel-perfect matching.

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

The challenge I encountered was calculating an adaptive border-radius. I overcame it using calc()

What specific areas of your project would you like help with?

none