Stats Preview Card Solution

What are you most proud of, and what would you do differently next time?

Being able to finish the solution to the best of my ability. I feel that i am starting to solidify my understanding of Flexbox. For next time, I would want to use grid layout to do this design.

What challenges did you encounter, and how did you overcome them?

One of the major challenges that I had in this solution, was changing the color on the black and white picture. I initially tried using hue(), greyscale() and saturation() but I couldn't get the expected color.

To overcome this, I did some research on CSS color blending and was eventually able to figure it out. I implemented the pseudo element ::after and utilized mix-blend-mode and opacity.

.image-container {
    position: relative;
}

.image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--Soft-violet);
    mix-blend-mode: multiply;
    opacity: 1;
}

What specific areas of your project would you like help with?

I would love help to make this solution more optimal. Theres always room for improvement!