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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • 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 👀

Solution in Frontend Mentor 👀

Challenge Repository 👀

✅ Semantic HTML5 markup

✅ CSS custom properties

✅ Flexbox

✅ CSS Grid

✅ Mobile-first workflow

🎇 mix-blend-mode: multiply

mix-blend-mode - sets how an element's content should blend with the content of the element's parent and the element's background.

multiply - the element is multiplied by the background and replaces the background color. The resulting color is always as dark as the background.

.card__image {
  background-color: var(--accent);
}
.card__image--bgcolor {
  mix-blend-mode: multiply;
}

🔥 Efecto con CSS by @midudev

🖼 Favicon - Pie Chart by The Halal Design Studio on IconScout

✨ Frontend Mentor - @mendez-v