sjsj

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;
+    font-size: 1rem;
-    top: 20px;
+    display: inline-block;
-    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;
     cursor: pointer;
-    outline: none;
+    text-decoration: none;
-}
+    color: var(--clr-neon);
-
+    border: var(--clr-neon) 0.125em solid;
-#dark_mode {
+    padding: 0.125em 0.3em;
-    position: fixed;
+    margin-left: 0.85em;
-    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: '';
     position: absolute;
-    width: 35px;
+    right: 10px;
-    height: 30px;
+    border-radius: 0.25em;
-    background-color:white;
+    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
-    border-radius: 35px;
+    box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
-    top: 2px;
+    
-    left: 2px;
+    
-    cursor: pointer;
-    transition: .3s linear;
 }
 
-#dark_mode:checked + .seite {
-    background-color: #1e1e1e;
-    color: white;
-}
-
-
-#dark_mode:checked::before {
-    left: 30px;
-}
-
-#dark_mode:checked {
-    background: rgb(12, 177, 81);
-}

index.html

@@ -12,11 +12,25 @@
             <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>
-            <button class="SignIn">Anmelden</button>
+            <a class="SignIn">Anmelden</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>