New here ?
-
- Discover new experiences with AmbuFlow!
Get access to exclusive content and features.
Create your account.
-
diff --git a/login.css b/login.css index e69de29..2b1b611 100644 --- a/login.css +++ b/login.css @@ -0,0 +1,282 @@ +/* Reset default margin and padding */ +*, +*::before, +*::after { + box-sizing: border-box; + padding: 0; + margin: 0; +} +a { + text-decoration: none; + color: inherit; +} +/* Progress Bar */ +#progress-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 9px; + z-index: 99990; +} + +#progress-bar { + height: 9px; + width: 0; + background: linear-gradient(90deg, rgb(38, 166, 154) 0%, rgb(102, 187, 106) 50%, rgb(76, 175, 80) 100%); + box-shadow: 0 0 4px rgba(38, 166, 154, 0.7), 0 0 10px rgba(76, 175, 80, 0.7); + transition: width 0.09s ease-in-out; + border-radius: 10px; +} + +/* Header and Navigation */ +header { + background-color: #00796b; + color: white; + padding: 15px; + position: sticky; + top: 0; + z-index: 1000; + display: flex; + justify-content: space-between; + align-items: center; +} + +header h1 { + font-size: 1.5rem; + margin: 0; + color: white; +} + +nav ul { + list-style-type: none; + display: flex; + gap: 20px; +} + +nav ul li a { + color: white; + transition: color 0.3s; +} + +nav ul li a:hover { + color: #e0f7fa; + background-color: rgba(255, 255, 255, 0.2); + border-radius: 7px; +} + +.nav-controls { + display: flex; + align-items: center; +} + +#menu-toggle { + background: none; + border: none; + color: white; + font-size: 1.5rem; + cursor: pointer; + margin-left: 15px; + display: none; +} + +.container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 90%; + max-width: 600px; + background: #fff; + border-radius: 10px; + margin: 20px auto; + padding: 20px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); +} + +.forms-container { + display: flex; + flex-direction: column; + align-items: center; + padding: 2rem; + width: 100%; +} + +form { + display: flex; + flex-direction: column; + gap: 1rem; + width: 100%; +} + +.title { + font-size: 1.8rem; + font-weight: 600; + color: #333; + text-align: center; +} + +.input-field { + position: relative; + display: flex; + align-items: center; + border: 1px solid #ccc; + border-radius: 5px; + padding: 0.5rem; +} + +.input-field i { + color: #666; + margin-right: 0.5rem; +} + +.input-field input { + width: 100%; + padding: 0.75rem; + border: none; + outline: none; +} + +.btn { + background-color: #6e8efb; + color: #fff; + padding: 0.75rem; + font-weight: 600; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.btn:hover { + background-color: #a777e3; +} + +/* Social Media */ +.social-media a img { + transition: transform 0.3s ease; +} + +.social-media a img:hover { + transform: scale(1.1); +} + +/* Responsive Styles */ +@media (max-width: 768px) { + nav ul { + flex-direction: column; + display: none; + width: 100%; + position: absolute; + background-color: #00796b; + top: 100%; + left: 0; + padding: 15px 0; + z-index: 9999; + } + nav ul li { + margin: 10px 0; + text-align: center; + } + #menu-toggle { + display: block; /* Show menu toggle button */ + } + + .container { + width: 100%; + margin-top: 20px; + } + + .forms-container { + padding: 1.5rem; + } +} + +/* Footer */ +.footer { + background-color: #00796b; + color: #ffffff; + padding: 40px 20px; + margin-top: 20px; +} + +.footer-content { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + max-width: 1200px; + margin: 0 auto; +} + +.footer-section { + flex: 1; + min-width: 200px; + margin-bottom: 20px; +} + +.footer-section h3 { + font-size: 1.3rem; + margin-bottom: 15px; +} + +.footer-section ul { + list-style-type: none; + padding: 0; + margin: 0; +} + +.footer-section ul li { + margin-bottom: 10px; +} + +.footer-section ul li a { + color: #ffffff; + text-decoration: none; + transition: color 0.3s; +} + +.footer-section ul li a:hover { + color: #b2dfdb; +} + +.social-icons { + display: flex; + gap: 10px; +} + +.social-icons a { + color: #ffffff; + font-size: 1.5rem; + transition: color 0.3s; +} + +.social-icons a:hover { + color: #b2dfdb; +} + +.footer-bottom { + text-align: center; + padding-top: 20px; + font-size: 0.9rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); + margin-top: 20px; + color: #e0f2f1; +} + +/* Responsive Footer Styles */ +@media (max-width: 768px) { + .footer-content { + flex-direction: column; + align-items: center; + } + + .footer-section { + width: 100%; + text-align: center; + margin-bottom: 30px; + } + + .footer-section h3 { + font-size: 1.2rem; + } +} diff --git a/login.html b/login.html index 2040471..20964db 100644 --- a/login.html +++ b/login.html @@ -1,104 +1,108 @@ -
- - -