Mudanças entre as edições de "Widget:MainPageIndex"

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<div class="horizontal-guide-index">
  <div class="guide-column">
    <div class="guide-title"><i>Mecânicas</i></div>
    <ul>
      <li><a href="/index.php/PvP">PvP</a></li>
      <li><a href="/index.php/Nível">Nível</a></li>
      <li><a href="/index.php/Drop">Drop & EXP</a></li>
      <li><a href="/index.php/Efeitos_negativos">Efeitos negativos</a></li>
      <li><a href="/index.php/Família">Casamento</a></li>
    </ul>
  </div>
  <div class="guide-column">
    <div class="guide-title"><i>Comércio</i></div>
    <ul>
      <li><a href="/index.php/Bazar_de_Prontera">Bazar de Prontera</a></li>
      <li><a href="/index.php/Lojinha_de_Rua">Lojinha de Rua</a></li>
      <li><a href="/index.php/Catálogo_de_Vendas">Catálogo de Vendas</a></li>
      <li><a href="/index.php/Paramercado">Paramercado</a></li>
    </ul>
  </div>
  <div class="guide-column">
    <div class="guide-title"><i>Aprimoramentos</i></div>
    <ul>
      <li><a href="/index.php/Refinamento">Refinamento</a></li>
      <li><a href="/index.php/Combinação">Combinação</a></li>
      <li><a href="/index.php/Encantamento">Encantamento</a></li>
      <li><a href="/index.php/Encantamento_de_Visual">Encanto de Visual</a></li>
    </ul>
  </div>
  <div class="guide-column">
    <div class="guide-title"><i>Melhorias</i></div>
    <ul>
      <li><a href="/index.php/Slot">Slot</a></li>
      <li><a href="/index.php/Cartas">Cartas (Lista)</a></li>
      <li><a href="/index.php/Conjuntos">Conjuntos</a></li>
      <li><a href="/index.php/Autoconjuração">Autoconjuração</a></li>
      <li><a href="/index.php/Selos_Divinos">Itens Divinos</a></li>
    </ul>
  </div>
  <div class="guide-column">
    <div class="guide-title"><i>E mais</i></div>
    <ul>
      <li><a href="/index.php/Estilista">Estilista</a></li>
      <li><a href="/index.php/Homunculus">Homunculus</a></li>
      <li><a href="/index.php/Assistentes">Assistentes</a></li>
      <li><a href="/index.php/Emoticons">Emoticons</a></li>
      <li><a href="/index.php/RolePlay">RolePlay</a></li>
    </ul>
  </div>
</div>
<style>
<style>
.horizontal-guide-index {
.table-index {
  width: 100%;
  border-spacing: 16px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  border-collapse: separate;
   display: flex;
   display: flex;
  flex-wrap: wrap;
  gap: 16px;
   justify-content: space-between;
   justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-family: sans-serif;
  font-size: 14px;
  border-top: 1px solid #333;
  padding-top: 10px;
}
}


.guide-column {
.index-cell {
   flex: 1 1 150px;
   flex: 1 1 48%;
   min-width: 150px;
   box-sizing: border-box;
  padding: 12px;
  background-color: #fdfdfd;
  border: 1px dashed #AAAAAA;
  border-radius: 8px;
}
}


.guide-title {
.index-title {
  display: flex;
  align-items: center;
   font-weight: bold;
   font-weight: bold;
   margin-bottom: 5px;
  font-size: 15px;
   margin-bottom: 4px;
}
}


.guide-column ul {
.index-title img {
   margin: 0;
   width: 20px;
   padding-left: 16px;
  height: 20px;
   margin-right: 6px;
}
}


.guide-column li {
.index-links {
   margin: 2px 0;
   font-size: 14px;
  line-height: 1.6;
}
}


.guide-column a {
.index-links a {
   color: #0645AD;
   color: #0366d6;
   text-decoration: none;
   text-decoration: none;
  margin-right: 6px;
}
}


.guide-column a:hover {
.index-links a:hover {
   text-decoration: underline;
   text-decoration: underline;
}
/* Responsivo: em telas muito pequenas, as células ocupam 100% */
@media screen and (max-width: 600px) {
  .index-cell {
    flex: 1 1 100%;
  }
}
}
</style>
</style>
<div class="table-index">
  <!-- Aqui vem cada bloco index-cell exatamente como tu já tem, não muda nada -->
  <!-- copia e cola teus <td class="index-cell"> ... </td> aqui como div -->
  <!-- Exemplo: -->
  <div class="index-cell">
    <div class="index-title">
      <img src="https://wiki.gla.com.br/images/4/45/Gold_medal.gif" />
      Grand Line Adventures
    </div>
    <div class="index-links">
      <a href="/wiki/Download">Download</a> ·
      <a href="/wiki/Suporte">Suporte</a> ·
      <a href="/wiki/Doações">Doações</a> ·
      <a href="/wiki/Benefícios_VIP">Benefícios VIP</a> ·
      <a href="/wiki/Revendedores_Oficiais">Revendedores Oficiais</a> ·
      <a href="/wiki/Criadores_de_Conteúdo">Criadores de Conteúdo</a>
    </div>
  </div>
  <!-- repete para os outros blocos -->
</div>

Edição das 23h18min de 1 de junho de 2025

<style> .table-index { 

 width: 100%;
 border-spacing: 16px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 border-collapse: separate;
 display: flex;
 flex-wrap: wrap;
 gap: 16px;
 justify-content: space-between;

}

.index-cell { 

 flex: 1 1 48%;
 box-sizing: border-box;
 padding: 12px;
 background-color: #fdfdfd;
 border: 1px dashed #AAAAAA;
 border-radius: 8px;

}

.index-title { 

 display: flex;
 align-items: center;
 font-weight: bold;
 font-size: 15px;
 margin-bottom: 4px;

}

.index-title img { 

 width: 20px;
 height: 20px;
 margin-right: 6px;

}

.index-links { 

 font-size: 14px;
 line-height: 1.6;

}

.index-links a { 

 color: #0366d6;
 text-decoration: none;
 margin-right: 6px;

}

.index-links a:hover { 

 text-decoration: underline;

}

/* Responsivo: em telas muito pequenas, as células ocupam 100% */ @media screen and (max-width: 600px) { 

 .index-cell {
   flex: 1 1 100%;
 }

} </style> 

     <img src="https://wiki.gla.com.br/images/4/45/Gold_medal.gif" />
     Grand Line Adventures

     <a href="/wiki/Download">Download</a> ·
     <a href="/wiki/Suporte">Suporte</a> ·
     <a href="/wiki/Doações">Doações</a> ·
     <a href="/wiki/Benefícios_VIP">Benefícios VIP</a> ·
     <a href="/wiki/Revendedores_Oficiais">Revendedores Oficiais</a> ·
     <a href="/wiki/Criadores_de_Conteúdo">Criadores de Conteúdo</a>
Disponível em “https://wiki.gla.com.br/index.php?title=Widget:MainPageIndex&oldid=33988”