Submitted

Stats preview component solution

dewslyse 3,005

@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

Report

0

Accessibility Issues

0

HTML Issues

View Report

dewslyse’s questions for the community

Comments and feedback welcomed. Thanks.

Community Feedback

@AbdelkaderAbbes

Posted

Great Job!

0


dewslyse 3,005

@dewslyse

Posted

@AbdelkaderAbbes Thank you!

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,005

@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

@idenispankov

Posted

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

0

dewslyse 3,005

@dewslyse

Posted

@idenispankov perks of having a pro account 😆

1

@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,005

@dewslyse

Posted

The accessibility issues have been addressed. Thanks!

0

Ediongsenyene 1,335

@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,005

@dewslyse

Posted

Thank you @IEdiong

0

Give some feedback to @dewslyse about their solution...

Slack logo

Join our Slack community

Join over 80,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!