Mudanças entre as edições de "Widget:Gurren"
Ir para navegação
Ir para pesquisar
m |
m |
||
| Linha 2: | Linha 2: | ||
.social-card { | .social-card { | ||
display: block; | display: block; | ||
width: 100%; | width: 100%; | ||
aspect-ratio: 4 / 1; | |||
aspect-ratio: 4 / 1; | margin: 0.5em 0; | ||
margin: | |||
border-radius: 0.75em; | border-radius: 0.75em; | ||
overflow: hidden; | overflow: hidden; | ||
| Linha 49: | Linha 48: | ||
</style> | </style> | ||
<a | <a href="https://discord.gg/SEULINK" class="social-card" target="_blank" rel="noopener"> | ||
> | |||
<div class="social-card-content"> | <div class="social-card-content"> | ||
<img | <img src="https://cdn.simpleicons.org/Discord/ffffff" alt="Discord" class="social-icon"/> | ||
<span class="social-name">Discord</span> | <span class="social-name">Discord</span> | ||
</div> | |||
</a> | |||
<a href="https://instagram.com/SEUINS" class="social-card" target="_blank" rel="noopener"> | |||
<div class="social-card-content"> | |||
<img src="https://cdn.simpleicons.org/Instagram/ffffff" alt="Instagram" class="social-icon"/> | |||
<span class="social-name">Instagram</span> | |||
</div> | |||
</a> | |||
<a href="https://facebook.com/SEUPAGE" class="social-card" target="_blank" rel="noopener"> | |||
<div class="social-card-content"> | |||
<img src="https://cdn.simpleicons.org/Facebook/ffffff" alt="Facebook" class="social-icon"/> | |||
<span class="social-name">Facebook</span> | |||
</div> | |||
</a> | |||
<a href="https://tiktok.com/@SEUTIKTOK" class="social-card" target="_blank" rel="noopener"> | |||
<div class="social-card-content"> | |||
<img src="https://cdn.simpleicons.org/TikTok/ffffff" alt="TikTok" class="social-icon"/> | |||
<span class="social-name">TikTok</span> | |||
</div> | </div> | ||
</a> | </a> | ||
Edição das 00h35min de 24 de abril de 2025
<style>
.social-card {
display: block;
width: 100%;
aspect-ratio: 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: url('https://i.imgur.com/3ON2kVj.gif') center/cover no-repeat;
}
.social-card::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(114, 137, 218, 0.6);
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: rgba(114, 137, 218, 0.8);
}
.social-card-content {
position: relative;
display: flex;
align-items: center;
justify-content: center;
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;
}
</style>
<a href="https://discord.gg/SEULINK" class="social-card" target="_blank" rel="noopener">
</a>
<a href="https://instagram.com/SEUINS" class="social-card" target="_blank" rel="noopener">
</a>
<a href="https://facebook.com/SEUPAGE" class="social-card" target="_blank" rel="noopener">
</a>
<a href="https://tiktok.com/@SEUTIKTOK" class="social-card" target="_blank" rel="noopener">
</a>