Add files via upload

KBM-HTML-gh-pages/README.md

@@ -0,0 +1,2 @@
+# KBM-HTML
+- HTML seite für SAW

KBM-HTML-gh-pages/assets/design.css

@@ -0,0 +1,300 @@
+:root {
+    --clr-neon: rgb(138,43,226);
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: sans-serif;
+}
+
+body{
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.menu {
+    overflow: hidden;
+    z-index: 99 !important;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 7rem;
+    background: transparent;
+    place-items: center;
+    padding-right: 10rem;
+}
+
+.menu a{
+    float: left;
+    height: 70%;
+    display: block;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 25px 16px;
+    text-decoration: none;
+    transition: ease 0.3s;
+}
+
+.logo {
+    position: center;
+    margin-left: 30%;
+    
+}
+
+.neon-button {
+    font-size: 1rem;
+    display: inline-block;
+    cursor: pointer;
+    text-decoration: none;
+    color: var(--clr-neon);
+    border: var(--clr-neon) 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);
+    position: relative;
+}
+
+.neon-button::before {
+    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 {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    box-shadow: 0 0 2em 0.5em var(--clr-neon);
+    opacity: 0;
+    background-color: var(--clr-neon);
+    z-index: -1;
+    transition: opacity 100ms linear;
+}
+
+.neon-button:hover,
+.neon-button:focus {
+  color: var(--clr-bg);
+  text-shadow: none;
+}
+
+.neon-button:hover::before,
+.neon-button:focus::before {
+  opacity: 1;
+}
+.neon-button:hover::after,
+.neon-button:focus::after {
+  opacity: 1;
+}
+
+.menu p{
+    position: fixed;
+    top: 25px;
+    right: 100px;
+    color: #f2f2f2;
+}
+
+a .menu .spaceholder {
+    size: 0.125em;
+}
+
+.seite {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    padding: 80px 20px;
+    transition: .4s ease;
+    background-image: url(./bilder/background.png);
+    background-size: 100%;    
+}
+
+.seite section {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    animation: animateBg 50s linear infinite;
+}
+
+@keyframes animateBg {
+    0%,100%
+    {
+        transform: scale(1);
+    }
+    50%
+    {
+        transform: scale(1.2);
+    }
+}
+
+.seite section span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 7px;
+    height: 4px;
+    background: #fff;
+    border-radius: 35%;
+    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 
+    0 0 0 8px rgba(255, 255, 255, 0.1),
+    0 0 20px rgba(255, 255, 255, 1);
+    animation: animate 5s linear infinite;
+}
+
+@keyframes animate {
+    0%
+    {
+        transform: rotate(315deg) translateX(0);
+        opacity: 1;
+    }
+    70%
+    {
+        opacity: 1;
+    }
+    100%
+    {
+        transform: rotate(315deg) translateX(-1000px);
+        opacity: 0;
+    }
+}
+
+.seite section span::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 300px;
+    height: 1px;
+    background: linear-gradient(90deg,#fff,transparent);
+}
+
+.seite section span:nth-child(1)
+{
+    top: 0;
+    right: 0;
+    left: initial;
+    animation-delay: 0;
+    animation-duration: 1s;
+}
+.seite section span:nth-child(2)
+{
+    top: 0;
+    right: 80px;
+    left: initial;
+    animation-delay: 0.2s;
+    animation-duration: 3s;
+}
+.seite section span:nth-child(3)
+{
+    top: 80px;
+    right: 0px;
+    left: initial;
+    animation-delay: 0.4s;
+    animation-duration: 2s;
+}
+.seite section span:nth-child(4)
+{
+    top: 0px;
+    right: 180px;
+    left: initial;
+    animation-delay: 0.6s;
+    animation-duration: 1.5s;
+}
+.seite section span:nth-child(5)
+{
+    top: 0px;
+    right: 400px;
+    left: initial;
+    animation-delay: 0.8s;
+    animation-duration: 2.5s;
+}
+.seite section span:nth-child(6)
+{
+    top: 0px;
+    right: 600px;
+    left: initial;
+    animation-delay: 1s;
+    animation-duration: 3s;
+}
+.seite section span:nth-child(7)
+{
+    top: 300px;
+    right: 0px;
+    left: initial;
+    animation-delay: 1.2s;
+    animation-duration: 1.75s;
+}
+.seite section span:nth-child(8)
+{
+    top: 0px;
+    right: 700px;
+    left: initial;
+    animation-delay: 1.2s;
+    animation-duration: 1.25s;
+}
+.seite section span:nth-child(9)
+{
+    top: 0px;
+    right: 1000px;
+    left: initial;
+    animation-delay: 0.75s;
+    animation-duration: 2.25s;
+}
+.seite section span:nth-child(10)
+{
+    top: 0px;
+    right: 450px;
+    left: initial;
+    animation-delay: 2.75s;
+    animation-duration: 1.75s;
+}
+
+.seite h1 {
+    text-align: center;
+}
+
+.seite p {
+    padding: 30px 0;
+}
+
+.signIn {
+    margin: auto;
+    font-size: 1rem;
+    display: inline-block;
+    cursor: pointer;
+    text-decoration: none;
+    color: var(--clr-neon);
+    border: var(--clr-neon) 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);
+}

KBM-HTML-gh-pages/index.html

@@ -0,0 +1,39 @@
+<html lang="de">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="with=device-width, initial-scale=1.0">
+        <title>Startseite</title>
+        <link rel="stylesheet" type="text/css" href="assets/design.css"/>
+        <link rel="icon" type="image/png" href="assets/bilder/icon.png">
+    </head>
+    <body>
+        <!-- Menü -->
+        <div class="menu">
+            <a class="neon-button" href="#start">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>
+            <a><img src="./assets/bilder/Logo.png" class="logo"></a>
+        </div>
+        
+
+        <div class="seite">
+            <!-- Sterne -->
+            <section>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+            </section>
+
+            <!-- Hauptseite -->
+            <p> - Startseite -</p>
+        </div>
+    </body>
+</html>