mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-07 19:18:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add folder structure

Browse source
This commit is contained in:
luisa.bellitto 2025-06-14 15:50:19 +02:00 • committed by Luisa Bellitto
parent 032806a5a9
commit 912b0a2b4c
8 changed files with 0 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

185
code/frontend/src/pages/loginAndSignUpPage.css Normal file
View file

@ -0,0 +1,185 @@
.login-display{
display: flex;
flex-direction: column;
height: 100vh; /* Full viewport height */
width: 100vw; /* Full viewport width */
background: var(--gradient-blue-backround-mobile);
align-items: center;
justify-content: center;
}
.login-text{
display: flex;
padding: 40px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 18px;
color: var(--Rotkehlchen-gray);
text-align: center;
}
.login-icon{
height: 32px;
width: 32px;
aspect-ratio: 1/1;
align-self: center;
}
.login-button{
display: inline-flex;
padding: auto;
justify-content: center;
align-items: center;
gap: 10px;
width: 150px;
height: 32px;
cursor: pointer;
border-radius: 10px;
border: 2px solid var(--Rotkehlchen-orange-default);
background: var(--Rotkehlchen-yellow-default);
}
.login-button:hover{
border-radius: 10px;
border: 2px solid var(--Rotkehlchen-orange-default);
background: var(--Rotkehlchen-yellow-hover);
}
.login-button:active{
border-radius: 10px;
border: 2px solid var(--Rotkehlchen-orange-default);
background: var(--Rotkehlchen-orange-default);
}
.login-div-input{
display: flex;
flex-direction: row;
border-radius: 4px;
border: 3px solid var(--Rotkehlchen-brown-dark);
background: #FFF;
width:100%;
height: 44px;
align-items: center;
justify-content: flex-start;
}
.login-div-input:hover{
border: 3px solid var(--Rotkehlchen-brown-middle);
}
.login-div-input:focus-within{
border: 3px solid var(--Rotkehlchen-orange-default)
}
.login-input{
width: 100%;
height: 40px;
border: none;
color: var(--Rotkehlchen-brown-middle);
outline: 0 !important;
}
.login-here{
color: var(--Rotkehlchen-orange-default);
background-color: transparent;
border: none;
text-decoration: underline;
cursor: pointer;
}
.login-signup{
color: #FFF;
text-align: center;
cursor: pointer;
}
.login-part{
display: flex;
padding: 8px 40px 40px 40px;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 24px;
}
.input-fields {
display: flex;
width: 100%;
flex-direction: column;
justify-content: space-between;
gap: 16px;
}
/* Desktop view*/
@media only screen and (min-width: 768px) {
.login-display{
min-width: 850px;
min-height: 800px;
}
.login-login{
display: flex;
flex-direction: row;
border-radius: 4px;
background: rgba(13, 10, 56, 0.71);
box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
align-items: center;
justify-content: start;
width: 50vw;
height: 60vh;
min-height: 400px;
min-width: 500px;
}
.login-image{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
border: 5px solid var(--Rotkehlchen-gray);
background-image: url("../public/assets/images/IceBirdLogin.jpg");
background-size: cover;
background-position: 75%;
}
.signup-image{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
border: 5px solid var(--Rotkehlchen-gray);
background-image: url("../public/assets/images/SummerOwlSignup.jpg");
background-size: cover;
/*background-position: 75%;*/
}
.login-part{
width: 45%;
height: 90%;
padding:3%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 24px;
}
.input-fields {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
gap: 16px;
}
}