Здесь делается вжух 🪄

настройки
Шрифт в постах
      [НОВОСТИ ТУТ] #БАРГЕСТ ПРОТИВ ВУДУИСТОВ пвп или зассал? #МЭРИЯ ТЕСТИРУЕТ ВНЕДРЕНИЕ ИИ В ГОРОДСКИЕ СИСТЕМЫ УПРАВЛЕНИЯ ебанёт? не должно!
      гостевая внешности правила сюжет нужные связь c амс оформление профиля
      киберпанкэпизодыанархия
      Loco
      D'Nash
      все под колпаком

      Приближение Макс-така она засекает через ответный пинг антенны радиосвязи. Кушинада пробирается вдоль антенны вдвое осторожней, держится подальше от частот аэрокара карателей. Она ищет выход на ближайший коммлинк чтобы в обход локдауна маякнуть Фалько. То ли "сможешь подобрать меня через полчаса?" то ли завещание и некролог в одном небольшом пакете нулей и единиц. И хотя сами системы Макс-така лучше оставить в покое, Люцина возвращается к внутренним камерам. Следит за синхронными движениями карателей, ловит дергающуюся сигнатуру киберпсиха — хороший нетраннер жив только благодаря сочетанию инстинкта самосохраненния с патологическим любопытством.

      Lucyna Kushinada / (moon) dust to dust
      в спотлайте
      звездный дуэт
      агент нео-советов в шкуре корпората
      ёринобу арасака
      японский гопник
      01.12спотлайт 01.12 игрыпазлы 01.12 игрыфоточеллендж 01.12 игрытоп 28.10 // лорРеклама в Киберпанке 02.11 // лорБорги, ч.3 хэдканон-челленджпро наших персонажей
      прокрутка поколесиком мыши

      datasprawl

      Информация о пользователе

      Привет, Гость! Войдите или зарегистрируйтесь.

      Вы здесь » datasprawl » Тестовый форум » новый нейминг блоков

      новый нейминг блоков

      Страница: 1

      Сообщений 1 страница 4 из 4

      1

      • Автор: root
      • Администратор
      • Зарегистрирован: 2025-11-22
      • Приглашений: 0
      • Сообщений: 39
      • Уважение: [+0/-0]
      • Позитив: [+0/-0]
      • Провел на форуме:
        15 часов 34 минуты
      • Последний визит:
        2026-01-20 00:54:35
      Код:
      <!--HTML-->
<style>
/* ================================================
   CYBERPUNK SYSTEM (CP-*)
   Universal Style v2.2 (Final Fixed)
=============================================== */

/* [0] FONTS IMPORT (Подключаем шрифты) */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,400;0,600;0,700;1,400&family=Orbitron:wght@400;600;800&family=Tektur:wght@100;400;600;800&family=Rajdhani:wght@400;600;700&family=Raleway:wght@400;600;800&display=swap');

/* [1] GLOBAL VARIABLES & SETTINGS */
.cp-box {
    /* --- Colors --- */
    --c-bg: #121214;
    --c-bg-h: #1a1a1f;
    --c-el: #1c1c21;
    --c-list: #2b2b2b;
    --c-info: #050505;
    --c-txt: #e0e0e0;
    --c-dim: #909090;

    /* --- Accents --- */
    --a-cpyel: #f2e600;
      --a-yel: #FFBF48;
    --a-pink: #ff06b5;
    --a-cyan: #00f0ff;
      --a-blue: #36BFC5;
      --a-red: #E3241A;
    --a-hot: #ff0055;
    --a-bor: rgba(255, 248, 31, 0.5);
    --a-bor-g: #3d3d45;

    /* --- Rarity Colors --- */
    --r-com: #e0e0e0;
    --r-unc: #26d1a5;
    --r-rar: #9d4cf0;
    --r-epi: #7d0fae;
    --r-leg: var(--a-yel);
    --r-med: #3d8bfd;

    /* --- System --- */
    --f-main: "Tektur", "Rajdhani", "Roboto", sans-serif;
    --anim: 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);

    /* --- Shapes --- */
    --clip-card: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
    --clip-tag: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
    --clip-btn: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

/* [2] BASE RESET */
.cp-box * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.cp-box {
    width: 95%;
    max-width: 1200px;
    margin: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-family: var(--f-main);
    color: var(--c-txt);
    line-height: 1.1;
}

.cp-box * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* Вот эта магия */
}

/* [3] TABS & BUTTONS (Fixed Spacing) */
.cp-tab {
    display: block;
    width: 100%;
    margin-bottom: -1px;
}

.cp-btn {
    width: 100%;
    cursor: pointer;
    background: var(--c-el);
    color: var(--a-yel);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0.6rem 1rem;
  
    border-left: 6px solid var(--a-yel);
    border-bottom: 1px solid var(--a-bor-g);

    display: flex;
    align-items: center;
    justify-content: space-between;
    clip-path: var(--clip-btn);
    transition: var(--anim);
}

/* При наведении подсвечиваем границы ярче */
.cp-btn:hover {
    background: var(--c-bg-h);
    color: var(--a-blue);
    border-color: var(--a-blue);
    padding-left: 30px;
    letter-spacing: 4px;
    position: relative;
      text-shadow: 0px 0px 8px #36BFC5, 4px 4px 0 rgba(54, 191, 197, 0.3), 8px 8px 0 rgba(54, 191, 197, 0.1);
}

.cp-btn.i_active {
    background: #181f22;
    color: var(--a-blue);
    border-bottom: 1px solid currentColor;
    border-left-color: currentColor;
    z-index: 10;
    position: relative;
}

/* Стрелочка */
.cp-mark {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--a-yel);
    transition: var(--anim);
}
.cp-btn:hover .cp-mark {
    border-top-color: currentColor;
}
.cp-btn.i_active .cp-mark {
    transform: rotate(-180deg);
    border-top-color: currentColor;
}

/* [4] CONTENT WRAPPER */
.cp-list {
    display: none; 
    background: var(--c-list);
    padding: 0.5rem;
}

.cp-info {
    display: block;
    font-size: 0.65rem;
    color: var(--c-dim);
    text-align: right;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    background: var(--c-info);
    line-height: 1.5;
}
.cp-info b {
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--a-yel);
}
.cp-info a {
    color: var(--a-red);
    text-decoration: none;
    border-bottom: 1px dashed var(--a-red);
}

