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

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
• Mobile-first workflow
• Styled Components - For styles

What I learned

Since one word in the heading has a specific color that is different from others, to avoid creating a seperate div or class, I learned that adding a span element with style would work perfectly, which allowed me to change the color of the word "insights" to violet.

<h1>
  <b
    >Get <span style="color: hsl(277, 64%, 61%)">insights</span> that help your
    business grow.</b
  >
</h1>

Also, to try to mimic the side image of the design preview, instead of simply adding a layer with some opacity, using a mix-blend-mode would do a better job to achieve this goal. I tried different blend mode and find the best one.

.layer2 {
  background: var(--bg-light-violet);
  height: 100%;
  mix-blend-mode: color-burn;
}

Useful resources

• Mix-Blend-Mode - This helped me learn the mix blend mode feature in the css and I found it quite helpful.

Author

• Website - Yiwen Xu