Бейдж студии

Сделано в СТУДИЯ75

Маленький бейдж со ссылкой на студию — для футера сайтов, которые мы сделали. Выберите вариант под цвет футера и вставьте готовый код.

  1. 01Выберите вариант под цвет вашего футера.
  2. 02Скопируйте HTML-код кнопкой ниже.
  3. 03Вставьте его в футер сайта — ссылка ведёт на studio75.ru.

Оформление

Для тёмных футеров

Сделано в СТУДИЯ75

HTML-код

<!-- Бейдж «Сделано в СТУДИЯ75» · studio75.ru -->
<a class="studio75-badge" href="https://studio75.ru/" target="_blank" rel="noopener" aria-label="Сделано в СТУДИЯ75">
  <span class="studio75-badge__mark" aria-hidden="true"></span>
  <span class="studio75-badge__body">
    <span class="studio75-badge__eyebrow">Сделано в</span>
    <span class="studio75-badge__wm">СТУДИЯ<span class="studio75-badge__num">75</span><span class="studio75-badge__g studio75-badge__g--r" aria-hidden="true">СТУДИЯ75</span><span class="studio75-badge__g studio75-badge__g--c" aria-hidden="true">СТУДИЯ75</span></span>
  </span>
</a>
<style>
.studio75-badge{box-sizing:border-box;display:inline-flex;align-items:center;gap:11px;padding:10px 15px;background:#0e1618;border:1px solid rgba(243,239,231,.14);text-decoration:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;line-height:1;vertical-align:middle;transition:border-color .3s cubic-bezier(.2,.7,.2,1),transform .3s cubic-bezier(.2,.7,.2,1)}
.studio75-badge:hover{border-color:rgba(255,77,46,.65);transform:translateY(-1px)}
.studio75-badge__mark{box-sizing:border-box;width:22px;height:22px;flex:none;background:#ff4d2e}
.studio75-badge__body{display:inline-flex;flex-direction:column;gap:4px;text-align:left}
.studio75-badge__eyebrow{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#b7b0a1}
.studio75-badge__wm{position:relative;display:inline-block;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:none;color:#f3efe7}
.studio75-badge__num{color:#ff4d2e}
.studio75-badge__g{position:absolute;top:0;left:0;white-space:nowrap;opacity:0;pointer-events:none}
.studio75-badge__g--r{color:#ff4d2e}
.studio75-badge__g--c{color:#3acdd9}
.studio75-badge:hover .studio75-badge__g--r{opacity:1;animation:studio75-badge-glitch-a .5s steps(2,end) infinite}
.studio75-badge:hover .studio75-badge__g--c{opacity:1;animation:studio75-badge-glitch-b .55s steps(2,end) infinite}
@media (prefers-reduced-motion:reduce){.studio75-badge:hover .studio75-badge__g--r,.studio75-badge:hover .studio75-badge__g--c{opacity:0;animation:none}}
@keyframes studio75-badge-glitch-a{0%{clip-path:inset(0 0 82% 0);transform:translate(-4px,0)}25%{clip-path:inset(38% 0 40% 0);transform:translate(6px,0)}50%{clip-path:inset(68% 0 8% 0);transform:translate(-5px,0)}75%{clip-path:inset(18% 0 58% 0);transform:translate(4px,0)}100%{clip-path:inset(50% 0 30% 0);transform:translate(-4px,0)}}
@keyframes studio75-badge-glitch-b{0%{clip-path:inset(60% 0 20% 0);transform:translate(4px,0)}25%{clip-path:inset(10% 0 70% 0);transform:translate(-5px,0)}50%{clip-path:inset(45% 0 35% 0);transform:translate(6px,0)}75%{clip-path:inset(75% 0 5% 0);transform:translate(-4px,0)}100%{clip-path:inset(25% 0 55% 0);transform:translate(4px,0)}}
</style>

Код самодостаточный: без внешних шрифтов и библиотек, стили не конфликтуют с сайтом.