Widget:Gurren
Ir para navegação
Ir para pesquisar
<style>
.social-card {
display: block;
width: 100%;
aspect-ratio: 5 / 1; /* menos alto que 4/1 */
margin: 0.5em 0;
border-radius: 0.75em;
overflow: hidden;
position: relative;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
background: var(--bg-url) center/cover no-repeat;
}
.social-card::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--overlay, rgba(0,0,0,0.4));
mix-blend-mode: multiply;
pointer-events: none;
transition: background-color 0.2s ease;
}
.social-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.social-card:hover::before {
background-color: var(--overlay-hover, rgba(0,0,0,0.6));
}
.social-card-content {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start; /* alinhado à esquerda */
height: 100%;
padding: 0 1em;
color: #fff;
}
.social-icon {
width: 1.8em;
height: 1.8em;
margin-right: 0.75em;
}
.social-name {
font-size: 1.1em;
font-weight: bold;
}
/* custom backgrounds e overlays */
.social-card.discord {
--bg-url: url('https://i.imgur.com/3ON2kVj.gif');
--overlay: rgba(114,137,218,0.6);
--overlay-hover: rgba(114,137,218,0.8);
}
.social-card.instagram {
--bg-url: url('https://i.imgur.com/ZXQ7wq3.jpg');
--overlay: rgba(193,53,132,0.6);
--overlay-hover: rgba(193,53,132,0.8);
}
.social-card.facebook {
--bg-url: url('https://i.imgur.com/9bGkq7Y.jpg');
--overlay: rgba(24,119,242,0.6);
--overlay-hover: rgba(24,119,242,0.8);
}
.social-card.tiktok {
--bg-url: url('https://i.imgur.com/oY0Z4PMC.jpg');
--overlay: rgba(0,0,0,0.6);
--overlay-hover: rgba(0,0,0,0.8);
}
</style>
<a href="https://discord.gg/SEULINK" class="social-card discord" target="_blank" rel="noopener">
</a>
<a href="https://instagram.com/SEUINS" class="social-card instagram" target="_blank" rel="noopener">
</a>
<a href="https://facebook.com/SEUPAGE" class="social-card facebook" target="_blank" rel="noopener">
</a>
<a href="https://tiktok.com/@SEUTIKTOK" class="social-card tiktok" target="_blank" rel="noopener">
</a>