Submitted over 2 years ago

7th Challenge: Stats preview card

drunken_neoguri• 290

@DrunkenNeoguri

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

(I wrote this using Google Translate. Please forgive the grammar.)

Hello! This is the 7th challenge!

I had worked on a 'profile card' during a previous challenge, so this work was easy to anticipate and create the layout.

However, there was a problem when working with the image on the right. I thought it would be okay to blend colors and images, but it turned out to be a different color image than the challenge image.

Do you have any other way to solve this? Please let me know!

In addition, if you leave a comment and a reply, I will refer to it for study! Thank you for watching! :D

Community feedback

Jessica• 880

@perezjprz19

Posted over 2 years ago

I used a combination of mix-blend-mode and filter and I think I got pretty close. Here is a link to my solution:

https://www.frontendmentor.io/solutions/stats-preview-card-using-flexbox-q9VMaqf7M

Look for .overlay and .overlay::before in my styles.css file to see what I did for mine. It was one of the most challenging parts in my opinion and I'm still not sure that it's the best way to do it.

Marked as helpful

drunken_neoguri• 290

@DrunkenNeoguri

Posted over 2 years ago

@perezjprz19

Thanks for the reply!

If use mix-blend-mode and filter, I can express it like that! It was a good study! thank you! ><

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