Cards: Difference between revisions

Revision as of 16:25, 21 January 2026

       <a href="/wiki/Fire" class="element-link">
         
         Fire
       </a>

       <a href="/wiki/Water" class="element-link">
         File:Water.png
         Water
       </a>

       <a href="/wiki/Earth" class="element-link">
         File:Earth.png
         Earth
       </a>

       <a href="/wiki/Air" class="element-link">
         File:Air.png
         Air
       </a>

       <a href="/wiki/Voidal" class="element-link">
         File:Voidal.png
         Voidal
       </a>

       <a href="/wiki/Aetheric" class="element-link">
         File:Aetheric.png
         Aetheric
       </a>

       <a href="/wiki/Neutral" class="element-link">
         File:Neutral.png
         Neutral
       </a>

@@ Line 1: / Line 1: @@
+<templatestyles src="Template:CardPages/styles.css" />
+<!-- Outer banner wrapper -->
+<div class="event-banner">
+  <!-- Optional background layer (purely visual, not clickable) -->
+  <div class="banner-bg-wrapper"></div>
+  <!-- Foreground content layer -->
+  <div class="banner-overlay">
+    <!-- Flex container that holds ALL 7 elements -->
+    <div class="element-container">
+      <!-- Individual element box -->
+      <div class="element-item">
+        <!-- Each element has its OWN link -->
+        <a href="/wiki/Fire" class="element-link">
+          <!-- Image: NO fixed px size so CSS can scale it -->
+          [[File:Fire Not Real.png]]
+          <!-- Text label -->
+          <span class="fire-text">Fire</span>
+        </a>
+      </div>
+      <div class="element-item">
+        <a href="/wiki/Water" class="element-link">
+          [[File:Water.png]]
+          <span class="water-text">Water</span>
+        </a>
+      </div>
+      <div class="element-item">
+        <a href="/wiki/Earth" class="element-link">
+          [[File:Earth.png]]
+          <span class="earth-text">Earth</span>
+        </a>
+      </div>
+      <div class="element-item">
+        <a href="/wiki/Air" class="element-link">
+          [[File:Air.png]]
+          <span class="air-text">Air</span>
+        </a>
+      </div>
+      <div class="element-item">
+        <a href="/wiki/Voidal" class="element-link">
+          [[File:Voidal.png]]
+          <span class="voidal-text">Voidal</span>
+        </a>
+      </div>
-<templatestyles src="Template:CardPages/styles.css" />
+      <div class="element-item">
-<div class ="event-banner">
+        <a href="/wiki/Aetheric" class="element-link">
-<div class ="banner-overlay">
+          [[File:Aetheric.png]]
-<div class ="banner-bg-wrapper">
+          <span class="aetheric-text">Aetheric</span>
+        </a>
+      </div>
+      <div class="element-item">
+        <a href="/wiki/Neutral" class="element-link">
+          [[File:Neutral.png]]
+          <span class="neutral-text">Neutral</span>
+        </a>
+      </div>
-{| class="wikitable element-table"
+     </div>
-|+ style="text-align: center;" | Affinities
-|-
-| class="element-cell" |
-  <div class="element-item">
-    [[File:Fire Not Real.png|128px]]
-    <span class="fire-text element-item">Fire</span>
-  </div>
-| class="element-cell" |
-  <div class="element-item">
-    [[File:Water.png|32px]]
-    <span>Water</span>
-  </div>
-| class="element-cell" |
-  <div class="element-item">
-    [[File:Earth.png]]
-     <span>Earth</span>
-  </div>
-| class="element-cell" |
-  <div class="element-item">
-    [[File:Air.png|64px]]
-    <span>Air</span>
-  </div>
-| class="element-cell" |
-  <div class="element-item">
-    [[File:Air.png|64px]]
-    <span>Voidal</span>
-  </div>
-| class="element-cell" |
-  <div class="element-item">
-    [[File:Air.png|64px]]
-    <span>Aetheric</span>
-  </div>
-| class="element-cell" |
-  <div class="element-item">
-    [[File:Air.png|64px]]
-    <span>Neutral</span>
    </div>
-|}
-</div>
-</div>
 </div>