|
|
|
|
|
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; |
|
|
} |
|
|
|