Mudanças entre as edições de "Widget:Gurren"
Ir para navegação
Ir para pesquisar
m |
m |
||
| Linha 1: | Linha 1: | ||
<style> | <style> | ||
.social- | .social-card { | ||
display: | display: flex; | ||
align-items: center; | |||
width: 95%; /* | justify-content: space-between; | ||
margin: 0 auto | width: 95%; /* ajusta à coluna */ | ||
margin: 0.5em auto; | |||
padding: 0.5em 1em; | |||
border-radius: 0.75em; | border-radius: 0.75em; | ||
background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); | |||
color: #fff; | |||
box-sizing: border-box; | box-sizing: border-box; | ||
transition: transform 0.2s ease, box-shadow 0.2s ease; | transition: transform 0.2s ease, box-shadow 0.2s ease; | ||
} | } | ||
.social- | .social-card:hover { | ||
transform: translateY(-2px); | transform: translateY(-2px); | ||
box-shadow: 0 | box-shadow: 0 6px 12px rgba(0,0,0,0.2); | ||
} | |||
.social-icon { | |||
flex-shrink: 0; | |||
width: 2.5em; | |||
height: 2.5em; | |||
margin-right: 0.75em; | |||
} | |||
.social-info { | |||
flex-grow: 1; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
} | |||
.social-status { | |||
font-size: 0.75em; | |||
opacity: 0.85; | |||
} | |||
.social-name { | |||
font-size: 1.2em; | |||
font-weight: bold; | |||
line-height: 1; | |||
margin-top: 0.1em; | |||
} | |||
.social-meta { | |||
display: flex; | |||
align-items: center; | |||
gap: 0.5em; | |||
} | |||
.social-type { | |||
font-size: 0.85em; | |||
opacity: 0.9; | |||
} | } | ||
.social- | .social-settings { | ||
cursor: pointer; | |||
font-size: 1.2em; | |||
line-height: 1; | |||
height: | |||
} | } | ||
</style> | </style> | ||
<a | <a href="https://instagram.com/SUA_CONTA" class="social-card" target="_blank" rel="noopener"> | ||
> | |||
<img | <img | ||
src="https://cdn.simpleicons.org/ | src="https://cdn.simpleicons.org/Instagram/ffffff" | ||
alt=" | alt="Instagram" | ||
class="social-icon" | class="social-icon" | ||
/> | /> | ||
<div class="social-info"> | |||
<div class="social-status">Desativado</div> | |||
<div class="social-name">Instagram</div> | |||
</div> | |||
<div class="social-meta"> | |||
<span class="social-type">Social</span> | |||
<span class="social-settings">⚙️</span> | |||
</div> | |||
</a> | </a> | ||
Edição das 02h12min de 23 de abril de 2025
<style>
.social-card {
display: flex;
align-items: center;
justify-content: space-between;
width: 95%; /* ajusta à coluna */
margin: 0.5em auto;
padding: 0.5em 1em;
border-radius: 0.75em;
background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
color: #fff;
box-sizing: border-box;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.social-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.social-icon {
flex-shrink: 0;
width: 2.5em;
height: 2.5em;
margin-right: 0.75em;
}
.social-info {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.social-status {
font-size: 0.75em;
opacity: 0.85;
}
.social-name {
font-size: 1.2em;
font-weight: bold;
line-height: 1;
margin-top: 0.1em;
}
.social-meta {
display: flex;
align-items: center;
gap: 0.5em;
}
.social-type {
font-size: 0.85em;
opacity: 0.9;
}
.social-settings {
cursor: pointer;
font-size: 1.2em;
line-height: 1;
}
</style>
<a href="https://instagram.com/SUA_CONTA" class="social-card" target="_blank" rel="noopener">
<img src="https://cdn.simpleicons.org/Instagram/ffffff" alt="Instagram" class="social-icon" />
</a>