diff --git a/assets/design.css b/assets/design.css index 15f768d..574b58c 100644 --- a/assets/design.css +++ b/assets/design.css @@ -25,6 +25,7 @@ body{ .menu { overflow: hidden; + z-index: 99 !important; background-color: #333; position: fixed; top: 0; @@ -33,8 +34,10 @@ body{ background-image: url(./bilder/bg2.jpg); place-items: center; padding-right: 10rem; + } + .menu a { float: left; display: block; @@ -117,12 +120,154 @@ a .menu .spaceholder { } .seite { + overflow: hidden; width: 100%; height: 100%; padding: 80px 20px; transition: .4s ease; background-image: url(./bilder/background.png); - background-size: 100%; + 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 { @@ -134,60 +279,20 @@ a .menu .spaceholder { } .signIn { - position: fixed; - top: 20px; - right: 20px; - appearance: none; - -webkit-appearance : none; - -moz-appearance : none; - -o-appearance : none; - width: 70px; - height: 35px; - background-image: url(./bilder/SignIn_Button.jpg); - border-radius: 22px; + font-size: 1rem; + display: inline-block; cursor: pointer; - outline: none; -} - -#dark_mode { - position: fixed; - top: 20px; - right: 20px; - appearance: none; - -webkit-appearance : none; - -moz-appearance : none; - -o-appearance : none; - width: 70px; - height: 35px; - background: black; - border-radius: 22px; - cursor: pointer; - outline: none; -} - -#dark_mode::before { - content: ''; + 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; - width: 35px; - height: 30px; - background-color:white; - border-radius: 35px; - top: 2px; - left: 2px; - cursor: pointer; - transition: .3s linear; + 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); + + } -#dark_mode:checked + .seite { - background-color: #1e1e1e; - color: white; -} - - -#dark_mode:checked::before { - left: 30px; -} - -#dark_mode:checked { - background: rgb(12, 177, 81); -} \ No newline at end of file diff --git a/index.html b/index.html index 70bad5b..f9bb4ed 100644 --- a/index.html +++ b/index.html @@ -12,11 +12,25 @@ Startseite 2. Seite 3. Seite - + Anmelden
+ +
+ + + + + + + + + + +
+

- Startseite -