Skip to content
Submitted over 3 years ago

Stats Component Preview using HTML | CSS | ☺️Little Animations

karenefereyan•375
@karenefereyan
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

#Hi, everyone.

This is my first solution after almost a year of submitting a solution on frontendmentor.io

The challenge was pretty easy to do. Here are the main issues I faced:

  1. How do I change the image based on the screen width? My research showed that there were several options. I eventually settled on hiding the mobile one on desktop screen size and hiding the desktop one on mobile screen sizes. Is there a better way to achieve that? Kindly let me know. I saw an option of using srcset though, but I'll explore that in subsequent challenges.

  2. The images each had kind of like an overlay on them. How could I get the same effect in CSS? I researched and finally found the mix-blend-mode property. Setting a value of multiply did the trick. I'm still currently reading about the mix-blend-mode property on mdn in order to understand it better.

  3. Lastly, i thought the site looked too plain. I thus used just a few animate classes from animate.css ☺️☺️☺️☺️☺️

What are your thoughts? Feedback is highly appreciated. In the words of the frontenders on here, keep coding! Happy coding!

Community feedback

  • Dave•5,295
    @dwhensonPosted over 3 years ago

    Hello @karenefereyan welcome back! ;👋 Nice work on this one the solution you put together looks great. Here's some small points you might like to consider:

    1. Yes! using the picture element with srcset would be the best option here (in my opinion). This prevents the user having to download an image that they probably won't see. Sometimes the markup for this can get a bit complicated, but this article explains the options well: https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/

    2. I think you have the right approach here, I think background-blend-mode is a good approach here, combined with a background color of purple or something - alternatively, you could try setting opacity on the image too, but I think you're approach is better. Another nice article: https://css-tricks.com/almanac/properties/b/background-blend-mode/

    3. I saw your image looks a bit squashed. I think that this is because you are setting both width and height on the image, which will fill the space you want, but will distort things. Better to set max-width or max-height at 100% but not both and set the other to auto. If you need to fill the space have a look at using object-fit with a cover value - this can work nicely.

    Hope this helps! Keep up the good work!! 🙌 and lets not wait another year for he next solution!! 😜

    Cheers 👋

    1
    karenefereyan•375
    @karenefereyanPosted over 3 years ago

    Thanks so much for the feedback. I'll definitely make changes. I thought I fixed the squashed image. I'll update it. And nah, you won't have to wait another year 😂😂😂😂😂😂😂. Keep on coding. Cheers!!!

    0

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