Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 3 years ago

Pod Request Access Landing Page - CSS Animations, JS

Anna Leigh•5,135
@brasspetals
A solution to the Pod request access landing page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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?

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Grace•32,130
    @grace-snow
    Posted about 3 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
  • Emmilie Estabillo•5,580
    @emestabillo
    Posted about 3 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
  • ApplePieGiraffe•30,525
    @ApplePieGiraffe
    Posted about 3 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)! 😄

  • P
    The Burrito Doggie•1,260
    @BurritoDoggie
    Posted about 3 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! :)

  • Ciceron•940
    @MarcusTuliusCiceron
    Posted about 3 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

  • Favourite Jome•1,110
    @jomefavourite
    Posted about 3 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!

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub