All solutions

Pretty straightforward project. Grid seems pretty much made for stuff like this.

Areas of difficulty:

• Simply landing on an approach to arranging the html. I started over entirely at least twice, realizing how I would need to arrange things to position the social popup correctly.
• I wish I could have come up with a better solution for the button, rather than two entirely different buttons.
• Being a bit inexperienced with CSS animations and transforms, I struggled with out exactly to make the popup, but using scale seemed to work well enough.
• Lastly, these projects are starting to get large enough that I can see the benefit to using something like Sass to keep my code organized.

It took me far too long to realize I could just put a div inside of a label for a radio input, in order to center the numbers and still have both the text number and circle the toggle for the radio inputs...

I wanted to keep the card height and style consistent, so rather than make an entirely new card on click, I just used JS to toggle a 'hidden' class on whatever I wanted to show inside the card. I am aware that if this were a bigger project, this kind of thing would be better handled by React but I think this works fine too.

All in all, this took me longer than I thought but I learned a lot along the way!

3/20/22 Update - made changes based on feedback. Hopefully this fixed issues.

I initially did the CSS from desktop first, as I normally do, but then redid it entirely with a mobile first approach, which I found to be much easier to tackle.

I ran into trouble with margins and positioning, but through the process, learned a lot about how the grid works and....how margins and positioning works.

A big struggle (and one that I didn't come to a solution on) was how to position the images such that:

a) they were positioned with respect to the card b) they maintained position relative to each other c) they maintained position in a responsive way d) one of them had overflow and the others did not

Otherwise, fun project and it made me tackle making an accordion without using a framework or JS.

I struggled to position the background images such that they maintained the correct positioning in a responsive way.

I struggled with creating a color overlay that took up the same space as the actual image.

Ended up using more flexbox areas than I thought and more than perhaps necessary.

I was unsure how to go about making the height respond to the content. Also, I'm not sure if the box shadow in the design files was intentionally....as if there were two layered on top or if that was simply a result of image quality, but I wasn't sure how to replicate that.