Skip to content
Submitted 9 months ago

Responsive stats preview card

accessibility, bem, pure-css, animation
Djamel1133•910
@Djamel1133
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I did it just to master the responsiveness of images and see how to treat width and height together and how to scroll the image from one side to the other ... I'll add two small animations I hope you will like it friendsMentor ...

What challenges did you encounter, and how did you overcome them?

handling images sizes and ok that's it ..now it work

What specific areas of your project would you like help with?

Always and ever any advices are welcome...Thanks

Code

Please log in to post a comment

Log in

Community feedback

  • Asilcan Toper•2,980
    @KapteynUniverse

    Hey Djamel, nice job.

    It probably doesn't matter for this scale of animations, but you can wrap your animations with @media (prefers-reduced-motion: no-preference) { ... } Some users experience discomfort, headaches, or even seizures due to excessive or rapid animations on websites. The prefers-reduced-motion media query allows developers to respect user preferences and prevent these animations from playing automatically for users who have set this preference in their operating system or browser. Using only no-preference should work but you can also use this

    /* Apply animations only if the user has no preference for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .animated-element {
    animation: slide 2s ease-in-out;
  }
}

/* Remove animations if the user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;  /* Disable the animation */
  }
}

    Also, adding opacity: 80%; to the image would make it closer to the design.

    Marked as helpful
  • Djamel1133•910
    @Djamel1133

    Okaaaay thanks a lot my friend👍. @media (prefers-reduced-motion) 🤕 i'll check...Thanks.

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