/* [5] THE GRID (MODES) */
.cp-grid {
    display: grid;
    gap: 0.25rem;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

/* -- Modes -- */
.cp-grid.mode-shop {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.cp-grid.mode-achiv {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.cp-grid.mode-icon {
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
}
.cp-grid.mode-banner {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.cp-grid.mode-cover {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* [6] CARD (GRID LAYOUT) */
.cp-card {
    position: relative;
    background: var(--c-bg); border: 1px solid var(--a-bor);
    
    /* ИЗМЕНЕНИЕ: Используем Grid вместо Flex */
    display: grid;
    /* 1fr (Верх: картинка/описание) | auto (Низ: Тайтл по размеру текста) */
    grid-template-rows: 1fr auto; 
    
    width: 100%; height: 100%;
    padding: 1px; clip-path: var(--clip-card); transition: var(--anim);
}
.cp-card:hover {
    transform: translateY(-4px); background: var(--c-bg-h);
    border-color: var(--a-yel); z-index: 5;
}

/* [7] TITLE (AUTO HEIGHT) */
.cp-title {
    grid-row: 2;
    z-index: 20;
    height: auto; 
    min-height: 20px; /* Минимальная высота для красоты */
    
    font-size: 0.7rem; font-weight: 600; font-align: left; text-transform: uppercase; letter-spacing: 0.5px;
    color: #fff; background: var(--c-el);
    
    display: flex; align-items: center; /* Центруем текст по вертикали */
    padding: 4px 5px 4px 5px;
    
    border-bottom: 1px solid rgba(255, 248, 31, 0.5); 
    border-top: 1px solid rgba(255,255,255,0.05);
    
    position: relative; clip-path: var(--clip-card);
    backface-visibility: hidden; transform: translateZ(0);
}
.cp-card:hover .cp-title {
    background: var(--c-bg-h); color: var(--a-blue); border-bottom-color: var(--a-blue);
}

/* [8] DESCRIPTION (UPDATED LOGIC) */
.cp-desc {
    position: absolute; 
    top: 25%;
    left: 0;
    bottom: 20%;
    width: 100%; height: auto; /* На всю карточку */
    padding: 5px 5px 0 5px; padding-bottom: 20px; /* Паддинг снизу, чтобы текст не ушел под тайтл */
    font-size: 0.6rem; color: var(--c-txt); text-align: left;
    opacity: 0; transform: translateY(10px);
    transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); 
    z-index: 2; 
    background: rgba(19, 19, 22, 0.95); 
    overflow-y: auto; 
    pointer-events: none; 
      overflow-wrap: break-word; /* Перенос длинных слов */
    hyphens: auto; /* Автоматическая расстановка переносов, если браузер умеет */
}

.cp-title:hover ~ .cp-desc, 
.cp-arrow:hover ~ .cp-desc, 
.cp-desc:hover,
.cp-card.is-desc-open .cp-desc {
    opacity: 1; transform: translateY(0); 
    pointer-events: auto;
    border: 1px solid rgba(0, 240, 255, 0.09);
    box-shadow: inset 0px 0px 30px 30px rgba(0, 240, 255, 0.05);
}

/* Кастомный скроллбар для описания */
.cp-desc::-webkit-scrollbar {
    width: 4px; /* Тоненький */
}
.cp-desc::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.3); 
}
.cp-desc::-webkit-scrollbar-thumb {
    background: var(--a-blue); /* Цвет ползунка */
    border-radius: 2px;
}
.cp-desc::-webkit-scrollbar-thumb:hover {
    background: var(--a-yel); /* Желтый при наведении */
}

/* [9] INFO BADGE & POPUP (Fixed v3.0) */
.cp-info-icon {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 13px;
    height: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.55rem;
    font-weight: bold;
    font-family: monospace;
    color: var(--a-blue);
    cursor: help;
    z-index: 20;
}
.cp-info-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 240, 255, 0.3);
    border: 1px solid var(--a-blue);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
    transition: 0.3s;
    z-index: -1;
}
.cp-info-icon:hover::before {
    background: var(--a-blue);
    box-shadow: 0 0 10px var(--a-blue);
}
.cp-info-icon:hover {
    color: #000;
}

/* Popup */
.cp-lore-popup {
    position: absolute;
    top: 100%;
    right: -1px;
    width: 123px;
    height: auto;
    background: rgba(0, 0, 0, 0.90);
    border: 1px solid var(--a-blue);

    padding: 5px 8px;
    font-size: 0.6rem;
    font-weight: lighter;
    line-height: 1;
    color: #fff;
    text-align: left;
      white-space: normal; /* Разрешаем словам переноситься */
      overflow-wrap: break-word; /* Перенос длинных слов */
      hyphens: auto; /* Автоматическая расстановка переносов, если браузер умеет */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-5px);
    transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
    z-index: 100;

}
.cp-info-icon:hover .cp-lore-popup {
    visibility: visible;
    opacity: 1;
    transform: translateY(2px);
}

/* [10] ARROW & TAGS */
.cp-arrow {
    width: 0;
    height: 0;
    margin: 3px auto;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--a-yel);
    transition: var(--anim);
    z-index: 3;
}
.cp-card:hover .cp-arrow {
    transform: rotate(180deg);
    border-top-color: var(--a-blue);
}

.cp-tag {
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 10;
    font-size: 0.55rem;
    font-weight: 600;
    color: #050505;
    padding: 3px 6px;
    clip-path: var(--clip-tag);
    transition: var(--anim);
}
.cp-card:hover .cp-tag {
    opacity: 0;
    transform: translateY(-10px);
}

/* Tag Colors */
.t-common {
    background: var(--r-com);
}
.t-green {
    background: var(--r-unc);
}
.t-blue {
    background: var(--r-med);
    color: #fff;
}
.t-rare {
    background: var(--r-rar);
    color: #fff;
}
.t-epic {
    background: var(--r-epi);
    color: #fff;
}
.t-legend,
.t-quest {
    background: var(--r-leg);
}

/* [11] IMAGES LOGIC */
.cp-img {
    /* Тоже живет на первом этаже */
    grid-row: 1; grid-column: 1;
    position: relative; width: 100%; height: 100%;
    min-height: 50px; 
    display: flex; justify-content: center; align-items: center;
    overflow: hidden; margin-bottom: 0;
}
.cp-img:hover img {
    transform: scale(1.1);
    filter: saturate(150%) brightness(110%);
    z-index: 3;
}

/* -- Mode: STANDARD (Stretch to fit) -- */
.cp-grid .cp-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
    transition: var(--anim);
}

/* -- Mode: ICON (Auto Size, No Stretch) -- */
.cp-grid.mode-icon .cp-img img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    padding: 0.25rem;
}

/* -- Mode: SHOP, ACHIV (Фиксированная высота 100px) -- */
.cp-grid.mode-shop .cp-img img,
.cp-grid.mode-achiv .cp-img img { 
    aspect-ratio: auto; 
    height: 100px;
}

.cp-grid.mode-shop .cp-img img,
.cp-grid.mode-achiv .cp-img img {
    width: auto; 
    height: auto;
    max-width: 100%; 
    max-height: 100%;
    padding: 1%;
}

/* -- Mode: BANNER (Wide) -- */
.cp-grid.mode-banner .cp-img {
    aspect-ratio: 250 / 40;
}
.cp-grid.mode-banner .cp-img img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
}

/* -- Mode: COVER (Crop) -- */
.cp-grid.mode-cover .cp-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    padding: 0;
}

