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)