Dine Restaurant - Svelte, Parallax Effect, CSS Animations

Hi, everyone! 👋 It feels great to finally submit this solution. I’ve wanted to do this challenge since I started doing Frontend Mentor projects. It was definitely a learning experience (see: README), and hopefully I’ve made up for the lack of effects in my Sunnyside solution. 😆

The parallax effect is only on desktop and tablet. It’s also turned off, along with all animations and page transitions, for those who prefer reduced motion. 👍

Questions:

• This was my first time implementing a “tabbed” interface. I opted to use button elements for the tabs. Is there a better and/or more accessible way to create tab functionality?
• I’m concerned that the image animations on the tabbed Events section are getting messed up if the image doesn’t load before the animation triggers. Is there a way to preload images from picture elements in a way that’s responsive and also works with multiple srcsets? Update: I refactored this section a bit, making some tweaks to the animations and putting all content in the DOM rather than dynamically loaded. The flashing issue is now fixed. Huge thanks to Dave and Christopher for their help on this! 🙏
• How is the form accessibility on the booking page? I don’t believe the second page was included in the report.
• Sadly, I didn't manage to style the AM/PM selector like the design because I used select and option elements. Do you know of a better method that would be both accessible and match the dropdown in the design?
• Not sure how I feel about the menu list being parallax on desktop. Does it look too wonky or have I just been staring at it for too long? 😂

Thanks for taking the time to look at my solution! Feedback is always greatly appreciated. 😄