diff --git a/KBM-HTML-gh-pages/README.md b/KBM-HTML-gh-pages/README.md
new file mode 100644
index 0000000..e629011
--- /dev/null
+++ b/KBM-HTML-gh-pages/README.md
@@ -0,0 +1,2 @@
+# KBM-HTML
+- HTML seite für SAW
diff --git a/KBM-HTML-gh-pages/assets/bilder/Logo.png b/KBM-HTML-gh-pages/assets/bilder/Logo.png
new file mode 100644
index 0000000..01046f1
Binary files /dev/null and b/KBM-HTML-gh-pages/assets/bilder/Logo.png differ
diff --git a/KBM-HTML-gh-pages/assets/bilder/SignIn_Button.jpg b/KBM-HTML-gh-pages/assets/bilder/SignIn_Button.jpg
new file mode 100644
index 0000000..4c02970
Binary files /dev/null and b/KBM-HTML-gh-pages/assets/bilder/SignIn_Button.jpg differ
diff --git a/KBM-HTML-gh-pages/assets/bilder/background.png b/KBM-HTML-gh-pages/assets/bilder/background.png
new file mode 100644
index 0000000..d235a5c
Binary files /dev/null and b/KBM-HTML-gh-pages/assets/bilder/background.png differ
diff --git a/KBM-HTML-gh-pages/assets/bilder/icon.png b/KBM-HTML-gh-pages/assets/bilder/icon.png
new file mode 100644
index 0000000..767a585
Binary files /dev/null and b/KBM-HTML-gh-pages/assets/bilder/icon.png differ
diff --git a/KBM-HTML-gh-pages/assets/bilder/logo_wide.png b/KBM-HTML-gh-pages/assets/bilder/logo_wide.png
new file mode 100644
index 0000000..359cc5a
Binary files /dev/null and b/KBM-HTML-gh-pages/assets/bilder/logo_wide.png differ
diff --git a/KBM-HTML-gh-pages/assets/design.css b/KBM-HTML-gh-pages/assets/design.css
new file mode 100644
index 0000000..b463f07
--- /dev/null
+++ b/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);
+}
diff --git a/KBM-HTML-gh-pages/index.html b/KBM-HTML-gh-pages/index.html
new file mode 100644
index 0000000..48a363f
--- /dev/null
+++ b/KBM-HTML-gh-pages/index.html
@@ -0,0 +1,39 @@
+
+
+
+
+ Startseite
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- Startseite -
+
+