Modern Animated Login Page Template — HTML CSS JS | Social Login (Google, Instagram, Facebook) | Responsive & Dark Theme

✨ Modern Animated Login Page Template

Give your web project a jaw-dropping first impression with this professionally designed, fully animated login page — built entirely with HTML, CSS, and vanilla JavaScript. No frameworks, no dependencies, just clean and production-ready code.

─────────────────────────────────────
🎨 DESIGN HIGHLIGHTS
─────────────────────────────────────
– Dark glassmorphism card with shimmer border animation
– Animated floating particle canvas background
– 3 ambient glow orbs (blue, purple, pink)
– Smooth slide-in animations on page load
– Gradient headline with Syne + DM Sans Google Fonts
– Pulsing live indicator badges

─────────────────────────────────────
🔐 SOCIAL LOGIN BUTTONS INCLUDED
─────────────────────────────────────
✅ Google Login Button (with official “G” logo)
✅ Instagram Login Button (gradient logo)
✅ Facebook Login Button (official “f” logo)

Each button includes hover glow effects and a “Connecting…” loading state. Simply replace the onclick handler with your real OAuth redirect URL and you’re live!

─────────────────────────────────────
⚡ FEATURES
─────────────────────────────────────
– Live email & password validation with error messages
– Password show/hide toggle with animated eye icon
– Loading spinner animation on form submit
– Success overlay with animated checkmark
– “Forgot Password” and “Create Account” link placeholders
– Fully commented code — easy to customise

─────────────────────────────────────
📱 FULLY RESPONSIVE
─────────────────────────────────────
– Desktop: Two-column layout (brand panel + login card)
– Tablet: Single column with clean card layout
– Mobile (<400px): Stacked social buttons, compact card

─────────────────────────────────────
📦 WHAT’S INCLUDED
─────────────────────────────────────
– 1 × login.html (single self-contained file)
– No external dependencies (Google Fonts loaded via CDN)
– Inline CSS + JS — zero build tools required

─────────────────────────────────────
🛠️ WHO IS THIS FOR?
─────────────────────────────────────
– Web developers needing a ready-made auth UI
– Freelancers building client websites fast
– Agencies maintaining a design component library
– Beginners learning modern HTML/CSS/JS techniques
– Anyone who wants to skip the boring login page design

─────────────────────────────────────
🚀 HOW TO USE
─────────────────────────────────────
1. Download the ZIP file
2. Open login.html in your browser
3. Customise colours via CSS variables (–accent, –bg-deep etc.)
4. Connect your real backend / OAuth provider
5. Deploy — done!

─────────────────────────────────────
📋 TECHNICAL DETAILS
─────────────────────────────────────
– Language: HTML5, CSS3, JavaScript (ES6)
– Framework: None (Vanilla)
– Browser Support: Chrome, Firefox, Safari, Edge (latest)
– File Size: ~12 KB
– License: Single-use commercial license (1 project)

─────────────────────────────────────
⚠️ NOTE
─────────────────────────────────────
This is a frontend UI template only. Backend authentication logic (OAuth, JWT, database) is not included. Social login buttons require integration with respective developer platforms (Google Cloud Console, Meta for Developers etc.).

Questions? Contact us via the support tab — we typically reply within 24 hours.