Untitled
/* LoginStyles.css */ /* Container styles */ .login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(to right, #ffcc00, #66cc66); /* Orange to Green Gradient */ } /* Welcome container */ .welcome-container { text-align: center; margin-bottom: 20px; color: #ffffff; /* White */ } /* Form container */ .login-form-container { background-color: #ffffff; /* White */ padding: 20px; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); max-width: 400px; width: 100%; } /* Title styles */ .login-title { font-size: 2.5em; color: #4d4d4d; /* Dark Gray */ } /* Form styles */ .login-form { display: flex; flex-direction: column; } /* Label styles */ .login-label { font-size: 1.2em; margin-bottom: 8px; color: #4d4d4d; /* Dark Gray */ } /* Input styles */ .login-input { width: 100%; padding: 12px; font-size: 1em; border: 1px solid #bdc3c7; /* Light Gray */ border-radius: 5px; margin-bottom: 15px; transition: border-color 0.3s ease-in-out; } .login-input:focus { border-color: #ffcc00; /* Orange on focus */ } /* Error message styles */ .login-error { color: #e74c3c; /* Red */ margin-bottom: 15px; text-align: center; } /* Button styles */ .login-button { background-color: #66cc66; /* Green */ color: #ffffff; /* White */ padding: 12px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease-in-out; } .login-button:hover { background-color: #4cae4c; /* Darker Green on hover */ } /* Additional styles */ .login-link { color: #ffcc00; /* Orange */ text-decoration: none; margin-top: 15px; text-align: center; font-size: 1em; transition: color 0.3s ease-in-out; } .login-link:hover { color: #e69500; /* Darker Orange on hover */ }
Leave a Comment