Mudanças entre as edições de "Widget:Gurren"
m |
|||
| Linha 1: | Linha 1: | ||
<style> | <style> | ||
.social-cards { | .social-cards { | ||
display: grid; | display: grid; | ||
grid-template-columns: | grid-template-columns: 1fr; | ||
/* 1 por linha por padrão */ | |||
gap: 0.25em; | gap: 0.25em; | ||
} | } | ||
@media screen and (max-width: 1024px) { | |||
@media ( | |||
.social-cards { | .social-cards { | ||
grid-template-columns: 1fr; | grid-template-columns: repeat(4, 1fr); | ||
/* 4 por linha até 1024px */ | |||
} | } | ||
} | } | ||
| Linha 17: | Linha 17: | ||
position: relative; | position: relative; | ||
height: 3em; | height: 3em; | ||
border-radius: 0.75em; | border-radius: 0.75em; | ||
overflow: hidden; | overflow: hidden; | ||
| Linha 65: | Linha 64: | ||
} | } | ||
/* | /* backgrounds individuais */ | ||
.social-card.discord { | .social-card.discord { | ||
background-image: url('https://i.imgur.com/3ON2kVj.gif'); | background-image: url('https://i.imgur.com/3ON2kVj.gif'); | ||
} | |||
.social-card.tiktok { | |||
background-image: url('https://i.imgur.com/oY0Z4PMC.jpg'); | |||
} | } | ||
| Linha 76: | Linha 79: | ||
.social-card.facebook { | .social-card.facebook { | ||
background-image: url('https://i.imgur.com/9bGkq7Y.jpg'); | background-image: url('https://i.imgur.com/9bGkq7Y.jpg'); | ||
} | } | ||
</style> | </style> | ||
| Linha 90: | Linha 89: | ||
</div> | </div> | ||
</a> | </a> | ||
<a href="https://tiktok.com/@SEUTIKTOK" class="social-card tiktok" target="_blank" rel="noopener"> | <a href="https://tiktok.com/@SEUTIKTOK" class="social-card tiktok" target="_blank" rel="noopener"> | ||
<div class="social-card-content"> | <div class="social-card-content"> | ||
| Linha 108: | Linha 96: | ||
</div> | </div> | ||
</a> | </a> | ||
</ | |||
<a href="https://instagram.com/SEUINS" class="social-card instagram" target="_blank" | |||
Edição das 10h43min de 24 de abril de 2025
<style> .social-cards { display: grid; grid-template-columns: 1fr; /* 1 por linha por padrão */ gap: 0.25em; }
@media screen and (max-width: 1024px) { .social-cards { grid-template-columns: repeat(4, 1fr); /* 4 por linha até 1024px */ } }
.social-card { position: relative; height: 3em; border-radius: 0.75em; overflow: hidden; cursor: pointer; transition: transform .2s, box-shadow .2s; background-size: cover; background-position: center; }
.social-card::before { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.3); mix-blend-mode: multiply; pointer-events: none; transition: background-color .2s; }
.social-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.social-card:hover::before { background-color: rgba(0, 0, 0, 0.5); }
.social-card-content { position: relative; display: flex; align-items: center; padding: 0 1em; height: 100%; color: #fff; }
.social-icon { width: 1.5em; height: 1.5em; margin-right: 0.5em; }
.social-name { font-size: 1em; font-weight: bold; }
/* backgrounds individuais */ .social-card.discord { background-image: url('https://i.imgur.com/3ON2kVj.gif'); }
.social-card.tiktok { background-image: url('https://i.imgur.com/oY0Z4PMC.jpg'); }
.social-card.instagram { background-image: url('https://i.imgur.com/ZXQ7wq3.jpg'); }
.social-card.facebook { background-image: url('https://i.imgur.com/9bGkq7Y.jpg'); } </style>
