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
Overview
The challenge
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
Screenshot
Final version on desktop:
Final version on smaller devices:
Links
- Solution URL: Linked Frontend Mentor Challenge Solution
- Live Site URL: Deployed on Netlify: NFT Preview Card Component
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
What I learned
- Brushed up my flexbox skills
- Learnt about responsive design
- Learnt about image overlays
Useful resources
- 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.
Author
- 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% 🎉
Details
| 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