Mudanças entre as edições de "Widget:Gurren"

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
Linha 1: Linha 1:
<a
  href="https://discord.gg/SEULINK"
  class="social-widget"
  target="_blank"
  rel="noopener"
>
  <img
    src="https://cdn.simpleicons.org/Discord/ffffff"
    alt="Discord"
    class="social-icon"
  />
</a>
<style>
<style>
   .social-widget {
   .social-card {
     display: block;
     display: flex;
     position: relative;
     align-items: center;
     width: 95%;                    /* um pouquinho menos largo */
    justify-content: space-between;
     margin: 0 auto 0.75em;         /* centraliza e dá espaço embaixo */
     width: 95%;                    /* ajusta à coluna */
     height: 3em;                    /* um pouco mais alto */
     margin: 0.5em auto;
    background: url('https://i.imgur.com/3ON2kVj.gif') center/cover no-repeat;
     padding: 0.5em 1em;
     border-radius: 0.75em;
     border-radius: 0.75em;
     text-decoration: none;
     background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
     box-sizing: border-box;
     box-sizing: border-box;
    overflow: hidden;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
   }
   }
   .social-widget:hover {
   .social-card:hover {
     transform: translateY(-2px);
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     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-widget .social-icon {
   .social-settings {
     position: absolute;
     cursor: pointer;
     top: 50%;
     font-size: 1.2em;
    left: 50%;                      /* centraliza o ícone */
     line-height: 1;
    width: 2em;                     /* maior */
     height: 2em;
    transform: translate(-50%, -50%);
   }
   }
</style>
</style>


<a
<a href="https://instagram.com/SUA_CONTA" class="social-card" target="_blank" rel="noopener">
  href="https://discord.gg/SEULINK"
  class="social-widget"
  target="_blank" rel="noopener"
>
   <img
   <img
     src="https://cdn.simpleicons.org/Discord/ffffff"
     src="https://cdn.simpleicons.org/Instagram/ffffff"
     alt="Discord"
     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>