ich ritz mich bald

css/button.css

@@ -0,0 +1,35 @@
+.btnanimate
+{
+	transition: all 0.1s;
+	-webkit-transition: all 0.1s;
+}
+
+.action-button
+{
+	position: relative;
+	padding: 10px 40px;
+  margin: 0px 10px 10px 0px;
+  float: left;
+	border-radius: 16px;
+	color: #FFF;
+	text-decoration: none;	
+}
+
+.dabtn
+{
+	background-color: #a55ac5;
+  box-shadow: 0rem 0rem 1rem #cf9ef0;
+}
+
+.action-button:active
+{
+	transform: translate(0px,2px);
+  -webkit-transform: translate(0px,2px);
+	border-bottom: 1px solid;
+}
+
+.fill-row {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}

css/flexboxes.css

@@ -14,10 +14,9 @@
     flex-direction: column;
     justify-content: space-between;
     padding: 35px;
-    border: 1px solid rgba(255, 255, 255, 0.25);
+    border-radius: 3rem;
-    border-radius: 20px;
+/*    background-color: rgba(255, 255, 255, 0.45);
-    background-color: rgba(255, 255, 255, 0.45);
+    box-shadow: 0rem 0rem 1rem #c8d0e7;*/
-    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
   }
   
   .flex-box {
@@ -48,3 +47,19 @@
   .nocent {
     text-align:left;
   }
+
+  .flex-buttons {
+    flex-wrap: wrap;
+    display: flex;
+    flex-direction:row;
+    justify-content: space-between;
+  }
+
+  .grow-btn {
+    flex-grow: 1;
+
+  }
+
+  .fuck-all {
+all: revert;
+  }

index.html

@@ -8,18 +8,18 @@
   <link rel="stylesheet" href="css/nav.css">
   <link rel="stylesheet" href="css/scaler.css">
   <link rel="stylesheet" href="css/flexboxes.css">
-  
+  <link rel="stylesheet" href="css/button.css">
   <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Quicksand&display=swap" rel="stylesheet">
   <style>
     .content-div {
       opacity: 0;
-      transition: opacity 0.5s ease;
+      transition: opacity 0.3s ease-in-out;
       display: none; /* Apply only to content divs */
     }
     #page-title {
       /* Initial state should be visible */
       opacity: 1;
-      transition: opacity 0.5s ease;
+      transition: opacity 0.3s ease-in-out;
     }
     .active {
       display: block;
@@ -73,21 +73,34 @@ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
 </div>
 <div id="Services" class="content content-div">
   <div class="wrapper">
-    <h1 class="center-this-shit">Flexbox</h1>
+    <ul class="flex-box cards nocent">
-  <ul class="flex-box cards nocent">
+      <li>
-    <li><h2>Most used</h2>
+        <h2>Most used</h2>
-      <p>Put like most used services here idk
+        <div class="button-container flex-buttons center-this-shit"> <!-- Add a container for your buttons -->
-      </p></li>
+          <a href="#" class="action-button btnanimate dabtn grow-btn">Sklavenhandel</a>
-      </ul>
+          <a href="#" class="action-button btnanimate dabtn grow-btn">Rechtsextremer Content</a>
-      <ul class="flex-box cards nocent">
+          <a href="#" class="action-button btnanimate dabtn grow-btn">Uranium Kaufen</a>
-    <li><h2>Public Services</h2>
+          <a href="#" class="action-button btnanimate dabtn grow-btn">Ursula Ficken</a>
-      <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
+          <a href="#" class="action-button btnanimate dabtn grow-btn">Hilfe</a>
-      </p></li>
+          <a href="#" class="action-button btnanimate dabtn grow-btn">Ritzen</a>
-    <li><h2>Private Services</h2>
+          <a href="#" class="action-button btnanimate dabtn grow-btn">und Gruppenwixxen</a>
-      <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
+          
-      </p></li>
+        </div>
-  </ul>
+      </li>
+    </ul>
+    <ul class="flex-box cards nocent">
+      <li>
+        <h2>Public Services</h2>
+        <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.</p>
+      </li>
+      <li>
+        <h2>Private Services</h2>
+        <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.</p>
+      </li>
+    </ul>
+  </div>
 </div>
+
 <br>
 </div>
 <div id="About" class="content content-div">
@@ -127,7 +140,7 @@ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
         activeDiv.style.opacity = '1';
         title.style.opacity = '1';
       }, 10); // Short delay for display changes
-    }, 500); // Match fade effect duration
+    }, 300); // Match fade effect duration
   }
   </script>