/* [12] RESPONSIVE & MOBILE OPTIMIZATION */
@media (max-width: 768px) {
    
    /* 1. Контейнер на всю ширину */
    .cp-box {
        width: 100%;
        padding: 0.5rem; /* Чуть меньше отступов */
    }

    /* 2. Сетка: Минимум 2 колонки, но не слишком узкие */
    /* Вместо кучи mode-* правил, делаем универсальный фикс, чтобы не сплющивало */
    .cp-grid,
    .cp-grid.mode-shop,
    .cp-grid.mode-achiv {
        /* minmax(140px...) гарантирует, что карточка не станет тоньше 140px. 
           Если экран совсем узкий, перестроится в 1 колонку. */
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; 
        gap: 0.5rem;
    }
    
    /* Иконки можно поменьше */
    .cp-grid.mode-icon {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important;
    }

    /* Баннеры на всю ширину */
    .cp-grid.mode-banner {
        grid-template-columns: 1fr !important;
    }

    /* 3. Шрифты: Делаем читабельно! (минимум 10-11px) */
    .cp-title {
        font-size: 0.7rem; /* Было 0.5rem - слишком мелко */
        min-height: 30px; /* Увеличим зону для пальца */
    }
    .cp-desc {
        font-size: 0.65rem; 
        padding-top: 5px; /* Больше воздуха */
    }
    .cp-tag {
        font-size: 0.6rem;
        padding: 2px 5px;
    }

    /* 4. Кнопки: Убираем "дёргание" при тапе */
    .cp-btn {
        font-size: 0.75rem; /* Чуть компактнее текст */
        padding: 0.6rem;    /* Стандартный паддинг */
    }
    
    /* ВАЖНО: Отключаем анимацию сдвига паддинга на мобильных, 
       иначе при клике кнопка "убегает" из-под пальца */
    .cp-btn:hover,
    .cp-btn.i_active {
        padding-left: 0.6rem; /* Возвращаем как было */
        letter-spacing: 2px;  /* Не раздвигаем буквы */
    }
    
    /* 5. Карточки: Убираем лишние анимации */
    .cp-card:hover {
        transform: none; /* Убираем подпрыгивание карточки */
    }
    
    /* Убираем зум картинки, чтобы не лагало при скролле */
    .cp-img:hover img {
        transform: none; 
        filter: none;
    }

    /* Лоре-попап (знак вопроса) - делаем его кликабельным и фиксированным, 
       или скрываем, если он мешает */
    .cp-lore-popup {
        width: 140px; /* Фикс ширина */
        top: 100%;    /* Сдвигаем ПОД иконку */
        background: rgba(0, 0, 0, 0.95);
        z-index: 20; /* Чтобы точно перекрыл всё */
    }
}

/* [EXTRA] Hover-fix for Touch Devices 
   Эти стили сработают ТОЛЬКО если у устройства есть мышка.
   На телефонах анимации будут отключены, чтобы не было "залипания".
*/
@media (hover: hover) {
    .cp-card:hover {
        transform: translateY(-4px);
    }
    .cp-img:hover img {
        transform: scale(1.1);
    }
    .cp-btn:hover {
        padding-left: 30px;
        letter-spacing: 4px;
    }
}


</style>

      0

      2

      • Автор: root
      • Администратор
      • Зарегистрирован: 2025-11-22
      • Приглашений: 0
      • Сообщений: 39
      • Уважение: [+0/-0]
      • Позитив: [+0/-0]
      • Провел на форуме:
        15 часов 34 минуты
      • Последний визит:
        2026-01-20 00:54:35
      Код:
      <!--HTML-->
