Skip to content
Submitted over 3 years ago

Stats preview card component solution

Julien•20
@julienbenincasa
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

Hello ! This is my solution for this challenge. I'm quite satisfied of the result but I have the feeling that I made I difficult for no reasons. I think that there are way easier ways to display the main container. I used px (I thought it was easier for the img) which I think isn't the best way to do it, maybe I should have used % or vh or I don't know what. I think the responsive side is ok but my method ****ed me a bit for Ipad widths (I cut a very very little bit of content).

If you have any tips on html/css manners that I should avoid or things that could save me time and make the responsive side easier and cleaner, let me know !

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 3 years ago

    👋Hi Julien! My name is Vanza!

    My tips to create the overlay, try to use background-blend-mode: multiply, on picture-container and also add background-image on that too. That way, you don't extra html markup to do it.

    Also, last but not least, you can try to add padding on body to prevent the big-container touching the edges of the screen(you can see this issue on 980px screen size or breakpoint).

    That's it! Hopefully this is helpful!

    Happy Coding!

    Marked as helpful
    1
  • Jose Berrios•215
    @surphuryPosted over 3 years ago

    It looks very good, ¡keep coding!

    0
    Julien•20
    @julienbenincasaPosted over 3 years ago

    @surphury Thanks!

    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