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: https://github.com/chianglynn/frontendmentor-easybank-landing-page
- Live Site URL: https://chianglynn.github.io/frontendmentor-easybank-landing-page/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- JavaSrcipt
CSS can't animate between 'display: none;' and 'display: block' directly, so I manipulate this with JavaSrcipt as below:
const showMenu = () => {
navOpenIcon.classList.toggle('hide-nav-icon');
navCloseIcon.classList.toggle('hide-nav-icon');
overlayAndMobileNavMenu.style.display = 'block'; // Manipulate CSS display before change the classes for animation
overlayAndMobileNavMenu.classList.remove('animation-fade-out');
overlayAndMobileNavMenu.classList.add('animation-fade-in');
navMenu.style.top = `${navHeight + 25}px`;
overlay.style.top = `${navHeight}px`;
};
- Website - Lynn Chiang's Portfolio
- Blog - Lynn's Self-taught Records
- Frontend Mentor - @chianglynn