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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Screenshots

Links

• Live Site URL: Live Server

My process

Built with

• Semantic HTML5 markup
• Flexbox
• Mobile-first workflow
• CSS Media Querys

What I learned

While working on this project i needed to change the color of an image, so i learned how to do it, i basically learned the "background-blend-mode" property, and how this property mixes colors from a background color and background images, snippet from code below:

<div class="image"></div>

.image{
    background: url(/images/image-header-desktop.jpg);
    background-color: var(--Soft_violet);
    background-blend-mode: multiply;
}

More about "background-blend-mode" property HERE

Continued development

I'm not entirely happy with the CSS architecture in my project, so... I'll keep learning in this area.

I think there are better practices for CSS files, and obviously I want to learn them.

Useful resources

• MDN - This helped me understand some CSS properties.

Author

• Frontend Mentor - @jorgeluisah47