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 card

#sass/scss#bem
Krypton 180

@madhusudanbabar

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


how can i blend the violet color with that background?

Community feedback

Nick 760

@Nick331102

Posted

This is the easiest way I have found for the overlay, but there are other ways try using an inset box shadow box-shadow: inset 0 0 0 1000px rgba(109, 54, 199, 0.596); you can adjust the color.

Marked as helpful

1
P
AK 6,700

@skyv26

Posted

Hi! Krypton, you did it good, all seems nice to eye in desktop view but as soon as I moved to mobile view then I noticed some issues.

  1. In mobile view your card is going outside from both ends at top and bottom.
  2. I saw your code and even in your issues report it is clear that you have used picture tag inappropriately, and you need to fix it. my suggestion is use only figure tag along with img to place image in your design.

I hope you understand and soon will fix it.

Good Luck

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