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

Overview

Screenshot

Links

• Live Site URL: Stats preview card

My process

Built with

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

What I learned

I have learned how to use mix-blend-mod, which I find very intersting.

I had a lot of trouble having the picture on the desktop version take the entire height of the card. If the left part containing all the titles and text had more height than the picture on the right, the picture would not scale in height accordingly. In the end strangely enough the fix was to not set the height of the container (in which the picture is).

Continued development

Understand SVGs better especially now that i know i can use them has filters.

Next time I will try to focus on improoving my display: grid; skills.

Author

• Frontend Mentor - @Dodeun