Submitted over 2 years ago

Pod Request Access Landing Page - CSS Animations, JS

Anna Leigh• 5,135

@brasspetals

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Pod request access landing page

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

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?

Community feedback

Grace• 29,090

@grace-snow

Posted over 2 years ago

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

Anna Leigh• 5,135

@brasspetals

Posted over 2 years ago

@grace-snow Thank you for taking the time to look at my solution! 😄 Accessibility is definitely not my strong suit (yet!), so I always appreciate your suggestions. I've just updated my solution, hopefully implementing them correctly. 🤞

Emmilie Estabillo• 5,540

@emestabillo

Posted over 2 years ago

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

Anna Leigh• 5,135

@brasspetals

Posted over 2 years ago

@emestabillo Hi, Em! Great catch! While technically "centered", the pseudo elements ignore padding, and so visually it was defintely off. 🤦‍♀️ My bad. Should be fixed now. 👍 Thanks!

Oooh! Looking forward to seeing your next one! 😄

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 2 years ago

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)! 😄

Anna Leigh• 5,135

@brasspetals

Posted over 2 years ago

@ApplePieGiraffe Thanks, APG! It's good to be back. 😊

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 2 years ago

@brasspetals

Add overflow-x: hidden.

Marked as helpful

The Burrito Doggie• 1,260

@BurritoDoggie

Posted over 2 years ago

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! :)

Anna Leigh• 5,135

@brasspetals

Posted over 2 years ago

@BurritoDoggie Hi, Alyssa! 👋 Thanks for taking the time to look at my solution and leave such kind feedback. 😊

Ciceron• 940

@MarcusTuliusCiceron

Posted over 2 years ago

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

Anna Leigh• 5,135

@brasspetals

Posted over 2 years ago

@MarcusTuliusCiceron Thanks! 😊 Just took a quick look at your profile, and at the rate you're going I'm sure you'll surpass me in no time! 😄

Ciceron• 940

@MarcusTuliusCiceron

Posted over 2 years ago

@brasspetals I still need lot of practice :D I'm currently doing the loopside studios challenge and trying to reuse some of your animation techniques to make it look nice on page loading. I hope it will turn good :D

Anna Leigh• 5,135

@brasspetals

Posted over 2 years ago

@MarcusTuliusCiceron The loopstudios page was definitely my favorite of the challenges I've done so far. I hope you enjoy it too. Feel free to poke through my code all you like, I just hope it's not too much of a mess. 🙈 Looking forward to seeing your solution! I'm sure it'll be great. 😄

Favourite Jome• 1,110

@jomefavourite

Posted over 2 years ago

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!

Anna Leigh• 5,135

@brasspetals

Posted over 2 years ago

@jomefavourite Thank you so much - it's good to be back! 😊 Animations can be tricky, but worth the effort...usually. 😆

Please log in to post a comment

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