<div class="cp-box">

  <div class="cp-tab">
    <div class="cp-btn i_active">ОБЩИЙ РАЗДЕЛ <i class="cp-mark"></i></div>
    <div class="cp-list" style="display: block;">
      <div class="cp-info" style="text-align: left; font-size: 13px; background: transparent;">
         Также Посмертие предоставляет услуги <b style="color: var(--a-yel);">ВИРТУАЛЬНОГО МАГАЗИНА</b>. Здесь можно купить себе и другу всё что угодно: от дешёвой соевой пасты до легендарных имплантов. Хочешь сделать подарок? Оставь комментарий с шаблоном, и курьерская служба Найт-Сити вылетит с посылкой.<br><br>
         <i style="color: var(--c-dim);">Наведи курсор на изображение: некоторые из предметов могут быть куплены как за эдди, так и за выполнение заданий. Внимательно читайте договор.</i>
      </div>
    </div>
  </div>

  <div class="cp-tab">
    <div class="cp-btn">ПОДАРКИ: Эксклюзив <i class="cp-mark"></i></div>
    <div class="cp-list">
      <div class="cp-info">
        Эксклюзивные предметы. <a href='http://ftr404.rusff.me/viewtopic.php?id=17'>Агенты Чёрного Рынка</a> ждут заказы.<br>
        логопед логопед логопед <b>NETDIR://[ОРУЖЕЙНАЯ_ЛАВКА]</b>
      </div>
      <div class="cp-grid mode-shop">
        
        <div class="cp-card">
           <div class="cp-tag t-quest">QUEST</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">
                 <i>Сделан на заказ для Джонни Сильверхенда.</i><br><b>Условие:</b> используй упоминание группы Samurai в посте
              </div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/zqwBywt.png" alt="Malorian"></div>
           <div class="cp-title">MALORIAN ARMS 3516</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-quest">QUEST</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">
                 <i>Всем пистолетам пистолет.</i><br><b>Условие:</b> расскажи в этой теме рецепт идеального коктейля персонажа
              </div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/fHWQIEL.png" alt="Pride"></div>
           <div class="cp-title">ГОРДОСТЬ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-quest">QUEST</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">
                 <i>Шедевр, который не должен пылиться.</i><br><b>Условие:</b> составь в этой теме плейлист своего персонажа (от 5 треков)
              </div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/2cK7udj.png" alt="Archangel"></div>
           <div class="cp-title">АРХАНГЕЛ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-quest">QUEST</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">
                 <i>Оружие для тех, кто не промахивается.</i><br><b>Условие:</b> расскажи в этой теме о 3 принципах персонажа
              </div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/elBl5UB.png" alt="Crash"></div>
           <div class="cp-title">КРЭШ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-quest">QUEST</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">
                 <i>Снайперская винтовка Панам.</i><br><b>Условие:</b> расскажи о самом незабываемом воспоминании у костра
              </div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/fdV56hx.png" alt="Overwatch"></div>
           <div class="cp-title">НАДЗОР</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-quest">QUEST</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">
                 <i>Напоминает игрушку, но стреляет как настоящий.</i><br><b>Условие:</b> принеси эстетику вашего персонажа в эту тему
              </div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/CdlP80P.png" alt="Lizzie"></div>
           <div class="cp-title">ЛИЗЗИ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-quest">QUEST</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">
                 <i>Требуется уборка после использования.</i><br><b>Условие:</b> расскажи о первой кибер-модификации персонажа
              </div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/vbVK6tB.png" alt="DumDum"></div>
           <div class="cp-title">ЗВЕЗДА ДУМ-ДУМА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-quest">QUEST</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">
                 <i>Не убивает, но калечит до неузнаваемости.</i><br><b>Условие:</b> упомяни в посте тему любви и близости
              </div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/6Z6UXQV.png" alt="Shishkin"></div>
           <div class="cp-title">ВСТАНИСЛАВ ШИШКИН</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

      </div>
    </div>
  </div>

  <div class="cp-tab">
    <div class="cp-btn">МЕДТЕХИ И РИПЕРЫ <i class="cp-mark"></i></div>
    <div class="cp-list">
      <div class="cp-info"><b>NETDIR://[ИМПЛАНТЫ_И_РАСХОДНИКИ]</b></div>
      <div class="cp-grid mode-shop">
        
        <div class="cp-card">
           <div class="cp-tag t-blue">300€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Потому что здоровье у тебя одно!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/Eml19rj.png"></div>
           <div class="cp-title">БУСТЕР ЗДОРОВЬЯ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-blue">100€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Иногда хочется почувствовать себя крутым ублюдком.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/10qd3ir.png"></div>
           <div class="cp-title">ЧЕРНОЕ КРУЖЕВО</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-blue">150€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Вдох. Выдох. Назад в игру.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/PVg1LNg.png"></div>
           <div class="cp-title">ОТСКОК</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-blue">1200€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Фронтальная кора // Всё самое лучшее — для тех, кто не привык ждать.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/jo6Novx.png"></div>
           <div class="cp-title">АКСОЛОТЛЬ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-blue">2100€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Фронтальная кора // Сдерживаться — для неудачников.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/USkcKdH.png"></div>
           <div class="cp-title">КВАНТОВЫЙ "РОСТОВИЧ"</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-blue">3000€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Сандевистан // Официально её не существует. Тайная разработка.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/lSxLT6X.png"></div>
           <div class="cp-title">MILITECH "АПОГЕЙ"</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-blue">2500€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Кибердека // Исключительно мощное оружие агентов Сетевого Дозора.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/3eRyvCr.png"></div>
           <div class="cp-title">NETDRIVER MK.1</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-blue">1500€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Глаза // Увидь то, что скрыто от глаз.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/cnDSaFD.png"></div>
           <div class="cp-title">KIROSHI "КОКАТРИС"</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-blue">2000€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Скелет // Легендарное укрепление костей.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/wucO3no.png"></div>
           <div class="cp-title">RARA AVIS</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-blue">500€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Имплант для интеграции с умным оружием.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/voPsvn5.png"></div>
           <div class="cp-title">СМАРТ-ЛИНК</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-blue">900€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Ко-процессор. Ускоряет обработку данных в кризисных моментах.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/mtpOhdz.png"></div>
           <div class="cp-title">РЕВУЛЬСОР</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-blue">2500€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Позволяет получить второй шанс на выживание.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/f3hANnx.png"></div>
           <div class="cp-title">ВТОРОЕ СЕРДЦЕ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-blue">4000€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Делает пользователя полностью невидимым.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/QnI6owY.png"></div>
           <div class="cp-title">ОПТИЧЕСКИЙ КАМУФЛЯЖ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-blue">800€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Биомеханическая соединительная ткань для ног.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/YW8xANL.png"></div>
           <div class="cp-title">УКРЕПЛЁННЫЕ СУХОЖИЛИЯ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

      </div>
    </div>
  </div>

  <div class="cp-tab">
    <div class="cp-btn">СУВЕНИРЫ И РОСКОШЬ <i class="cp-mark"></i></div>
    <div class="cp-list">
      <div class="cp-info"><b>NETDIR://[ЧЕРНЫЙ_РЫНОК_И_СУВЕНИРЫ]</b></div>
      <div class="cp-grid mode-shop">
        
        <div class="cp-card">
           <div class="cp-tag t-rare">1200€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Зачем дарить сердце, когда можно подарить всё ещё активное ядро боевого робота!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/MISUnxs.png"></div>
           <div class="cp-title">ЯДРО "ХИМЕРЫ"</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-rare">450€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Сувенир из лунного города "Тихо": носите кусочек Луны с собой!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/kRl7E2B.png"></div>
           <div class="cp-title">СУВЕНИРНЫЙ ЗНАЧОК</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-rare">600€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Классический портсигар с элегантным дизайном.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/51hu8lQ.png"></div>
           <div class="cp-title">ШИКАРНЫЙ ПОРТСИГАР</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-rare">666€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Даташард, найденный на теле культиста Мальстрёма.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/9CGBEGb.png"></div>
           <div class="cp-title">ЧИП КИБЕРКУЛЬТИСТА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-rare">750€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Почетный орден, вручаемый президентом.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/Whbaqi8.png"></div>
           <div class="cp-title">ЗНАК ОТЛИЧИЯ НСША</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-rare">500€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Не можете позволить себе полис? Купите модельку!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/4k9xt6T.png"></div>
           <div class="cp-title">МИНИ AV ТРАУМЫ ТИМ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-rare">2000€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Скорая, вооружённый эскорт и услуги хирурга - включены.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/FiFnGCl.png"></div>
           <div class="cp-title">ТРАУМА ТИМ "ПЛАТИНУМ"</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-rare">300€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Найден, а не украден.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/LmgDsTA.png"></div>
           <div class="cp-title">ЧИП С ЕВРОБАКСАМИ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-rare">600€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Активируйте для лучших цен на автомобили!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/yh85gfS.png"></div>
           <div class="cp-title">СКИДКА "АВТОФИКСЕР"</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-rare">300€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Чтобы на разбитые надежды смотрелось веселее!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/RGrPch1.png"></div>
           <div class="cp-title">РОЗОВЫЕ ОЧКИ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-rare">850€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Гарантирует вход в VIP-зону Clouds.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/XtP3O3M.png"></div>
           <div class="cp-title">VIP В "ОБЛАКА"</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-rare">2500€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Стоит целое состояние.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/91DMTAQ.png"></div>
           <div class="cp-title">ЗАПИСЬ САМУРАЙ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-rare">30€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Один пассажир. В одну сторону.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/paIqCJN.png"></div>
           <div class="cp-title">БИЛЕТ В ОДИН КОНЕЦ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-rare">150€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Зачитанная до дыр копия культового романа Эрнеста Хемингуэя.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/fK22KGO.png"></div>
           <div class="cp-title">ПО КОМ ЗВОНИТ КОЛОКОЛ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-rare">450€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Свидетельство о «Потере при прибытии» для приоритетного груза.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/O27x9IN.png"></div>
           <div class="cp-title">ОФИЦИАЛЬНЫЙ ДОКУМЕНТ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-legend">7000€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Содержит зашифрованные данные.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/ryecjyk.png"></div>
           <div class="cp-title">КИБЕРДЕКА БАРТМОССА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-rare">250€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Устройство для воспроизведения брейндансов с функцией редактирования.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/TRQObLD.png"></div>
           <div class="cp-title">БРЕЙНДАНС ВЕНЕЦ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-rare">80€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Священное место для духовных практик.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/O7SyvVE.png"></div>
           <div class="cp-title">АЛТАРЬ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-rare">55€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Традиционный оберег от злых духов.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/EHvtmLD.png"></div>
           <div class="cp-title">ЛОВЕЦ СНОВ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-rare">120€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Ниндзя в чёрно-жёлтых одеждах. Похоже на подделку.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/YitrlEC.png"></div>
           <div class="cp-title">ЭКШН-ФИГУРКА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-rare">1000€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Вылупится через 3 месяца.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/DMO9TbM.png"></div>
           <div class="cp-title">ЯЙЦО ИГУАНЫ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

         <div class="cp-card">
           <div class="cp-tag t-rare">1500€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Для тех, кому нужно больше хрома!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/9F3TzCI.png"></div>
           <div class="cp-title">ЧИП ЛИМИТА ИМПЛАНТОВ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

         <div class="cp-card">
           <div class="cp-tag t-rare">150€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Лекарство от киберпсихоза с "чёрного рынка".</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/fERaDPO.png"></div>
           <div class="cp-title">ЭНДОТРИЗИН</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-legend">12000€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Строитель псевдоэмбриональных клеток. Экспериментальный препарат.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/VGiBmxb.png"></div>
           <div class="cp-title">ПРОТОТИП СТРОИТЕЛЯ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

         <div class="cp-card">
           <div class="cp-tag t-legend">12000€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Средство для оптимизации анаэробной энергии.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/HTL3TII.png"></div>
           <div class="cp-title">РЕЦИКЛЕРЫ МОЛОЧНОЙ К-ТЫ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-legend">12000€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Обеспечивает блоки для формирования новых нейронных связей.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/bxhar8y.png"></div>
           <div class="cp-title">ДЕНДРИТНАЯ ПРОТОПЛАЗМА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

         <div class="cp-card">
           <div class="cp-tag t-rare">3000€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Компонент с расшифрованными алгоритмами системы Цербера.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/QFYvKdx.png"></div>
           <div class="cp-title">МОДУЛЬ ЦЕРБЕРА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-rare">1000€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Превосходный советский деликатес от товарища Коли.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/WcNS6HN.png"></div>
           <div class="cp-title">ЧЁРНАЯ ИКРА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-legend">7000€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Позволяет копировать внешность, речь и мимику.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/yp9dliK.png"></div>
           <div class="cp-title">ФЕЙСПЛЕЙТ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

         <div class="cp-card">
           <div class="cp-tag t-rare">4000€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Устройства для несанкционированного разблокирования имплантов.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/yj2FFGx.png"></div>
           <div class="cp-title">КОРПО-ЛОМ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-legend">10k€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Промышленная модель дрона Militech.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/PSua0bm.png"></div>
           <div class="cp-title">MILITECH "ФЛЭТХЕД"</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-rare">8000€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Чрезвычайно ценная картина Бранчези.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/G7hNiwL.png"></div>
           <div class="cp-title">БЕЗ НАЗВАНИЯ 18</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

      </div>
    </div>
  </div>

  <div class="cp-tab">
    <div class="cp-btn">ЕДА И НАПИТКИ <i class="cp-mark"></i></div>
    <div class="cp-list">
      <div class="cp-info"><b>NETDIR://[ЕДА_И_НАПИТКИ]</b></div>
      <div class="cp-grid mode-shop">
        
        <div class="cp-card">
           <div class="cp-tag t-green">50€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Ударная доза жизненно важных веществ.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/QzlDIOy.png"></div>
           <div class="cp-title">СОЕВАЯ ПАСТА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-common">25€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">И ты замурлычешь в два счёта.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/S8fK4aA.png"></div>
           <div class="cp-title">КОШАЧИЙ КОРМ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-green">100€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Он большой. Реально большой.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/Vln39IT.png"></div>
           <div class="cp-title">БУРРИТО XXL</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-green">150€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Рой вкуса для настоящих гурманов!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/HQsfFJf.png"></div>
           <div class="cp-title">ПИЦЦА САРАНЧА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-green">80€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Никакого маркетинга. Всё настоящее.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/w3Racbq.png"></div>
           <div class="cp-title">РЕАЛФРУКТ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-green">200€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Самые сочные сосиски и самые упругие булочки!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/YzpUOmQ.png"></div>
           <div class="cp-title">HAWT DAWG</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-green">300€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Зачем оружие, когда есть вареники?</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/VWCftNr.png"></div>
           <div class="cp-title">ГАЛИЦКИЕ ВАРЕНИКИ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-legend">NULL</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Совершенства много не бывает.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/62S0Tjl.png"></div>
           <div class="cp-title">ГОДЗИЛЛА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-green">690€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Поистине райский десерт.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/2zsKa7o.png"></div>
           <div class="cp-title">КАПКЕЙК "МОЙ СЛАДКИЙ"</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-green">150€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Лучшие в городе подают в Маленьком Китае.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/ses3OMh.png"></div>
           <div class="cp-title">ВОНТОНЫ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-green">100€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">К чёрту нарезной хлеб. Тако — эталон.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/Vf4Hy8P.png"></div>
           <div class="cp-title">ТАКО</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-green">150€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Теперь с улучшенной текстурой риса и нетоксичными красителями!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/7Pc0EZo.png"></div>
           <div class="cp-title">НИГИРИ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-green">200€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Пусть язык сделает всю работу.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/1bLelS1.png"></div>
           <div class="cp-title">ОРГИАТИК ОМНИВКУС</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-green">250€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">На вкус как настоящее волшебство.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/nCX0k2o.png"></div>
           <div class="cp-title">ПЛАНТАН ЛИЛУ БИНС</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

         <div class="cp-card">
           <div class="cp-tag t-common">50€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">БЫСТРЕЕ БЫСТРЕЕ БЫСТРЕ!!!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/WKarVtN.png"></div>
           <div class="cp-title">МИСТЕР УАЙТИ МЯТА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-green">300€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Перекус из другой галактики!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/BQxIVGT.png"></div>
           <div class="cp-title">МУНЧИЗ АНДРОМЕДА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-common">80€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Насыщенный вкус с добавкой витамина С и кальция!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/l9DCvLb.png"></div>
           <div class="cp-title">"МОЛОЧНЫЙ" ШОКККОЛАД</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-common">50€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Чистая вода. Настоящее удовольствие.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/RFPpeDH.png"></div>
           <div class="cp-title">ВОДА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-green">100€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Дай воде шанс.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/4Nwgipn.png"></div>
           <div class="cp-title">REAL WATER (ГАЗ.)</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-green">200€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Изысканный вкус. Эксклюзивный выбор.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/9Z3Rl3g.png"></div>
           <div class="cp-title">ЧАЙ УЛУН</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-green">250€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Не задалось утро? Matapang спешит на помощь.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/3jeWhuO.png"></div>
           <div class="cp-title">КОФЕ MATAPANG</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-green">100€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Почувствуй любовь!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/c6K76Ty.png"></div>
           <div class="cp-title">НИКОЛА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-green">125€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Cirrus — почувствуй свободу!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/TA2RcVN.png"></div>
           <div class="cp-title">CIRRUS COLA КЛАССИК</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-green">250€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Новый микс каждый раз!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/MHQZ94V.png"></div>
           <div class="cp-title">ХРОМАНТИКОРА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-green">150€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Чувствуешь себя кумкватно?</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/M7PartG.png"></div>
           <div class="cp-title">ТЯНЧА КУМКВАТ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-common">80€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Пьётся легко и светится в темноте.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/z5A9lh4.png"></div>
           <div class="cp-title">КАКТУСОВЫЙ СОК</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-green">200€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Шот водки на льду, добавить НиКолу. Целься высоко и уходи с шумом!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/mhS3mH2.png"></div>
           <div class="cp-title">К. "ДЭВИД МАРТИНЕС"</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-green">250€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Водка, сок лайма, имбирное пиво и, самое главное... немного любви.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/cw8iWbt.png"></div>
           <div class="cp-title">К. "ДЖЕКИ УЭЛЛС"</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-green">300€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Олд-фэшн на текиле с пивом и чили. Для рокера, который всегда шёл до конца.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/nu0bdjk.png"></div>
           <div class="cp-title">К. "ДЖОННИ СИЛЬВЕРХЕНД"</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-rare">400€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Идеальный подарок для себя.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/7bRfTh3.png"></div>
           <div class="cp-title">САКЕ УТАГАВА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-rare">NULL</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Не пей. Наслаждайся.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/nRtMh6v.png"></div>
           <div class="cp-title">АРМАНЬЯК МАССИ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-rare">600€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Всего 200 бутылок. Успей взять свою.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/4SYZJ4m.png"></div>
           <div class="cp-title">ШАТО ДЕЛЭН 2012</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-green">1500€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Дрожжи так и брызжут.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/5LXUz7v.png"></div>
           <div class="cp-title">ТРЕЙЛЕРНОЕ ПИВО</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-common">100€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Кислое послевкусие и размытые воспоминания.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/CYkSB9Q.png"></div>
           <div class="cp-title">САМОГОН</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-green">180€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">С привкусом классовой революции.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/LMyCHsq.png"></div>
           <div class="cp-title">ВОДКА "БОЛЬШЕВИК"</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-green">200€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Почувствуй удар агавы.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/h046B3h.png"></div>
           <div class="cp-title">ТЕКИЛА ЭСПЕСИАЛЬ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-common">100€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Пошло оно всё. Просто выпей лагера.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/8P6Cqwf.png"></div>
           <div class="cp-title">БРОСЕФ ЛАГЕР</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-rare">400€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Будь богемным.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/0riD4w8.png"></div>
           <div class="cp-title">АБ-СИНТ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

         <div class="cp-card">
           <div class="cp-tag t-green">300€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Твой конец радуги.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/NfLz7aa.png"></div>
           <div class="cp-title">ДОНАХИ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-rare">500€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Дистиллирован из самых синих агав.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/JNjkmd0.png"></div>
           <div class="cp-title">СЕНТСОН ТОТОЧТИН</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

      </div>
    </div>
  </div>

  <div class="cp-tab">
    <div class="cp-btn">БАРАХОЛКА <i class="cp-mark"></i></div>
    <div class="cp-list">
      <div class="cp-info"><b>NETDIR://[БАРАХОЛКА]</b></div>
      <div class="cp-grid mode-shop">
        
        <div class="cp-card">
           <div class="cp-tag t-common">70€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Символ альфа-хищников Найт-Сити!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/u4fgpjV.png"></div>
           <div class="cp-title">ПАТЧ С ЯГУАРОМ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-common">50€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Туз всё ещё спрятан у кого-то в рукаве.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/hNplArX.png"></div>
           <div class="cp-title">ДЖОКЕР</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-common">100€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Похоже, принадлежит кому-то, кто был в студенческом братстве.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/DCSxE8u.png"></div>
           <div class="cp-title">ПЕРСТЕНЬ-ПЕЧАТКА NCU</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-common">50€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Скручена как положено – на чьих-то потных бёдрах.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/HbFTDJL.png"></div>
           <div class="cp-title">СИГАРА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-common">40€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Говорят, эффективнее таблеток. И дешевле.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/LiYRW6B.png"></div>
           <div class="cp-title">АНТИСТРЕСС</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-common">150€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Документ, который накладывает множество ограничений.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/JubtA2o.png"></div>
           <div class="cp-title">NDA</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-green">200€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Кажется, их очень любили и берегли.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/88B5gZf.png"></div>
           <div class="cp-title">ЧЁТКИ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-common">50€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Если можешь украсить свой дом, значит, можешь украсить свой город.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/Cbd4LgD.png"></div>
           <div class="cp-title">БАЛЛОНЧИК С КРАСКОЙ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-common">40€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Суперкрепкие, тройной фильтр. "Морли" - для настоящих зависимых.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/CMEtGRk.png"></div>
           <div class="cp-title">ПАЧКА СИГАРЕТ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-common">30€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Ультратонкие, ультрапрочные.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/6wAsv4a.png"></div>
           <div class="cp-title">ПРЕЗЕРВАТИВЫ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-common">20€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Пряный вкус корицы. Якобы без канцерогенов.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/sLrJpdY.png"></div>
           <div class="cp-title">ЖВАЧКА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-common">50€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Убивает 99,9% всякой дряни.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/neYAHrH.png"></div>
           <div class="cp-title">ДЕЗИНФЕКТАНТ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-green">200€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Всё самое нужное в одном: нож, фонарик, открывалка.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/yU0xhIP.png"></div>
           <div class="cp-title">ВОЕННЫЙ НОЖ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-common">70€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Губы не лгут.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/5pydThX.png"></div>
           <div class="cp-title">ФЛУОРЕСЦЕНТНАЯ ПОМАДА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-common">100€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Аналоговая. Невзламываемая.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/kqn0hmJ.png"></div>
           <div class="cp-title">КАРТА НСША</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-common">60€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Применяются во многих ситуациях, большинство из них – сексуальные.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/xCBr1IW.png"></div>
           <div class="cp-title">НАРУЧНИКИ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-common">80€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Для тех моментов, когда хочется чего-то особенного...</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/tBmvXTP.png"></div>
           <div class="cp-title">ШИПОВАННЫЙ ДИЛДО</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-common">120€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Все на борт! Первая остановка – Простатная Вершина!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/ui4hBNQ.png"></div>
           <div class="cp-title">АНАЛЬНЫЙ ЭКСПРЕСС</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-common">10€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Благослови тебя Бог, и да благословит Он Новые Соединённые Штаты!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/I0w1CZy.png"></div>
           <div class="cp-title">ЗНАЧОК НСША</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-common">30€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Привет из Города Мечты!</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/AWitQJv.png"></div>
           <div class="cp-title">ОТКРЫТКА ИЗ NC</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-common">20€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Когда нужна защита, но на страховку Trauma Team денег нет.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/4TxYSAi.png"></div>
           <div class="cp-title">ОМАМОРИ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-green">150€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Неотъемлемый атрибут для каждого Дня Мёртвых.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/rsJg0wg.png"></div>
           <div class="cp-title">КАЛАВЕРА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-common">60€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Подходит, чтобы снять колесо и разбить парочку черепов.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/fOsfDmk.png"></div>
           <div class="cp-title">МОНТИРОВКА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-rare">450€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Либо достался от покойной бабули, либо у кого-то дофига лишних денег.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/f9jkY7J.png"></div>
           <div class="cp-title">ЧЕРЕП ВОРОНА</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-green">150€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">На 100% натуральное. Слышишь, как шумит океан?</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/U83OJBw.png"></div>
           <div class="cp-title">КОЛЬЦО С РАКУШКОЙ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-common">50€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Яркость, от которой глаза кровоточат. Прими китч.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/b7RlfCN.png"></div>
           <div class="cp-title">ПЛАСТИКОВЫЙ БРАСЛЕТ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-green">150€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Знак настоящего героя.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/vMNkLPg.png"></div>
           <div class="cp-title">СОЛДАТСКИЕ ЖЕТОНЫ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-green">150€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Есть элегантный способ носить бархат, а есть правильный.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/sIIYq4J.png"></div>
           <div class="cp-title">ЧОКЕР С КОЛЬЦОМ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-green">200€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Амулет на удачу… а может ли он заодно отпугивать зло?</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/n7K4ZzX.png"></div>
           <div class="cp-title">ПОДВЕСКА С КАНДЗИ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-green">250€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Для тех, кто хочет, чтобы смерть была всегда рядом.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/EYm7vz2.png"></div>
           <div class="cp-title">БРОШЬ САНТА-МУЭРТЕ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
        <div class="cp-card">
           <div class="cp-tag t-green">150€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Нестареющая классика для истинно верующих.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/MPMzVK2.png"></div>
           <div class="cp-title">ЗОЛОТОЙ КРЕСТ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>
        
         <div class="cp-card">
           <div class="cp-tag t-green">200€$</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup">Символ статуса, силы и вкуса. Хотя с последним можно поспорить.</div>
           </div>
           <div class="cp-img"><img src="https://i.imgur.com/4uLnBAx.png"></div>
           <div class="cp-title">ЗОЛОТАЯ ЦЕПЬ</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

      </div>
    </div>
  </div>

