Fabian/kbm-html
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ja sachen halt gemacht

Browse Source
This commit is contained in:
Fabian Märker
2021-11-24 20:23:31 +01:00
parent 4f5bfc313f
commit 261622ac1a
9 changed files with 349 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/bilder/facebook.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
assets/bilder/google.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
assets/bilder/twitter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

70
assets/design.css
View File

@@ -1,14 +1,9 @@
:root {
--clr-neon: rgb(138,43,226);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
*{
margin: 0;
padding: 0;
@@ -29,14 +24,14 @@ body{
position: fixed;
top: 0;
width: 100%;
height: 7rem;
height: 10rem;
background: transparent;
padding-right: 10rem;
}
.menu a{
float: left;
height: 70%;
height: 50%;
display: block;
color: #f2f2f2;
text-align: center;
@@ -44,11 +39,32 @@ body{
text-decoration: none;
transition: ease 0.3s;
}
.menu p{
position: fixed;
top: 25px;
right: 100px;
color: #f2f2f2;
}
.logo {
position: center;
margin-left: 30%;
#top {
position: fixed;
bottom: 1.2rem;
float: right;
right: 18.5%;
left: 95%;
max-width: 75px;
width: 100%;
font-size: 1.3rem;
border: rgb(138,43,226);
background-color: #808080;
padding: .5px;
border-radius: 4px;
}
#top:hover {
background-color: #f2f200;
cursor: pointer;
}
.neon-button {
@@ -56,13 +72,13 @@ body{
display: inline-block;
cursor: pointer;
text-decoration: none;
color: var(--clr-neon);
border: var(--clr-neon) 0.125em solid;
color: rgb(138,43,226);
border: rgb(138,43,226) 0.125em solid;
padding: 0.125em 0.5em;
margin-left: 0.85em;
border-radius: 0.25em;
text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
box-shadow: inset 0 0 0.5em 0 rgb(138,43,226), 0 0 0.5em 0 rgb(138,43,226);
position: relative;
}
@@ -70,16 +86,11 @@ body{
pointer-events: none;
content: "";
position: absolute;
background: var(--clr-neon);
top: 120%;
left: 0;
width: 100%;
height: 100%;
transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
filter: blur(1em);
opacity: 0.7;
}
.neon-button::after {
@@ -89,17 +100,17 @@ body{
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 0 2em 0.5em var(--clr-neon);
box-shadow: 0 0 2em 0.5em rgb(138,43,226);
opacity: 0;
background-color: var(--clr-neon);
background-color: rgb(138,43,226);
z-index: -1;
transition: opacity 100ms linear;
}
.neon-button:hover,
.neon-button:focus {
color: var(--clr-bg);
text-shadow: none;
color: rgb(138,43,226);
text-shadow: none;
}
.neon-button:hover::before,
@@ -111,13 +122,6 @@ body{
opacity: 1;
}
.menu p{
position: fixed;
top: 25px;
right: 100px;
color: #f2f2f2;
}
#logo {
float: none;
position: absolute;
@@ -291,13 +295,13 @@ body{
display: inline-block;
cursor: pointer;
text-decoration: none;
color: var(--clr-neon);
border: var(--clr-neon) 0.125em solid;
color: rgb(138,43,226);
border: rgb(138,43,226) 0.125em solid;
padding: 0.125em 0.3em;
margin-left: 0.85em;
position: absolute;
right: 10px;
border-radius: 0.25em;
text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
box-shadow: inset 0 0 0.5em 0 rgb(138,43,226), 0 0 0.5em 0 rgb(138,43,226);
}

45
assets/seiten/css/404.css Normal file
View 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
View 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
View 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
View 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>

8
index.html
View File

@@ -9,11 +9,11 @@
<body>
<!-- Menü -->
<div class="menu">
<a class="neon-button" href="#start">Startseite</a>
<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 class="SignIn">Anmelden</a>
<img id="logo" src="./assets/bilder/Logo.png">
<a class="SignIn" href="./assets/seiten/login.html">Anmelden</a>
<a href="./index.html"><img id="logo" src="./assets/bilder/Logo.png"></a>
</div>
@@ -34,6 +34,8 @@
<!-- Hauptseite -->
<p> - Startseite -</p>
<button id="top"><a href="#top" style="color:white">Nach Oben</a></button>
</div>
</body>
</html>