Login page css update

kushwahramkumar2003 · Nov 16, 2023 · 1a18239 · 1a18239
1 parent fadac63
commit 1a18239
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 28 deletions.
diff --git 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,38 +94,59 @@ 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 {
     margin-top: 5rem;
     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;
     background: #FFF;
     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
@@ -93,7 +93,7 @@ export default function Login() {
       </div> */}
 
 
-      <form action='/login' method='post'>
+  <form action='/login' method='post'>
           <div className='form-details'>
             <form onSubmit={handleSubmit}>
               <label>
@@ -137,32 +137,33 @@ export default function Login() {
       ) : (
         <i className='far fa-eye'></i>
       )}
-    </span>
+     </span>
+    </div>
+  </label>
+</form>
+
+    {message && <p>{message}</p>}
   </div>
-</label>
-
 
-
-      <a href='/fogrt' target='_blank' rel='noopener noreferrer' style={textD} id='forget'>
-        Forgot Password? </a>
-      </form>
-
-        {message && <p>{message}</p>}
-      </div>
+  <div className='forget-pass'>
+    <a href='/fogrt' target='_blank' rel='noopener noreferrer' style={textD} id='forget'>
+    Forgot Password? </a>
+  </div>
 
 
-      <div className='btns' style={{}}>
-          <button type='submit'>Login</button>
-          <button type='submit'>SignUp</button>
-      </div>
+  {/****** Login and SignUp Buttons ******/}
+  <div className='btns' style={{}}>
+      <button type='submit'>Login</button>
+      <button type='submit'>SignUp</button>
+  </div>
 
     </form>
   </div>
 
 
-      <div className='right-img'>
-        <img src={cap} alt="Cap"></img>
-      </div>
+  <div className='right-img'>
+    <img src={cap} alt="Cap"></img>
     </div>
+  </div>
   );
 }