Skip to content

Commit

Permalink
Merge pull request #4 from Manavsheth78/csb-o0n3h3/draft/unruffled-sa…
Browse files Browse the repository at this point in the history 
…mmet

Update LoginPage.css and LoginPage.jsx
  • Loading branch information
@akshsisodiya
akshsisodiya authored Dec 13, 2022
2 parents 89e0e74 + c250ea2 commit c15f8c2
Show file tree
Hide file tree
Showing 2 changed files with 162 additions and 97 deletions.
229 changes: 144 additions & 85 deletions src/Pages/LoginPage/LoginPage.css
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,154 @@
.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;
border-bottom: 0px;
border-top: 0px;
letter-spacing: 0.4em;
}

.emailinput input:valid,
.emailinput input:focus {
border: 2px solid black;
}

.cardFooter{
display: flex;
position: relative;
top: 20px;
}
.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;
}
30 changes: 18 additions & 12 deletions src/Pages/LoginPage/LoginPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,34 @@
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 (
<div className="LoginPageBody">
<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;

0 comments on commit c15f8c2

Please sign in to comment.