💀 “When the pumpkin bursts, the night begins...” 🌌

Arun Shree — Tue, 21 Oct 2025 17:10:18 +0000

This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing

What I Built

I created a spooky Halloween landing page called Spooky Night, designed and coded entirely in HTML, CSS, and minimal JavaScript, contained in a single responsive file — index.php.
The page combines dark cinematic visuals with interactive Halloween effects — fog, stars, bats, spiders, and a glowing pumpkin that explodes into bones, candy, and bats when clicked.
It’s completely standalone — no build tools, frameworks, or external dependencies required.
✨ Highlights

🌙 CSS-animated night sky, fog, and drifting clouds

🎃 Single pumpkin mascot with blinking horror eyes

💥 Click-to-explode pumpkin with shockwave and particle burst

🦇 Flying bats and a dangling spider

💀 Walking skeleton cursor on desktop

📱 Fully responsive layout with a mobile hamburger menu

🧩 Interactive FAQ accordion

⏱️ Live countdown to October 31 2025 • 7 PM

🔒 Custom license requiring author permission for reuse

Demo

i hosted it in my own server and link is provided below.
https://totalcalclab.com/Halloween/

Journey

Wanted to capture the spirit of Halloween — spooky, playful, and cinematic — all in a lightweight landing page.
My main goals were performance and simplicity: pure HTML + CSS + JS, no frameworks.
🧩 Lessons Learned

Crafting layered effects (fog, clouds, stars) using radial gradients & keyframes

Managing mobile viewport scroll when fixed elements change state (pumpkin explosions 😅)

Implementing a smooth click → burst → respawn cycle purely with CSS transitions

Fine-tuning accessibility & responsiveness for both touch and desktop

🕯️ Next Steps

Add ambient sound effects synced to the pumpkin explosion

Introduce dark-mode adaptive lighting

Turn this into a reusable “Halloween Microsite Template”

This website’s source code, visual design, animations, and any derivative works
(collectively, the “Work”) may not be used, copied, modified, merged, published,
distributed, sublicensed, or sold, in whole or in part, without prior written
permission from the copyright holder.

Personal, non-commercial viewing and local hosting of an unmodified copy is permitted.
Any commercial use, redistribution, or reuse of the design or code requires
explicit written permission.

THE WORK IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND.

Forem: Arun Shree

💀 “When the pumpkin bursts, the night begins...” 🌌

What I Built

Demo

Journey