Mudanças entre as edições de "Widget:Gurren"
Ir para navegação
Ir para pesquisar
| Linha 10: | Linha 10: | ||
class="social-icon" | class="social-icon" | ||
/> | /> | ||
</a> | </a> | ||
<style> | <style> | ||
.social-widget { | .social-widget { | ||
display: block; | display: block; | ||
position: relative; | position: relative; | ||
width: | width: 95%; /* um pouquinho menos largo */ | ||
margin: 0 auto 0.75em; /* centraliza e dá espaço embaixo */ | |||
height: 3em; /* um pouco mais alto */ | |||
background: url('https://i.imgur.com/SEU_IMGUR_DISCORD.png') center/cover no-repeat; | |||
border-radius: 0.75em; | border-radius: 0.75em; | ||
text-decoration: none; | text-decoration: none; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
overflow: hidden; | overflow: hidden; | ||
transition: transform 0.2s ease, box-shadow 0.2s ease; | |||
} | |||
.social-widget:hover { | |||
transform: translateY(-2px); | |||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |||
} | } | ||
.social-widget .social-icon { | .social-widget .social-icon { | ||
position: absolute; | position: absolute; | ||
top: 50%; | top: 50%; | ||
left: | left: 50%; /* centraliza o ícone */ | ||
width: | width: 2em; /* maior */ | ||
height: | height: 2em; | ||
transform: | transform: translate(-50%, -50%); | ||
} | } | ||
</style> | </style> | ||
| Linha 44: | Linha 42: | ||
href="https://discord.gg/SEULINK" | href="https://discord.gg/SEULINK" | ||
class="social-widget" | class="social-widget" | ||
target="_blank" | target="_blank" rel="noopener" | ||
> | > | ||
<img | <img | ||
| Linha 52: | Linha 49: | ||
class="social-icon" | class="social-icon" | ||
/> | /> | ||
</a> | </a> | ||
Edição das 22h51min de 22 de abril de 2025
<a
href="https://discord.gg/SEULINK" class="social-widget" target="_blank" rel="noopener"
>
<img src="https://cdn.simpleicons.org/Discord/ffffff" alt="Discord" class="social-icon" />
</a> <style>
.social-widget {
display: block;
position: relative;
width: 95%; /* um pouquinho menos largo */
margin: 0 auto 0.75em; /* centraliza e dá espaço embaixo */
height: 3em; /* um pouco mais alto */
background: url('https://i.imgur.com/SEU_IMGUR_DISCORD.png') center/cover no-repeat;
border-radius: 0.75em;
text-decoration: none;
box-sizing: border-box;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.social-widget:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.social-widget .social-icon {
position: absolute;
top: 50%;
left: 50%; /* centraliza o ícone */
width: 2em; /* maior */
height: 2em;
transform: translate(-50%, -50%);
}
</style>
<a
href="https://discord.gg/SEULINK" class="social-widget" target="_blank" rel="noopener"
>
<img src="https://cdn.simpleicons.org/Discord/ffffff" alt="Discord" class="social-icon" />
</a>