DEV Community

Cover image for Curse & Code: A Haunted Hackathon Landing Page
Awym
Awym

Posted on

Curse & Code: A Haunted Hackathon Landing Page

Frontend Challenge Perfect Landing Submission ๐Ÿฆ‡๐ŸŽƒ

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

What I Built ๐Ÿ•ธ๏ธ๐Ÿ’€

I created โ€œCurse & Codeโ€, a Halloween-themed landing page for a fictional spooky hackathon. The page invites developers to โ€œcode to survive the nightโ€, complete eerie challenges, and win haunted prizes ๐Ÿง™โ€โ™‚๏ธ๐Ÿ•ท๏ธ.

Key features:

๐Ÿ–ค Glitchy hero section: โ€œHack or Be Hauntedโ€ with terminal-style typewriter effect.

๐Ÿงน Challenge Rules: Clearly presented with a Halloween vibe and a floating witch GIF.

๐Ÿชฆ Prizes Section: Tombstone-style cards with glowing text and shadow effects.

โœจ Sign-Up / Call-to-Action: Pulsating email form to join the haunted hackathon.

๐Ÿ•ธ๏ธ Footer: Social links with spooky hover effects and a fun copyright line.

๐Ÿ‘ป Animations: Floating fog, drifting radial lights, typewriter effect, flickering lights.

๐Ÿ“ฑ Responsive design: Looks great on both desktop and mobile.

The design combines dark Halloween colors, glowing accents, and creepy typography to immerse visitors in a haunted coding experience. ๐ŸŽƒ

Demo๐Ÿ–ฅ๏ธ๐ŸŽƒ

Live Demo:

Curse & Code

Journey๐Ÿ•ฏ๏ธ๐Ÿง›โ€โ™‚๏ธ

Building this landing page was a thrilling challenge!

Highlights from my process:

  • Planned each section: hero, rules, prizes, signup, and footer. ๐Ÿง™โ€โ™€๏ธ
  • Combined CSS animations: fog drift, floating witch, flickering lights. ๐ŸŒซ๏ธ
  • Used glowing and stroke text effects for headings to create a Halloween glow. โœจ
  • Implemented a typewriter effect in a terminal to give a haunted coding feel. โŒจ๏ธ
  • Ensured responsive design for mobile and desktop users. ๐Ÿ“ฑ

Next steps:

  • Add background audio for subtle Halloween ambiance ๐ŸŽต๐Ÿฆ‡
  • Include interactive terminal challenges ๐Ÿ–ฅ๏ธ๐Ÿ‘ป
  • Possibly implement light/dark mode toggle for day/night versions ๐ŸŒ—

Iโ€™m proud of how the design captures both the Halloween spirit and a developer-focused challenge ๐ŸŽƒ๐Ÿ’€.


License

  • This project is open source and available under the MIT License.

Happy Halloween Coders ,May your bugs be few, your commits be clean, and your code run without spooky errors. Enjoy some treats, avoid the tricks, and let your IDE be as haunted as your imagination! ๐Ÿ‘ป๐Ÿ•ธ๏ธ

Top comments (0)