Latest solutions
Latest comments
- @AlwinJun@yash-278
Great Work !!! Looks great, sizes can be adjusted, but you nailed the overall layout🙌.
Try toning down shadows. Also try using a CSS Shadow generator online, It lets you play with shadows interactively.
Also, deep and dark shadows should be avoided, It generally doesn't look that good.
Congrats on completing the challenge🎉.
Marked as helpful - @Arjunjv@yash-278
Great work ARJUN 👏 The card design is perfect.
Now on to the problems you faced:
- For vertical alignment of icon you can refer to
vertical-align
CSS property. MDN Link - For centering the card, now this is a tricky one & more of a hack than a solution, but I personally use this.
.centered-element { margin: 0; position: absolute; top: 50%; transform: translateY(-50%); }
This works almost everytime, mostly for single element stuff.
- Lastly for icon overlay, it's complicated to explain it here, but here's a resource for solution W3Schools
Overall nice solution and try searching wherever you're stuck, because searching is a also a important aspect of code.
Happy Coding! Hope you found this useful 🎉
Marked as helpful - For vertical alignment of icon you can refer to
- @solvedbiscuit71@yash-278
Woah, aside from few
line-height
and shadows, this is a pixel-perfect solution. Awesome work Praveen. - @lleonardus@yash-278
Hi, lleonardus! 👋 Good effort on this challenge! 👍
It's great that you modularized the CSS files, easy to navigate indeed. If you haven't yet, try TailwindCSS, It's a different approach on styling sites. One improvement that I can suggest is :
- Add
max-width
to the main container so that it wont stretch on larger screens
Use Grid Alignment to learn more about aligning items inside the grid.
That's it! Hope you find this useful! 😁
Marked as helpful - Add
- @wi2liamalpha@yash-278
Hi, William! 👋 Good effort on this challenge! 👍
One improvement that I can suggest is :
- Keep
alt=""
empty for all decorative images for accessibility purposes. MDN Article
That's it! Hope you find this useful! 😁
- Keep
- @Mick-2097@yash-278
Great Work, You probably forgot to add a background to the arrow icon, other than that it looks pixel perfect.
Box shadows are a big pain 😂, there are few handy tools available online Check this site out : Box Shadow Generator
Marked as helpful