ok

assets/seiten/css/design.css

@@ -1,5 +1,7 @@
+/* Haupt CSS für alle Seiten */
 html {
     scroll-behavior: smooth;
+    overflow-x: hidden;
 }
 
 *{
@@ -113,7 +115,7 @@ body{
     height: 100%;
     padding: 80px 20px;
     transition: .4s ease;
-    /* Nicht Ressourcen Schonend. > Laggs
+    /* Verursacht bei manchen Browsern/Geräten Laggs Beim Scrollen
     background-image: url(../../bilder/background.png);
     background-size: 100%;
     background-attachment: fixed;
@@ -121,7 +123,7 @@ body{
     */
 }
 /* GPU Freundlicher */
-/* Q: https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/ */
+/* Q: https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/ mit kleinen Änderungen */
 .seite::before {
     content: "";
     position: fixed;
@@ -134,7 +136,6 @@ body{
     background-size: cover;
     will-change: transform;
     z-index: -1;
-
 }
 
 /* Animierte Sterne */
@@ -143,18 +144,6 @@ body{
     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 {
@@ -198,6 +187,7 @@ body{
     background: linear-gradient(90deg,#fff,transparent);
 }
 
+/* Stern Position & Geschwindigkeit */
 .seite section span:nth-child(1)
 {
     top: 0;
@@ -280,15 +270,6 @@ body{
 }
 /* Animation Ende */
 
-/* Text Formatierung */
-.seite h1 {
-    text-align: center;
-}
-
-.seite p {
-    padding: 30px 0;
-}
-
 /* Footer */
 .footer {
     background: #444;
@@ -325,7 +306,8 @@ body{
 }
 
 .ft-icons {
-    margin-top: 1em;
+    bottom: 50%;
+    top: 50%;
 }
 
 .fa{
@@ -344,5 +326,4 @@ body{
     transition: ease-in-out all 0.2s;
 }
 
-
 /* Ab hier Mika */

assets/seiten/css/index.css

@@ -29,7 +29,7 @@
     text-align: center;
     position: absolute;
     left: 50%;
-    bottom: 1rem;
+    bottom: 0.5em;
     transform: translate(-50%, -50%);
     max-width: 75px;
     width: 100%;
@@ -56,3 +56,21 @@
     top: 8rem;
     transform: translate(-50%, -50%);
 }
+
+.über-uns {
+    width: 65%;
+    margin-top: 2%;
+    height: 50%;
+}
+.shop {
+    width: 65%;
+    margin-top: 0.5%;
+    height: 30%;
+}
+.shop, .über-uns{
+    background-color: rgba(0, 0, 0, 0.12);
+    margin-right: 2.5%;
+    text-align: center;
+    border-radius: 1em;
+    border: 0.05em solid #121212;
+}

index.html

@@ -21,10 +21,19 @@
                 <a class="neon-button" href="./assets/seiten/login.html"><br>Anmelden<br></a>
             </div>
         </div>
+        <!-- Sterne & Oberer teil der Hauptseite -->
         <div class="seite">
-            <!-- Sterne -->
             <div class="sterne">
-                <section>
+                <section> <!-- Hauptseite Oberer Teil -->
+                    <!-- Keine ahnung warum aber es funktioniert nur, wenn das hier drin steht. -->
+                    <div class="über-uns">
+                        <h1>Über uns</h1>
+                        <p> - Test<br>- Test 2<br>- Test 3</p>
+                    </div>
+                    <div class="shop">
+                        <p> Shop Examples</p>
+                    </div>
+                    <!-- Sterne -->
                     <span></span>
                     <span></span>
                     <span></span>
@@ -35,9 +44,9 @@
                     <span></span>
                     <span></span>
                     <span></span>
+                    <!-- Sterne ENde -->
                 </section>
             </div>
-            <!-- Startseite Content (Kurzes "wer sind wir", Bilder)-->
             <!-- Scroll Down Knopf-->
             <a id="down-btn" href="#content">Nach Unten<br>⬇️</a>
             <!-- On Top Knopf -->
@@ -59,11 +68,12 @@
                         <a href="./assets/seiten/kontakt.html">Kontakt</a>
                     </div>
                     <div class="ft-icons">
-                        <a href="#" class="fa fa-facebook"> </a>
-                        <a href="#" class="fa fa-twitter"> </a>
-                        <a href="#" class="fa fa-google"> </a>
-                        <a href="#" class="fa fa-github"> </a>
+                        <a href="404.html#facebook" class="fa fa-facebook"> </a>
+                        <a href="404.html#twitter" class="fa fa-twitter"> </a>
+                        <a href="404.html#google" class="fa fa-google"> </a>
+                        <a href="https://github.com/Promlg1104/KBM-HTML" class="fa fa-github"> </a>
                     </div>
+                    <br>
                     <p class="firmen-name">2021 - © KBM</p>
                 </div>
             </div>