easybank landing page - HTML, CSS, vanilla JavaScript

Solution retrospective
I'm most proud of completing the challenge and being able to find a solution for the mobile menu animation changes when the user clicks on the icons.
What challenges did you encounter, and how did you overcome them?While building the Easybank landing page, I initially ran into a challenge centering the main content on mobile using CSS Grid alone. Instead of forcing a solution with position and left properties, I confidently switched to Flexbox, which provided a cleaner and more flexible approach to alignment. I also tackled the mobile menu animation by replacing the default hamburger icons with three <span> elements inside a <button> tag. This gave me full control over the styling and allowed me to smoothly animate the icon into an "X" when clicked—delivering a polished and responsive user experience.
What specific areas of your project would you like help with?Appreciation goes out to anyone taking the time to look over my code. I’d love feedback on whether the solution adapts well to regular laptop screen sizes. Additionally, I’m open to suggestions on how I could have used the original mobile menu image icons to open and close the menu—without needing to switch to span elements inside the button tag.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Eric Aguayo's solution.
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