WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
एनिमेटेड HTML लॉगिन फ़ॉर्म
1824
dev_b
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
9 September 2024
एनिमेटेड लॉगिन फॉर्म
22 August 2024
एक सरल लॉगिन पृष्ठ
18 October 2024
HTML CSS पोर्टफोलियो वेबसाइट टेम्पलेट
HTML
Copy
Animated Login Form
Login
Username
Password
Login
Forgot Password?
CSS
Copy
body { font-family: Arial, sans-serif; background-color: #f0f2f5; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .login-container { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); width: 300px; transition: transform 0.3s ease; } .login-container:hover { transform: scale(1.05); } h2 { text-align: center; margin-bottom: 20px; color: #333; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; color: #333; } input[type="text"], input[type="password"] { width: 93%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; transition: border-color 0.3s; } input[type="text"]:focus, input[type="password"]:focus { border-color: #007bff; outline: none; } button { width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; margin-top: 10px; } button:hover { background-color: #0056b3; } .forgot-password { text-align: center; margin-top: 10px; } .forgot-password a { color: #007bff; text-decoration: none; } .forgot-password a:hover { text-decoration: underline; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */