ja sachen halt gemacht
This commit is contained in:
45
assets/seiten/css/404.css
Normal file
45
assets/seiten/css/404.css
Normal file
@@ -0,0 +1,45 @@
|
||||
body {
|
||||
background-image: url(../../bilder/background.png);
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.errmsg {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: linear-gradient(134deg, hsl(44, 96%, 65%), hsl(34, 95%, 45%));
|
||||
border-radius: 10px;
|
||||
color: hsl(0, 0, 100);
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.errmsg h1 {
|
||||
text-decoration: underline;
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
.errmsg a, p {
|
||||
text-decoration: solid;
|
||||
font-size: larger;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.errmsg button {
|
||||
font-size: 1.3rem;
|
||||
border: #000;
|
||||
background-color: transparent;
|
||||
padding: .5px;
|
||||
border-style: solid;
|
||||
border-radius: 4px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.errmsg button:hover {
|
||||
border-color: #808080;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
182
assets/seiten/css/login.css
Normal file
182
assets/seiten/css/login.css
Normal file
@@ -0,0 +1,182 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Knöpfe */
|
||||
|
||||
.btn {
|
||||
display: block;
|
||||
background: hsl(86, 76%, 71%);
|
||||
color: hsl(0, 0, 100);
|
||||
text-decoration: none;
|
||||
margin: 20px 0;
|
||||
padding: 15px 15px;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn::after
|
||||
{
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all .2s ease-in-out;
|
||||
box-shadow: inset 0 3px 0 hsla(0, 0, 0, 0), 0 3px 3px hsla(0, 0, 0, .2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn:hover{
|
||||
background: hsla(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 3px 0 hsla(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
.login-thirtparty {
|
||||
padding-left: 15px;
|
||||
color: #000;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.login-thirtparty:hover {
|
||||
box-shadow: inset 0 3px 0 #000;
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
|
||||
.login-thirtparty .fa {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background: hsla(0, 0, 0, 0.1);
|
||||
line-height: 3.2;
|
||||
border-radius: 5px 0 0 5px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.login-facebook {
|
||||
background-color: hsl(221, 44%, 41%);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.login-twitter {
|
||||
background-color: hsl(206, 82%, 63%);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.login-google {
|
||||
background-color: hsl(7, 71%, 55%);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.thirtpartylogos {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.form fieldset {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 20px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form fieldset input {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
color: hsl(0, 0, 20);
|
||||
padding: 15px 40px 15px 15px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
outline: none!important;
|
||||
border: 1px solid hsla(0, 0, 0, 0.3);
|
||||
box-shadow: inset 0 1px 4px hsla(0, 0, 0, 0.2);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.form button {
|
||||
width: 100%;
|
||||
outline: none!important;
|
||||
background: linear-gradient(-5deg, hsl(86, 61%, 44%), hsl(86, 65%, 54%));
|
||||
border: none;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 3px 0px hsla(86, 21%, 44%, 0.2);
|
||||
text-shadow: 0 2px 3px hsla(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
.anmelden {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
width: 800px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 25px hsla(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.thirtpartylogin, .email-login {
|
||||
width: 50%;
|
||||
padding: 30px 40px;
|
||||
}
|
||||
|
||||
.thirtpartylogin {
|
||||
background: linear-gradient(134deg, hsl(44, 96%, 65%), hsl(34, 95%, 45%));
|
||||
border-radius: 10px;
|
||||
color: hsl(0, 0, 100);
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.thirtpartylogin h1 {
|
||||
font-size: 30px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 40px;
|
||||
text-shadow: 0 2px 3px hsla(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.email-login h2 {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
margin-top: 23px;
|
||||
margin-bottom: 43px;
|
||||
text-shadow: 0 2px 3px hsla(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.email-login fieldset::after {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 17px;
|
||||
z-index: 2;
|
||||
width: 20px;
|
||||
color: hsla(0, 0, 0, .2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.email-login fieldset.username::after {
|
||||
content: '👨'; /* User Name Emoji (Person) */
|
||||
}
|
||||
|
||||
.email-login fieldset.email::after {
|
||||
content: '📧'; /* Email Emoji */
|
||||
}
|
||||
.email-login fieldset.passwort::after {
|
||||
content: '🔑'; /* Schlüssel (Passwort) Emoji */
|
||||
}
|
||||
Reference in New Issue
Block a user