brasspetals / fm-easybank-landing

Frontend Mentor Challenge: Easybank Landing Page

Frontend Mentor - Easybank Landing Page Solution

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.

Overview

The challenge

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

Links

• 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/

My Process

Built with

• Semantic HTML5 markup
• CSS Animations
• CSS Grid
• SCSS
• Javascript
• Mobile-first workflow

What I learned

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.

Extras

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.