NFT preview card component

Hello there 👋,

I am submitting another solution that works with a simple card centred on the screen.

Challenges

I experienced two more significant challenges whilst implementing this project.

The first was the realization that applying a CSS variable as a part of the media query condition is not possible. I had always used SASS or TailwindCSS, so I had never actually realized this before, but it was good to learn about this: https://bholmes.dev/blog/alternative-to-css-variable-media-queries

The second challenge was a hover state and ensuring we could adequately display the eye icon, transparency and the original background image in the top part of the card component.

I struggled a bit as I initially applied the eye icon as a background image, but fortunately had a chance to catch up with my colleague, a very advanced CSS developer. He shared some tips, and I could implement them without any problem.

Overall experience

In general, implementing this solution was relatively straightforward, apart from small bumps on the road caused by challenges mentioned in the preview sections.

The cool thing was that the project contained, compared to the previous submission, a few responsive layouts, and I could utilize the power of CSS variables in a broader context.

Have a wonderful day.