Design comparison
Solution retrospective
Any suggestions on how I can improve are welcome!
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @osamanazakat, congratulations for your new solution!
🎨 Here’s some tips to improve your component design:
1.Add the box-shadow to each card, you've missed this little detail, to create a smooth shadow you need to give it less
opacity
and moreblur
try this value for example:5px 5px 12px 3px rgb(0 0 0 / 4%);`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.Give the card the correct size with
max-width: 340px;
.first-card { max-width: 340px; grid-column: 1 / span 1; grid-row: 2 / span 2; border-top: 3px solid var(--primary-cyan); }
✌️ I hope this helps you and happy coding!
1
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