This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing
What I Built
Spooktacular ’25 is a “creepy but fun” Halloween landing page with a touch of retro vibes.
Instead of creating an event for humans, I flipped the idea: this is a website for ghosts, zombies, and other supernatural beings who want to plan their Halloween night out — or rather, their night of haunting.
I wanted the page to feel like a mix between a spooky movie poster and an event portal.
Because I love horror movies, sound was a must-have — it sets the mood immediately and gives the page a cinematic feel. I also spent quite some time choosing images that matched the tone but still felt cohesive with the color palette.
Demo
Journey
One of the most fun parts of this project was how playful it became along the way.
I like the “Exorcism Risk” location rating — a small example of the humor that kept the project alive (or undead 👻). I was really just having fun with it.
From a technical side, I tried a few new things:
- A custom popup dialog that appears when you “submit” the form
- A sound toggle switch to enable or disable background audio
- Smooth scrolling between sections using
scrollIntoView({ behavior: "smooth" })
I had worked with audio before, but only simple play/stop buttons — so the toggle felt like a nice little level-up.
I’m especially proud of how the sound effects and overall atmosphere came together.
If I had more time, I’d love to add more content for the locations, working links, and a few more mischievous Easter Eggs hidden in the site. I also still have a picture that I really wanted to integrate but unfortunately there just was no use for it at this point.
License
Creative Commons – CC BY-NC 4.0
Feel free to use this project for personal or educational purposes — remix it, learn from it, or give your ghosts a new home. 🎃
Thanks for the cool challenge! :D
..........
💝 Frontend-loving dev & intern, persistent tinkerer
👽 Alien & Catpuccin rainbow vibes
☕ Indie Web & Old Web, Retro-Glitter-Feeling
Top comments (0)