This is a solution to the Easybank Landing Page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Solution URL w/design comparison: https://www.frontendmentor.io/solutions/easybank-landing-page-grid-css-animations-js-scss-PC1gxE5Df
- Live Site URL: https://fm-easybank-landing.vercel.app/
- Semantic HTML5 markup
- CSS Animations
- CSS Grid
- SCSS
- Javascript
- Mobile-first workflow
When I uploaded my solution to Vercel, I noticed the hero background image was loading slower and showing up halfway through the animation. I used this handy solution from CSS Tricks, which utilizes the animation-play-state property in order to pause the animations until images are loaded.
Additions that go beyond the original challenge and design:
- The mobile menu will close if clicking outside the menu or header (as well as by using the menu button, of course).
- Animated hero section, with slightly different versions for mobile and desktop layouts.