Skip to content
Submitted about 3 years ago

Astro, WCAG Accessibility, JavaScript IntersectionObserver API

Mark Teekman•365
@markteekman
Preview site (opens in new tab)View code (opens in new tab)
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 about 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 about 3 years ago

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

    0
    Mark Teekman•365
    @markteekmanPosted about 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

Log in with GitHub

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