Testes do Snails: mudanças entre as edições
Ir para navegação
Ir para pesquisar
Sem resumo de edição |
Sem resumo de edição |
||
Linha 10: | Linha 10: | ||
<html> | <html> | ||
<style> | <style> | ||
. | .section-container { | ||
margin: 20px 0; | |||
border-radius: 5px; | |||
margin: 20px | |||
border-radius: | |||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
. | |||
.section-header { | |||
background-color: #1A2C60; | background-color: #1A2C60; | ||
color: #FFD700; | color: #FFD700; | ||
text-align: center; | text-align: center; | ||
padding: | padding: 15px; | ||
font-size: 18px; | |||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
. | |||
.section-content { | |||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
justify-content: flex-start; | |||
padding: 15px; | padding: 15px; | ||
background-color: #f9f9f9; | |||
} | } | ||
. | |||
flex: | .menu-card { | ||
padding: | flex: 0 0 150px; | ||
margin: 10px; | |||
padding: 15px; | |||
background-color: white; | |||
border-radius: 5px; | |||
box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |||
text-align: center; | |||
transition: transform 0.2s; | |||
text-decoration: none; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
height: 150px; | |||
} | } | ||
. | |||
.menu-card:hover { | |||
transform: translateY(-5px); | |||
box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |||
} | } | ||
. | |||
.menu-card-content { | |||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | |||
height: 100%; | height: 100%; | ||
} | } | ||
.menu-card-content img { | |||
margin-bottom: 10px; | |||
margin-bottom: | |||
max-width: 32px; | max-width: 32px; | ||
max-height: 32px; | max-height: 32px; | ||
} | } | ||
. | |||
.menu-card-content div { | |||
color: #333; | |||
font-size: 14px; | |||
} | } | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
. | .menu-card { | ||
flex | flex: 0 0 120px; | ||
height: 120px; | |||
} | } | ||
} | } | ||
</style> | </style> | ||
<div class=" | <div class="section-container"> | ||
<div class=" | <div class="section-header">Sobre o servidor</div> | ||
<div class=" | <div class="section-content"> | ||
<a href="Corrida_99" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:22537.png|32px | [[Arquivo:22537.png|32px]] | ||
<html> | <html> | ||
<div>CORRIDA 99</div> | |||
</div> | |||
</a> | |||
<a href="O_Servidor" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:699.png|32px | [[Arquivo:699.png|32px]] | ||
<html> | <html> | ||
<div>O Servidor</div> | |||
</div> | |||
</a> | |||
<a href="Batalha_Campal" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:7828.png|32px | [[Arquivo:7828.png|32px]] | ||
<html> | <html> | ||
<div>Batalha Campal</div> | |||
</div> | |||
</a> | |||
<a href="Guerra_do_Emperium" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:6444.png|32px | [[Arquivo:6444.png|32px]] | ||
<html> | <html> | ||
<div>Guerra do Emperium</div> | |||
</div> | |||
</a> | |||
<a href="Player_Vs_Player" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[File:sword.png|32px]] | [[File:sword.png|32px]] | ||
<html> | <html> | ||
<div>Player Vs Player</div> | |||
</div> | |||
</a> | |||
<a href="Regras" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:PLACA_DE_PARE.png|32px | [[Arquivo:PLACA_DE_PARE.png|32px]] | ||
<html> | <html> | ||
<div>Regras</div> | |||
</div> | |||
</a> | |||
<a href="Sistema_VIP" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:6480.png|32px | [[Arquivo:6480.png|32px]] | ||
<html> | <html> | ||
<div>Sistema VIP</div> | |||
</div> | |||
</a> | |||
<a href="Cash_Shop" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[File:670.png|32px | [[File:670.png|32px]] | ||
<html> | <html> | ||
<div>Cash Shop</div> | |||
</div> | |||
</a> | |||
</div> | </div> | ||
</div> | </div> | ||
<div class=" | <div class="section-container"> | ||
<div class=" | <div class="section-header">Sistemas</div> | ||
<div class=" | <div class="section-content"> | ||
<a href="Modificações_em_Habilidades" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:23506.png|32px | [[Arquivo:23506.png|32px]] | ||
<html> | <html> | ||
<div>Modificações em Habilidades</div> | |||
</div> | |||
</a> | |||
<a href="Drops_MVPs" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:24px-MVP.png|32px]] | [[Arquivo:24px-MVP.png|32px]] | ||
<html> | <html> | ||
<div>Drops MVPs</div> | |||
</div> | |||
</a> | |||
<a href="Monstros_campeões" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:2249.gif|32px | [[Arquivo:2249.gif|32px]] | ||
<html> | <html> | ||
<div>Monstros campeões</div> | |||
</div> | |||
</a> | |||
<a href="Velho_Álbum_de_Cartas" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[File:616.png|32px | [[File:616.png|32px]] | ||
<html> | <html> | ||
<div>Velho Álbum de Cartas</div> | |||
</div> | |||
</a> | |||
<a href="Troca_de_Cartas" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[File:trocadecartasicone1.png|32px]] | [[File:trocadecartasicone1.png|32px]] | ||
<html> | <html> | ||
<div>Troca de Cartas</div> | |||
</div> | |||
</a> | |||
<a href="Fragmentos_de_Cartas" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[File:600.png|32px | [[File:600.png|32px]] | ||
<html> | <html> | ||
<div>Fragmentos de Cartas</div> | |||
</div> | |||
</a> | |||
<a href="Grupo_Eden_Nostalgic" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:22508.png|32px | [[Arquivo:22508.png|32px]] | ||
<html> | <html> | ||
<div>Grupo Eden Nostalgic</div> | |||
</div> | |||
</a> | |||
<a href="Bônus_Aleatórios" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:29101.png|32px | [[Arquivo:29101.png|32px]] | ||
<html> | <html> | ||
<div>Bônus Aleatórios</div> | |||
</div> | |||
</a> | |||
</div> | </div> | ||
</div> | </div> | ||
<div class=" | <div class="section-container"> | ||
<div class=" | <div class="section-header">Classes</div> | ||
<div class=" | <div class="section-content"> | ||
<a href="Espadachins" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:Espadachinspartyicn.png|32px | [[Arquivo:Espadachinspartyicn.png|32px]] | ||
<html> | <html> | ||
<div>Espadachins</div> | |||
</div> | |||
</a> | |||
<a href="Magos" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:Magospartyicn.png|32px | [[Arquivo:Magospartyicn.png|32px]] | ||
<html> | <html> | ||
<div>Magos</div> | |||
</div> | |||
</a> | |||
<a href="Arqueiros" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:Arqueirospartyicn.png|32px | [[Arquivo:Arqueirospartyicn.png|32px]] | ||
<html> | <html> | ||
<div>Arqueiros</div> | |||
</div> | |||
</a> | |||
<a href="Mercadores" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:Mercadorespartyicn.png|32px | [[Arquivo:Mercadorespartyicn.png|32px]] | ||
<html> | <html> | ||
<div>Mercadores</div> | |||
</div> | |||
</a> | |||
<a href="Gatunos" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:Gatunospartyicn.png|32px | [[Arquivo:Gatunospartyicn.png|32px]] | ||
<html> | <html> | ||
<div>Gatunos</div> | |||
</div> | |||
</a> | |||
<a href="Noviços" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:Novicospartyicn.png|32px | [[Arquivo:Novicospartyicn.png|32px]] | ||
<html> | <html> | ||
<div>Noviços</div> | |||
</div> | |||
</a> | |||
<a href="Cavaleiros" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:Cavaleirospartyicn.png|32px | [[Arquivo:Cavaleirospartyicn.png|32px]] | ||
<html> | <html> | ||
<div>Cavaleiros</div> | |||
</div> | |||
</a> | |||
<a href="Templários" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[Arquivo:Templariospartyicn.png|32px | [[Arquivo:Templariospartyicn.png|32px]] | ||
<html> | <html> | ||
<div>Templários</div> | |||
</div> | |||
</a> | |||
</div> | </div> | ||
</div> | </div> | ||
<div class=" | <div class="section-container"> | ||
<div class=" | <div class="section-header">Instâncias</div> | ||
<div class=" | <div class="section-content"> | ||
<a href="Torre_sem_Fim" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[File:13412.png|32px]] | [[File:13412.png|32px]] | ||
<html> | <html> | ||
<div>Torre sem Fim</div> | |||
</div> | |||
</a> | |||
<a href="Memórias_de_Sarah" class="menu-card"> | |||
<div class="menu-card-content"> | |||
</html> | </html> | ||
[[File:BOXCOMIDA.gif|32px]] | [[File:BOXCOMIDA.gif|32px]] | ||
<html> | <html> | ||
<div>Memórias de Sarah</div> | |||
</div> | |||
</a> | |||
</div> | </div> | ||
</div> | </div> | ||
</html> | </html> |