Pod Request Access Landing Page - CSS Animations, JS

Hi, everyone! It has definitely been a minute, but after a very long coding break I'm back! 👋 I'm excited to be submitting my first premium challenge solution as a Pro member. Having the design files has been a massive time saver! 😄

Since it's been so long, I decided to stick with plain, old CSS and JS for this project - bit of a "warm up". 😅

While the project was pretty straightforward, I did run into a rather odd bug. In Safari, I noticed the podcast svgs were blurry. After some testing, it seems that svgs that have a filter and are also in an img tag are blurred. If the filtered svgs are inline, they display just fine. The only suggestions I found online were to add -webkit-transform: translate3d(0,0,0) or -webkit-filter: blur(0px);. Unfortunately, neither worked in this case.

Since the grey filter on the podcast svgs in the starter code didn't quite match the color in the design files anyway, I ended up editing the svg files directly to remove the filter and manually change the color to match the design. However, if anyone has a simpler solution to the Safari svg blurring issue, please let me know! Have any of you ever encountered it before?