This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
I have developed using a Desktop First approach. I implemented the components piece by piece, when this was done I combined them and made the layout more responsive. I tried implementing Glassmorphism but it did not appear that great on this component due to the conflicting background colors.
- Desktop-first workflow
- SASS - Stylesheet language
- Next.js - React framework
- React - JS library
- Tailwindcss - CSS framework
I have learned a bit more about Glassmorphism and image overlaying with hover states.
- Tailwind Cheatsheet - A Cheatsheet for Tailwind.
- Glassmorphism - Glassmorphism
- Website - Mike van Peeren
- Frontend Mentor - @MikevPeeren
- Linkedin - @MikevPeeren
- Github - @MikevPeeren
- GitLab - @MikevPeeren