ok

assets/seiten/css/design.css

@@ -106,7 +106,28 @@ body{
     height: 105%;
     width: fit-content;
 }
-
+#up-btn {
+    position: fixed;
+    text-align: center;
+    bottom: 1.2rem;
+    right: 18.5%;
+    left: 95%;
+    max-width: 75px;
+    width: 100%;
+    font-size: 1.3rem;
+    border: rgb(138,43,226);
+    background-color: #808080;
+    color: #232323;
+    padding: .5px;
+    border-radius: 4px;
+    text-decoration: none;
+}
+#up-btn:hover {
+    background-color: #232323;
+    cursor: pointer;
+    color: #808080;
+    transition: all 0.75s;
+}
 /* Hauptseite */
 .seite {
     overflow: hidden;

assets/seiten/css/index.css

@@ -13,8 +13,8 @@
     padding: .5px;
     border-radius: 4px;
     text-decoration: none;
+    transition: all 0.75s;
 }
-
 #down-btn:hover,
 #up-btn:hover {
     background-color: #232323;
@@ -22,8 +22,8 @@
     color: #808080;
     transition: all 0.75s;
 }
-
 #down-btn {
+    transition: all 0.75s;
     color: #121212;
     background-color: #808080;
     text-align: center;
@@ -38,7 +38,6 @@
     border-radius: 4px;
     text-decoration: none;  
 }
-
 #content {
     width: 100%;
     height: 185%;

assets/seiten/css/shop.css

@@ -0,0 +1,40 @@
+.hdline {
+    text-align: center;
+    color: rgba(200, 200, 200, 0.5);
+    font-size: 200%;
+    margin-top: 2%;
+}
+.item {
+    background-color: rgba(0, 0, 0, 0.12);
+    margin-top: 1%;
+    margin-left: 50%;
+    margin-right: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 1em;
+    border: 0.05em solid #121212;
+    width: 80%;
+    height: 25%;
+    transition: all 0.5s ease-in;
+}
+.item:hover {
+    transition: all 0.5s ease-in;
+    width: 81%;
+    height: 26%;
+}
+.top {
+    margin-top: 6.5%;
+}
+.shop-img img {
+    margin-left: 1%;
+    border-radius: 1em;
+    border: 0.05em solid #121212;
+    margin-top: 0.5%;
+    margin-bottom: 0.5%;
+    height: 90%;
+    width: 15%;
+}
+.shop-img a {
+    margin-left: 1%;
+    height: 90%;
+    width: 10%;
+}

assets/seiten/shop.html

@@ -20,21 +20,19 @@
                 <a class="neon-button" href="./login.html"><br>Anmelden<br></a>
             </div>
         </div>
-        </div class="seite">
-            <!-- Sterne -->
-            <div class="sterne">
-                <section>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                </section>
+        <div class="seite">
+            <h1 class="hdline">Shop</h1>
+                <!-- Shop Items -->
+                <div class="top item">
+                    <a class="shop-img" href="../bilder/SignIn_Button.jpg">
+                        <img class="shop-img" src="../bilder/SignIn_Button.jpg"/>
+                    </a>
+                    <h1 class="item-name">Name</h1>
+                    <p class="item-desc">Beschreibung</p>
+                    <p class="price">Preis</p>
+                </div>
             </div>
+            <!-- On Top Knopf -->
+            <a id="up-btn" href="#top">⬆️<br>Nach Oben</a>            
     </body>
 </html>