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
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

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

Screenshot of my solution

Links

• Solution URL: Click to see my solution working!
• Live Site URL: I don't have a site yet, so here is My Anime List

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

I didn't know how to turn the black and white image from the images folder into that purple duotone of the design, so I had the idea to create a purple pseudo element, place it over the image and use the multiply blending mode. When it worked I was so happy 🤩🥳

.bg-image {
    position: relative;

    width: 100%;
    height: calc(165px + 20vw);

    background-size: cover;
    background-position: bottom 10% center;
    background-image:
        var(--img-gradient),
        url(../images/image-header-mobile.jpg);
}
.bg-image::after {
    content: '';
    
    position: absolute;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: var(--accent-color);
    mix-blend-mode: multiply;
}

Continued development

I had a hard time trying to use Sass in this challenge, so I gave in (for now) and just used pure CSS. I'll now focus in mastering Sass and will for sure use it in the next challenge.

Useful resources

• MDN - The documentation will always be by my side.

Author

• Frontend Mentor - @Paulo-Emerencio
• Digital Innovation One - @p_emerencio
• My youtube channel - Rock com Legendas
• Support my channel - Padrim

Acknowledgments

My special thanks to Marco Bruno Dev and Kevin Powell, they both taught me a lot of HTML and CSS.