Код:
<!--HTML-->
<div id="htmk_wrap" class="html-bank">
<div class="sp_button i_active">общий раздел <i class="select_mark"></i></div>
<div class="sp_content-wrap" style="display: block;">
<div class="sp_content-inner">
<ul class="bank_list">
<li>
<span class="bank_service">Хэдер в профиль <i class="tooltip_mark"><span class="tooltip_text">За дополнительной информацией смотри раздел с хэдерами.</span></i></span>
<span class="bank_cost">3 поста / 60 флудовых сообщений</span>
</li>
<li>
<span class="bank_service">Плашка <i class="tooltip_mark"><span class="tooltip_text">Оформляется в 2 строчки; рекомендуемое максимальное количество символов в каждой строке: <b>33</b><br>
Вместе с текстом можно изменить цвет градиента: для этого вместе с текстом на отдельной строчке укажите <b>hex</b> желаемого цвета.</span></i></span>
<span class="bank_cost">1 пост / 20 флудовых сообщений</span>
</li>
<li>
<span class="bank_service">Гиф-смайл с выбранной внешностью <i class="tooltip_mark"><span class="tooltip_text">Можете дать нам желаемый исходник, а можем попробовать вас удивить.</span></i></span>
<span class="bank_cost">30 флудовых сообщений</span>
</li>
<li>
<span class="bank_service">Набор из 3 гиф-смайлов с выбранной внешностью <i class="tooltip_mark"><span class="tooltip_text">Можете дать нам желаемые исходники, а можем попробовать вас удивить.</span></i></span>
<span class="bank_cost">60 флудовых сообщений</span>
</li>
<li>
<span class="bank_service">Завести твинка </span>
<span class="bank_cost">3 поста</span>
</li>
<li>
<span class="bank_service">Листовка с нужным персонажем </span>
<span class="bank_cost">5 постов / 100 флудовых сообщений</span>
</li>
<li>
<span class="bank_service">Нужный в шапке на 3 недели </span>
<span class="bank_cost">4 постов / 80 флудовых сообщений</span>
</li>
<li>
<span class="bank_service">Реклама нужного в подписи пиар-аккаунта </span>
<span class="bank_cost">3 поста / 60 флудовых сообщений</span>
</li>
</ul>
</div>
</div>
<div class="sp_button">ХЭДЕР В ПРОФИЛЬ <i class="select_mark"></i></div>
<div class="sp_content-wrap">
<div class="sp_content-inner">
<div class="sp_content-desc">
<span class="bank_cost2">3 поста / 60 флудовых сообщений</span>
<span class="bank_service-desc">
Хэдеры из этой секции не эксклюзивны и могут повторяться. Можно заказать свой хэдер, который будет только вашим.
</span>
<span class="bank_service-desc"><b class="special_b">✱</b> Размер <b>224х305px</b> (можно больше), кидайте прямой ссылкой вместе с заявкой;<br>
<b class="special_b">✱</b> Если заказываете свой, обращайте внимание на то, чтобы изображение не было излишне светлым - текст статуса белый, и на слишком светлом фоне может потеряться;<br>
<b class="special_b">✱</b> Всегда можно попросить кого-нибудь из амс подредактировать как нужно, не стесняйтесь!
</span>
<span class="bank_service-desc">
<b class="special_b">Во избежание киберпсихоза не принимаются:</b> nsfl/lewd контент и gif-изображения.
</span>
</div>
<ul class="bank_list services_preview headers">
<li>
<span class="services_preview-title">01 - BADLANDS</span>
<img src="https://i.imgur.com/YQSlf72.png">
</li>
<li>
<span class="services_preview-title">02 - BLACKWALL</span>
<img src="https://i.imgur.com/ECm5D5u.png">
</li>
<li>
<span class="services_preview-title">03 - CLUBBIN</span>
<img src="https://i.imgur.com/RRpIToS.png">
</li>
<li>
<span class="services_preview-title">04 - INDUSTRIAL</span>
<img src="https://i.imgur.com/1FN98Sq.png">
</li>
<li>
<span class="services_preview-title">05 - JOBBIN</span>
<img src="https://i.imgur.com/ZNrDLuC.png">
</li>
<li>
<span class="services_preview-title">06 - SKYLINE</span>
<img src="https://i.imgur.com/g9N8b2d.png">
</li>
<li>
<span class="services_preview-title">07 - STREETVIEW</span>
<img src="https://i.imgur.com/pHdLKNf.png">
</li>
<li>
<span class="services_preview-title">08 - ANALOGUE</span>
<img src="https://i.imgur.com/dnVm1SB.png">
</li>
</ul>
</div>
</div>
<div class="sp_button">КАРТИНКИ В ПЛАШКИ <i class="select_mark"></i></div>
<div class="sp_content-wrap">
<div class="sp_content-inner">
<div class="sp_content-desc">
<span class="bank_cost2">1 пост / 20 флудовых сообщений</span>
<span class="bank_service-desc">
Изображения из этой секции не эксклюзивны и могут повторяться. Можно заказать свой хэдер, который будет только вашим.
</span>
<span class="bank_service-desc"><b class="special_b">✱</b> Размер <b>224х41px</b> (можно больше - всё порежем), кидайте прямой ссылкой вместе с заявкой;<br>
<b class="special_b">✱</b> Если заказываете свой, обращайте внимание на то, чтобы изображение не было излишне светлым - текст плашки белый, и на слишком светлом фоне может потеряться;<br>
<b class="special_b">✱</b> Всегда можно попросить кого-нибудь из амс подредактировать как нужно, не стесняйтесь!
</span>
<span class="bank_service-desc">
<b class="special_b">Во избежание киберпсихоза не принимаются:</b> nsfw/lewd content и гифки, способные вызвать эпилептический припадок.
</span>
</div>
<ul class="bank_list services_preview colletions_preview">
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
</li>
</ul>
</div>
</div>
<div class="sp_button">Иконки в профиль <i class="select_mark"></i></div>
<div class="sp_content-wrap">
<div class="sp_content-inner">
<div class="sp_content-desc">
<span class="bank_cost2">1 пост / 20 флудовых сообщений</span>
<span class="bank_service-desc">
Пока можно выбрать что-нибудь из вкладки с эмодзи, но мы уже работаем над добавлением большой коллекции для выбора!
</span>
<span class="bank_service-desc">
Эмодзи можно выбрать из предложенных, можно принести свой: размеры 16х16px, в таком случае вы сами загружаете на выбранный хостинг и предоставляете ссылку на изображение;
</span>
<span class="bank_service-desc">
<b class="special_b">[work in progress]</b>
</span>
</div>
<ul class="bank_list services_preview profile-icons">
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
</li>
</ul>
</div>
</div>
<div class="sp_button">Коллекции <i class="select_mark"></i></div>
<div class="sp_content-wrap">
<div class="sp_content-inner">
<div class="sp_content-desc">
<span class="bank_service-desc">
Коллекция #1: <b class="special_b">Витрина Ви</b> - святилище стали и хрома для истинных ценителей Найт-Сити!
</span>
<span class="bank_service-desc">
Эта уникальная коллекция воплощает дух оружейного тайника Ви, легендарной наемницы, чья судьба переплелась с судьбой города будущего. Данная витрина будет предназначена для сбора культового оружия, при помощи которого Ви и другие легенды прокладывали свой путь через враждебный мир Найт-Сити.
</span>
</div>
<ul class="bank_list services_preview colletions_preview">
<li>
<span class="services_preview-title">МАЛОРИАН АРМС 3516</span>
<img src="https://i.imgur.com/zqwBywt.png">
<span class="services_preview-desc">
<i>Сделан на заказ для Джонни Сильверхенда. Настоящий образец вкуса.</i><br>
<b>Условие:</b> используйте упоминание группы Samurai в посте
</span>
</li>
<li>
<span class="services_preview-title">ГОРДОСТЬ</span>
<img src="https://i.imgur.com/fHWQIEL.png">
<span class="services_preview-desc">
<i>Всем пистолетам пистолет.</i><br>
<b>Условие:</b> расскажи в теме рецепт идеального коктейля персонажа
</span>
</li>
<li>
<span class="services_preview-title">АРХАНГЕЛ</span>
<img src="https://i.imgur.com/2cK7udj.png">
<span class="services_preview-desc">
<i>Шедевр, который не должен пылиться за стеклом.</i><br>
<b>Условие:</b> составь в теме плейлист своего персонажа от 5 треков
</span>
</li>
<li>
<span class="services_preview-title">КРЭШ</span>
<img src="https://i.imgur.com/elBl5UB.png">
<span class="services_preview-desc">
<i>Оружие для тех, кто не промахивается.</i><br>
<b>Условие:</b> расскажи в теме о 3 принципах персонажа
</span>
</li>
<li>
<span class="services_preview-title">НАДЗОР</span>
<img src="https://i.imgur.com/fdV56hx.png">
<span class="services_preview-desc">
<i>Снайперская винтовка, принадлежавшая Панам. Быстро перезаряжается, точно стреляет.</i><br>
<b>Условие:</b> расскажи в теме о самом незабываемом воспоминании персонажа, которым он мог бы поделиться у костра
</span>
</li>
<li>
<span class="services_preview-title">ЛИЗЗИ</span>
<img src="https://i.imgur.com/CdlP80P.png">
<span class="services_preview-desc">
<i>Внешне напоминает игрушку, но стреляет как настоящий.</i><br>
<b>Условие:</b> принеси эстетику вашего персонажа в тему
</span>
</li>
<li>
<span class="services_preview-title">ЗВЕЗДА ДУМ-ДУМА</span>
<img src="https://i.imgur.com/vbVK6tB.png">
<span class="services_preview-desc">
<i>Превратит в бесформенную груду мяса кого угодно. Внимание: после использования требуется уборка.</i><br>
<b>Условие:</b> расскажи в теме о самой первой кибернетической модификации персонажа
</span>
</li>
<li>
<span class="services_preview-title">ВСТАНИСЛАВ ШИШКИН</span>
<img src="https://i.imgur.com/6Z6UXQV.png">
<span class="services_preview-desc">
<i>Не убивает, но калечит до неузнаваемости.</i><br>
<b>Условие:</b> упомяни в посте тему любви и близости
</span>
</li>
</ul>
<div class="sp_content-desc">
<span class="bank_service-desc">
Коллекция #2: <b class="special_b">[coming soon]</b></span>
</div>
<ul class="bank_list services_preview colletions_preview">
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
<span class="services_preview-desc">
<b>Условие:</b> снимать штаны и бегать<br>
</span>
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
<span class="services_preview-desc">
<b>Условие:</b> снимать штаны и бегать
</span>
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
<span class="services_preview-desc">
<b>Условие:</b> снимать штаны и бегать
</span>
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
<span class="services_preview-desc">
<b>Условие:</b> снимать штаны и бегать
</span>
</li>
</ul>
</div>
</div>
<div class="sp_button">Ачивки <i class="select_mark"></i></div>
<div class="sp_content-wrap">
<div class="sp_content-inner">
<div class="sp_content-desc">
<span class="bank_service-desc">
Очень скоро здесь появятся комплекты достижений, которые можно получить за выполнение специальных заданий.
</span>
<span class="bank_service-desc">
<b class="special_b">[work in progress]</b>
</span>
</div>
<ul class="bank_list services_preview colletions_preview">
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
<span class="services_preview-desc">
<b>Условие:</b> снимать штаны и бегать<br>
</span>
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
<span class="services_preview-desc">
<b>Условие:</b> снимать штаны и бегать
</span>
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
<span class="services_preview-desc">
<b>Условие:</b> снимать штаны и бегать
</span>
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
<span class="services_preview-desc">
<b>Условие:</b> снимать штаны и бегать
</span>
</li>
</ul>
</div>
</div>
</div></div>
<script>
$('.sp_button').click(function() {
$('.sp_button').not(this).removeClass('i_active');
$(this).toggleClass('i_active');
});
$('.sp_button').each(function() {
$(this).on('click', function() { $('.sp_button').not($(this)).next().slideUp();
$(this).next().slideToggle();
});
});
</script>
