Submitted over 3 years ago

Astro, WCAG Accessibility, JavaScript IntersectionObserver API

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

Mark Teekman•365

@markteekman

Preview site View code

This is a solution for...Easybank landing page

HTML
CSS
JS

3intermediate

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
Mark Teekman•365
@markteekmanPosted over 3 years ago
@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
Mark Teekman•365
@markteekmanPosted over 3 years ago
@thulanigamtee awesome! 😃 I just noticed you have 2.635 points already, nice going!
0
Mark Teekman•365
@markteekmanPosted over 3 years ago
@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

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