Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Card Preview using CSS Flexbox

@nathsantoliver

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

Congratulations well done. Just a few pointers

  • Your card ratio is off, the right side is larger than the left side. It should be almost 50/50
  • On the left side there is too much empty space between content on top and content at the bottom
  • For you image overlay try this
.filter {
background: rgb(170, 92, 219); /* remove the alpha channel */
/* border-radius: 10px; */
width: 100%;
height: 100%;
mix-blend-mode: multiply; /* add this line */
opacity: 0.9; /* play with the opacity until you have what you like */
}

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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