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
Final version on desktop:
Final version on smaller devices:
- Solution URL: Linked Frontend Mentor Challenge Solution
- Live Site URL: Deployed on Netlify: NFT Preview Card Component
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Brushed up my flexbox skills
- Learnt about responsive design
- Learnt about image overlays
- Image Overlay Effect - Since I didn't know about complex topics like ::after and ::before elements, I just found this great youtube video which just works for this particular challenge. It's not the best but it does the job.
- Best Flexbox Guide you can have - If you don't know about flexbox, this is the best guide or cheatsheet you can find on the entire internet. It's great for pros as well as for beginners.
- Website - Kuldeep Solanki
- Frontend Mentor - @kuldp18
- Twitter - @itskuldeep8
- Instagram - @_kuldeep_solanki