Pod Request Access Landing Page - CSS Animations, JS

Solution retrospective
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?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
Just a few small suggestions from me
- I think those logos are valuable content. This is a sign up page trying to convince visitors the product is good, so I would preceded these with an Sr only heading and give all of them alt descriptions
- you need to have aria-live attributes on those error and success messages so they get announced when displayed
- you need to have aria-desciribedby on the input pointing to the id of the error message so they are associated to each other
I hope this helps
Marked as helpful - @emestabillo
Hey Anna! 👋🏼 Just wanted to say welcome back! Looks awesome as always and I love the subtle animations that just fits. The only suggestion I have is to center the content on much larger screens, say 1920x1080. Inspired me to do another project 🙂
Marked as helpful - @ApplePieGiraffe
ANNA
We've already talked about your project a bit, but I thought I'd leave a comment here! 😉
I didn't expect to find anything to suggest (at least, as far as the design of your solution goes), and I'm glad I was right! 😆
The intro animation is subtle and not distracting (like you wanted), and SVGs look sharp to me (so... glad you figured that one out)!
Um... looking forward to the rest of the solutions that you have planned! I'm really happy you're back, as well! 🥳
And, of course, keep coding (and happy coding, too)! 😄
- P@BurritoDoggie
Hey Anna!!
I love it when people like you take on big projects and make them look great! It looks amazing and I would love to see more projects from you!!
Keep Coding! :)
- @MarcusTuliusCiceron
Your pixel perfect on this one congrats, I wish I could do as good as you are doing, good luck for your next challenges :D
- @jomefavourite
Hello Anna!
I really love how you take your time to make the layouts of each project you've done pixel-perfect, and also add really smooth animations. I wish I spent more time on animations 😅
Welcome back to coding!
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord