Frontend Mentor challenges help you improve your coding skills by building realistic projects
This is an entry-level NEWBIE-Free challenge that uses only HTML & CSS
- build out this NFT preview card component and get it looking as close to the design as possible.
- See hover states for interactive elements
- mobile-version
- desktop-version
- Solution URL: Frontend Mentor Solution Page
- Live Site URL: GitHub Pages
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- with Visual Studio Code Editor
I learned an uncommon CSS property while building this project
img {
mix-blend-mode: *-css-keyword-*;
}
what this property does is, give us the accessibility to blend the parent element background with the using element's content.
I never knew this property exists in CSS until one of my Frontend Mentor Community friends pointed that out. Until now whenever some blended effect had to be created in a project, I followed an ordinary element overlaying method. But thanks to this, it is less code & markup.
- special thanks to Lucas from Frontend Mentor Community
- developer.mozilla.org more about the 'mix-blend-mode' CSS property
- Frontend Mentor - @M-lakshan
- Dev.to - @mlakshan