@comradeintense
Submitted
Feedback welcomed ! Please look at my code and tell me what is wrong/what could be done better.
This absolutely killed me, spent a lot of time fiddling with position absolute to position the images. It works kinda, but I'm not 100% happy with the solution, but this is the best i could come up with.
I forgot adding the shadows for the cards.
Submitted
Submitted
Tried to make it as close as possible to original design. I didn't have the Figma file, so this was painful, I do not recommend. Chasing pixel perfection is a sure way towards a life in the asylum.
Initially when I looked at the project I was thinking of using flex on the bottom two columns and make them equal size but the word "Grid" was in the challenge name, so I took it as a hint and tried to do it with grid even though it's not my preferred choice, but it was quite easy.
Any feedback is gladly appreciated!
Submitted
Submitted
Feedback welcomed!
This one was a bit tricky to figure out how to do the overlay on the image. Googled a little bit, found on tailwind about the 'group' class which you can tie to a parent and then the children can be styled depending on the state of the parent by using group-[modifier] so in my case i used group-hover: utility to control the opacity of the div that holds the SVG and cyan background. If the parent is not hovered, the svg+background has opacity-0. If it is hovered, then the div has opacity-100.
The only thing is that i had to make another custom color in this scenario where the background cyan color is hsla to control the alpha opacity directly like that.
Pretty cool solution although not sure if ideal, but i learned something new!
Submitted
