From 91b049ffcf31c39fe99de6dee92b694a50ad524a Mon Sep 17 00:00:00 2001 From: Mansi Ruhil <157950124+mansiruhil13@users.noreply.github.com> Date: Fri, 4 Oct 2024 22:52:35 +0530 Subject: [PATCH] Revert "Fixed Login UI #104" --- login.html | 187 ++++++++++++------------- src/css/login.css | 346 ++++++++++++++++++++++------------------------ 2 files changed, 260 insertions(+), 273 deletions(-) diff --git a/login.html b/login.html index e74c52b..93ded17 100644 --- a/login.html +++ b/login.html @@ -1,51 +1,79 @@ + - Login + Register & Login + + + + + + + + + + + - + + + + -
-

Login

-
-
- - -
-
- - - + + +
+ +
+ + + +
+ + + + + + +
+ + diff --git a/src/css/login.css b/src/css/login.css index 3bc5bc6..3cc6a5f 100644 --- a/src/css/login.css +++ b/src/css/login.css @@ -1,253 +1,243 @@ -/* Basic reset */ +/* Reset styles */ * { margin: 0; padding: 0; box-sizing: border-box; } -body { - font-family: Arial, sans-serif; - background-color: #f0f0f0; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 100vh; +body, html { + font-family: 'Nunito', sans-serif; + background-color: #f0f4f8; + overflow-x: hidden; } -/* Container for the login form */ -.login-container { +.fixed-navbar { + background-color: #fff; width: 100%; - max-width: 400px; - padding: 40px; - background-color: white; - border-radius: 8px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - text-align: center; - height: 540px; + position: fixed; + top: 0; + left: 0; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + z-index: 1000; +} + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 30px; } -/* Heading styles */ -h1 { - font-size: 24px; +.logo { + font-size: 1.5rem; + font-weight: 700; color: #333; - margin-bottom: 20px; + text-decoration: none; } -/* Form field styles */ -.form-group { - margin-bottom: 20px; - text-align: left; +.navbar-nav { + display: flex; + gap: 20px; } -label { - font-size: 14px; +.nav-link { color: #555; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: color 0.3s; } -input { - width: 100%; - padding: 10px; - font-size: 16px; - margin-top: 5px; - border: 1px solid #ccc; - border-radius: 4px; - outline: none; +.nav-link:hover { + color: #007bff; } -input:focus { - border-color: #007bff; +.wrapper { + position: relative; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + padding-top: 100px; } -/* Button styles */ -button { - width: 200px; - bottom:120px; - position: absolute; - padding: 12px; - background-color: #007bff; - border: none; - border-radius: 4px; - color: white; - font-size: 16px; - cursor: pointer; +.form-box { position: relative; - top:80px; - + width: 350px; + padding: 40px; + background-color: #fff; + border-radius: 10px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); + text-align: center; } -button:hover { - background-color: #0056b3; +.input-box { + position: relative; + margin-bottom: 30px; + width: 100%; } -/* Link styles */ -p { - margin-top: 15px; - font-size: 14px; - left:665px; - position: absolute; - bottom:85px; - margin-bottom: 10px; +.input-box input { + width: 100%; + padding: 10px 40px 10px 10px; + font-size: 1rem; + border: 2px solid #ddd; + border-radius: 5px; + outline: none; + transition: border-color 0.3s ease; } -a { - color: #007bff; - text-decoration: none; +.input-box input:focus { + border-color: #007bff; } -a:hover { - text-decoration: underline; +.input-box label { + position: absolute; + top: 50%; + left: 10px; + transform: translateY(-50%); + color: #999; + font-size: 0.9rem; + pointer-events: none; + transition: all 0.3s ease; } -#checks { - display: flex; - height: 100px; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - gap: 8px; - margin-top: 10px; -} -#check0, #check1, #check2, #check3, #check4 { - font-size: smaller; - color: red; -} -#checkTitle{ - font-size: small; +.input-box input:focus + label, +.input-box input:not(:placeholder-shown) + label { + top: -10px; + font-size: 0.75rem; + color: #007bff; } -.password-container { - position: relative; -} -.toggle-password { +.input-box i { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); + color: #999; cursor: pointer; } -input[type="password"], input[type="text"] { - padding-right: 40px; -} -#togglePassword { +.toggle-password { cursor: pointer; + font-size: 1rem; } -body { - margin: 0; - padding: 0; - font-family: Arial, sans-serif; - background: linear-gradient(45deg, #3b82f6, #06b6d4); - height: 100vh; - display: flex; - justify-content: center; - align-items: center; -} - -.login-container { - background-color: white; - border-radius: 10px; - padding: 30px; - box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); - width: 400px; +.btn { + display: block; + width: 100%; + padding: 10px 0; + background-color: #007bff; + color: #fff; + font-size: 1rem; + font-weight: 600; text-align: center; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; } -h1 { - margin-bottom: 20px; - color: #333; -} - -.form-group { - margin-bottom: 20px; - position: relative; - text-align: left; +.btn:hover { + background-color: #0056b3; } -label { - display: block; - font-size: 14px; - margin-bottom: 5px; - color: #555; +.linkTxt { + font-size: 0.9rem; + margin-top: 20px; } -input[type="text"], -input[type="password"] { - width: 100%; - padding: 12px; - padding-right: 0; - border-radius: 5px; - border: 1px solid #ddd; - outline: none; - font-size: 16px; - color: #333; +.linkTxt a { + color: #007bff; + text-decoration: none; + font-weight: 600; } -input[type="text"]:focus, -input[type="password"]:focus { - border-color: #3b82f6; +.linkTxt a:hover { + text-decoration: underline; } -#togglePassword { +.rotate-bg, .rotate-bg2 { position: absolute; - right: 10px; - top: 50px; - cursor: pointer; - color: #999; + width: 300px; + height: 300px; + background-color: #007bff; + border-radius: 50%; + opacity: 0.1; + z-index: -1; } -#togglePassword:hover { - color: #3b82f6; +.rotate-bg { + top: -100px; + left: -100px; } -#checks { - text-align: left; - margin-bottom: 20px; +.rotate-bg2 { + bottom: -100px; + right: -100px; } -#checks div { - font-size: 13px; - margin-bottom: 8px; +.info-text { + margin-top: 20px; + text-align: center; } -#checks .fa-check-circle { - margin-right: 5px; +.info-text h2 { + font-size: 2rem; + font-weight: 700; + color: #333; } -#loginButton { - background-color: #3b82f6; - color: white; - padding: 12px; - border: none; - border-radius: 5px; - width: 100%; - font-size: 16px; - cursor: pointer; - transition: background-color 0.3s ease; +.info-text p { + font-size: 1rem; + color: #666; + max-width: 300px; + margin: 0 auto; } -#loginButton:disabled { - background-color: #aaa; - cursor: not-allowed; -} +/* Responsive Design */ +@media (max-width: 768px) { + .form-box { + width: 90%; + padding: 20px; + } -#loginButton:hover:enabled { - background-color: #2563eb; -} + .navbar { + padding: 10px 20px; + } -p { - font-size: 14px; - color: #555; - margin-top: 15px; -} + .navbar-nav { + gap: 15px; + } -a { - color: #3b82f6; - text-decoration: none; - font-weight: bold; + .info-text h2 { + font-size: 1.5rem; + } + + .info-text p { + font-size: 0.9rem; + } } -a:hover { - text-decoration: underline; -} \ No newline at end of file +@media (max-width: 480px) { + .navbar-nav { + flex-direction: column; + } + + .navbar-nav a { + margin: 5px 0; + } + + .info-text h2 { + font-size: 1.2rem; + } + + .info-text p { + font-size: 0.8rem; + } + + .rotate-bg, .rotate-bg2 { + width: 200px; + height: 200px; + } +}