Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello again Juan , congratulations for your new solution!
I saw this old solution and I've some considerations for you (If I can):
1.The box-shadow is a bit too evident, this is due the
opacity
andblur
. The secret to create a perfect and smooth shadow is to have low values foropacity
and increaseblur
try this value instead:box-shadow: 0 0.9375rem 1.875rem -0.6875rem rgb(131 166 210 / 50%);
If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/2.Take care witht he property
overflow: hidden
because sometimes this makes your content get cropped when the card scales.3.Create a media query to make the stats section numbers stays in different rows each saving space, here's the code for that:
@media (max-width: 340px) { .tarjeta-pie { display: flex; justify-content: center; align-items: center; flex-direction: column; } }
✌️ I hope this helps you and happy coding!
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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