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

Desktop design

Mobile design

Links

• Solution URL: https://www.frontendmentor.io/solutions/stats-preview-component-card-using-flexbox-sass-and-html-oT9KGgdAP
• Live Site URL: https://bryanclouddev.github.io/StatsPreviewCardComponent/

My process

Built with

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

What I learned

I am really happy to know that I have lerned how I can add a background image and also a background color both of them at the same time using the CSS property "background-blend-mode" with the value "soft-light" in order to have the faded pink background color and also the background image:

<section class="img-color">

.container .img-color {
    width: 100%;
    height: 25em;
    background-image:url(https://i.imgur.com/hTcFdjS.jpg);
    background-color: rgba(170, 91, 219, 0.7);
    background-blend-mode: soft-light;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }

Continued development

I am committed to keep improving my skills when naming classes and also how to make better responsive images to avoid using so much mediaqueries for them.

Useful resources

• How to fade backgrounds with CSS along with images - This helped me because I did not know how to mix a background image and a background color at the same time.

Author

• Website - bryancloud.dev
• Frontend Mentor - @bryan-cloud
• Twitter - @BryanCloudDev

Acknowledgments

I really want to thank to Codigofacilito, it's a spanish channel on Youtube I learned how to work with the hero image and how to fade it with CSS.

You can check their videos here:)