Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Astro, WCAG Accessibility, JavaScript IntersectionObserver API

#accessibility#astro#bem#sass/scss#animation

@markteekman

Desktop design screenshot for the Easybank landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm really curious how you would solve the image and background of the intro section. I used a lot of media queries to get the desired result for different screen sizes, but there should be a more elegant way to do this.

Community feedback

Account Deleted

All the images don't show, don't know why but I refreshed a couple of times, still nothing is showing.

When you switch to the desktop while the mobile menu is still active the overlay gets carried over to the desktop, & doesn't get dismissed.

Marked as helpful

0

@markteekman

Posted

@thulanigamtee thanks for taking a look! I was having trouble with the images, but it should be fixed now :) As for that responsive overlay, that's a nice find! Will go and look into a solution for that soon.

0

Account Deleted

@markteekman It's now working👍.

0

@markteekman

Posted

@thulanigamtee awesome! 😃 I just noticed you have 2.635 points already, nice going!

0

@markteekman

Posted

@thulanigamtee fixed the overlay getting carried over to the desktop using a window resize event listener :) Thanks again!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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