Skip to content

Commit

Permalink
changes css log in form
Browse files Browse the repository at this point in the history
  • Loading branch information
Gemma committed Dec 5, 2023
1 parent 0867fe1 commit 8a7bfd0
Show file tree
Hide file tree
Showing 9 changed files with 493 additions and 189 deletions.
Binary file added frontend/public/padlock.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/right-arrow.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/user.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions frontend/src/App.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@


html {
margin: 0px !important;
height: 100vh;
Expand Down
325 changes: 311 additions & 14 deletions frontend/src/components/SignIn/SignInForm.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,3 @@
.login {
display: flex;
color: white;
height: 100vh;
}

.appAside {
width: 50%;
background-color: #ffffff;
Expand Down Expand Up @@ -53,14 +47,6 @@
font-weight: 600;
}

.appForm h3 {
color: #e16e00;
text-transform: uppercase;
/* margin-left: 105px; */
margin-top: 43px;
font-size: 14px;
}

.formTitleLink-active {
color: white;
font-size: 20px;
Expand Down Expand Up @@ -97,6 +83,11 @@
margin-top: 10px;
}

.social-login h3 {
color: white;
margin-top: 61px;
}

.formFieldInput::placeholder {
color: #616e7f;
}
Expand Down Expand Up @@ -158,6 +149,235 @@
margin-left: 5px;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Raleway, sans-serif;
}

body {
background: linear-gradient(90deg, #7bb2b8, #4b949c);
}

.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}

.screen {
background: linear-gradient(90deg, #34495e, #34495e);
position: relative;
height: 600px;
width: 360px;
box-shadow: 0px 0px 3px #34495e;
}

.screen__content {
z-index: 1;
position: relative;
height: 100%;
}

.screen__background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}

.screen__background__shape {
transform: rotate(45deg);
position: absolute;
}

.screen__background__shape1 {
height: 520px;
width: 520px;
background: #fff;
top: -50px;
right: 120px;
border-radius: 0 72px 0 0;
}

.screen__background__shape2 {
height: 220px;
width: 220px;
background: #3d72a6;
top: -172px;
right: 0;
border-radius: 32px;
}

.screen__background__shape3 {
height: 540px;
width: 190px;
background: linear-gradient(270deg, #3d72a6, #3d72a6);
top: -24px;
right: 0;
border-radius: 32px;
}

.screen__background__shape4 {
height: 400px;
width: 200px;
background: #3d72a6;
top: 420px;
right: 50px;
border-radius: 60px;
}

.screen__background__shape5 {
height: 551px;
width: 520px;
background: #fff;
top: -24px;
right: 31px;
border-radius: 0 72px 0 0;
}

.screen__background__shape6 {
height: 507px;
width: 147px;
background: linear-gradient(260deg, #3d72a6, #3d72a6);
top: 230px;
right: -111px;
border-radius: 26px;
}

.login {
width: 320px;
padding: 30px;
padding-top: 156px;
}

.login2 {
/* width: 320px; */
padding: 30px;
padding-top: 156px;
}

.login__field {
padding: 20px 0px;
position: relative;
}

.login__field2 {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-top: 20px;
padding-bottom: 28px;
}

.lineLogin {
width: 99%;
margin-top: 6px;
margin-bottom: 8px;
height: 2px;
background-color: #4d5580;
border: none;
}

.login__icon {
position: absolute;
top: 29px;
color: #3d72a6;
width: 16px;
}

.button:hover {
background-color: rgb(134, 200, 194);
}

.buttonRightArrow {
width: 21px;
margin-left: 100px;
}

.login__input {
border: none;
border-bottom: 2px solid #3d72a6;
background: none;
padding: 10px;
padding-left: 24px;
font-weight: 700;
width: 75%;
transition: 0.2s;
}

.login__input:active,
.login__input:focus,
.login__input:hover {
outline: none;
border-bottom-color: #3d72a6;
}

.login__submit {
background: #fff;
font-size: 14px;
margin-top: 30px;
padding: 16px 20px;
border-radius: 26px;
border: 1px solid #3d72a6;
text-transform: uppercase;
font-weight: 700;
display: flex;
align-items: center;
width: 100%;
color: #4c489d;
box-shadow: 0px 2px 2px #3d72a6;
cursor: pointer;
transition: 0.2s;
}

.login__submit:active,
.login__submit:focus,
.login__submit:hover {
border-color: #3d72a6;
outline: none;
}

.button__icon {
font-size: 24px;
margin-left: auto;
color: #3d72a6;
}

.social-login {
position: absolute;
height: 140px;
width: 160px;
text-align: center;
bottom: 0px;
right: 0px;
color: #fff !important;
}

.social-icons {
display: flex;
align-items: center;
justify-content: center;
}

.social-login__icon {
padding: 20px 10px;
color: #fff;
text-decoration: none;
text-shadow: 0px 0px 8px #3d72a6;
}

.social-login__icon:hover {
transform: scale(1.5);
}

@media (max-width: 700px) {
.appAside {
width: 0%;
Expand Down Expand Up @@ -195,3 +415,80 @@
margin-top: 37px;
}
}

@media (max-width: 896px) {
.screen__background__shape6 {
height: 222px;
width: 386px;
background: linear-gradient(260deg, #3d72a6, #3d72a6);
top: 439px;
right: 2px;
}
.screen__background__shape5 {
height: 551px;
width: 520px;
background: #fff;
top: -24px;
right: 65px;
border-radius: 0 72px 0 0;
}

.screen__background__shape2 {
height: 220px;
width: 220px;
background: #3d72a6;
top: -172px;
right: 0;
border-radius: 0px;
}
}

@media (max-width: 466px) {
.screen__background__shape2 {
height: 129px;
width: 131px;
background: linear-gradient(260deg, #3d72a6, #3d72a6);
top: 13px;
right: 116px;
border-radius: 71px;
}

.login2 {
/* width: 320px; */
padding: 30px;
padding-top: 156px;
margin-left: -19px;
}

h6 {
margin-left: 5px;
font-size: 13px !important;
width: 82vw !important;
}
.screen__background__shape5 {
/* height: 551px; */
/* width: 469px; */
background: #fff;
top: -24px;
right: 113px;
border-radius: 52 190px 0 0;
}
.screen__background__shape6 {
height: 165px;
width: 166px;
background: linear-gradient(260deg, #3d72a6, #3d72a6);
top: 487px;
right: 39px;
border-radius: 303px;
}

.login__field2 {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-top: 20px;
padding-bottom: 28px;
margin-left: -7px;
}
}
Loading

0 comments on commit 8a7bfd0

Please sign in to comment.