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 component solution

dewslyse• 3,025

@dewslyse

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


Comments and feedback welcomed. Thanks.

Community feedback

@IEdiong

Posted

Nice job!

Almost pixel perfect. You could look into the following;

  • changing the img width at lower screen sizes in order to avoid the distortion of the image. Use
@media (max-width: 640px)
.img {
    max-width: 100%;
}

instead of .img {width: 100%}

  • You could also look into the accessibility issues raised in the report.

I hope this was helpful, Cheers 🥂

0

dewslyse• 3,025

@dewslyse

Posted

Thank you @IEdiong

0
Israel Adefidipe• 360

@iadefidipe

Posted

Great job, your implementation is almost pixel perfect. The platform flagged some accessibility issues, you should check that out. cheers

0

dewslyse• 3,025

@dewslyse

Posted

The accessibility issues have been addressed. Thanks!

0
Tom Peirs• 40

@peirstom

Posted

Nice!! I also just finished this code challenge. I could not really figure out how to style that image like you did. Thank you! (I took a look at your code and learned I have to use the mix-blend-mode)

0

dewslyse• 3,025

@dewslyse

Posted

The image overlay was a tricky one. After several unsuccessful attempts, I also took a look at someone's code to figure out how it had been implemented.

2
Denis Pankov• 25

@idenispankov

Posted

@dewslyse Good job, I have just downloaded an image from figma and it was already blended, lol )))

0
dewslyse• 3,025

@dewslyse

Posted

@idenispankov perks of having a pro account 😆

1

@AbdelkaderAbbes

Posted

Great Job!

0

dewslyse• 3,025

@dewslyse

Posted

@AbdelkaderAbbes Thank you!

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