Widget:Teste
Ir para navegação
Ir para pesquisar
<style>
.island-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px 0;
}
.island-card {
background: #eeeded;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 10px;
border-radius: 8px;
text-align: center;
padding: 20px 16px;
width: calc(25% - 12px);
box-sizing: border-box;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
transition: transform 0.15s, box-shadow 0.15s;
color: inherit;
cursor: pointer;
}
.island-card:hover {
transform: translateY(-3px);
box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 16px;
}
.island-card:visited {
color: inherit;
}
.island-card .island-img img {
width: 150px;
height: 150px;
object-fit: contain;
pointer-events: none;
}
.island-card .island-name {
font-size: 1.05em;
font-weight: bold;
color: #000;
pointer-events: none;
}
.island-card .island-chests {
display: flex;
align-items: center;
gap: 4px;
font-weight: bold;
font-size: 1em;
color: #000;
pointer-events: none;
}
@media (max-width: 900px) {
.island-card {
width: calc(33.333% - 11px);
}
}
@media (max-width: 600px) {
.island-card {
width: calc(50% - 8px);
}
.island-card .island-img img {
width: 100px;
height: 100px;
}
}
@media (max-width: 360px) {
.island-card {
width: 100%;
}
}
</style> <script>
(function () {
document.querySelectorAll('.island-card[data-href]').forEach(function (el) {
el.addEventListener('click', function () {
var href = el.getAttribute('data-href');
if (href) window.location.href = href;
});
el.addEventListener('keydown', function (e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
var href = el.getAttribute('data-href');
if (href) window.location.href = href;
}
});
});
})();
</script>