diff --git a/src/Components/Login.css b/src/Components/Login.css index 3196883..ee7553d 100644 --- a/src/Components/Login.css +++ b/src/Components/Login.css @@ -17,18 +17,16 @@ body { justify-content: space-evenly; } .right-img { - background-color: radial-gradient(72.53% 75.59% at 50% 50%, rgba(255, 255, 255, 0.41) 16.55%, rgba(243, 243, 243, 0.41) 32.78%); + background-color: #c0c0c0 | rgb(192,192,192); /* border: 2px solid black; */ width: 50%; justify-content: center; align-items: center; display: flex; - flex-direction: column; } .right-img img { width: 17.88881rem; height: 14.47794rem; - flex-shrink: 0; } .Left-content { width: 50%; @@ -38,7 +36,7 @@ body { align-items: center; } .Left-content nav { - margin-top: -14%; + /* margin-top: -14%; */ margin-left: -5.15rem; } @@ -78,10 +76,13 @@ label { /************ Hide/show Button CSS ***********/ .password-input { position: relative; + /* border: 2px solid black; */ } .password-toggle { position: absolute; + margin-top: 5%; + margin-right: 16%; top: 50%; right: 10px; transform: translateY(-50%); @@ -93,6 +94,10 @@ label { font-size: 18px; color: #007bff; /* Change color as needed */ } +.password-toggle i:hover { + color: #FCC822; + transition: 0.2s; +} /* forget password css */ .form-details a { @@ -100,18 +105,34 @@ label { color: rgba(0, 0, 0, 0.61); } +.forget-pass { + /* border: 2px solid black; */ + display: flex; + justify-content: flex-start; + align-items: flex-start; + padding-top: 10%; +} +.forget-pass a:hover { + color: #FCC822; + transition: 0.2s; +} + .btns { /* border: 2px solid black; */ - width: 50%; + width: 80%; + height: auto; display: flex; - /* margin-right: 1.81rem; */ + justify-content: flex-start; + /* align-items: center; */ + padding-bottom: 3rem; /* height: 25%; */ } -button { +.btns button { width: 4.46313rem; height: 2.32225rem; margin-top: 4rem; - margin-right: 3.5rem; + margin-right: 2.5rem; + margin-left: 5%; border: none; /* box-shadow: 0px 10.45024px 23.22276px -6.96683px #FBE18F; */ border: 0.581px solid #FCC822; @@ -119,12 +140,13 @@ button { transition: 0.2s; color: #FCC822; font-size: 1rem; - box-shadow: 0px 10.45024px 23.22276px -4.96683px #FBE18F; + box-shadow: 0px 10.45024px 23.22276px -8.96683px #FBE18F; } button:hover { background: linear-gradient(95deg, #FCC822 0%, #FFCD2E 100%); transition: 0.2s; - box-shadow: 0px 10.45024px 23.22276px -6.96683px #FBE18F; + /* box-shadow: 0px 10.45024px 23.22276px -6.96683px #FBE18F; */ + box-shadow: 0 0 30px #FCC822; color: #FFF; } button::before { diff --git a/src/Components/login.jsx b/src/Components/login.jsx index 3dc0f70..419ae6d 100644 --- a/src/Components/login.jsx +++ b/src/Components/login.jsx @@ -93,7 +93,7 @@ export default function Login() { */} -
+
+ +
+ + {message &&

{message}

} - - - - - Forgot Password? - - - {message &&

{message}

} - +
+ + Forgot Password? +
-
- - -
+ {/****** Login and SignUp Buttons ******/} +
+ + +
-
- Cap -
+
+ Cap
+ ); }