All solutions

I'm really pleased with this one. I had fun and games with the image again, with getting borders to round and working out how to get the tint on it.

My first time trying media queries as well. I got it all to work nicely in the end, but am not sure it's the cleanest of code.

Any feedback and tips are most welcome.

Thanks,

Hi all, I was pretty pleased with how this one went with just two issues.

1 - Can someone please take a look at how I resolved the background image? I found it a real pain tbh and not sure I've put it together in the best way possible.

2 - This may be the stupidest question today but I can't for love nor money make the "Annual Plan" text bold without affecting the price at the same time. I gave it a custom class and set the font-weight to 700 etc, but that didn't work. I'm guessing it is something to do with inheritance perhaps? I tried all manor of declearing the parent classes in my CSS but still couldn't get it to change.

Any feedback is much appriciated.

Please can someone help me correct the main image? As you can see the border-radius is thrown out, so doesn't show correctly. I believe this is because of the position relatives used to get the hover effect. When applied, they seem to push somehting I've done out of alignment.

I've looked at a few of the solutions on here and it seems everyone has a different way of going about it. With the way I mocked up the HTML, is it possible to correct the issue in the CSS?

I spent 5+ hours on this and redone my code entirely trying to fix it, and still couldn't get it :)

Any guidance on that and anything else would be much appreciated.

If anyone every checks this, please let me know what I could have done to minimize the code. I'm sure I go about things in a long winded way, when I can write less and get he same results.

Thanks,