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
- Solution URL: github.com/difooldevs/nft-preview-card-component
- Live Site URL: nft-prvw-component.netlify.app
- Astro - Static Site Generator
- Tailwind - CSS Framework
- Piccalilli CSS Reset - Modern CSS reset by Andy Bell
Learned how to bootstrap a project with Astro and stack it with Tailwind CSS framework. I added custom colors to Tailwind theme for the first time by modifying the tailwind.config file. See below:
theme: {
colors: {
'primary-soft-blue': 'hsl(215, 51%, 70%)',
'primary-cyan': 'hsl(178, 100%, 50%)',
'dark-blue-main': 'hsl(217, 54%, 11%)',
'dark-blue-card': 'hsl(216, 50%, 16%)',
'dark-blue-line': 'hsl(215, 32%, 27%)',
},
},
Although Astro was overkill for this project, I enjoyed using it and will continue to do so. It is a lightweight static site generator that will allow me to use React framework, but not require it.
- Website - difool.dev
- Frontend Mentor - @difooldevs
- Twitter - @difool0x