Mudanças entre as edições de "Widget:Teste"
Ir para navegação
Ir para pesquisar
| Linha 1: | Linha 1: | ||
<div class="home-button-container"> | <div class="home-button-container"> | ||
<!-- Card 1 --> | |||
<div class="home-button-item"> | |||
<a href="/index.php/Personagens" title="Personagens"> | |||
<div class="home-button-image"> | |||
<img src="https://wiki.gla.com.br/images/a/a8/Personagens_card.png" alt="Personagens"> | |||
</div> | |||
<div class="home-button-title">PERSONAGENS</div> | |||
</a> | |||
</div> | |||
<!-- Card 2 --> | |||
<div class="home-button-item"> | |||
<a href="/index.php/Itens" title="Itens"> | |||
<div class="home-button-image"> | |||
<img src="https://wiki.gla.com.br/images/3/39/Itens_card.png" alt="Itens"> | |||
</div> | |||
<div class="home-button-title">ITENS</div> | |||
</a> | |||
</div> | |||
<!-- Card 3 --> | |||
<div class="home-button-item"> | |||
<a href="/index.php/Boss_Semanais" title="Semanais"> | |||
<div class="home-button-image"> | |||
<img src="https://wiki.gla.com.br/images/6/65/Weeklyboss_card.png" alt="Weekly Bosses"> | |||
</div> | |||
<div class="home-button-title">SEMANAIS</div> | |||
</a> | |||
</div> | |||
<!-- Card 4 --> | |||
<div class="home-button-item"> | |||
<a href="/index.php/World_Boss" title="World Bosses"> | |||
<div class="home-button-image"> | |||
<img src="https://wiki.gla.com.br/images/8/87/Worldboss_card.png" alt="World Bosses"> | |||
</div> | |||
<div class="home-button-title">WORLD BOSS</div> | |||
</a> | |||
</div> | |||
<div class="home-button-item"> | |||
<a href="/index.php/Wanted_Pirates" title="Piratas Procurados"> | |||
<div class="home-button-image"> | |||
<img src="https://wiki.gla.com.br/images/9/9d/Wantedpirates_card.png" alt="Wanted Pirates"> | |||
</div> | |||
<div class="home-button-title">WANTED PIRATES</div> | |||
</a> | |||
</div> | |||
<div class="home-button-item"> | |||
<a href="/wiki/NolandTales" title="Noland Tales"> | |||
<div class="home-button-image"> | |||
<img src="URL_DA_IMAGEM_NOLAND" alt="Noland Tales"> | |||
</div> | |||
<div class="home-button-title">NOLAND TALES</div> | |||
</a> | |||
</div> | |||
<div class="home-button-item"> | |||
<a href="/wiki/NolandTales" title="Noland Tales"> | |||
<div class="home-button-image"> | |||
<img src="URL_DA_IMAGEM_NOLAND" alt="Noland Tales"> | |||
</div> | |||
<div class="home-button-title">NOLAND TALES</div> | |||
</a> | |||
</div> | |||
<div class="home-button-item"> | |||
<a href="/wiki/NolandTales" title="Noland Tales"> | |||
<div class="home-button-image"> | |||
<img src="URL_DA_IMAGEM_NOLAND" alt="Noland Tales"> | |||
</div> | |||
<div class="home-button-title">NOLAND TALES</div> | |||
</a> | |||
</div> | |||
</div> | </div> | ||
<style> | <style> | ||
.home-button-container { | |||
display: grid; | |||
grid-template-columns: repeat(4, 1fr); | |||
gap: 10px; | |||
padding: 10px; | |||
box-sizing: border-box; | |||
} | |||
.home-button-item { | |||
position: relative; | |||
overflow: hidden; | |||
border: 1px solid #ddd; | |||
border-radius: 8px; | |||
background: #fff; | |||
transition: box-shadow 0.2s ease, border-color 0.2s ease; | |||
box-sizing: border-box; | |||
} | |||
.home-button-item:hover { | |||
border-color: #007bff; | |||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); | |||
} | |||
.home-button-item a { | |||
display: block; | |||
text-decoration: none; | |||
color: inherit; | |||
} | |||
.home-button-image { | |||
width: 100%; | |||
aspect-ratio: 16/9; | |||
overflow: hidden; | |||
} | |||
.home-button-image img { | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
display: block; | |||
transition: none; | |||
} | |||
.home-button-title { | |||
font-weight: bold; | |||
font-size: 1.1em; | |||
background: #fff; | |||
color: #000; | |||
margin: 0; | |||
padding: 10px 5px; | |||
position: relative; | |||
text-transform: uppercase; | |||
border-top: 1px solid #ddd; | |||
text-align: center; | |||
transition: background-color 0.2s ease; | |||
} | |||
.home-button-item:hover .home-button-title { | |||
background-color: #f9f9f9; | |||
} | |||
@media (max-width: 1280px) { | |||
.home-button-container { | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
} | |||
</style> | </style> | ||
Edição das 23h31min de 28 de março de 2025
<style> .home-button-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px; box-sizing: border-box; }
.home-button-item { position: relative; overflow: hidden; border: 1px solid #ddd; border-radius: 8px; background: #fff; transition: box-shadow 0.2s ease, border-color 0.2s ease; box-sizing: border-box; }
.home-button-item:hover { border-color: #007bff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); }
.home-button-item a { display: block; text-decoration: none; color: inherit; }
.home-button-image { width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.home-button-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: none; }
.home-button-title { font-weight: bold; font-size: 1.1em; background: #fff; color: #000; margin: 0; padding: 10px 5px; position: relative; text-transform: uppercase; border-top: 1px solid #ddd; text-align: center; transition: background-color 0.2s ease; }
.home-button-item:hover .home-button-title { background-color: #f9f9f9; }
@media (max-width: 1280px) { .home-button-container { grid-template-columns: repeat(2, 1fr); } } </style>