From dd33587c2a2d4db77c42c21aa00fddd76eec5f8f Mon Sep 17 00:00:00 2001
From: SHETH MANAV PRASHANT <shethmanav2002@gmail.com>
Date: Sun, 11 Dec 2022 17:12:05 +0000
Subject: [PATCH 1/2] Update LoginPage.css and LoginPage.jsx

---
 src/Pages/LoginPage/LoginPage.css | 227 +++++++++++++++++++-----------
 src/Pages/LoginPage/LoginPage.jsx |  30 ++--
 2 files changed, 160 insertions(+), 97 deletions(-)

diff --git a/src/Pages/LoginPage/LoginPage.css b/src/Pages/LoginPage/LoginPage.css
index 07313e2..c2191e8 100644
--- a/src/Pages/LoginPage/LoginPage.css
+++ b/src/Pages/LoginPage/LoginPage.css
@@ -1,95 +1,152 @@
-.LoginPageBody{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    background: #f9EFD7;
-    margin:0px;
+.LoginPageBody {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: #f9efd7;
+  margin: 0px;
 }
 
-.LoginPageCard{
-    display: inline-block;
-    border: 2px solid black;
-    width: 300px;
-    height: 450px;
-    background: white;
-    border-radius: 20px;
-    box-shadow: 3px 3px 0px #000;
+.LoginPageCard {
+  display: inline-block;
+  border: 2px solid black;
+  width: 300px;
+  height: 450px;
+  background: white;
+  border-radius: 20px;
+  box-shadow: 3px 3px 0px #000;
 }
 
-.signindiv{
-    margin: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid black;
-    font-size: 20px;
-    height: 50px;
-    width: 95px;
-    position: relative;
-    top:-20px;
-    color: white;
-    background:#E3CFFF;
-    border-radius: 12px;
-    box-shadow: 2px 2px 0px #000;
+.signindiv {
+  margin: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid black;
+  font-size: 20px;
+  height: 50px;
+  width: 95px;
+  position: relative;
+  top: -20px;
+  color: white;
+  background: #e3cfff;
+  border-radius: 12px;
+  box-shadow: 2px 2px 0px #000;
 }
 
-.emailinput{
-    width: 240px;
-    margin: auto;
-    font-size: 7px;
-    color: lightgray;
-    position: relative;
-    top:20px;
-}
-.emailinput input{
-    border: none;
-    background:lightgray;
-    border-radius: 10px;
-    width: 240px;
-    height: 35px;
+.emailinput {
+  width: 240px;
+  margin: auto;
+  font-size: 7px;
+  color: lightgray;
+  position: relative;
+  top: 20px;
+}
+.emailinput input {
+  border: none;
+  background: lightgray;
+  border-radius: 10px;
+  width: 240px;
+  height: 35px;
+  outline: none;
+  border: 1px solid grey;
+  background: white;
+  /* position: relative; */
+  transition: 0.5s;
+}
 
+.emailinput label {
+  position: absolute;
+  top: -12px;
+  font-size: 2.5em;
+  color: rgba(0, 0, 0, 0.3);
+  z-index: 999;
+  padding: 20px;
+  font-family: Arial, Helvetica, sans-serif;
+  /* background: lightgray; */
+  text-transform: uppercase;
+  transition: 0.5s;
+  transition-delay: 0.2s;
 }
-.requestOTPbtn{
-    margin: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid black;
-    font-size: 16px;
-    height: 40px;
-    width: 160px;
-    position: relative;
-    top:70px;
-    background:#8C52FF;
-    border-radius: 8px;
-    color: white;
-    box-shadow: 2px 2px 3px #000;
-}
-.requestOTPbtn:hover{
-    cursor: pointer;
-}
-.signUpOptionDiv{
-    display: flex;
-    justify-content: center;
-    text-align: center;
-    position: relative;
-    top: 130px;
-    height: 20px;
-    border-top: 2px solid black;
-}
-.signUpOptionDiv .orsignupwith{
-    font-size: 10px;
-    background: white;
-    display: block;
-    position: relative;
-    top: -22px;
-    height: 40px;
-    padding: 0px 5px 0px 5px;
+/* ----------------animation------------ */
+
+.emailinput input:valid ~ label,
+.emailinput input:focus ~ label {
+  color: black;
+  transform: translateX(8px) translateY(4px);
+  font-size: 12px;
+  padding: 0px 10px;
+  background: white;
+  border-left: 2px solid black;
+  border-right: 2px solid black;
+  letter-spacing: 0.4em;
+}
+
+.emailinput input:valid ~ label,
+.emailinput input:focus {
+  border: 2px solid black;
 }
 
-.cardFooter{
-    display: flex;
-    position: relative;
-    top: 20px;
-}
\ No newline at end of file
+.requestOTPbtn {
+  margin: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid black;
+  font-size: 16px;
+  height: 40px;
+  width: 160px;
+  position: relative;
+  top: 70px;
+  background: rgb(140, 82, 255);
+  border-radius: 8px;
+  color: white;
+  box-shadow: 2px 4px 3px #000;
+}
+.requestOTPbtn:hover {
+  cursor: pointer;
+}
+
+.requestOTPbtn:active {
+  background-color: rgba(140, 82, 255, 0.8);
+  box-shadow: 2px 2px 3px #000;
+  transform: translateY(4px);
+}
+.signUpOptionDiv {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  position: relative;
+  top: 130px;
+  height: 20px;
+  border-top: 2px solid black;
+}
+.signUpOptionDiv .orsignupwith {
+  font-size: 10px;
+  background: white;
+  display: block;
+  position: relative;
+  top: -22px;
+  height: 40px;
+  padding: 0px 5px 0px 5px;
+}
+
+.btn span {
+  font-size: 15px;
+  font-weight: 700;
+  position: absolute;
+  top: 20px;
+  cursor: pointer;
+  margin-left: 8px;
+}
+
+.btn span a {
+  text-decoration: none;
+  color: #000;
+}
+
+.cardFooter {
+  display: flex;
+  position: relative;
+  top: 20px;
+}
diff --git a/src/Pages/LoginPage/LoginPage.jsx b/src/Pages/LoginPage/LoginPage.jsx
index aae71cc..8b893a9 100644
--- a/src/Pages/LoginPage/LoginPage.jsx
+++ b/src/Pages/LoginPage/LoginPage.jsx
@@ -1,6 +1,6 @@
-import React from 'react'
-import "./LoginPage.css"
-import GoogleIcon from "./google.svg"
+import React from "react";
+import "./LoginPage.css";
+import GoogleIcon from "./google.svg";
 
 const LoginPage = () => {
   return (
@@ -8,21 +8,27 @@ const LoginPage = () => {
       <div className="LoginPageCard">
         <div className="signindiv">SIGN-IN</div>
         <div className="emailinput">
-          <h1>EMAIL-ID</h1>
-          <input type="text"></input>
+          <input type="text" id="Email-ID" required></input>
+          <label for="Email-ID">email-id</label>
         </div>
         <button className="requestOTPbtn">REQUEST OTP</button>
         <div className="signUpOptionDiv">
-          <div className='orsignupwith'><h2>or sign up with</h2><div className="cardFooter">
-          <img src={GoogleIcon}/><h1>Google</h1>
+          <div className="orsignupwith">
+            <h2>or sign up with</h2>
+            <div className="cardFooter">
+              <div className="btn" type="button">
+                <img src={GoogleIcon} />
+                <span>
+                  {" "}
+                  <a href="#">Google </a>
+                </span>
+              </div>
+            </div>
           </div>
-          </div>
-          
         </div>
       </div>
-
     </div>
-  )
-}
+  );
+};
 
 export default LoginPage;

From c250ea27f45d4f96ae3efa3e669f406ba47f1704 Mon Sep 17 00:00:00 2001
From: SHETH MANAV PRASHANT <shethmanav2002@gmail.com>
Date: Sun, 11 Dec 2022 17:22:37 +0000
Subject: [PATCH 2/2] Update LoginPage.css

---
 src/Pages/LoginPage/LoginPage.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Pages/LoginPage/LoginPage.css b/src/Pages/LoginPage/LoginPage.css
index c2191e8..bd22542 100644
--- a/src/Pages/LoginPage/LoginPage.css
+++ b/src/Pages/LoginPage/LoginPage.css
@@ -79,10 +79,12 @@
   background: white;
   border-left: 2px solid black;
   border-right: 2px solid black;
+  border-bottom: 0px;
+  border-top: 0px;
   letter-spacing: 0.4em;
 }
 
-.emailinput input:valid ~ label,
+.emailinput input:valid,
 .emailinput input:focus {
   border: 2px solid black;
 }