Hauptseite: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

Version vom 3. Oktober 2025, 08:09 Uhr

   <a href="Ilturien" style="display:block; width:100%; height:100%; color:white; font-weight:bold; text-decoration:none;">
     <img src="https://tolkiengateway.net/w/images/thumb/1/11/Turner_Mohan_-_Helm_Hammerhand.jpg/480px-Turner_Mohan_-_Helm_Hammerhand.jpg" style="position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0.6;" />
     Titel 1
   </a>

   <a href="Seitename2" style="display:block; width:100%; height:100%; color:white; font-weight:bold; text-decoration:none;">
     <img src="https://example.com/bild2.jpg" style="position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0.6;" />
     Titel 2
   </a>

   <a href="Seitename3" style="display:block; width:100%; height:100%; color:white; font-weight:bold; text-decoration:none;">
     <img src="https://example.com/bild3.jpg" style="position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0.6;" />
     Titel 3
   </a>

@@ Zeile 1: / Zeile 1: @@
 __NOTOC__ __NOEDITSECTION__
-[[Datei:Arkenkraut.png|160px|link=Hauptseite|class=buttonpic|center|Test]]
+<!-- Button-Container -->
+<div style="display:flex; flex-wrap:wrap; gap:10px;">
+  <!-- Button 1 -->
+  <div style="position:relative; width:160px; height:70px; border-radius:8px; overflow:hidden; text-align:center;">
+    <a href="Ilturien" style="display:block; width:100%; height:100%; color:white; font-weight:bold; text-decoration:none;">
+      <img src="https://tolkiengateway.net/w/images/thumb/1/11/Turner_Mohan_-_Helm_Hammerhand.jpg/480px-Turner_Mohan_-_Helm_Hammerhand.jpg" style="position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0.6;" />
+      <span style="position:relative; z-index:1; line-height:70px;">Titel 1</span>
+    </a>
+  </div>
+  <!-- Button 2 -->
+  <div style="position:relative; width:160px; height:70px; border-radius:8px; overflow:hidden; text-align:center;">
+    <a href="Seitename2" style="display:block; width:100%; height:100%; color:white; font-weight:bold; text-decoration:none;">
+      <img src="https://example.com/bild2.jpg" style="position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0.6;" />
+      <span style="position:relative; z-index:1; line-height:70px;">Titel 2</span>
+    </a>
+  </div>
+  <!-- Button 3 -->
+  <div style="position:relative; width:160px; height:70px; border-radius:8px; overflow:hidden; text-align:center;">
+    <a href="Seitename3" style="display:block; width:100%; height:100%; color:white; font-weight:bold; text-decoration:none;">
+      <img src="https://example.com/bild3.jpg" style="position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0.6;" />
+      <span style="position:relative; z-index:1; line-height:70px;">Titel 3</span>
+    </a>
+  </div>
+</div>