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 */
|
||||
}
|
||||
63
assets/seiten/login.html
Normal file
63
assets/seiten/login.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="with=device-width, initial-scale=1.0">
|
||||
<title>Anmelden</title>
|
||||
<link rel="stylesheet" type="text/css" href="../design.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="./css/login.css"/>
|
||||
<link rel="icon" type="image/png" href="../bilder/icon.png">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Menü -->
|
||||
<div class="menu">
|
||||
<a class="neon-button" href="../../index.html">Startseite</a>
|
||||
<a class="neon-button" href="#seite2">2. Seite</a>
|
||||
<a class="neon-button" href="#seite3">3. Seite</a>
|
||||
<a href="../../index.html"><img id="logo" src="../bilder/Logo.png"></a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="seite">
|
||||
<!-- Sterne Animation -->
|
||||
<section>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</section>
|
||||
|
||||
<!-- Anmelde "Fenster" -->
|
||||
<div class="anmelden">
|
||||
<div class="thirtpartylogin">
|
||||
<h1>Erstelle einen <br>KBM-Account</h1>
|
||||
<a href="./placeholder.html#fb-login" class="btn login-thirtparty login-facebook"><img class="thirtpartylogos" src="../bilder/facebook.png"></img> Mit Meta/Facebook Anmelden</a>
|
||||
<a href="./placeholder.html#tw-login" class="btn login-thirtparty login-twitter"><img class="thirtpartylogos" src="../bilder/twitter.png"></img> Mit Twitter Anmelden</a>
|
||||
<a href="./placeholder.html#gl-login" class="btn login-thirtparty login-google"><img class="thirtpartylogos" src="../bilder/google.png"></img> Mit Google Anmelden</a>
|
||||
</div>
|
||||
<div class="email-login">
|
||||
<h1>Oder benutze deine E-Mail</h1>
|
||||
<form class="form">
|
||||
<fieldset class="username">
|
||||
<input type="text" placeholder="KBM User Name"/>
|
||||
</fieldset>
|
||||
<fieldset class="email">
|
||||
<input type="email" placeholder="E-Mail"/>
|
||||
</fieldset>
|
||||
<fieldset class="passwort">
|
||||
<input type="password" placeholder="Passwort"/>
|
||||
</fieldset>
|
||||
<button type="submit" class="btn">Anmelden</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
17
assets/seiten/placeholder.html
Normal file
17
assets/seiten/placeholder.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="with=device-width, initial-scale=1.0">
|
||||
<title>404</title>
|
||||
<link rel="stylesheet" type="text/css" href="./css/404.css"/>
|
||||
<link rel="icon" type="image/png" href="../bilder/icon.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="errmsg">
|
||||
<h1>Error 404: Not Found</h1>
|
||||
<p>Bitte kehren sie zurück oder klicken sie auf den Knopf um zur <a href="../../index.html">Startseite</a> zu gelangen!<br></p>
|
||||
<button class="startseite-btn"><a href="../../index.html">Startseite</a></button>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user