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.
π³ The challenge
π³ Screenshots
π³ Links
π³ Built with
π³ What I learned
π³ Useful resources
π³ Author
Users should be able to:
π― View the optimal layout depending on their device's screen size
Live Site URL π
Solution in Frontend Mentor π
Challenges overcome π
β Semantic HTML5 markup
β CSS custom properties
β Utility classes
β Flexbox
β CSS Grid
β Mobile-first workflow
mix-blend-mode
CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
.illustration {
/* 1. Set background color in the parent container */
background-color: var(--soft-violet);
}
.illustration__pic {
/* 2. Apply the "mix-blend-mode" property */
mix-blend-mode: multiply;
filter: opacity(.75);
}
Effects with CSS by @midudev
β¨ Frontend Mentor - @mendezpvi