This is a solution to the Stats 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
- Solution URL: https://github.com/DarrickFauvel/fem07-stats-preview-card-component
- Live Site URL: https://fem07-stats-preview-card-component-drrck.netlify.app/
- Mobile-first workflow
- Semantic HTML5 markup
- CSS Grid
- Sass - CSS with superpowers
- Parcel - Zero config build tool
I learned about the CSS property mix-blend-mode
and how to apply it to this project.
The image used in the card is a black & white photo. So, I placed the <img>
inside a <div>
with a soft violet background color.
Using the following CSS:
img {
mix-blend-mode: multiply;
opacity: 0.75;
}
I believe I got the results that match the design.
- Website - Darrick Fauvel
- Frontend Mentor - @DarrickFauvel