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 Repo
- Live Site URL: Github Pages
Went about it in 4-5 phases:
- general layout
- Applying colors , missing elements like icons, and fine tuning layout
- Responsive to mobile
- Adding hover effects to main image, title and author's name
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
First time implementing this, had to look at several examples and play around with the css to understand more about how it works. Still somewhat confusing, but will learn more as I re-implement it in future projects.
I discovered applying transperancy will not allow you to change it for decendant elements. My icon-view.svg before the fix also had 50% opacity. I had to convert it to a sibling and apply similar rules for layout but opacity to 100%.
Initially I tried to apply the image overlay using flexbox only, will need to research more about how that works.
-
How TO - Image Overlay Icon - This helped me apply overlay effects on images. I really liked this pattern but will seek out different implementations.
-
Non-Transparent Elements Inside Transparent Elements - This is an amazing article understand how differing opacities can't exist in if one element is a decendant of the other. I'd recommend it to anyone still learning this concept.
- Frontend Mentor - @elixy
- Twitter - @elixy_dev