</div>

<script>
document.addEventListener('click', function(e) {
  // 1. Проверяем, был ли клик по кнопке
  const btn = e.target.closest('.cp-btn');
  
  if (!btn) return;

  // 2. Блокируем стандартное поведение
  e.preventDefault();

  const list = btn.nextElementSibling;
  const isOpened = btn.classList.contains('i_active');

  // --- ЛОГИКА АККОРДЕОНА (закрываем чужие) ---
  document.querySelectorAll('.cp-btn.i_active').forEach(activeBtn => {
    if (activeBtn !== btn) {
      activeBtn.classList.remove('i_active');
      if (activeBtn.nextElementSibling) {
        activeBtn.nextElementSibling.style.display = 'none';
      }
    }
  });

  // --- ТОГГЛ ТЕКУЩЕГО ---
  if (!list) return;

  if (isOpened) {
    // Если было открыто -> Закрываем
    list.style.display = 'none';
    btn.classList.remove('i_active');
  } else {
    // Если было закрыто -> Открываем
    list.style.display = 'block';
    btn.classList.add('i_active');

// [NEW] Скролл с "воздухом" сверху
    setTimeout(() => {
      // Настройка отступа (в пикселях). 
      // 20px - оптимально, чтобы было видно верхнюю границу и свечение кнопки.
      // Если есть прилипающее меню сверху, ставьте больше (например, 60 или 80).
      const offset = 5; 
      
      const bodyRect = document.body.getBoundingClientRect().top;
      const elementRect = btn.getBoundingClientRect().top;
      const elementPosition = elementRect - bodyRect;
      const offsetPosition = elementPosition - offset;

      window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth'
      });
    }, 200); // Задержка для плавности открытия блока
  }
});
</script>

      0

      3

      • Автор: root
      • Администратор
      • Зарегистрирован: 2025-11-22
      • Приглашений: 0
      • Сообщений: 39
      • Уважение: [+0/-0]
      • Позитив: [+0/-0]
      • Провел на форуме:
        15 часов 34 минуты
      • Последний визит:
        2026-01-20 00:54:35
      Код:
      <!--HTML-->
