Mudanças entre as edições de "Widget:Droflax"
Ir para navegação
Ir para pesquisar
| Linha 5: | Linha 5: | ||
<button class="tab-btn" data-tab="skins">Skins</button> | <button class="tab-btn" data-tab="skins">Skins</button> | ||
</div> | </div> | ||
<div class="personaje-header"> | <div class="personaje-header"> | ||
<img src="/images/4/41/Mohji_medal.png" alt="Arte del personaje"> | <img src="/images/4/41/Mohji_medal.png" alt="Arte del personaje"> | ||
| Linha 19: | Linha 12: | ||
<div class="clase">Clase: Bruiser/Especialista</div> | <div class="clase">Clase: Bruiser/Especialista</div> | ||
</div> | </div> | ||
</div> | |||
<div class="tab-content active" id="habilidades"> | |||
<!-- Aquí maqueta completa de habilidades con barra desplazable, atributos, video, etc. --> | |||
</div> | |||
<div class="tab-content" id="skins"> | |||
<!-- Aquí maqueta de skins --> | |||
</div> | </div> | ||
</div> | </div> | ||
| Linha 76: | Linha 76: | ||
.personaje-tabs { | .personaje-tabs { | ||
margin- | margin-block: 20px; | ||
display: flex; | display: flex; | ||
gap: 12px; | gap: 12px; | ||
Edição das 20h04min de 2 de maio de 2025
<button class="tab-btn active" data-tab="habilidades">Habilidades</button> <button class="tab-btn" data-tab="skins">Skins</button>
<img src="/images/4/41/Mohji_medal.png" alt="Arte del personaje">
Mohji
Tier: Bronze
Clase: Bruiser/Especialista
<script> (function() {
const buttons = document.querySelectorAll(".tab-btn");
const contents = document.querySelectorAll(".tab-content");
buttons.forEach(btn => {
btn.addEventListener("click", () => {
buttons.forEach(b => b.classList.remove("active"));
contents.forEach(c => c.classList.remove("active"));
btn.classList.add("active");
const tab = btn.getAttribute("data-tab");
document.getElementById(tab).classList.add("active");
});
});
})(); </script> <style> .personaje-box {
background: #1e1e1e; border-radius: 12px; padding: 16px; color: #fff; font-family: 'Segoe UI', sans-serif; max-width: 1000px; margin: auto; border: 2px solid #444;
}
.personaje-header {
display: flex; gap: 20px; border-bottom: 2px solid #555; padding-bottom: 10px;
}
.personaje-header img {
width: 120px; border-radius: 10px; border: 2px solid #777;
}
.personaje-info .nombre {
font-size: 28px; font-weight: bold;
}
.personaje-info .tier, .personaje-info .clase {
font-size: 16px; color: #bbb;
}
.personaje-tabs {
margin-block: 20px; display: flex; gap: 12px; justify-content: flex-start;
}
.tab-btn {
padding: 8px 20px; background: #333; color: white; border: none; border-radius: 8px; cursor: pointer;
}
.tab-btn.active {
background: #007bff; font-weight: bold;
}
.tab-content {
display: none; margin-top: 20px; animation: fadeIn 0.4s ease;
}
.tab-content.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
} </style>