WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Nexus AI Login Page HTML Template
476
codex
Open In Editor
Video
Publish Your Code
0
Recommended
22 August 2025
HTML Code Placeholder Comment
14 November 2025
3D Login Signup Box HTML CSS
20 June 2025
Social Media Link Cards HTML
HTML
Copy
Nexus AI - Secure Login
Nexus AI
Welcome back to the future
Email address
Password
Remember me
Forgot password?
Sign In
or continue with
Google
GitHub
Don't have an account?
Request access
CSS
Copy
:root { --bg-color: #050507; --card-bg: rgba(20, 20, 25, 0.6); --primary: #6366f1; --primary-glow: #818cf8; --accent: #d946ef; --text-primary: #f8fafc; --text-secondary: #94a3b8; --border: rgba(255, 255, 255, 0.08); --input-bg: rgba(255, 255, 255, 0.03); --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', system-ui, -apple-system, sans-serif; } body { background-color: var(--bg-color); color: var(--text-primary); min-height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; } /* Background Effects */ .background-elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; } .grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 50px 50px; mask-image: radial-gradient(circle at center, black 40%, transparent 100%); pointer-events: none; } .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; animation: float 20s infinite ease-in-out; } .blob-1 { top: -10%; left: -10%; width: 500px; height: 500px; background: var(--primary); animation-delay: 0s; } .blob-2 { bottom: -10%; right: -10%; width: 400px; height: 400px; background: var(--accent); animation-delay: -10s; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.95); } } /* Login Container */ .login-container { position: relative; z-index: 10; width: 100%; max-width: 420px; padding: 2.5rem; margin: 1rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 24px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); animation: slideUp 0.6s ease-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Typography & Brand */ .brand-section { text-align: center; margin-bottom: 2.5rem; } .logo-icon { width: 48px; height: 48px; margin: 0 auto 1.5rem; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 0 20px rgba(99, 102, 241, 0.4); } h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; background: linear-gradient(to right, white, #94a3b8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .subtitle { color: var(--text-secondary); font-size: 0.95rem; } /* Form Elements */ .input-group { margin-bottom: 1.5rem; } .input-group label { display: block; color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 0.5rem; font-weight: 500; } .input-wrapper { position: relative; } .input-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary); transition: var(--transition); } input { width: 100%; background: var(--input-bg); border: 1px solid var(--border); color: var(--text-primary); padding: 0.75rem 1rem 0.75rem 2.75rem; border-radius: 12px; font-size: 0.95rem; transition: var(--transition); } input:focus { outline: none; border-color: var(--primary); background: rgba(99, 102, 241, 0.05); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); } input:focus+.input-icon, .input-wrapper:focus-within .input-icon { color: var(--primary-glow); } /* Actions */ .form-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; font-size: 0.875rem; } .checkbox-container { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); cursor: pointer; user-select: none; } .checkbox-container input { display: none; } .checkmark { width: 18px; height: 18px; border: 1px solid var(--border); border-radius: 4px; background: var(--input-bg); position: relative; transition: var(--transition); } .checkbox-container input:checked~.checkmark { background: var(--primary); border-color: var(--primary); } .checkbox-container input:checked~.checkmark::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .forgot-password { color: var(--primary-glow); text-decoration: none; transition: var(--transition); } .forgot-password:hover { color: var(--accent); text-decoration: underline; } /* Buttons */ .submit-btn { width: 100%; padding: 0.875rem; background: linear-gradient(135deg, var(--primary), #4f46e5); color: white; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: var(--transition); position: relative; overflow: hidden; } .submit-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4); } .submit-btn:active { transform: translateY(0); } /* Divider & Social */ .divider { display: flex; align-items: center; text-align: center; margin: 2rem 0; color: var(--text-secondary); font-size: 0.875rem; } .divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border); } .divider span { padding: 0 1rem; } .social-login { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .social-btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.75rem; background: var(--input-bg); border: 1px solid var(--border); border-radius: 12px; color: var(--text-primary); cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: var(--transition); } .social-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--text-secondary); } .signup-link { text-align: center; margin-top: 2rem; font-size: 0.9rem; color: var(--text-secondary); } .signup-link a { color: var(--primary-glow); text-decoration: none; font-weight: 500; } .signup-link a:hover { text-decoration: underline; } /* Responsiveness */ @media (max-width: 480px) { .login-container { padding: 2rem 1.5rem; margin: 0; border: none; height: 100vh; border-radius: 0; display: flex; flex-direction: column; justify-content: center; } .blob { opacity: 0.6; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */