From b88548ea9dce5847b49d1694604db441bdea336b Mon Sep 17 00:00:00 2001
From: TheErrorExe <161362055+TheErrorExe@users.noreply.github.com>
Date: Mon, 6 Jan 2025 15:53:48 +0100
Subject: [PATCH] Update index.html

---
 index.html | 68 +++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 50 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index 57474c0..e345484 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,25 @@
             box-sizing: border-box;
         }
 
+        header {
+            background-color: #333;
+            color: #fff;
+            padding: 10px 20px;
+        }
+
+        nav ul {
+            list-style: none;
+            display: flex;
+            gap: 15px;
+            padding: 0;
+            margin: 0;
+        }
+
+        nav ul li a {
+            text-decoration: none;
+            color: #fff;
+        }
+
         #features {
             display: flex;
             justify-content: center;
@@ -26,27 +45,36 @@
             border-radius: 10px;
             padding: 10px;
             width: 200px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            background: #fff;
+            transition: transform 0.2s, box-shadow 0.2s;
             cursor: pointer;
-            transition: transform 0.2s;
         }
 
         .card:hover {
             transform: scale(1.05);
+            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
+        }
+
+        .card img {
+            width: 100%;
+            border-radius: 8px;
         }
 
         .popup {
             position: fixed;
-            bottom: -100%;
+            top: 50%;
             left: 50%;
-            transform: translateX(-50%);
+            transform: translate(-50%, -50%);
             background: white;
             width: 90%;
-            max-width: 500px;
+            max-width: 400px;
             padding: 20px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
             border-radius: 10px;
-            animation: slideUp 0.5s forwards;
             z-index: 1000;
+            display: none;
+            animation: fadeIn 0.3s ease-in-out;
         }
 
         .popup h3 {
@@ -57,25 +85,17 @@
             position: absolute;
             top: 10px;
             right: 10px;
-            font-size: 18px;
+            font-size: 20px;
             background: none;
             border: none;
             cursor: pointer;
+            color: #333;
         }
 
         .popup .close:hover {
             color: red;
         }
 
-        @keyframes slideUp {
-            from {
-                bottom: -100%;
-            }
-            to {
-                bottom: 20%;
-            }
-        }
-
         .overlay {
             position: fixed;
             top: 0;
@@ -84,6 +104,18 @@
             height: 100%;
             background: rgba(0, 0, 0, 0.5);
             z-index: 999;
+            display: none;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translate(-50%, -45%);
+            }
+            to {
+                opacity: 1;
+                transform: translate(-50%, -50%);
+            }
         }
     </style>
 </head>
@@ -128,8 +160,8 @@
         <p>&copy; 2025 Blockattack Server. Alle Rechte vorbehalten. Powered by mine-server.org. Website by TheErrorExe</p>
     </footer>
 
-    <div class="overlay" id="overlay" style="display: none;"></div>
-    <div class="popup" id="popup" style="display: none;">
+    <div class="overlay" id="overlay"></div>
+    <div class="popup" id="popup">
         <button class="close" id="closePopup">&times;</button>
         <h3 id="popupTitle">Popup-Titel</h3>
         <p id="popupDescription">Popup-Beschreibung</p>