| | |
| | body { |
| | margin: 0; |
| | font-family: Arial, sans-serif; |
| | background: linear-gradient(135deg, #c0392b, #e67e22); |
| | height: 100vh; |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | } |
| |
|
| | |
| | .container { |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | } |
| |
|
| | .form-box { |
| | background: rgba(255, 255, 255, 0.1); |
| | backdrop-filter: blur(8px); |
| | padding: 30px; |
| | border-radius: 12px; |
| | width: 350px; |
| | box-shadow: 0 8px 25px rgba(0,0,0,0.2); |
| | text-align: center; |
| | color: white; |
| | } |
| |
|
| | |
| | .brand { |
| | font-size: 26px; |
| | font-weight: bold; |
| | margin-bottom: 5px; |
| | } |
| |
|
| | .subtitle { |
| | font-size: 14px; |
| | margin-bottom: 20px; |
| | color: #eee; |
| | } |
| |
|
| | |
| | .input-group { |
| | text-align: left; |
| | margin-bottom: 15px; |
| | } |
| |
|
| | .input-group label { |
| | font-size: 14px; |
| | display: block; |
| | margin-bottom: 5px; |
| | } |
| |
|
| | .input-group input { |
| | width: 100%; |
| | padding: 10px; |
| | border: none; |
| | border-radius: 6px; |
| | outline: none; |
| | } |
| |
|
| | |
| | .btn { |
| | background: #8BC34A; |
| | color: #fff; |
| | border: none; |
| | padding: 12px; |
| | width: 100%; |
| | border-radius: 6px; |
| | cursor: pointer; |
| | font-size: 16px; |
| | transition: 0.3s; |
| | } |
| |
|
| | .btn:hover { |
| | background: #7CB342; |
| | } |
| |
|
| | |
| | .login-text { |
| | margin-top: 15px; |
| | font-size: 14px; |
| | } |
| |
|
| | .login-text a { |
| | color: #fff; |
| | text-decoration: underline; |
| | } |
| |
|