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

Responsive Stats Preview Card using flexbox

Ayush Nathβ€’ 360

@Beats-Ayush

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


Faced some major challenges while trying to build this.

  • Would like some feedback on the image section of the card. I built it using background-image and linear-gradient which I feel is quite unnecessary here. Some other method to get the image using the img element?

-Also got quite huddled up in flexbox when the card gets to the breakpoint. Think it's alright now.

If there are any other issues, please feel free to criticize.

Community feedback

Shashree Samuelβ€’ 9,260

@shashreesamuel

Posted

Hey Beats-Ayush Good job completing this challenge. Keep up the good work

Your solution looks great when compared to the design however I think your line break should be applied before the text help.

I hope this helps,

Cheers, Happy coding πŸ‘

Marked as helpful

1
Abdulβ€’ 8,540

@Samadeen

Posted

Great Work Ayush Nath!

You can add a filter or blend your image to give it the sample effect.. You can also scale down your container a little to make your card smaller.. Overrall you need very nice..

Happy coding!!!

Marked as helpful

1
Danilo Blasβ€’ 6,300

@Sdann26

Posted

Hi, Ayush Nath!

Personally to get to make the effect with the color that is with the image I got it with the following property in CSS. That's what I can recommend for my part, good luck.

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Marked as helpful

1

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