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:
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)