Frontend Mentor - NFT preview card component solution
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.
Table of contents
- Frontend Mentor - NFT preview card component solution
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
What I learned
- 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
[ImgBot] Optimize images
Beep boop. Your images are optimized!
Your image file size has been reduced by 26% 🎉
| File | Before | After | Percent reduction | |:--|:--|:--|:--| | /screenshots/desktop-solution.png | 168.37kb | 120.67kb | 28.33% | | /screenshots/mobile-solution.png | 82.79kb | 66.33kb | 19.89% | | | | | | | Total : | 251.16kb | 187.00kb | 25.55% |
📝 docs | :octocat: repo | 🙋🏾 issues | 🏪 marketplace
~Imgbot - Part of Optimole family