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 @@ - - - - Register & Login - + + + + Register & Login + + + + + +
+
+
- - -
-
- -
+ +
+

Resum Resume.

+ + +
-
- - - - - -
-
-

New here ?

-

- Discover new experiences with AmbuFlow!
Get access to exclusive content and features.
Create your account. -

- - - - + + + + + + diff --git a/login.js b/login.js index e69de29..bcbc2a7 100644 --- a/login.js +++ b/login.js @@ -0,0 +1,34 @@ +document.addEventListener("DOMContentLoaded", function () { + const container = document.querySelector(".container"); + const signUpBtn = document.getElementById("sign-up-btn"); + const signInBtn = document.getElementById("sign-in-btn"); + + signUpBtn.addEventListener("click", () => { + container.classList.add("show-signup"); + }); + + signInBtn.addEventListener("click", () => { + container.classList.remove("show-signup"); + }); +}); + + +document.addEventListener("DOMContentLoaded", function () { + const container = document.querySelector(".container"); + const menuToggle = document.getElementById("menu-toggle"); + const navMenu = document.getElementById("nav-menu"); + + // Toggle menu functionality + menuToggle.addEventListener("click", () => { + navMenu.classList.toggle("show-menu"); + }); + + // Progress bar functionality + window.addEventListener("scroll", () => { + const scrollY = window.scrollY; + const documentHeight = document.documentElement.scrollHeight - window.innerHeight; + const scrollPercent = (scrollY / documentHeight) * 100; + document.getElementById("progress-bar").style.width = `${scrollPercent}%`; + }); +}); +