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

• Frontend Mentor - Stats preview card component solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Useful resources
  • Author

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: Right here!
• Live Site URL: Deployed on Vercel

My process

Built with

• Semantic HTML5 markup
• Svelte
• Flexbox & Grid
• WindiCSS
• Vite

What I learned

I had trouble adding the color overlay to the image, but after a little bit of googling I found the mix-blend-multiply className.

<picture class="block order-2 bg-violet">
  <source srcset="{imageHeaderDesktop}" media="(min-width: 640px)" />
  <source srcset="{imageHeaderMobile}" media="(max-width: 640px)" />
  <img
    class="opacity-70 mix-blend-multiply"
    src="{imageHeaderDesktop}"
    alt="team working in an office"
    width="540"
    height="466"
  />
</picture>

Useful resources

• Two ways to achieve an image color overlay - This helped me with the image color overlay.

Author

• Frontend Mentor - @Shawn Lee