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

@jasnoludek

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


EDITS: Max-width of the card container lowered from 63.75rem to 30rem for mobile screen sizes

A margin of 1.5rem is applied to the main element.

Mix-blend-mode is applied to the image and opacity of 0.75.

Thanks @solracss !!

Thank you for checking out my solution to this challenge. I believe some areas need to be refractored in order to have a smoother transition between mobile and desktop versions.

I am not sure I am on the right path to properly setting the color overlay to the image.

Always looking for new knowledge regarding best practices and accessibility.

Community feedback

T
Grace 29,290

@grace-snow

Posted

This is a really nice solution, well done!

Only a few minor suggestions

  • for the list without list styling to be consistently accessible as a list, you need role of listitem on each li as well as the role of list on the ul
  • the source inside a picture element can't have an alt attribute. Pictures only have one alt and that goes on the img part

That's all from me, well done again

Marked as helpful

1

@jasnoludek

Posted

Thank you @grace-snow, I made the changes to the html as you described.

0
C4rlos 410

@solracss

Posted

Add mix-blend-mode: multiply;, change opacity to 0.75 for your image and you got it.

For RWD you can add max-width for your card (decide what would be the best) mobile version. This would prevent for enormous streching.

I'd suggest switching to desktop at around ~1200px.

https://getbootstrap.com/docs/5.0/layout/breakpoints/

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