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

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: Github Repository
• Live Site URL: Preview Website

My process

Built with

• CSS custom properties
• CSS Filters
• Flexbox
• Mobile-first workflow

What I learned

The biggest thing I learned with this project was how to apply filters to images in CSS.

Even though I don't have a complete grasp on how the different blend modes work, I found one that does what I need, and this is enough for now.

Here's the code snippet:

.mobile-image, .desktop-image {
    fiLter: contrast(60%) brightness(115%);
    mix-blend-mode: multiply;
}

Continued development

I need some kind of system in which I can organize the different font sizes I need for a project, instead of having seemingly random numbers all accros the place.