Skip to content
Submitted over 2 years ago

Stats preview card component responsive design using CSS flexbox

Moris Tibenkana•160
@tmoris
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 community, I need some advise on this challenge. I found difficult to blend the background color and image, secondly controlling the image so that i does shrink fast to disappearance was and issue. Best regards and thanks

Community feedback

  • Harshita Jain•380
    @Harshi786Posted over 2 years ago

    Hey!

    Congrats on completing the challenge.

    Your code looks good but few more CSS properties to make your image looks better.

    • You can add mix-blend-mode CSS property to your image.
    .preview-img {
mix-blend-mode: multiply;
border-radius: 0.5em 0.5em 0 0;
min-height: 100%;
opacity: 0.75;
}
    • Make some changes in image div as well.
    .preview-img-section {
  background-color: var(--clr-Softviolet);
  border-radius: 0.5em 0.5em 0 0;
}

    Hope this helps :)

    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