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-main

M3gan3_Samaโ€ข 160

@M3gan3Sama

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

Lucas ๐Ÿ‘พโ€ข 104,440

@correlucas

Posted

๐Ÿ‘พHello Omar, congratulations for your new solution!

You've a great solution here, I liked a lots the custom media queries you've created, the one between desktop and mobile is just so good. This is amazing!

To save space for your cards you can use a media query to make the flow vertical and the icons in different rows and centered:

@media (max-width: 350px) {
.grid__cards--card {
    display: flex;

    flex-direction: column;
    justify-content: center;
    align-items: center;
}

To create a smooth shadow you have to give it less opacity and more blur hereโ€™s a good value for this shadow box-shadow: 3px 3px 15px 5px rgb(0 0 0 / 4%);

Create better box-shadow using this online tool: https://www.cssmatic.com/box-shadow

๐Ÿ‘‹ I hope this helps you and happy coding!

Marked as helpful

0

M3gan3_Samaโ€ข 160

@M3gan3Sama

Posted

@correlucas Thanks for your advice mate i had a lot of problem with media query and it took a lot of time to find solution there but i going to do more and more challenges to get better at it.

1

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