Mudanças entre as edições de "Widget:Gurren"
m |
|||
| Linha 1: | Linha 1: | ||
<style> | <style> | ||
.social-cards { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 0.5em; | |||
} | |||
.social-card { | |||
flex: 1 1 100%; | |||
aspect-ratio: 5 / 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; | |||
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); | |||
} | |||
/* RESPONSIVO: em telas até 600px, 2 cards por linha e mais finos */ | |||
@media (max-width: 600px) { | |||
.social-card { | |||
flex: 1 1 calc(50% - 0.5em); | |||
aspect-ratio: 8 / 1; | |||
/* mais fino */ | |||
} | |||
} | |||
</style> | </style> | ||
<div class="social-cards"> | |||
<a href="https://discord.gg/SEULINK" class="social-card discord" target="_blank" rel="noopener"> | <a href="https://discord.gg/SEULINK" class="social-card discord" 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-name">Discord</span> | |||
</div> | |||
</a> | </a> | ||
<a href="https://instagram.com/SEUINS" class="social-card instagram" target="_blank" rel="noopener"> | <a href="https://instagram.com/SEUINS" class="social-card instagram" 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> | ||
<a href="https://facebook.com/SEUPAGE" class="social-card facebook" target="_blank" rel="noopener"> | <a href="https://facebook.com/SEUPAGE" class="social-card facebook" 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> | ||
<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"> | |||
<img src="https://cdn.simpleicons.org/TikTok/ffffff" alt="TikTok" class="social-icon" /> | |||
<span class="social-name">TikTok</span> | |||
</div> | |||
</a> | </a> | ||
</div> | |||
Edição das 08h43min de 24 de abril de 2025
<style> .social-cards { display: flex; flex-wrap: wrap; gap: 0.5em; }
.social-card { flex: 1 1 100%; aspect-ratio: 5 / 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; 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); }
/* RESPONSIVO: em telas até 600px, 2 cards por linha e mais finos */ @media (max-width: 600px) { .social-card { flex: 1 1 calc(50% - 0.5em); aspect-ratio: 8 / 1; /* mais fino */ } } </style>