The latest articles on Forem by Ash (@asifa_azad_codex). https://forem.com/asifa_azad_codex https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3577072%2F4611846e-8b22-458a-aa56-0f9749d7713c.png https://forem.com/asifa_azad_codex en Ash Thu, 30 Oct 2025 11:41:16 +0000 https://forem.com/asifa_azad_codex/the-witch-house-helloween-theme-landing-page-1a22 https://forem.com/asifa_azad_codex/the-witch-house-helloween-theme-landing-page-1a22 <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2025-10-15">Frontend Challenge - Halloween Edition, Perfect Landing</a></em></p> <h2> 🪄 What I Built </h2> <p>I created a spooky and magical Halloween-themed landing page project —<br> “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 &amp; animation, and responsiveness.</p> <h2> Demo </h2> <p><a href="https://codepen.io/Asifa-Azad/pen/azdaLwb" rel="noopener noreferrer">https://codepen.io/Asifa-Azad/pen/azdaLwb</a></p> <h2> ✨ Highlights &amp; Features** </h2> <h2> 🧙‍♀️ 1. Magical Halloween Aesthetic </h2> <p>**<br> The whole design is based on dark, mystical tones — deep purples, witchy greens, and glowing yellows — giving it that perfect Halloween-night feel.<br> The background, shadows, and gradients together create a realistic “witch house” vibe.</p> <h2> 🧪 2. Potion Store Section** </h2> <p>Every potion card is carefully styled with hover lift effects, subtle shadows, and animated floating SVG icons — making them look alive with energy.<br> Each card glows differently — like it’s pulsing with magical ingredients.</p> <h2> 🔮 3. Fortune Card Flip** </h2> <p>The fortune-telling card is fully 3D and flips smoothly with CSS transform and perspective — revealing hidden fortunes with a magical animation.<br> The transition between the front and back of the card feels like opening a secret spellbook.</p> <h2> 💫 4. Smooth Animations &amp; Transitions** </h2> <p>The project uses CSS keyframe animations for glowing lights, floating effects, and gentle motion.<br> Cards shimmer and breathe with life — just enough to make the interface feel enchanted but not overwhelming.</p> <h2> 🕸️ 5. Stylish Typography** </h2> <p>Two best fonts power the theme:</p> <p>Griffy – for main titles, giving them a gothic, enchanted aura.</p> <p>Metal Mania – for text and details, adding that medieval fantasy touch.<br> Together, they perfectly balance the creepy and the magical.</p> <h2> 🧛‍♀️ 6. Responsive &amp; Accessible** </h2> <p>The layout adjusts beautifully for all screen sizes — from mobile witches 🧹 to desktop wizards 🧙‍♂️ — ensuring a smooth and readable design everywhere.<br> Media queries handle font scaling, spacing, and layout transitions perfectly.</p> <p>**</p> <h2> 🪞 7. Interactive Navigation </h2> <p>The side navigation smoothly slides in with a blurred background and glowing buttons, using pure CSS transitions.<br> Each link has a hover scale effect, glowing softly like it’s enchanted.</p> <p>*</p> <h2> 🌙 8. Pure CSS Magic** </h2> <p>No images (except the background), no JS — just CSS gradients, shadows, transforms, and creativity.<br> Everything — from card flips to glowing potions — is achieved with the magic of styling alone.</p> <p><strong>Note</strong>: This project includes AI-generated visuals (Freepik AI). Used under Freepik license terms.</p> devchallenge frontendchallenge webdev javascript Ash Wed, 29 Oct 2025 04:50:14 +0000 https://forem.com/asifa_azad_codex/creepy-helloween-party-invitation-card-helloween-css-art-46mf https://forem.com/asifa_azad_codex/creepy-helloween-party-invitation-card-helloween-css-art-46mf <p>This is a submission for <a href="https://dev.to/challenges/frontend-2025-10-15">Frontend Challenge - Halloween Edition, CSS Art</a></p> <p>**</p> <h2> What I Built </h2> <p>**</p> <p>A creative, well-designed helloween theme css art," An Creepy Helloween Party Invitation Card". This project is built with pure css. The project showcase vibrant helloween colors, interactive hover effect, smooth transitions &amp; animation, cool border radius art, and responsiveness for various devices.</p> <p>**</p> <h2> Demo </h2> <p>** <br> <a href="https://codepen.io/Asifa-Azad/pen/pvgaxXW" rel="noopener noreferrer">https://codepen.io/Asifa-Azad/pen/pvgaxXW</a></p> <h2> <strong>🌟 Features</strong> </h2> <p>• Helloween Colors - Helloween theme colors ( scary blackish blue for background ),( creepy zombie green color for card ),( bloody red color for fonts ).</p> <p>• Creepy Fonts - Use of spooky, creepy Helloween theme fonts. <br> i. Nosifer for heading - Gives scary, blood dripping effect.<br> ii. Metal Mania for paragraphs - Gives chills, medival magic book effects.</p> <p>• Scary Faced Art - Scary fearful face made using css border and border radius properties.</p> <p>• Open Book Card Effect And Smooth Transform Style - Smooth Card opening, and 3D transform rotation on hover.</p> <p>• Magic Glow Animation - Magical glowing animation around the card for giving helloween magic vibes.</p> <p>• Text Glowing - Bloody red text glows when the card is opened.</p> <p>• Responsiveness - Fits prefect according to the size of different devices with the of css media query, making fear accessible to all.</p> frontendchallenge devchallenge css