All solutions

While the design was easy to code... the interesting part was the hover effect on the image.

The hover effect was achievable until it was not aligned properly.. and there were many ways to solve this issue.

such as using grid positioning but instead.. i resorted with the help of google & stack overflow to use position absolute for image icon and the parent div (that holds both the icon for the hover effect and the image) a position relative.

Hey All,

I am curious as to how you guys managed to get pixel perfect designs in regards to font-sizes, spacing (padding, etc..) & opacity. As it was difficult for me to get it perfect.

the style guide mentioned a font size of 16px for body but it was kind of mis-leading as some elements are definitely not 16 px in my opinion.