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

Stats preview card component vanilla css

nimbul30 110

@nimbul30

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Had some issues with the media queries, if you have any suggestions let me know.

Community feedback

Lucas 👾 104,420

@correlucas

Posted

Hello Nimbul, congratulations for your solution!

When you write a media query you don't need to add again all properties like display: flex you need to insert only the properties that changes, in this case the flex-direction.

@media (min-width: 992px) { 
   body { 
     flex-direction: column; 
   }}

You can use flex-direction: column-reverse

To have the overlay image purple, you can use mix-blend-mode: multiply

Keep it up!

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