|
|
| (6 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) |
| Linha 1: |
Linha 1: |
| <div style="display: flex; flex-wrap: wrap; gap: 20px; width: 100%;"> | | <tabber> |
| <!-- COLUNA ESQUERDA: Menu + Índice -->
| | |-|Recompensas Garantidas= |
| <div style="flex: 1; min-width: 400px;">
| | {| class="wikitable" style="width: 50%; text-align: center;" |
| <!-- CAIXA MENU -->
| | |- |
| <div style="border: 1px solid #e0e0e0; border-radius: 8px;
| | ! colspan="2" style="background-color: #f2f2f2;" | Recompensas Garantidas |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-bottom: 20px;">
| | |- |
| <div style="background: linear-gradient(to bottom, #459cca, #5684c8);
| | | [[File:EXP_ICON_31026.gif|25px]] || 2.500.000 Experiência |
| color: white; font-size: 1.4em; font-weight: bold;
| | |- |
| text-align: center; padding: 5px;"> | | | [[File:piece_bronze.png|25px]] || 1x Piece of Bronze Star |
| Menu
| | |- |
| </div>
| | | [[File:Tokens.png|25px]] || 225x Mighty Tokens e 150 Devoted Tokens |
| <div style="padding: 15px;">
| | |} |
| <p style="margin: 0;">Item 1</p>
| | |-|Second Tab Title= |
| <p style="margin: 0;">Item 2</p>
| | Second tab content goes here. |
| <p style="margin: 0;">Item 3</p>
| | |-|Third Tab Title= |
| </div>
| | Third tab content goes here. |
| </div>
| | </tabber> |
| | |
| <!-- CAIXA ÍNDICE -->
| |
| <div style="border: 1px solid #e0e0e0; border-radius: 8px;
| |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
| |
| <div style="background: linear-gradient(to bottom, #459cca, #5684c8);
| |
| color: white; font-size: 1.4em; font-weight: bold;
| |
| text-align: center; padding: 5px;">
| |
| Índice
| |
| </div>
| |
| <div style="padding: 15px;">
| |
| <p style="margin: 0;">Página 1</p>
| |
| <p style="margin: 0;">Página 2</p>
| |
| <p style="margin: 0;">Página 3</p>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| | |
| <!-- COLUNA DIREITA: Eventos + Changelog (largura fixa 300px) -->
| |
| <div style="flex: 0 0 300px;">
| |
| <!-- CAIXA EVENTOS -->
| |
| <div style="border: 1px solid #e0e0e0; border-radius: 8px;
| |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-bottom: 20px;">
| |
| <div style="background: linear-gradient(to bottom, #459cca, #5684c8);
| |
| color: white; font-size: 1.4em; font-weight: bold;
| |
| text-align: center; padding: 5px;">
| |
| Eventos
| |
| </div>
| |
| <!--
| |
| IMPORTANTE: se o widget tiver largura maior que 300px,
| |
| forçamos rolagem horizontal, em vez de expandir a coluna.
| |
| -->
| |
| <div style="padding: 10px; overflow-x: auto;">
| |
| <!-- Se tiver imagens muito grandes, você pode fazer:
| |
| <img style="max-width:100%; height:auto;">
| |
| ou no widget -->
| |
| {{#widget:GlobalEventTimer}}
| |
| {{#widget:WorldBossTimer}}
| |
| </div>
| |
| </div>
| |
| | |
| <!-- CAIXA CHANGELOG -->
| |
| <div style="border: 1px solid #e0e0e0; border-radius: 8px;
| |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
| |
| <div style="background: linear-gradient(to bottom, #459cca, #5684c8);
| |
| color: white; font-size: 1.4em; font-weight: bold;
| |
| text-align: center; padding: 5px;">
| |
| Changelog
| |
| </div>
| |
| <div style="padding: 10px; overflow-x: auto;">
| |
| <p style="margin: 0;">Atualização 1</p>
| |
| <p style="margin: 0;">Atualização 2</p>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div> | |