<div class="cp-box">
  
  <div class="cp-tab">
    <div class="cp-btn i_active">АЧИВКИ <i class="cp-mark"></i></div>
    <div class="cp-list" style="display: block;">
      
      <div class="cp-grid mode-achiv">
        
        <div class="cp-card">
           <div class="cp-tag t-common">COMMON</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup"><b>Условие:</b> За принятую анкету.</div>
           </div>
           <div class="cp-img"><img src="https://upforme.ru/uploads/001c/98/42/2/t89348.jpg" alt="Welcome"></div>
           <div class="cp-title">WELCOME TO NC</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-common">COMMON</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup"><b>Условие:</b> На форуме месяц.</div>
           </div>
           <div class="cp-img"><img src="https://upforme.ru/uploads/001c/98/42/2/t648852.jpg" alt="Newbie"></div>
           <div class="cp-title">NEWBIE</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-blue">RARE</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup"><b>Условие:</b> На форуме больше года.</div>
           </div>
           <div class="cp-img"><img src="https://upforme.ru/uploads/001c/98/42/2/t957592.jpg" alt="Old Gold"></div>
           <div class="cp-title">OLD BUT[T] GOLD</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-rare">EVENT</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup"><b>Условие:</b> За приятные форумные подарки любимым соигрокам во имя тыквенного спаса 2025!</div>
           </div>
           <div class="cp-img"><img src="https://upforme.ru/uploads/001c/98/42/2/t317316.jpg" alt="Roach"></div>
           <div class="cp-title">ROACH: BONUS LVL</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-legend">LEGEND</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup"><b>Условие:</b> За выполнение челленджа тыквенного спаса 2025 на 110%</div>
           </div>
           <div class="cp-img"><img src="https://upforme.ru/uploads/001c/98/42/2/t615644.jpg" alt="Completionist"></div>
           <div class="cp-title">COMPLETIONIST</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-common">NULL</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup"><b>Условие:</b> снимать штаны и бегать</div>
           </div>
           <div class="cp-img"><img src="https://upforme.ru/uploads/001c/1a/06/2/13242.png" alt="404"></div>
           <div class="cp-title">404</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-common">NULL</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup"><b>Условие:</b> снимать штаны и бегать</div>
           </div>
           <div class="cp-img"><img src="https://upforme.ru/uploads/001c/1a/06/2/13242.png" alt="404"></div>
           <div class="cp-title">404</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

        <div class="cp-card">
           <div class="cp-tag t-common">NULL</div>
           <div class="cp-info-icon">i
              <div class="cp-lore-popup"><b>Условие:</b> снимать штаны и бегать</div>
           </div>
           <div class="cp-img"><img src="https://upforme.ru/uploads/001c/1a/06/2/13242.png" alt="404"></div>
           <div class="cp-title">404</div>
           <div class="cp-arrow"></div>
           <div class="cp-desc">Lorem</div>
        </div>

      </div>
    </div>
  </div>

