Skip to content
Submitted about 4 years ago

Easybank Landing Page - Grid, CSS Animations, JS, SCSS

sass/scss
Anna Leigh•5,135
@brasspetals
A solution to the Easybank landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi, everyone! 👋 Glad to finally be done with this one(I hope)!

Questions:

  • When I uploaded my solution to Vercel, I noticed that on desktop the background image on the hero was loading slower and showing up halfway through the animation. I used this handy solution from CSS Tricks to pause the animations until the images were loaded. It seems to have worked for me, but let me know if there’s any weirdness. 🤞 Are there better ways to go about delaying animations until all elements are loaded?
  • For accessibility, I again made sure to put the mobile menu button inside the nav, added an aria-label, as well as used the aria-expanded attribute as I did in the Loopstudios solution. Is this the correct way to go about this? Could accessibility be improved? Any insight is appreciated.

“Extras”

  • The mobile menu will close if clicking outside the menu or header (as well as by using the menu button, of course).
  • I played around with CSS animations on the hero section, with different animations for mobile and desktop.

Thanks for taking the time to look at my solution! Feedback is greatly appreciated. 😄

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Simone Paglino•75
    @darkshadowultimate

    Hi Anna, I really love your landing page 😍.

    I’d have two suggestions if you don’t mind:

    • I’ve seen that you focus even on accessibility, so I think that it would be better if the buttons “Request Invite” could have a different hover effect, because as it is right now, the contrast between button’s background and button’s text is not maintained and the text is difficult to read (for someone who has difficulties to read)
    • I’ve noticed that there’s a slight tremble on the hover effect of the cards under the section “Latest Articles”. I dunno what it is, but I wanted to point that out in case if you hadn’t noticed 😉.

    Anyway, really good job. I hope that with some more practice I’ll reach your level.

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Greetings, yet again, Anna! 👋

    Well done (of course)! 👍 I really like the animations you added to your solution and the extra details you implemented (such as making the mobile menu close when the background is clicked and the attention you gave to making your solution accessible) are great! 🙌 I noticed you used more CSS grid to layout things on the site, so I take you're becoming pretty comfortable with it, now! 😀

    I suggest,

    • Well, actually, I don't have anything to suggest. Everything seems pretty good to me! 😆

    Haha, keep coding (and happy coding, too)! 😁

  • Roc Tanweer•2,500
    @RocTanweer

    Hello Anna, I have seen some of your work and wondered if you could give me few tips to improve my front-end skill and specifically how you make projects pixel perfect....please...

  • rstrong810•115
    @rstrong810

    Hello Anna, I am very impressed with your landing page. You did an amazing job putting it together. I just started learning web development about 6 months ago and after seeing what you did with this landing page I am inspired to keep learning. If you don't mind me asking, I was wondering how long you've been doing frontend development?

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