Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

stats-preview-card-component made with React, Sass, Mobile-First.

@Lusk1nha

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my first project in React.

I know that this project would be easily done with HTML and common JavaScript.

But I decided to do it with React to have my first contact with this library.

So if you have any feedback I would be grateful.

Community feedback

@triptych

Posted

Great job. You've inspired me to log into this site and try this myself.

1

@Lusk1nha

Posted

You're welcome, I'm glad to hear this.

0
Rayane 1,935

@RayaneBengaoui

Posted

Hello Lucas Pedro,

Congrats for completing this challenge and trying out React! 🙂

For a little project like this one, it's quite heavy, but when you'll do bigger projects with React you'll see how enjoyable is it to re-use components and manage state ! 😉

Here I would just suggest to use mix-blend-mode: multiply on your image rather than filter to mix it with the purple background and thus get closer to the design.

Overall, well done for the challenge and happy coding ! 😃

1

@Lusk1nha

Posted

Thanks. I didn't really know about this mix-blend-multiply mode;

0
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hello there, Lucas Pedro! 👋

Just wanted to drop in to say nice work on another challenge! 🙌 Overall, your solution looks pretty good and is responsive! 😀

I'd just second RayaneBengaoui's tip for getting the mix of colors in the image a little closer to that of the design. 🙂

Keep coding (and happy coding, too)! 😁

0

Please log in to post a comment

Log in with GitHub
Discord logo

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