All solutions

After the stats card, this one was fairly simple and I was able to execute it much more quickly and confidently.

This was tougher and took a little while, but I learned a lot. Upon first attempts, I simply had not learned about grid systems in CSS yet. Then realized, there are so many ways to approach this task.

I also realized that my browser for whatever reason when I would scale down the window, couldn't get small enough to show the responsiveness! Viewing in developer tools made it possible to see that my work...worked!

THINGS I'M NOT SURE OF:

Hero Image border radius - I had to apply the border radius to both the DIV and the IMG. Is there a way to do this just once?

There is also 3.600 white line at the bottom - unsure of how it got there...setting display: block; removed it. But I just dont' know why that happens. (similar issue in the NFT card challenge)

For the 'annual plan' and 'price' text, I want them so the top of ANNUAL PLAN is perfectly aligned to the top edge of the music icon, and the bototm of the price is perfectly aligned to the the bottom edge of the music icon. Right now I could only figure out how to fudge with adding a bottom margin to the h2 - but that feels like a sloppy way of accomplishing this.

Still having trouble matching box shadow styles.

Also, I think the design elements for this challenge are off. The colors provided did not match the design images (see the hover state of the payment button) and the font definitely appears to be different than the one it says to use.

By far the most difficult part was creating the image overlay. There were so many different ways to approach this and many seemed needlessly complicated, or that they required more code than seemed reasonable. I worked towards finding this simplest solution. I was able to achieve close to the desired result.

HOWEVER, the one part I cannot figure out is why my overlay is is JUST slightly larger in height than than the image itself. I currently have both the .overlay height and width set to 100% - as I believe thats what the code should be in the cleanest stay. But if I changed the height to 98% then it fits fine and looks the best. But I wanted to leave it as is in the inaccurate state, because I can't figure out why its doing that and changing it to that 98% feels like I'm just covering up a mistake that I don't understand.

One thing I learned, was that rather than just going into code to BUILD UP, I really should be BREAKDING DOWN the design first and doing some sort of wireframing or outlining first. This will help me to develop better organization and better hierarchies for when placing and labeling divs within divs.

Really looking forward to feedback on this, because this one STARTED better than the QR code, but quickly took me quite a while to get to what I wanted.

What I found difficult: Figuring out how to fit the QR code into the container .div effectively. Turned out to be as simple as setting the width to 100%.

What I'm unsure of: That this approach was the most efficient way of achieving this. When to use px or when the rem.

I edited the footer links to have a hover state of white, but wanted to change the visited color from purple to blue, however when I changed the visited state it removed the hover state. I'm unsure of how to make this happen.