This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing
🪄 What I Built
I created a spooky and magical Halloween-themed landing page project —
“The Witch's House.” the project is built entirely with pure Html, Css and JavaScript— no frameworks, just creativity, gradients, and powerful styling! 🎃. It brings together the mysterious world of witches, glowing potions, and fortune cards into a visually rich, interactive experience. With vibrant helloween colors, interactive hover effect, smooth transitions & animation, and responsiveness.
Demo
https://codepen.io/Asifa-Azad/pen/azdaLwb
✨ Highlights & Features**
🧙♀️ 1. Magical Halloween Aesthetic
**
The whole design is based on dark, mystical tones — deep purples, witchy greens, and glowing yellows — giving it that perfect Halloween-night feel.
The background, shadows, and gradients together create a realistic “witch house” vibe.
🧪 2. Potion Store Section**
Every potion card is carefully styled with hover lift effects, subtle shadows, and animated floating SVG icons — making them look alive with energy.
Each card glows differently — like it’s pulsing with magical ingredients.
🔮 3. Fortune Card Flip**
The fortune-telling card is fully 3D and flips smoothly with CSS transform and perspective — revealing hidden fortunes with a magical animation.
The transition between the front and back of the card feels like opening a secret spellbook.
💫 4. Smooth Animations & Transitions**
The project uses CSS keyframe animations for glowing lights, floating effects, and gentle motion.
Cards shimmer and breathe with life — just enough to make the interface feel enchanted but not overwhelming.
🕸️ 5. Stylish Typography**
Two best fonts power the theme:
Griffy – for main titles, giving them a gothic, enchanted aura.
Metal Mania – for text and details, adding that medieval fantasy touch.
Together, they perfectly balance the creepy and the magical.
🧛♀️ 6. Responsive & Accessible**
The layout adjusts beautifully for all screen sizes — from mobile witches 🧹 to desktop wizards 🧙♂️ — ensuring a smooth and readable design everywhere.
Media queries handle font scaling, spacing, and layout transitions perfectly.
**
🪞 7. Interactive Navigation
The side navigation smoothly slides in with a blurred background and glowing buttons, using pure CSS transitions.
Each link has a hover scale effect, glowing softly like it’s enchanted.
*
🌙 8. Pure CSS Magic**
No images (except the background), no JS — just CSS gradients, shadows, transforms, and creativity.
Everything — from card flips to glowing potions — is achieved with the magic of styling alone.
Note: This project includes AI-generated visuals (Freepik AI). Used under Freepik license terms.
Top comments (1)
Awesome!