@ghintema
Posted
Hi Shikhar,
At first I did the color-bars on top of each card as border-top - just like you did. To prevent the these colorbars from curving at the end, I finally modeled them as an extra <div> of only 5px height and with border-radius:5px 5px 0px 0px; This way you get a color-bar without any curving left and right.
To fix the icon position I propose you this way: Give the cards a position:relative and the icons inside the cards a position: absolute. This way you can easily fix the icons in the bottom right corner of each card using bottom:XXpx and right:XXpx; To "stablize" the entire layout I would also fix the width and height of each cards.
Hope to have helped you a bit, Cheers, Harm
Marked as helpful
@shikhars
Posted
@ghintema Thanks for the great feedback. It helped.
