Skip to content
Submitted about 2 years ago

Stats preview card Responsive with flex layout

VincenzoMuolo•180
@VincenzoMuolo
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! this challenge made me think about how to cover the various device, so i found this website [HERE] (https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide) and i took the smallest resolution for mobile, tablet and desktop has my target, is this a good approach for cover all the various devices? I mean, for instance, if i try to resize manually the page with the browser inspector tool there are some situation where the image looks bad, mostly when the difference between width and height is small, but maybe i device like that not even exist, so i don't know if i have to fix it or not. Every interesting feedback is appreciated!

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello Vicenzo, congratulations on your solution!

    Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

    1.To get closer to overlay effect on the photo as the Figma Design its better you use mix-blend-mode. All you need is the div under the image with this background-color: hsl(277, 64%, 61%); and apply mix-blend-mode: multiply and opacity: 80% on the img or picture selector to activate the overlay blending the image with the color of the div. See the code bellow:

    img {
mix-blend-mode: multiply;
opacity: 80%;
}

    Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

    https://www.frontendmentor.io/solutions/stats-preview-card-vanilla-css-custom-design-text-animation-RfGBFlMpwK

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    VincenzoMuolo•180
    @VincenzoMuoloPosted about 2 years ago

    @correlucas Hi, thanks for your advice, i tried to replicate that effect with filter property but none of the options get closer to the result, mix-blend-mode is a new thing to me, definitely will try this one!

    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