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: https://github.com/vapppu/frontendmentor-NFT-preview-card-component
- Live Site URL: https://vapppu.github.io/frontendmentor-NFT-preview-card-component/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I learned about centering elements horizontally and vertically with flexbox. I figured out how to use inline svg icons. The transparent colored layer on the cube image when hovering was the most challenging thing. I worked it out by makeing the cube image a background image.
So far, the main image (the cube) is of fixed size in pixels. In the future, I would like to learn how to make it responsive so that the card could shrink if screen is smaller than the width of the card at the moment. I know how to make it work with and , but now that the picture is actually a background-image, I don't yet know how to approach the issue.
- GitHub - vapppu
- Frontend Mentor - @vapppu
- LinkedIn - Veera Hiltunen