Skip to content
Submitted over 1 year ago

Stats Preview card component

jasnoludek•70
@jasnoludek
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

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

  • Grace•31,270
    @grace-snowPosted over 1 year ago

    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•70
    @jasnoludekPosted over 1 year ago

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

    0
  • C4rlos•410
    @solracssPosted over 1 year ago

    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

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