Frontend Mentor - Stats preview card component solution

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.

Table of contents

🔳 The challenge

🔳 Screenshots

🔳 Links

🔳 Built with

🔳 What I learned

🔳 Useful resources

🔳 Author

The challenge 🤓

Users should be able to:

🎯 View the optimal layout depending on their device's screen size

Screenshots 📷

Links 🔗

Live Site URL 👀

Solution in Frontend Mentor 👀

Challenges overcome 👀

Built with ⚒️

✅ Semantic HTML5 markup

✅ CSS custom properties

✅ Utility classes

✅ Flexbox

✅ CSS Grid

✅ Mobile-first workflow

What I learned 🤯

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);
}

Useful resources 🔥

Effects with CSS by @midudev

Author 🔰

✨ Frontend Mentor - @mendezpvi