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
• Author

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

This was the first time I used mix-blend-mode and this was the first project where the desktop and mobile design was different (with other projects you just had to change the width of the elements) so it was a pretty good practice.

To see how you can add code snippets, see below:

.image-wrapper img {
    display: block;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    height: 100%;
    width: 100%;
    mix-blend-mode: screen;
    opacity: 1;
}

.image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    mix-blend-mode: multiply;
    background: var(--accent);
    opacity: 1;
    width: 100%;
    height: 100%;
    z-index: 99;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

Author

• Website - Viktor Kovács
• Frontend Mentor - @victorsonet
• Twitter - @GMLvictorsoN