Difference between revisions of "Template:Harem-Heroes-Gallery"

From Hgames Wiki
Jump to: navigation, search
(Created page with "<div style="display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 8px; background-color: #f9f9f9;"> {{#if:{{{image1|}}}|<div style...")
 
m
 
(20 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div style="display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 8px; background-color: #f9f9f9;">
+
<div style="display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 8px; background-color: #f9f9f9; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);">
   {{#if:{{{image1|}}}|<div style="flex: 1; min-width: 150px; text-align: center; margin-bottom: 15px;">
+
   {{#if:{{{image1|}}}|<div style="flex: 0 0 auto; max-width: 500px; max-height: 500px; box-sizing: border-box; text-align: center;">
     <img src="{{{image1}}}" style="max-width: 100%; height: auto; border: 1px solid #ddd; border-radius: 4px;"/>
+
     [[File:{{{image1}}}|center|frameless|500x400px]]
 
     <div style="margin-top: 5px; font-size: 0.9em;">{{{caption1|}}}</div>
 
     <div style="margin-top: 5px; font-size: 0.9em;">{{{caption1|}}}</div>
 
   </div>}}
 
   </div>}}
   {{#if:{{{image2|}}}|<div style="flex: 1; min-width: 150px; text-align: center; margin-bottom: 15px;">
+
   {{#if:{{{image2|}}}|<div style="flex: 0 0 auto; max-width: 500px; max-height: 500px; box-sizing: border-box; text-align: center;">
     <img src="{{{image2}}}" style="max-width: 100%; height: auto; border: 1px solid #ddd; border-radius: 4px;"/>
+
     [[File:{{{image2}}}|center|frameless|500x400px]]
 
     <div style="margin-top: 5px; font-size: 0.9em;">{{{caption2|}}}</div>
 
     <div style="margin-top: 5px; font-size: 0.9em;">{{{caption2|}}}</div>
 
   </div>}}
 
   </div>}}
   <!-- Repeat for more images -->
+
   {{#if:{{{image3|}}}|<div style="flex: 0 0 auto; max-width: 500px; max-height: 500px; box-sizing: border-box; text-align: center;">[[File:{{{image3}}}|center|frameless|500x400px]]<div style="margin-top: 5px; font-size: 0.9em;">{{{caption3|}}}</div></div>}}
 +
  {{#if:{{{image4|}}}|<div style="flex: 0 0 auto; max-width: 500px; max-height: 500px; box-sizing: border-box; text-align: center;">[[File:{{{image4}}}|center|frameless|500x400px]]<div style="margin-top: 5px; font-size: 0.9em;">{{{caption4|}}}</div></div>}}
 +
  {{#if:{{{image5|}}}|<div style="flex: 0 0 auto; max-width: 500px; max-height: 500px; box-sizing: border-box; text-align: center;">[[File:{{{image5}}}|center|frameless|500x400px]]<div style="margin-top: 5px; font-size: 0.9em;">{{{caption5|}}}</div></div>}}
 +
  {{#if:{{{image6|}}}|<div style="flex: 0 0 auto; max-width: 500px; max-height: 500px; box-sizing: border-box; text-align: center;">[[File:{{{image6}}}|center|frameless|500x400px]]<div style="margin-top: 5px; font-size: 0.9em;">{{{caption6|}}}</div></div>}}
 +
  {{#if:{{{image7|}}}|<div style="flex: 0 0 auto; max-width: 500px; max-height: 500px; box-sizing: border-box; text-align: center;">[[File:{{{image7}}}|center|frameless|500x400px]]<div style="margin-top: 5px; font-size: 0.9em;">{{{caption7|}}}</div></div>}}
 +
  {{#if:{{{image8|}}}|<div style="flex: 0 0 auto; max-width: 500px; max-height: 500px; box-sizing: border-box; text-align: center;">[[File:{{{image8}}}|center|frameless|500x400px]]<div style="margin-top: 5px; font-size: 0.9em;">{{{caption8|}}}</div></div>}}
 
</div>
 
</div>

Latest revision as of 15:22, 15 December 2023