</div>

      Отредактировано root (2025-12-23 19:44:21)

      0

      4

      • Автор: root
      • Администратор
      • Зарегистрирован: 2025-11-22
      • Приглашений: 0
      • Сообщений: 39
      • Уважение: [+0/-0]
      • Позитив: [+0/-0]
      • Провел на форуме:
        15 часов 34 минуты
      • Последний визит:
        2026-01-20 00:54:35
      Код:
      <!--HTML-->
<div class="cp-box">

  <div class="cp-tab">
    <div class="cp-btn i_active">CUSTOM: БАЗОВАЯ КОЛЛЕКЦИЯ <i class="cp-mark"></i></div>
    <div class="cp-list" style="display: block;">
      
      <div class="cp-info"><b>NETDIR://[ICONS_PACK_BASIC]</b></div>
      <div class="cp-grid mode-icon">
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/9xDG0nZ.png"></div><div class="cp-title">tech</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/PTEXeJv.png"></div><div class="cp-title">body</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/c9P34Nb.png"></div><div class="cp-title">int</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/DEgaNL9.png"></div><div class="cp-title">cool</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/T1EinKB.png"></div><div class="cp-title">ref</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/u5Ke270.png"></div><div class="cp-title">rel</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/sUAprSq.png"></div><div class="cp-title">saka</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/dMGtgYr.png"></div><div class="cp-title">mltc</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/8mEV242.png"></div><div class="cp-title">petr</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/RwyvAl9.png"></div><div class="cp-title">t-t</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/MZKEyhL.png"></div><div class="cp-title">oni</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/eIdRTCt.png"></div><div class="cp-title">v's</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/4iNFaTz.png"></div><div class="cp-title">tgrs</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/ggnwZUb.png"></div><div class="cp-title">dogs</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/PLtlAOU.png"></div><div class="cp-title">mael</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/VRQxj9E.png"></div><div class="cp-title">mox</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/F465g9n.png"></div><div class="cp-title">vdb</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/3YaBtij.png"></div><div class="cp-title">er</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/zDJkJ4L.png"></div><div class="cp-title">skp</div></div>
      </div>

      <br>
      <div class="cp-info"><b>NETDIR://[PROFILE_BG_BASIC]</b></div>
      <div class="cp-grid mode-tall"> <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/AC3xLZa.png"></div><div class="cp-title">lens flare</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/go9qI4f.png"></div><div class="cp-title">city lights</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/grxzFJL.png"></div><div class="cp-title">clubbin</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/pclbyhO.png"></div><div class="cp-title">GRAFFITI</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/liVTmSP.png"></div><div class="cp-title">AURORA</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/nU9rSAd.png"></div><div class="cp-title">GLITCH</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/XP577bW.png"></div><div class="cp-title">MEGABUILDING</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/VuwSYlW.png"></div><div class="cp-title">GASOLINE</div></div>
      </div>

      <br>
      <div class="cp-info"><b>NETDIR://[PLAQUES_BASIC]</b></div>
      <div class="cp-grid mode-banner">
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/NPBtJyr.gif"></div><div class="cp-title">space</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/24m6X4W.gif"></div><div class="cp-title">glitch</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/h3hrbSu.gif"></div><div class="cp-title">chromatic</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/wyAIAQd.gif"></div><div class="cp-title">CRASH</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/fgeuN30.gif"></div><div class="cp-title">ELETAPE</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/Gt0iF17.gif"></div><div class="cp-title">NEUROPLASTICITY</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/JyEcKZh.gif"></div><div class="cp-title">TINDERS</div></div>
         <div class="cp-card"><div class="cp-img"><img src="https://i.imgur.com/AQriuZP.gif"></div><div class="cp-title">HELLFIRE</div></div>
      </div>
    </div>
  </div>

  <div class="cp-tab">
    <div class="cp-btn">EVENT: SUMMER HEAT <i class="cp-mark"></i></div>
    <div class="cp-list">
      <div class="cp-info">
        Жаркие дни, захватывающие ночи, летний драйв и капелька отпуска! Эксклюзивная награда за выполнение заданий в летнем ивенте.
      </div>
      
      <div class="cp-info"><b>[ФОНЫ]</b></div>
      <div class="cp-grid mode-tall">
         <div class="cp-card">
            <div class="cp-tag t-epic">EVENT</div>
            <div class="cp-info-icon">i
               <div class="cp-lore-popup"><b>Условие:</b> Принеси ссылку на выполненное задание GAME TIME // А ЧТО У НАС ТАМ В СЛОВАРЕ?</div>
            </div>
            <div class="cp-img"><img src="https://i.imgur.com/t2ULXxR.png"></div>
            <div class="cp-title">Vapor</div>
         </div>
         <div class="cp-card">
            <div class="cp-tag t-epic">EVENT</div>
            <div class="cp-info-icon">i
               <div class="cp-lore-popup"><b>Условие:</b> Принеси ссылку на выполненное задание GAME TIME // НА РАДИО ВОЛНАХ</div>
            </div>
            <div class="cp-img"><img src="https://i.imgur.com/lFzI9pe.png"></div>
            <div class="cp-title">Waves</div>
         </div>
         <div class="cp-card">
            <div class="cp-tag t-epic">EVENT</div>
            <div class="cp-info-icon">i
               <div class="cp-lore-popup"><b>Условие:</b> Принеси ссылку на выполненное задание GAME TIME // СОБЕРИ СОЙКУ</div>
            </div>
            <div class="cp-img"><img src="https://i.imgur.com/0v0h6xM.png"></div>
            <div class="cp-title">Ferris</div>
         </div>
      </div>

      <br>
      <div class="cp-info"><b>[ПЛАШКИ]</b></div>
      <div class="cp-grid mode-banner">
         <div class="cp-card">
            <div class="cp-tag t-epic">EVENT</div>
            <div class="cp-img"><img src="https://i.imgur.com/XqCFywb.gif"></div>
            <div class="cp-title">Vapor</div>
         </div>
         <div class="cp-card">
            <div class="cp-tag t-epic">EVENT</div>
            <div class="cp-img"><img src="https://i.imgur.com/gr2LfGe.gif"></div>
            <div class="cp-title">Waves</div>
         </div>
         <div class="cp-card">
            <div class="cp-tag t-epic">EVENT</div>
            <div class="cp-img"><img src="https://i.imgur.com/3X9HiyD.gif"></div>
            <div class="cp-title">Ferris</div>
         </div>
      </div>

    </div>
  </div>

  <div class="cp-tab">
    <div class="cp-btn">EVENT: ROCKERBOYS <i class="cp-mark"></i></div>
    <div class="cp-list">
      <div class="cp-info">
        Бешеная энергия, бесконечное вдохновение и дух настоящего рока!
      </div>
      <div class="cp-grid mode-tall">
         <div class="cp-card">
            <div class="cp-tag t-legend">ROCK</div>
            <div class="cp-info-icon">i
               <div class="cp-lore-popup"><b>Условие:</b> Сделай тык на банер rpg-top и принеси скрин</div>
            </div>
            <div class="cp-img"><img src="https://i.imgur.com/pROkDJs.png"></div>
            <div class="cp-title">LOVERS ROCK</div>
         </div>
      </div>
      <br>
      <div class="cp-grid mode-banner">
         <div class="cp-card">
            <div class="cp-tag t-legend">ROCK</div>
            <div class="cp-img"><img src="https://upforme.ru/uploads/001c/1a/06/5/674410.gif"></div>
            <div class="cp-title">LOVERS ROCK</div>
         </div>
      </div>
    </div>
  </div>

  <div class="cp-tab">
    <div class="cp-btn">EVENT: NY '24 <i class="cp-mark"></i></div>
    <div class="cp-list">
      <div class="cp-info">За участие в интерактивных развлечениях с 16.12 по 29.12</div>
      
      <div class="cp-grid mode-tall">
         <div class="cp-card">
            <div class="cp-tag t-rare">NY24</div>
            <div class="cp-info-icon">i
               <div class="cp-lore-popup"><b>Условие:</b> Эстетика, паззлы или рождественский челлендж '24</div>
            </div>
            <div class="cp-img"><img src="https://i.imgur.com/NcpLUVy.png"></div>
            <div class="cp-title">GOLDUST</div>
         </div>
      </div>
      <br>
      <div class="cp-grid mode-banner">
         <div class="cp-card">
             <div class="cp-tag t-rare">NY24</div>
             <div class="cp-img"><img src="https://i.imgur.com/a6ohaH6.gif"></div>
             <div class="cp-title">GOLDUST</div>
         </div>
      </div>
    </div>
  </div>

  <div class="cp-tab">
    <div class="cp-btn">EVENT: HALLOWEEN '25 <i class="cp-mark"></i></div>
    <div class="cp-list">
      <div class="cp-info">За участие в интерактивных тыквенноспасовых развлечениях 2025-го</div>
      
      <div class="cp-info"><b>[ИКОНКИ]</b></div>
      <div class="cp-grid mode-icon">
         <div class="cp-card">
            <div class="cp-tag t-hot">SPOOKY</div>
            <div class="cp-img"><img src="https://i.imgur.com/FIwlYeu.png"></div>
            <div class="cp-title">cyberpsycho</div>
         </div>
      </div>
      
      <br>
      <div class="cp-info"><b>[ФОНЫ]</b></div>
      <div class="cp-grid mode-tall">
         <div class="cp-card">
            <div class="cp-tag t-hot">SPOOKY</div>
            <div class="cp-img"><img src="https://i.imgur.com/p039Zhx.png"></div>
            <div class="cp-title">cyberpsycho_2</div>
         </div>
      </div>
      
      <br>
      <div class="cp-info"><b>[ПЛАШКИ]</b></div>
      <div class="cp-grid mode-banner">
         <div class="cp-card">
            <div class="cp-tag t-hot">SPOOKY</div>
            <div class="cp-img"><img src="https://i.imgur.com/LY4ilvk.gif"></div>
            <div class="cp-title">cyberpsycho_3</div>
         </div>
      </div>

    </div>
  </div>

</div>

      0

      Страница: 1

      Вы здесь » datasprawl » Тестовый форум » новый нейминг блоков

      Рейтинг форумов | Создать форум бесплатно