Frontend Mentor - Stats Preview Card Component Solution

This is a solution to the Stats Preview Card Component Challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/stats-preview-card-component-using-scss-OfCOO0GhZ
• Live Site URL: https://fundakartal.github.io/stats-preview-card/

My process

Built with

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

What I learned

• mix-blend-mode

This CSS property helped me to achieve the desirable result of getting as close to the original design as possible.

&-overlay {
      background-color: $soft-violet;
      height: 250px;
      mix-blend-mode: multiply;
      border-radius: 10px 10px 0 0;
    }

• background-blend-mode

This is how I handled it instead of using a div for the overlay. It saved the code redundancy.

&-image {
    background: $soft-violet url('../images/image-header-mobile.jpg') center / cover no-repeat;
    background-blend-mode: multiply;
}

• gulp.js >> Leverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines.

Even though it is a small project with a single component, I wanted to use gulp.js. It's been good for me as a preparation for other big projects.

Useful resources

• mix-blend-mode @ MDN Web Docs

• mix-blend-mode @ CSS-TRICKS

Author

• Frontend Mentor - @fundakartal
• Twitter - @fundakartal