Mudanças entre as edições de "Widget:Gurren"
Ir para navegação
Ir para pesquisar
m |
|||
| Linha 1: | Linha 1: | ||
<style> | <style> | ||
.social-card { | .social-card { | ||
display: | display: block; | ||
width: 95%; /* um pouco menor que a coluna */ | |||
margin: 0.5em auto; /* centraliza e dá espaçamento */ | |||
width: 95%; | |||
margin: 0.5em auto; | |||
border-radius: 0.75em; | border-radius: 0.75em; | ||
overflow: hidden; | |||
position: relative; | |||
cursor: pointer; | |||
transition: transform 0.2s ease, box-shadow 0.2s ease; | transition: transform 0.2s ease, box-shadow 0.2s ease; | ||
background: url('https://i.imgur.com/SEU_IMGUR_DISCORD.png') center/cover no-repeat; | |||
} | |||
.social-card::before { | |||
content: ""; | |||
position: absolute; | |||
inset: 0; | |||
/* overlay com a cor do Discord */ | |||
background-color: rgba(114, 137, 218, 0.6); | |||
mix-blend-mode: multiply; | |||
pointer-events: none; | |||
} | } | ||
.social-card:hover { | .social-card:hover { | ||
transform: translateY(-2px); | transform: translateY(-2px); | ||
box-shadow: 0 6px 12px rgba(0,0,0,0.2); | box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); | ||
} | |||
.social-card-content { | |||
position: relative; /* acima do overlay */ | |||
display: flex; | |||
align-items: center; | |||
padding: 0.75em 1em; | |||
color: #fff; | |||
} | } | ||
.social-icon { | .social-icon { | ||
width: 2em; | |||
width: | height: 2em; | ||
height: | |||
margin-right: 0.75em; | margin-right: 0.75em; | ||
} | } | ||
.social-name { | .social-name { | ||
font-size: 1.2em; | font-size: 1.2em; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
</style> | </style> | ||
<a href="https:// | <a | ||
<img | href="https://discord.gg/SEULINK" | ||
class="social-card" | |||
target="_blank" | |||
rel="noopener" | |||
> | |||
<div class="social-card-content"> | |||
<img | |||
src="https://cdn.simpleicons.org/Discord/ffffff" | |||
alt="Discord" | |||
class="social-icon" | |||
/> | |||
<span class="social- | <span class="social-name">Discord</span> | ||
</div> | </div> | ||
</a> | </a> | ||
Edição das 02h22min de 23 de abril de 2025
<style>
.social-card {
display: block;
width: 95%; /* um pouco menor que a coluna */
margin: 0.5em auto; /* centraliza e dá espaçamento */
border-radius: 0.75em;
overflow: hidden;
position: relative;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
background: url('https://i.imgur.com/SEU_IMGUR_DISCORD.png') center/cover no-repeat;
}
.social-card::before {
content: "";
position: absolute;
inset: 0;
/* overlay com a cor do Discord */
background-color: rgba(114, 137, 218, 0.6);
mix-blend-mode: multiply;
pointer-events: none;
}
.social-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.social-card-content {
position: relative; /* acima do overlay */
display: flex;
align-items: center;
padding: 0.75em 1em;
color: #fff;
}
.social-icon {
width: 2em;
height: 2em;
margin-right: 0.75em;
}
.social-name {
font-size: 1.2em;
font-weight: bold;
}
</style>
<a
href="https://discord.gg/SEULINK" class="social-card" target="_blank" rel="noopener"
>
</a>