Frontend Challenge - Halloween Edition

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

What I Built

I built the Spooky Heritage Museum landing page—an interactive experience that takes visitors through Halloween’s history. The page includes:
Animated Hero Section: Full-screen intro with a glowing moon, twinkling stars, floating ghosts, and bats flying across. Typography uses the "Creepster" font.

• Interactive Timeline: A vertical timeline showing Halloween’s evolution from ancient Celtic Samhain to modern trick-or-treating. Timeline items animate into view on scroll and alternate left/right.

• Exhibit Showcase: Four featured exhibits with hover lift/glow effects. Clicking opens modal dialogs (replacing alerts).

• Events Section: Calendar-style event cards for upcoming activities like midnight ghost tours and pumpkin carving workshops.
  Reservation System: A validated form with real-time email, date, and guest limit checks, plus clear error messages.

The design uses a purple-to-orange gradient with dark backgrounds that make orange accents pop, plus yellow highlights for a warm, candlelit feel.

Demo

Demo Link
https://github.com/Syed-Muhammad-Ali-Raza/Halloween-Landing-Challenge-

Journey

The Concept

I started with the museum theme because museums are about discovery, and Halloween has a rich, often untold history. I wanted storytelling and education, not just scares.

Challenges & Solutions

• Smooth animations: The floating ghosts and bats needed randomness. I varied animation durations and delays per element and used transforms for organic arcs instead of straight lines.

• Timeline layout: Alternating left/right on desktop, stacking on mobile took careful positioning. CSS Grid and Flexbox handled it, but getting margins right required multiple iterations.

• Form validation: HTML5 validation wasn’t enough. I added real-time validation with inline error messages, ARIA attributes, and visual states (green for valid, red for errors). The date picker sets today as the minimum automatically.

What I'm Proud Of

• Accessibility: Skip links, ARIA labels, keyboard navigation, focus indicators, and prefers-reduced-motion support.
• Mobile menu: Hamburger-to-X transition with staggered menu item animations.
• Modals: Replaced alerts with accessible modals that fade in, trap focus, and close on Escape or outside click.
• Performance: Vanilla JavaScript with IntersectionObserver for scroll animations—fast and smooth.

Tech Stack

Pure HTML, CSS, and vanilla JavaScript—no build process. CSS Custom Properties make theme tweaks easy, and Grid/Flexbox handle layouts. backdrop-filter adds frosted glass effects with graceful degradation.