Submitted over 1 year ago

Stat Card Using HTML & CSS With FlexBox

Ragu-The-Developer• 120

@Ragu-The-Developer

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Here i am created an stat card using HTML & CSS with flexbox also here some doubts is how we can create an html tag that have image and contents look same and in same line and what properties must be used? also the image color which didn't change.

Community feedback

George Bleyer• 280

@georgebleyer

Posted over 1 year ago

Hello,

Congratulations on completing this challenge. Here are some tips on how you can make the image purple:

In the HTML

<picture></picture>

In the CSS

picture{
     background: url("../images/image-header-mobile.jpg");
     background-color: hsl(277, 64%, 61%);
     background-blend-mode: multiply;
}

The <p> you can include a opacity: 60%; to make it more like the project.

I hope it helped.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord