-100%

mercbenz

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

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

Вы здесь » mercbenz » сервис » много разного и непонятного

много разного и непонятного

Страница: 1

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

1

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

тема лисички из кореи
:rain:

+1

2

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12
стоит

скрипт Денег, Валюты, Баллов и т.д

Создаём новое доп поле с нужным названием, которое и прописываем в скрипте!
Настройки Поля: - справо  от Ника, поле однострочное, заполняется только Админом - модером!
Поле перетаскиваем крестиком сразу под Аватаром (в Администрировании - Поля Профиля)
Из вставки в свпойлер под N-кнопок в топике  - исключаем - ставим впереди поля(в скрипте спойлера) две косых черты

В данное поле можно заносить Админ бонусы(плюс или минус число) , данное число прибавляется/отнимается от общей суммы

В HTML низ,

Код:
<!-- Cкрипт Валюты --><script type="text/javascript">
        $("#pun-viewtopic .post .post-author").each(function(){
        if($(this).parents('.post').attr("data-group-id")=="3")return true;
        if(!$(this).find('.pa-author a').length)return true;
        var fldName="В кошельке"    //Точное Имя Поля

        //Все Коэфициенты могут быть дробными
        var K_post=1;    //Кол-о баллов начисляемых за одно сообщение;
        var K_invites=11;    //Кол-о баллов начисляемых за число приглашенных на форум;
        var K=10;            //Коэффициент участия(Кол-о баллов за час пребывания на форуме
        var K_respect=3;    //Кол-о баллов начисляемых за один балл уважения;
        var K_positive=1;    //Кол-о баллов начисляемых за один балл выставленный данным юзером другим юзерам в уважение;

        if($(this).find(".pa-avatar").length){var L=".pa-avatar"}else var L=".pa-title"
        $(this).find(L).after('<li class="pa-fld11"><b>'+fldName+'</b>: 0</li>')

        var ss1=0,ss2=0,ss0=0,i=0,ss=0,s=0;
        if($(this).find(".pa-respect").length){ss2=$(this).find(".pa-respect").text();
        ss2=ss2.replace(/^[\s\S]+?([+-]*\d+)(?:[^\d]*?(-\d*).*)*/gim,'$1,$2').split(',');
        ss2=K_respect*(+ss2[0]+ +ss2[1]);}
        if($(this).find(".pa-positive").length){ss1=$(this).find(".pa-positive").text();
        ss1=ss1.replace(/^[\s\S]+?([+-]*\d+)(?:[^\d]*?(-\d*).*)*/gim,'$1,$2').split(',');
        ss1 = K_positive*(+ss1[0]+ +ss1[1]);}
        if($(this).find(".pa-invites").length){ss=$(this).find(".pa-invites").text(); ss=K_invites*parseInt(ss);}

        if($(this).find(".pa-posts").length)ss0=$(this).find(".pa-posts").text();
        ss0=K_post*parseInt(ss0.replace("Сообщений: ",""));
        if($(this).find(".pa-time-visit").length){var str=$(this).find(".pa-time-visit").text();str=str.replace("Не определено","0 минут");
        str=str.replace(" минуты","+");str=str.replace(" минуту","+");str=str.replace(" минут","+");
        str=str.replace(" часа","*60+");str=str.replace(" часов","*60+");str=str.replace(" час","*60+");
        str=str.replace(" день","*24*60+");str=str.replace(" дней","*24*60+");str=str.replace(" дня","*24*60+");
        str=str.replace(" месяцев","*(365/12)*24*60+");str=str.replace(" месяца","*(365/12)*24*60+");
        str=str.replace(" месяц","*(365/12)*24*60+");str=str.replace(/ /g,"");str=str.replace("Провеланафоруме:","");
        str=str.replace("Провелнафоруме:","");str+="0";var i=eval(str);}

        var s=$(this).find("li:not(.pa-fld11):contains('"+fldName+":')").remove().text();
        if(s=='')s=''+0;
        s=s.replace(fldName+": ","");s=parseFloat(s);s=Math.round((i/60)*K+ss0+ss1+ss2+s);
        str=$(this).find(".pa-fld11").html();str=str.replace(/:.*/ig,': '+s);$(this).find(".pa-fld11").html(str);

        ;})
        </script>

+1

3

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12
стоит

РОЛЕВЫЕ МАСКИ С ПОДДЕРЖКОЙ AJAX

Особенности скрипта:
- Взаимодействие с функционалом отправки и редактирования постов с помощью ajax.
- Предпросмотр аватара.
- Предустановленные маски (общий список для всех пользователей форума).
- Возможность ограничения доступа по группам.
- Цитирование и обращение по имени маски (опционально).
- Использование BB-кода в имени и статусе (опционально).
- Совместимость с тегами других скриптов ролевых масок (скрипт подхватит использованные ранее теги [NIC], [AVA], [STA], [SGN]).

Скрипт устанавливается в форму html-верх.

Код:
<!-- html-верх - Ролевые маски, (с) ForumD.ru, satsana, 2021 -->
<script type="text/javascript" src="https://forumstatic.ru/files/0017/b3/fc/40897.js"></script>
Код:
<script type="text/javascript">
  // Сюда мы будем добавлять настройки.
</script><!-- Ролевые маски - КОНЕЦ -->

1) Доступ только для определённых групп пользователей.

Код:
satRMgroup = [1,2];

По умолчанию функционал ролевых масок доступен всем участникам. Приведённый выше код сделает их доступными только для групп с номерами, указанными в квадратных скобках через запятую (в данном примере это администраторы и модераторы).

2) Использование BB-кода в никах и статусах.

Код:
satRMbb = 1;

По умолчанию BB-код в никах и статусах запрещён и будет удаляться при обработке мсок. Эта команда разрешит его использование.

3) Цитирование и обращение по реальному имени пользователя.
По умолчанию при цитировании сообщений с маской (а также при клике на изменённое имя) будет отображаться имя маски. Если вам по какой-то причине это неудобно, и вы хотели бы, чтобы отображалось имя пользователя, используйте вот такую команду:

Код:
satRMdquote = 1;

5) Изменение картинки кнопки "Ролевой маски" в форме ответа.

Код:
FORUM.set("editor.mask.img", "https://своя_картинка.png");

6) Изменение подписи кнопки "Ролевой маски" в форме ответа.

Код:
FORUM.set("editor.mask.name", "Смена имиджа");

7) Изменение расположения кнопки "Ролевой маски" в форме ответа.

Код:
FORUM.set("editor.mask.after", "#button-image");

Здесь нужно указать идентификатор кнопки, после которой должна встать кнопка "Ролевой маски". В приведённом примере она расположится после кнопки вставки изображений.

8) Доступность скрипта только в отдельных форумах.

Код:
satRMflist = [13,126];

В квадратных скобках указываются номера форумов через запятую.

+1

4

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12
Код:
<!-- пиар вход-->
<script type="text/javascript">
PiarNik="ник пиар аккаунта";
PiarPas="пароль пиар аккаунта";
var L="<div id=\"PR_loginDiv\" style=\"display:none;\">\
<form id=\"form_login\" name=\"login\" method=\"post\" action=\"login.php?action=in\" onsubmit=\"return check_form()\">\
<fieldset>\
<input type=\"hidden\" name=\"form_sent\" value=\"1\"/>\
<input type=\"text\" id=\"fld1\" name=\"req_username\" size=\"21\" maxlength=\"25\"/>\
<input type=\"text\" id=\"fld2\" name=\"req_password\" size=\"7\" maxlength=\"16\"/>\
<input type=\"submit\" class=\"button\" name=\"login\"/>\
</fieldset>\
</form>\
</div>\
<li id=\"navpiar\"><span id=spMyimg style=\"cursor:pointer;\"><a onclick=\"PiarIn()\">piar</a></span></li>";
if($("#navlogin").html()!=null){
$("#navlogin").after(L) //navlogin
$("#PR_loginDiv #fld1").val(PiarNik)
$("#PR_loginDiv #fld2").val(PiarPas)
function PiarIn () {$("#PR_loginDiv input[type='submit']").click();}
}
</script>
<!-- Конец -->

+1

5

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

"Форум существует", или динамический отсчет от любой даты

В HTML верх:

Код:
<!-- Код для Возраста форума -->
<style>
/*Cтиль контента*/
.Age_forForum {
  display:inline-block;
  font: normal normal 700 19px/normal Georgia; /* Шрифт */
  color:#83A7CE;               /* Цвет */
  text-shadow:1px 1px 1px rgba(0,0,0,0.9);  /* Тень букв */
  margin:-2px 8px 2px 8px;  /* Отступы */
}
.Age_forForum .Dig{  /* Стиль цифр */
  font-size: 24px;
  color: rgba(255,255,255,.7);
  text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}
.Age_forForum .Wrd{  /* Стиль дни, месяцы годы */
}

/*Позиционирование надписи, к примеру в Шапку(Код ниже выбрасываем, если должно стоять там где стоит)*/
.Age_forForum {
  z-index:1000;
  position:absolute;
  top:56px;
  margin-left:-140px;
}

</style>
<script type="text/javascript" src="https://forumstatic.ru/files/0013/61/e9/40733.js"></script>
<!--//END// Возрастa форума -->

В любое удобное-нужное  место (Но чтобы было ниже самого скрипта):

Код:
<div class="Age_forForum">Форум существует <img data-age_forForum="26.08.2006" src="/i/blank.gif" onload="this.click()"/>.</div>

+1

6

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

Оформление страницы переадресации
Структура style.css

Код:
/* ПЕРЕАДРЕСАЦИЯ */
#pun-redirect{padding: 14px; margin-top: 190px; margin-left: 200px;}
#pun-redirect *{border:0 none;}
#pun-redirect .main-title {display: none;}
#pun-redirect.punbb .info .container {left: 0; right: 0; margin-top: 14px!important; bottom: 0; height: 52px; margin: 10% auto; text-align: center; padding: 35px; color: #343d47;}
#pun-redirect, #pun-maint {margin: 11% 25%; width: 41%; float: none; text-align: center; background: url(своя подложка переадресации) no-repeat; background-position: center 0%; height : 149px; width: 427px;
  color: #fff!important;}  
#pun-redirect h1 span{color: #fff!important; margin-bottom:0px; margin-left: -3px; font-weight:bold; text-align: center; text-shadow: #801325 1px 1px!important;}
#pun-redirect h2 span{color: #fff!important; text-shadow: #801325 1px 1px!important;}


/* ЗАГОЛОВОК ПЕРЕАДРЕСАЦИИ ОТКЛЮЧЕН */
.punbb h1 span, .punbb h2 span, .punbb legend span {font-size: 1.1em;}
/* -------------КОНЕЦ-КОНЕЦ-КОНЕЦ -------------*/

+1

7

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

Анимированный фон

Код:
body {
/*Здесь изображение для анимации и сам цвет для фона, можно сделать несколько изображений*/
  background: #080a29 url(https://i.ibb.co/zxZk811/20.png);
  min-height: 300px;
  height: 100%;
/*время анимации*/
  -webkit-animation: star 140s linear infinite;
  -moz-animation: star 140s linear infinite;
  -o-animation: star 140s linear infinite;
  animation: star 140s linear infinite;
}
@keyframes star {
  0% {
    background-position: 0px 0px, 0px 0px, 0px 0px;
  }
  100% {
    background-position: 1985px 1338px;
  }
}
}

+1

8

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

хронология

Код:
[html]<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet"><style>
#chr0 {
--marg: auto; /* отступ от левого края */
--bgclr: #d8d8d8; /* цвет подложки */ 
--shp1: #52090b;  /* фон шапки */
--shc: #b9b3b3; /* текст шапки */
--shs: rgba(255,255,255,0.05); /* тень текста в шапке */
--epc: #7e8474; /* цвет ссылок простых */
--epa: #780d0e; /* активный эпизод */
--epz: #4d7551; /* завершенный эпизод */
}
#chr0 * {box-sizing: border-box;}
#chr0 {max-width: 700px; min-width: 470px; margin: 20px auto 20px var(--marg);
overflow:hidden; position:relative; display:block; padding-bottom:6px; background: var(--bgclr); border-radius:12px; font-family: Tahoma, Arial, sans-serif; font-size:11px;}
.shpk1 {position:relative; display:grid; grid-template-columns: 200px 1fr; grid-template-rows: auto; align-items: center; margin: 10px 0px 20px; padding: 14px 35px 14px 10px; background: var(--shp1); color: var(--shc);  text-shadow: 0 1px 6px var(--shs);}
.shpk1 img {object-fit:cover; object-position: 50% 50%; margin:auto; width:150px; height:60px; grid-row: 1 / 2; grid-column: 1 / 2;}
.shpk1 > ul {grid-row: 1 / 2; grid-column: 2 / 3;}
.shpk1 > ul li:nth-child(2) {padding-top:4px; font-style:italic; font-size:10px; font-family: Georgia, serif; letter-spacing:0.06em; opacity:0.5;}
#chr0 .shpk1:first-child {margin-top:0px;}
#chr0 p, p.epp {display:block; padding: 0 30px 26px !important;}
p.epp > em {display:block; padding: 4px 0; font-style:normal !important; font-size:11px; font-family: Georgia, Tahoma, serif; opacity:0.8;}
#chr0 a {color:var(--epc); text-decoration: none;}
#chr0 a:hover {filter:brightness(1.25);}
#chr0 .epp a.act {color: var(--epa);}
#chr0 .epp a.close {color: var(--epz);}
.epp a.close:before {content: '×'; margin-right:8px;}
.shpk1 > ul li:first-child, .epp > a {font-family: Oswald, Georgia, serif;}
.shpk1 > ul li:first-child {font-size:24px;}
.epp > a {font-size: 16px;}
</style><div id="chr0"><!--- START --->

  <!--- НАСТОЯЩЕЕ --->
  <div class="shpk1">
<img src="https://i.imgur.com/gTRbcHo.jpg" decoding="async">
  <ul>
  <li>Настоящее</li>
  <li>Here in November in this house of leaves we'll pray</li>
  </ul></div>

  <!--- ЭПИЗОДЫ --->

  <p class="epp">
  <a href="ссылка" class="act"> Активный эпизод </a>
  <em> Участник 1, Участник 2 </em>
описание эпизода, возможно, даже длинное
  </p>

  <p class="epp">
  <a href="ссылка" class="close"> Закрытый эпизод </a>
  <em> Участник 1, Участник 2 </em>
описание эпизода
  </p>

<!------------------------------------------>

<!--- ПРОШЛОЕ --->
  <div class="shpk1">
<img src="https://i.imgur.com/gTRbcHo.jpg" decoding="async">
  <ul>
  <li>Прошлое</li>
  <li>I'm haunted (by the lives that I have loved)</li>
  </ul></div>

  <!--- ЭПИЗОДЫ --->

  <p class="epp">
  <a href="ссылка" class="act"> Активный эпизод </a>
  <em> Участник 1, Участник 2 </em>
описание эпизода, возможно, даже длинное
  </p>

  <p class="epp">
  <a href="ссылка" class="close"> Закрытый эпизод </a>
  <em> Участник 1, Участник 2 </em>
описание эпизода
  </p>

<!------------------------------------------>

<!--- END ---></div><br>[/html]

Лента

<!--- НАСТОЯЩЕЕ --->
  <div class="shpk1">
<img src="https://i.imgur.com/NRLHm3M.jpg" decoding="async">
  <ul>
  <li>Настоящее</li>
  <li>Here in November in this house of leaves we'll pray</li>
  </ul></div>

Активный эпизод

<p class="epp">
  <a href="ссылка" class="act"> Активный эпизод </a>
  <em> Участник 1, Участник 2 </em>
описание эпизода, возможно, даже длинное
  </p>

Завершенный эпизод

<p class="epp">
  <a href="ссылка" class="close"> Закрытый эпизод </a>
  <em> Участник 1, Участник 2 </em>
описание эпизода
  </p>

В каждую ленту-"шапку" можно поставить свою индивидуальную картинку (обрезается и центрируется автоматически).

Заключайте текст в теги <p>...</p> ! Это даст вам отступ текста от края шаблона в случае, если вы не хотите использовать шаблон для хронологии, а просто для какой-то текстовой информации.

Можно ли сделать фон прозрачным? Можно! Вместо цвета (например, #d8d8d8) поставить transparent

Здесь у нас есть теги для активного и завершенного эпизодов - ссылки на них получаются разного цвета и с маркером. Можно пренебречь тегами (поставить просто ссылку без специальных классов). Описанием и участниками тоже можно пренебречь - останется только абзац и ссылка.

+1

9

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

Story of my Life

https://forumupload.ru/uploads/001b/9e/1d/2/69557.gif
SHIN RYUJIN

Вообще, по паспорту меня зовут Чхве Мэён, но близкие друзья знают, что лучше называть лисица Мэй или просто Мэй. Родилась я в Сеуле, в 2000 году, так что несложно догадаться, что сейчас мне 22 года. На жизнь я себе зарабатываю тем, что помогаю людям связаться с их умершим родственником, ибо я вижу призраков. Вы можете мне не поверить, но по происхождению я - кумихо, оборотень-лиса из без стаи. В свободное время ищу способы перестать видеть мертвых, а на любовном фронте меня может покорить кто угодно, главное что бы человек был хороший.

Life Starts Now

+1

10

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12
стоит

Сокрытие любого элемента форума

Код:
<style>
Элемент {display: none !important;}
</style>

Как применять скрытие/открытие к группам?

Теперь разберемся, что добавлять в наш код, чтобы прятать элемент от определенной группы или показывать элемент для определенной группы.

У нас будут получаться коды такого вида:

Код:
доп.селектор элемент {display: свойство;}

Вместо доп.селектора вставляем:
.isadmin - применит код только для группы админов
.ismoderator - применит код только для группы модераторов (и админов тоже)
.isuser - применит код для всех зарегистрированных пользователей
.isguest - применит код только для гостей
.gidX - вместо X ставим ID группы (можно посмотреть в админке или на странице юзерлиста по ссылке в браузере /admin_groups.php?edit_group=4). Этот код подействует на строго определенную группу.

Напоминаю, что что-то скрывать или открывать можно сразу пачкой, перечисляя элементы через запятую, например:

Код:
.ismoderator элемент,
.isguest элемент,
.gid6 элемент,
доп.селектор элемент {display: none;}

+1

11

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

[html]<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet"><style>
#chr0 {
--marg: auto; /* отступ от левого края */
--bgclr: #d8d8d8; /* цвет подложки */
--shp1: #52090b;  /* фон шапки */
--shc: #b9b3b3; /* текст шапки */
--shs: rgba(255,255,255,0.05); /* тень текста в шапке */
--epc: #7e8474; /* цвет ссылок простых */
--epa: #780d0e; /* активный эпизод */
--epz: #4d7551; /* завершенный эпизод */
}
#chr0 * {box-sizing: border-box;}
#chr0 {max-width: 700px; min-width: 470px; margin: 20px auto 20px var(--marg);
overflow:hidden; position:relative; display:block; padding-bottom:6px; background: var(--bgclr); border-radius:12px; font-family: Tahoma, Arial, sans-serif; font-size:11px;}
.shpk1 {position:relative; display:grid; grid-template-columns: 200px 1fr; grid-template-rows: auto; align-items: center; margin: 10px 0px 20px; padding: 14px 35px 14px 10px; background: var(--shp1); color: var(--shc);  text-shadow: 0 1px 6px var(--shs);}
.shpk1 img {object-fit:cover; object-position: 50% 50%; margin:auto; width:150px; height:60px; grid-row: 1 / 2; grid-column: 1 / 2;}
.shpk1 > ul {grid-row: 1 / 2; grid-column: 2 / 3;}
.shpk1 > ul li:nth-child(2) {padding-top:4px; font-style:italic; font-size:10px; font-family: Georgia, serif; letter-spacing:0.06em; opacity:0.5;}
#chr0 .shpk1:first-child {margin-top:0px;}
#chr0 p, p.epp {display:block; padding: 0 30px 26px !important;}
p.epp > em {display:block; padding: 4px 0; font-style:normal !important; font-size:11px; font-family: Georgia, Tahoma, serif; opacity:0.8;}
#chr0 a {color:var(--epc); text-decoration: none;}
#chr0 a:hover {filter:brightness(1.25);}
#chr0 .epp a.act {color: var(--epa);}
#chr0 .epp a.close {color: var(--epz);}
.epp a.close:before {content: '×'; margin-right:8px;}
.shpk1 > ul li:first-child, .epp > a {font-family: Oswald, Georgia, serif;}
.shpk1 > ul li:first-child {font-size:24px;}
.epp > a {font-size: 16px;}
</style><div id="chr0"><!--- START --->

  <!--- НАСТОЯЩЕЕ --->
  <div class="shpk1">
<img src="https://i.imgur.com/gTRbcHo.jpg" decoding="async">
  <ul>
  <li>Настоящее</li>
  <li>Here in November in this house of leaves we'll pray</li>
  </ul></div>

  <!--- ЭПИЗОДЫ --->

  <p class="epp">
  <a href="ссылка" class="act"> Активный эпизод </a>
  <em> Участник 1, Участник 2 </em>
описание эпизода, возможно, даже длинное
  </p>

  <p class="epp">
  <a href="ссылка" class="close"> Закрытый эпизод </a>
  <em> Участник 1, Участник 2 </em>
описание эпизода
  </p>

<!------------------------------------------>

<!--- ПРОШЛОЕ --->
  <div class="shpk1">
<img src="https://i.imgur.com/gTRbcHo.jpg" decoding="async">
  <ul>
  <li>Прошлое</li>
  <li>I'm haunted (by the lives that I have loved)</li>
  </ul></div>

  <!--- ЭПИЗОДЫ --->

  <p class="epp">
  <a href="ссылка" class="act"> Активный эпизод </a>
  <em> Участник 1, Участник 2 </em>
описание эпизода, возможно, даже длинное
  </p>

  <p class="epp">
  <a href="ссылка" class="close"> Закрытый эпизод </a>
  <em> Участник 1, Участник 2 </em>
описание эпизода
  </p>

<!------------------------------------------>

<!--- END ---></div><br>[/html]

0

12

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

[html]<!-- дух не знает, что это такое, если бы знал, что это такое, но дух не знает, что это такое -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

  <div class="gallean_wrap">
    <div class="gallean_first_wrap">
      <span>shadowsong</span>
      <em>Death, it's shadows, spreads its wings around me.</em>
    </div>
    <div class="gallean_second_wrap">
      <div class="gallean_scroll">
      <span class="header">long live death</span>
        <div>Человек, который носит имена рек, знает: он больше не такой, как остальные люди; некая сторона его внушающих ужас трудов навсегда изменила его; он никогда не сможет вернуться к прежней, простой и безболезненной жизни. Иногда это знание ранит так сильно, что он часами сидит один в темной комнате и оплакивает потерю самого себя. Кошмарно, знает он, когда так мало решаешь в своей собственной жизни, когда столь многое было предрешено еще до твоего рождения. Быть солдатом в армии крови и света, настолько тайной, что и речи не может быть о признании его успехов или неудач, даже о самом мимолетном контакте с братьями и сестрами по оружию — из-за опасности разоблачения.</div>
      </div>
    </div>
  </div>

<style>
/* css, который не знает, что он такое */
.gallean_wrap {
  --g-text-title: #FFFFFF; /* цвет шрифта на первом блоке */
  --g-text-accent: #EAD807;  /* цвет шрифта заголовка на выскальзывающем блоке */
  --g-base-text: #4E4E4E; /* цвет шрифта основного текста на выскальзывающем блоке */
  --g-text-shadow: 1px 1px 4px rgba(44, 46, 51, 0.56);  /* тень текста */
  --g-padding: 30px;  /* отступы от краев */
  --g-bg: #FDF8F8;  /* фон выскальзывающего блока */
  --g-box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.14), 4px 4px 10px rgba(0, 0, 0, 0.25);  /* тень выскальзывающего блока */
  --g-calc: 100% - 60px;  /* считает ширину или высоту с учетом отступов от краев. в данном случае отступы указаны 30px, сле-но указано 100% - 60px. если указываете отступы 20px, соответственно от 100% отнимаете 40px. математика sssука %) */
}

* {
  scrollbar-width: thin;
}

.gallean_wrap {
  width: 600px; /* ширина */
  height: 300px;  /* высота */
  overflow: hidden;
  position: relative;
  margin: auto;
  background: url(https://i.imgur.com/HQm6vZp.jpg);  /* фон картинкой */
  background-size: cover;
  box-sizing: border-box;
  padding: var(--g-padding)
}

.gallean_first_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--g-text-title);
  text-shadow: var(--g-text-shadow);
  letter-spacing: .1em;
  transition: all 2s cubic-bezier(0.72, -0.01, 0, 1);
}

.gallean_first_wrap span {
  font: 900 normal 70px inter;  /* шрифт shadowsong */
}

.gallean_first_wrap em {
  font: 500 normal 13px inter !important;  /* шрифт Death, it's shadows, spreads its wings around me. */
}

.gallean_second_wrap {
  background: var(--g-bg);
  box-shadow: var(--g-box-shadow);
  position: absolute;
  width: calc(var(--g-calc));
  height: calc(var(--g-calc));
  top: 30px;
  left: 30px;
  box-sizing: border-box;
  padding: var(--g-padding);
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1s cubic-bezier(0.72, -0.01, 0, 1) .05s;
  transform: scale(2);
  opacity: 0
}

.gallean_scroll {
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}

.gallean_second_wrap .header {
  display: block;
  color: var(--g-text-accent);
  font: 900 normal 40px inter; /* шрифт long live death */
  text-transform: lowercase;
}

.gallean_scroll div {
  color: var(--g-base-text);
  text-align: justify;
  font: 500 12px/150% inter;  /* шрифт основного текста*/
}

.gallean_wrap:hover .gallean_first_wrap {
  transform: scale(0);
  filter: blur(40px)
}

.gallean_wrap:hover .gallean_second_wrap {
transform: scale(1);
  opacity: 1;
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s;
}
</style>[/html]

0

13

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

[html]<link href="https://fonts.googleapis.com/css2?family=Alegreya+SC:wght@400;500;700&display=swap" rel="stylesheet"><style>#ship5 {
--s5m: auto; /* отступ от левого края, auto - для центровки*/
--s5bg: #000; /* фон общий */
--s5bp: #ccc; /* фон блока описания */
--s5c: #1b1b1b; /* текст в блоке описания */
--s5h: #ccc; /* текст заголовка-названия */
--s5r: #616161; /* рамка */
}
#ship5 * {box-sizing:border-box;} #ship5 {margin: auto auto auto var(--s5m); display:flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; background: var(--s5bg); color: var(--s5c); width:500px; min-height:100px;} /* shipovnik */
.stx3 {box-sizing: border-box; width: 100%; text-align: center; background: var(--s5bg);}
.stx3 > p {margin: 40px 50px 20px !important; padding: 20px !important; background: var(--s5bp); color: var(--s5c); outline: 1px solid var(--s5r); outline-offset: 12px;}
.stx3 > h5 {width: auto; margin: auto 34px; padding:12px 10px; position: relative; line-height: 90%; text-transform: uppercase; transform: translate(0%, 50%); outline: 1px solid var(--s5r); outline-offset: 8px; border: 1px solid var(--s5r); box-shadow: 0 0 8px var(--s5bg); background: var(--s5bg); font-weight:400; font-family: 'Alegreya SC', Georgia, serif; font-size: 18px; color: var(--s5h);}
.shimg2 {width: 100%; height: 250px; background-size: cover; background: 50% 50% no-repeat;}</style>

  <div id="ship5"><div class="stx3"><p><!-- ТЕКСТ -->

Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам. Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.

  <!-- КОНЕЦ ТЕКСТА -->
  </p>

  <h5>Случайное название эпизода</h5></div>

  <div class="shimg2" style="background-image: url(https://i.imgur.com/rgOz7to.jpg);"></div></div>
[/html]

0

14

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

[html]<style>#ship2 {display:block; position: relative; width:500px; height:500px; margin:auto auto auto 2em; box-sizing:border-box; background: 50% 50% no-repeat #e8e8e8; background-size:cover; overflow:hidden;} /* shipovnik */
.shipfl {width:100%; box-sizing:border-box; background: #000; padding: 40px 70px 0px; transform: translateY(-160px); transition: transform 0.8s ease 0.2s;}
#ship2:hover .shipfl {transform: translateY(0px); transition: transform 0.8s ease 0.2s;}
.shipfl > p {overflow:auto; padding: 0 6px !important; height:120px; line-height:120% !important; text-align: center; color:#848a8f;}
.shipfl::after {position: absolute; bottom: -60px; margin-left: -70px; display:block; content:""; width:0; height:0; border-right: 250px solid transparent; border-left: 250px solid transparent; border-top: 60px solid #000; transition: all 0.8s ease 0.2s;}
#ship2:hover .shipfl::after {bottom: -100px; border-top: 100px solid #000; transition: all 0.8s ease 0.2s;}
.shipfl > p::-webkit-scrollbar {width:5px; height:5px; background-color: transparent;}
.shipfl > p::-webkit-scrollbar-thumb {background: #232323; box-shadow: inset 0 0 0 2px #000;}
.shipniz {display:block; position: absolute; bottom:0px; width: inherit; box-sizing: border-box; margin: auto auto 30px auto; text-align: right; padding: 20px; background: rgb(0 0 0 / 95%); color:#7d7d7d; font-style: italic;}

/* НАЗВАНИЕ ЭПИЗОДА */
.shipniz > em {display:block; margin: auto 0px auto auto; padding-bottom:10px;
  font-family: Playfair Display, Georgia, serif;
  font-size: 20px;
  letter-spacing:2px;
  color: #98aabd;
}
</style>

        <div id="ship2" style="background-image: url(https://i.ibb.co/JQH4HFf/vadim-sadovski … splash.jpg);">
        <div class="shipfl"><p>

Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам. Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам. Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.

        </p></div><div class="shipniz">

<em>Пафосное, но не длинное название</em>
Персонаж_1, Персонаж_2 // дата, год

        </div></div>
[/html]

0

15

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

[html]<link href="https://fonts.googleapis.com/css2?family=Oranienbaum&display=swap" rel="stylesheet">
<style>#ship1 {
--sh1mr: auto; /* отступ слева, auto - для отцетровки */
--sh1w1: 500px; /* ширина карточки */
--sh1bg: #000; /* фон карточки */
--sh1br: #949494; /* цвет текста и рамки */
--sh1cl1: #d6a271; /* цвет заголовка */
}
#ship1 {display:block; padding:40px; margin: 1.2em auto 1.2em var(--sh1mr); background:var(--sh1bg); outline: 1px solid var(--sh1bg); outline-offset:10px; width:var(--sh1w1);} /* shipovnik */
#ship1, #ship1 * { box-sizing:border-box;}
/* АВАТАРКИ КАРТИНКИ */
.shiav {width: 70px; height: 70px; margin: auto 8% auto auto;
display:inline-block; border-radius:50%; background:var(--sh1bg); border: 1px solid var(--sh1br); transform: translate(0%, -50%); transition: all 0.3s ease; background-position:50% 50%; background-size:cover;}
.shiav:last-child {margin-right:0px;}
.shiav:hover {transition: all 0.3s ease; transform: scale(1.2) translate(0%, -40%);}
/* БЛОК АВАТАРОК */
.shiprs {display:block; border-top: 1px solid var(--sh1br); text-align:center; margin: 35px auto auto;}
/***   ЗАГОЛОВОК   ***/
#ship1 > em {display:block; margin: -10px auto 16px auto; text-align:center; font-style: normal !important; letter-spacing:1px; color:var(--sh1cl1); font-family: Oranienbaum, Georgia, sans-serif; font-size: 32px;}
/***   БЛОК ТЕКСТА   ***/
#ship1 > .btext {padding: 0 50px; font-size:12px; color: var(--sh1br); font-family: Arial, Tahoma, sans-serif; text-align:justify;}
/***   ПЕРСОНАЖИ   ***/
.btext > p {margin:auto !important; padding-bottom:14px !important; text-align:center; font-style:normal; font-size:11px !important; opacity: 0.65;}
</style>

  <div id="ship1"><div class="shiprs">
  <!--   ЗДЕСЬ АВАТАРЫ   -->
<div class="shiav" style="background-image:url(https://i.ibb.co/VHPhdg0/mikasa.jpg)"></div>
<div class="shiav" style="background-image:url(https://i.ibb.co/M8xDyrG/eren.jpg)"></div>
<div class="shiav" style="background-image:url(https://i.ibb.co/bH6cVrS/armin.jpg)"></div>
  </div>

  <em> Название Эпизода </em>

  <div class="btext"><p>
Персонаж_1   —   Персонаж_2   —   Персонаж_3
  </p>

Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.

  </div></div>
[/html]

0

16

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

[html]<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap" rel="stylesheet"><style>/* shipovnik */
#ship13, #ship13h {
  --bgw: 700px; /* максимальная ширина главного блока */
  --bg1: #ececec; /* главный фон */
  --clr1: #2f5865;   /* ХРОНОЛОГИЯ цвет названия */
  --clr2: #969696;   /* цвет строки под хронологией */
  --clr3: #000; /* цвет рамки */
  --clr4: rgba(161,190,199, 0.35);   /* полупрозрачная цифра */
  --clr5: #116b96;   /* цвет ссылок */
  margin: auto; /* отступы от краев */
}

#ship13 {display:block; width:auto; box-sizing:border-box; padding:24px; max-width: var(--bgw); background: var(--bg1);}
#ship13 *, #ship13h * {box-sizing:border-box;}
/*** ХРОНОЛОГИЯ название ***/
#ship13h {display:block; box-sizing:border-box; width:auto; max-width: var(--bgw); padding: 14px 0; background:var(--bg1); color: var(--clr1); text-align:center; font-weight:600; font-size:24px; font-family: 'Playfair Display', Georgia, serif;}
#ship13h em {display:block; padding-top:4px; font-style:normal !important; color: var(--clr2); font-weight:400; font-family: Arial, sans-serif; font-size:10px;}
/* цифра */
.boxf {display:block; position:relative; z-index:3; width: 50%; min-height:50px; background:transparent; border-right: 1px solid var(--clr3);}
.boxf:nth-child(2n) {display: block; position: relative; margin-top: -40px; margin-bottom: -40px; margin-left: calc(50% - 1px); width: 50%; min-height: 50px; border-right: 0px none transparent; border-left: 1px solid var(--clr3);}
/* категория */
.boxcat {display:block; padding:0 10px 4px 10px; text-align:left; border-bottom: 1px solid var(--clr3);
text-transform:uppercase; font-weight:600; font-size:16px; font-family: 'Playfair Display', Georgia, serif;}
.boxf:nth-child(2n) .boxcat {text-align:right;}
.boxcat::after {display: block; content: ""; height: 6px; width: 6px; float: right; margin: 23px -13px auto auto; background: var(--clr3); border-radius: 50%;}
.boxf:nth-child(2n) .boxcat::after {float: left; margin: 22px auto auto -13px;}
.boxf:last-of-type {margin-bottom:0.3em;}
/* цифры */
.numbrow {display: block; margin: auto auto -46px 30px !important; z-index: 2; width: auto; background: transparent; text-align: left; font-style: normal !important; font-size: 76px; height: 76px; line-height: 76px; letter-spacing: -3px; font-family: 'Yeseva One', Arial, sans-serif; color: var(--clr4);}
.boxf:nth-child(2n) .numbrow {text-align: right; margin: auto 25px -52px auto !important;}
/* текстовый блок */
.textf {display:block; padding:20px; line-height:120%; text-align:justify; font-weight: 400; font-size: 12px; font-family:'PT Sans', Tahoma, sans-serif;}
.textf > p {margin:0px !important; padding: 0 0 16px 0 !important; line-height: 110% !important;}
.textf > p:last-child {padding-bottom:0px !important;}
#ship13 a {color: var(--clr5); text-decoration: none;}
#ship13 a:hover {text-decoration: underline;}</style>

<div id="ship13h">Хронология
<em>цитата, музыкальный трек или многозначительное замечание</em></div>
<div id="ship13"><!--- НАЧАЛО БЛОКОВ --->

<!--- ЯНВАРЬ --->
<div class="boxf"><em class="numbrow">01</em><div class="boxcat">Январь</div>
<div class="textf">
<p><a href="ссылка">Я - название эпизода</a> - а здесь небольшое его описание</p>
<p><a href="ссылка">"Второй эпизод"</a> - и разнообразные пояснения к нему</p>
<p><a href="ссылка"><s>Печальный незакрытый эпизод</s></a> - слова прощания</p>
</div></div>

<!--- ФЕВРАЛЬ --->
<div class="boxf"><em class="numbrow">02</em><div class="boxcat">Февраль</div>
<div class="textf">
Блок 2.
<p><a href="ссылка">Эпизод 1</a> - а здесь небольшое его описание</p>
<p><a href="ссылка">Эпизод 2</a> - и разнообразные пояснения к нему</p>
<p><a href="ссылка">Эпизод 3</a> - слова прощания</p>
</div></div>

<!--- МАРТ --->
<div class="boxf"><em class="numbrow">03</em><div class="boxcat">Март</div>
<div class="textf">
  <p>Блок 3 - в отдельных тегах P. Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.</p>
</div></div>

<!--- АПРЕЛЬ --->
<div class="boxf"><em class="numbrow">04</em><div class="boxcat">Апрель</div>
<div class="textf">
  <p>Блок 4.1. И некоторый текст внутри него.</p>
  <p>Блок 4.2. Следующий текст, может содержать почти что угодно, а не только сылку на эпизоды.</p>
</div></div>

<!--- КОНЕЦ БЛОКОВ ---></div>[/html]

0

17

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

[html]<link href="https://fonts.googleapis.com/css2?family=Oranienbaum&family=PT+Sans&display=swap" rel="stylesheet"><style>
.ship20 {
--bgsw: 800px;  /*  максимальная ширина блока */
--bgs1: #0f0f0f;  /* фон общий*/
--sct1: #c0c0c0;  /*  цвет общего текста  */
--sct1a: #69becc;   /* цвет ccылок */
--szt: 1em;  /*  размер шрифта  */

--pad2: 24px;  /* отступ между эпизодами */
--pad1: 18px;  /* отступ текста слева */

--pwt: 46px;  /* ширина левого блока */
--bgs2: #1a666c; /* цвет границы*/

--bgs3: #0a343b; /* цвет ленты */
--sct3: #d6d6d6;  /* текст ленты */

--sct2: #767676;  /* цвет даты и участников */

--bgsa: #69becc;  /*  активный эпизод  */
--bgsz: #0a3a41;  /*  завершенный эпизод  */
--bgsnz: #1b1b1b; /*  незавершенный эпизод  */
}

.ship20 * {box-sizing: border-box; line-height: 140% !important;}
.ship20 {margin: auto 40px auto 0px; max-width: var(--bgsw); background: var(--bgs1); color: var(--sct1); font-size: var(--szt);}
.ship20 a {color: var(--sct1a) !important;}
.ship20 a:hover {filter: brightness(1.2);}
.ship20 p {margin: 0px auto 0px calc(var(--pad1) + var(--pwt)) !important; padding: 0 var(--pad2) var(--pad2) 0 !important; position: relative; text-align: justify;}
.ship20 p:before {content:' '; display: block; position: absolute; margin-left: calc(0px - var(--pad1) - var(--pwt)); height: 100%; width: var(--pwt); border-right: 1px solid var(--bgs2); }
/**  эпизод  **/
.ship20 p > a:first-child {display: block; padding: 4px 0 4px 0; font-size: 14px; font-weight: 400; font-style: italic; font-family: Georgia, Times New Roman, serif;}
/**  маркеры  shipovnik **/
.ship20 p > a.ep_a:before, .ship20 p > a.ep_z:before, .ship20 p > a.ep_nz:before {content: ''; display:block; position:absolute; transform: translate(-50%, 50%); width: 12px; height: 12px; margin-left: calc(0px - var(--pad1) - var(--pwt) / 2); border-radius: 50%;}
.ship20 p > a.ep_a:before {background: var(--bgsa);}
.ship20 p > a.ep_z:before {background: var(--bgsz);}
.ship20 p > a.ep_nz:before {background: var(--bgsnz);}
/**  дата и участники  **/
.ship20 em {display: block; padding: 0 0 6px 0; font-style: normal !important; color: var(--sct2); font-size: 11px; font-family: Tahoma, sans-serif;}
/**  год или эпоха  **/
.ship20 ht0 {display:block; position:relative; padding: 7px 30px; margin: 0px auto; color: var(--sct3); background: var(--bgs3); font-size: 15px; text-transform: uppercase; font-family: 'Oranienbaum', Tahoma, serif;}
.ship20 ht0:after {content:''; display: block; position: absolute; top: 0px; right: -29px; width: 30px; height: 100%; clip-path: polygon(0% 0%, 75% 0%, 30% 50%, 75% 100%, 0% 100%); background: var(--bgs3);}
.ship20 ht0 + p > a:first-child {padding-top: var(--pad2);}</style>
<div class="ship20">

<!--- START --->

<!-----  ГОД ИЛИ ЭПОХА  ----->
<ht0>Год или эпоха. Любой период</ht0>

<p><a class="ep_a" href="#">Активный эпизод</a>
<em>22.11.2022   //   Участник 1 + Участник 2 + ...</em>
Мы все еще живем бок о бок с вами. <b>Мы</b> также травим <i>себя</i> сигаретами <s>и алкоголем</s>, ловим такси по пути на работу, валимся с ног от <u>усталости</u> по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.
</p>

<p><a class="ep_z" href="#">Завершенный эпизод</a>
<em>17.03.1756   //   Участник 1 + Участник 2 + Какой-то никнейм</em>
...
</p>

<p><a class="ep_nz" href="#">Незавершенный</a>
<em>25.08.1756   //   Участник 1 + Участник 2 + Какой-то никнейм</em>
Описание эпизода
</p>

<!-----  ГОД ИЛИ ЭПОХА  ----->
<ht0>2075. Год, когда что-то случилось</ht0>

  <p><a class="ep_a" href="#">Активный эпизод</a>
  <em> дата   //   Участники </em>
Описание эпизода
  </p>

  <p><a class="ep_z" href="#">Завершенный эпизод</a>
  <em> дата   //   Участники </em>
Описание эпизода
  </p>

  <p><a class="ep_nz" href="#">Незавершенный эпизод</a>
  <em> дата   //   Участники </em>
Описание эпизода
  </p>

<!--- END ---></div>[/html]

0

18

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

[html]<!--вещий дух-->
<div class="spiritbox">
  <div class="spirit_pic"><img src="https://i.imgur.com/7THunWU.gif"></div>
  <div class="spirit_title">вещий дух
<div class="spirit_subtitle">собирает дизайны из говна и палок</div></div>
  <div class="spirit_txt"><div>
Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
</div>
</div>
</div>

<style>
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700|Play:400,700&subset=cyrillic');

.spiritbox {width: 245px;
height: 130px;
overflow: hidden;
position: relative;
display: block;
margin: auto}

.spirit_pic {width: 245px;
height: 130px;
transition: all 0.7s ease-in-out 0s}

.spirit_pic img {
max-height: 130px;}

.spirit_title {width: 200px;
position: absolute;
text-align: center;
margin-top:-90px;
font-family: oswald;
font-size: 16px;
font-weight: 700;
margin-left: 23px;
color: #999;
text-shadow: 1px 1px 1px #000;
text-transform: lowercase;
transition: all 0.7s ease-in-out 0s;
background: radial-gradient(ellipse at center, rgba(0,0,0,.8) 30%, rgba(255,255,255,0) 70%);
height: 55px}

.spirit_subtitle {box-shadow: 0 -2px 0 0 #999;
text-align: center;
font-family: play;
font-size: 8px;
font-weight: 200;
color: #dfdfdf;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
transition: all 0.3s ease-in-out 0s;
padding-top: 2px;
margin-top: 5px}

.spirit_txt {width: 210px;
height: 90px;
text-align: justify;
font-family: tahoma;
font-size: 10px;
margin-top: 0px;
position: absolute;
background-color: rgba(255,255,255,0.8);
line-height: 11px;
margin-left: 18px;
opacity: 0;
transition: all 0.7s ease-in-out 0s;}

.spirit_txt div {
overflow-y: auto;
padding-right: 3px;
  margin: 7px 7px;
  height: 74px
}

.spirit_txt div::-webkit-scrollbar {
width: 6px;
height:6px;
background-color: transparent;}

.spirit_txt div::-webkit-scrollbar-thumb {
  background-color:#333;
  width:6px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255,0.1) inset;
}

.spiritbox:hover .spirit_pic {filter: grayscale(100%) blur(2px);
transform: scale(1.2)}

.spiritbox:hover .spirit_title {margin-top: -170px}
.spiritbox:hover .spirit_txt {margin-top: -110px;
opacity: 1}</style>[/html]

+1

19

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

[html]<div id="spiritworkroom">
  <div class="spiritfirst">
    <div class="spiritfirstpic"><img src="https://i.imgur.com/5uipK4n.png"></div>
    <div class="spiritfirsttitle">от вещего духа
      <subtitle>однако, дратути</subtitle></div>
    <div class="spiritfirsttext"><subtitle>да, этот мужик смотрит вам в душу хд</subtitle>
      <about>шел оформлять тему в графику, но споткнулся о раздел с дизайнами. к такому меня жизнь не готовила. прежде перебивался заказами от знакомых через знакомых, но сейчас решил оформиться, так сказать, официально. дизайнами и вот этим вот всем занимаюсь столько, сколько себя на ролевых помню, в связи с чем по факту могу как минимум в плане кодов исполнить практически любое пожелание. графически тоже не отстаю и в процессе работы стараюсь передать дизайном атмосферу и направленность проекта. это, собственно, всё, что я хотел сказать в приветствии.</about></div>
  </div>
 
  <div class="spiritsecond">
<div class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1">информация</label>

    <input id="tab2" type="radio" name="tabs">
    <label for="tab2">вопросник</label>

    <input id="tab3" type="radio" name="tabs">
    <label for="tab3">портфолио</label>

    <section id="content-tab1">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.

Maecenas pellentesque eros vitae elementum condimentum. Sed nec orci est. Vestibulum a ex nec nisl euismod varius. Etiam bibendum nibh id tortor vehicula malesuada volutpat ut augue. Integer sodales, leo eget molestie finibus, nibh diam laoreet dui, quis efficitur lectus lacus suscipit mi. Aliquam finibus et lorem congue imperdiet. Curabitur porta dolor sit amet eros semper viverra. Fusce aliquet, ligula quis mattis bibendum, nulla eros vulputate tortor, eget gravida erat tortor eget nulla. In arcu nisl, elementum sed tristique id, elementum eu odio. Duis imperdiet metus ac justo tempus vehicula et a sem. Vestibulum et volutpat libero. Cras vestibulum diam sit amet pulvinar accumsan. Donec sed ultrices libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Aenean sed ex arcu.
        </p>
    </section> 
    <section id="content-tab2">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.

        </p>
    </section>
    <section id="content-tab3">
        <p>
Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
    </p>
    </section>   
</div>
  </div>
</div>
<div class="clearer"></div>

<style>
/* код от вещего духа */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700');

#spiritworkroom {width: 610px;
height: 520px;
background: #fefefe;
margin:auto;
box-shadow: 0 0 0 1px rgba(0,0,0,.2)}

.spiritfirst {float: left;
  margin: 10px;
width: 190px;
height: 490px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
overflow: hidden;
position: relative;
border: 5px solid #fefefe}

.spiritfirstpic {margin:auto;
width: 190px;
height: 490px;}

.spiritfirsttitle {font-family: playfair display;
font-weight: 900;
width: 190px;
color: #dfdfdf;
text-shadow: 1px 1px 0px #000;
font-size: 18px;
height: 73px;
margin: -80px 0 0 0px;
z-index: 10;
position: relative;
padding-left: 10px;
background: rgba(0,0,0,.65);
transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s}
.spiritfirsttitle subtitle {box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
  font-family: pt sans;
font-weight: normal;
color: #cecece;
text-shadow: 1px 1px 0px #333;
font-size: 9px;
display: block;
text-align: right;
letter-spacing: 1px;
margin-top:4px;
margin-right: 20px}
.spiritfirsttitle:before {background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));
content: "";
display: block;
position: absolute;
width: 100%;
height: 50px;
top: -50px;
margin-left: -10px}
.spiritfirsttext {
z-index:8;
position: relative;
background: rgba(0,0,0,.65);
width: 190px;
margin: 0px 0 0 0px;
font-family: pt sans;
font-size: 10px;
text-align: justify;
padding: 1px 0px;
  color: #efefef;}
.spiritfirsttext about {margin: 10px 15px;
display: block;
box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
padding-top:10px}
.spiritfirsttext:after {background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
content: "";
display: block;
position: absolute;
width: 100%;
height: 100px;
bottom: -100px;
margin-left: 0px}
.spiritfirsttext subtitle {
  text-align: center;
  display: block;
  width: 190px;
  font-size: 9px;
  font-family: pt sans;
  color: #999;
  opacity: 0;
  transform: translate(0,400px);
  transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s
}

.spiritfirst:hover .spiritfirsttitle {margin-top: -530px;
}
.spiritfirst:hover subtitle {opacity:1;
  transform: translate(0,0px)}

.spiritsecond {background: #fefefe;
width: 389px;
  margin: 10px;
  height: 500px;
  margin-top:9px;
border: 1px solid rgba(0,0,0,.2);
  position: absolute;
  margin-left: 211px
}

.tabs {
padding: 0px;
margin: 0 auto;
}

.tabs>section {
display: none;
padding: 10px;
  height: 440px;
  overflow-y: auto;
  margin: 5px;
  font-family: arial;
  font-size: 11px;
  text-align: justify
}
.tabs>section>p {
margin: 0 0 5px;
line-height: 1.5;
color: #383838;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}

@keyframes fadeIn {
from {
    transform: translate(-400px,0);
    transform-origin: 50% 0%;
}
to {
    transform: translate(0px,0);
}
}

.tabs>input {
display: none;
position: absolute;
}

.tabs>label:first-of-type {box-shadow: none}
.tabs>label {
display: inline-grid;
margin: 0 -3px 0px;
padding: 10px 0px;
font-weight: 600;
text-align: center;
color: #aaa;
background: #fefefe;
  width: 131px;
  border: solid rgba(0,0,0,.2);
  border-width: 0px 0px 1px 0px;
  left: 3px;
  top: 0px;
  position: relative;
  font-family: pt sans;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: lighter;
  box-shadow: 1px 0 0 0 rgba(0,0,0,.2) inset
}
.tabs>label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #dfdfdf;
left:3px;
bottom:3px;
transform: scaleX(0);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

.tabs>label:hover:after {transform: scaleX(1);
background: #888;}
.tabs>label:hover {
color: #888;
cursor: pointer;
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}

.tabs>input:checked+label {
color: #555;
  background: #f1f1f1;
}
.tabs>input:checked+label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #888;
left:3px;
bottom:3px;
transform: scaleX(1);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
display: block;
}
</style>[/html]

0

20

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

cкрипт и код ссылок навигации выпадающим окном

HTML-верх

Код:
<! -- скрипт навигации выпадающим окном [основа скрипт вкладок https://imagiart.ru/, переработка вещего духа] --> 
<script type="text/javascript" src="https://forumstatic.ru/files/001a/18/bd/96460.js"></script>
<div class="spirit-navigation" id="navig-batton" title="навигация">полезные ссылки</div>
<div id="navigblock" style="display:none"><div class="sslka">
<!-- важные ссылки -->
<a href="ссылка">название</a> 
<a href="ссылка">название</a> 
<a href="ссылка">название</a> 
</div></div>

В окно своего стиля (лучше в верхнее), либо в html-верх в тегах <style></style>

Код:
/* КОД ССЫЛОК НАВИГАЦИИ ОТ ВЕЩЕГО ДУХА */
/* настройка кнопки, может быть текстом */
.spirit-navigation {
background: url(ссылка на картинку) no-repeat;
height:36px;
width: 246px;
top:172px;
margin-left: 331px;
display:inline-block;
cursor: pointer; 
font-size: 0px;
color: transparent;
position: absolute;
transition: all 0.3s ease-in-out 0s;
    }

/* вид кнопки после клика по ней */
.spirit-navigation.spirit-navigation_hover{
background: url(ссылка на картинку) no-repeat
}

/* настройка позиции выпадающего по клику окна и его ширина */
#navigblock {width: 200px;
margin-left: 355px;
position: absolute;
top: 205px;
z-index: 999;
}

/* настройка блока ссылок, цвет фона, тени, прозрачность, отступы */
.sslka {display: block;
opacity: .95;
padding: 5px;
background: rgba(0,0,0,.9);
box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset, 1px 2px 2px 1px rgba(0,0,0,.4);
border-radius: 2px
}

/* настройка вида самой ссылки, ширина, цвет, фон, шрифты и так далее */
#pun .sslka a {
background: #231e1e;
white-space: nowrap;
margin: 5px auto;
border-radius: 2px;
text-align: center;
transition: all 0.3s linear 0s;
display: block;
padding: 4px;
letter-spacing: 1px;
text-transform: uppercase;
width: 175px;
color: #a29480;
text-shadow: 0px 0px 1px rgba(0,0,0,1);
font-family: arial;
font-size: 11px;
box-shadow: 0 0 1px 1px #111 inset, 0 2px 7px 2px rgba(255,255,255,.04) inset
}

/* ссылка при наведении */
#pun .sslka a:hover {
background-color:#231813 !important;
opacity: .9;
transform: scale(.8);
color: #847964
}

0

21

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

[html]<link href="https://fonts.googleapis.com/css?family=Ruda:400,500,700&display=swap&subset=cyrillic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rouge+Script&display=swap" rel="stylesheet">

<!-- хтмл черти-чего от вещего духа-->

<div class="prusheen-some" style="background: url(https://forumstatic.ru/files/001a/ae/03/64471.jpg)">
  <div class="prusheen-inner">
    <div class="prusheen-text">
      <span>Shadowsong</span>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis ipsum purus, ut facilisis eros blandit eu. Quisque fringilla iaculis pulvinar. Vivamus odio turpis, rhoncus eget nulla rhoncus, tempus ultrices dui. Maecenas aliquam rhoncus leo, ac mollis est egestas id. In vel elementum nulla. Quisque pharetra dapibus purus, non eleifend elit mollis id. Aliquam vel ligula nec nisl porta efficitur. Mauris vitae aliquet ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras imperdiet eu neque in finibus. Ut sed ligula urna. Sed euismod nibh neque, vitae porta odio imperdiet sagittis.

Cras facilisis dui sodales orci fermentum, vitae volutpat leo faucibus. In non dolor eros. Sed facilisis, metus at egestas rhoncus, lorem ex hendrerit libero, quis pretium risus orci eget velit. Etiam euismod, lacus et venenatis facilisis, purus purus efficitur dui, a placerat ante dui id est.
      </div></div>
  </div>
</div>
 
<style>
/* css черти чего от вещего духа*/

.prusheen-some {
width: 500px;
height: 600px;
margin: auto;
position: relative;
}

.prusheen-inner {
background: #f5f5f5; /* цвет белой подложки */
width:500px;
height: 300px;
position: absolute;
bottom: -1px;
left: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 50%);
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text {
width: 350px;
margin: auto;
font: 500 10px/18px ruda; /* шрифт текста в большом блоке */
text-align: justify;
color: #1e1e1e; /* цвет шрифта */
margin-top: 150px;
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text > div {
column-count: 2; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}

.prusheen-text > span {
display: block;
text-align: center;
font: 40px rouge script; /* шрифт текста заголовка */
height: 60px;
position: relative;
margin-bottom: 25px}

.prusheen-text > span:after {
content: "";
background: #555; /* цвет полосочки разделителя */
display: block;
height: 1px;
width: 100px;
position: absolute;
left:35%;
bottom: 0}

.prusheen-some:hover .prusheen-inner {
height: 450px;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 0%);}
.prusheen-some:hover .prusheen-text {margin-top: 40px}
.prusheen-some:hover .prusheen-text > div {opacity: 1;
transition: all 1s linear .5s}
</style>[/html]

0

22

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
.fenris_tems_box {
  background: #f0f1f5;
  width: 550px;
  height: auto;
  margin: auto;
  padding: 0px 30px 30px;
}
.fenris_tems_box h6 {
  color: #f0f1f5;
  font: 700 40px arimo;
  background: #394143;
  margin: 0;
  text-transform: uppercase;
  padding: 30px 15px 15px;
  margin-bottom: 30px;
}

.fenris_tems_img {
  overflow: hidden;
  height: 60px;
  position: relative;
  margin-bottom: 30px;
}

.fenris_tems_img img {
  width: 100%;
  filter: grayscale(100%)
}

.fenris_tems_img:after {
  content: "";
  position: absolute;
  background: rgba(0,0,0,.7);
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%
}

.fenris_tems_text {
  text-align: justify;
  font: 400 italic 11px/18px merriweather;
}
</style>
 
<div class="fenris_tems_box">
    <h6>title name</h6>
        <div class="fenris_tems_img">
               <img src="https://forumstatic.ru/files/0019/ca/89/26029.png">
        </div>
    <div class="fenris_tems_text">
      Он не знал, что это за городок, потому что на дороге не было никаких знаков с названием. Указатель – сосновую доску с выцветшей от времени краской – еще лет двадцать назад сбил один дядька, который решил оприходовать за одну ночь сразу двоих любовниц. Его голова покоилась на груди Водки, а рука – на бедре у Виски, когда он утратил контроль над своим автомобилем. Указатель с названием города до сих пор валялся в нескольких футах от дороги, в густых зарослях пуэрарии, покоричневевший от крови, которая давным-давно высохла.
    </div>
</div>
  [/html]

0

23

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

[html]<!-- мироописание от духа -->
<script type="text/javascript" src="https://forumstatic.ru/files/001b/36/d6/94544.js"></script>
<div class="world-container">

  <div class="world-block">
  <div class="header">
    <span>история</span>
  </div>
    <img src="https://i.ibb.co/cFHBz68/Untitled-1-copy-03.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">— свернуть блок —</div>
  <div>
      <h5>Header text</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
<h5>Header text</h5>
<p>Nulla ut leo mi. Quisque sagittis ligula ante, ac efficitur dolor accumsan vel. Quisque at mi felis. Cras congue felis at erat interdum posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam sodales nunc lacus, ultricies lobortis mauris sodales at. Praesent mauris lorem, suscipit id dignissim ut, dapibus eget lacus. Vestibulum fermentum aliquet mauris id dictum. Aliquam fringilla erat suscipit dui aliquam, eget fringilla tellus pretium. Nullam varius maximus ante, non aliquam tortor sollicitudin ut. Nulla tincidunt hendrerit egestas. Nunc turpis nibh, fermentum ut blandit dapibus, ultricies sit amet nunc.<p>

<p>Sed dictum purus vel venenatis hendrerit. Cras mollis tincidunt metus, eu euismod massa euismod at. Cras egestas elit non mauris vehicula consectetur. Fusce finibus varius lectus maximus tincidunt. Fusce vehicula tristique purus id posuere. In feugiat justo sit amet ligula ornare maximus ac vitae nisl. Aenean in viverra mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi vehicula sem a elit malesuada, quis faucibus elit dignissim. Nulla quis erat vitae eros faucibus gravida ac congue magna. Cras tortor lectus, pharetra ac metus ac, euismod imperdiet libero. Phasellus eros ante, scelerisque in ultrices quis, scelerisque eu ipsum.</p>

<p>Vestibulum eu blandit risus. Donec rhoncus tristique eros, ullamcorper malesuada turpis laoreet vitae. Nullam in sollicitudin dui. Morbi et hendrerit purus. Donec in ullamcorper erat. Curabitur facilisis sagittis neque, eget tristique erat posuere a. Etiam et quam nec nunc cursus fermentum. Mauris rhoncus euismod risus, et vestibulum quam sollicitudin quis. Vivamus feugiat finibus porttitor. Mauris vel sem mauris. Nunc cursus eleifend dolor id semper. Maecenas consectetur nibh felis, sed commodo nisl fringilla at. Vestibulum condimentum ultrices massa, in lobortis urna. Aliquam et dolor quam. Mauris neque mauris, condimentum sit amet dui sit amet, sagittis faucibus magna.</p>

<p>Cras porttitor vel mi vitae dapibus. Mauris ultricies ante nec nulla luctus, quis varius tellus consectetur. Pellentesque ac tellus sed urna faucibus viverra vitae a libero. Maecenas pellentesque blandit ipsum ac laoreet. Aenean mattis ut ligula vel vulputate. Aliquam consequat vitae mi a vehicula. Nulla ullamcorper est velit, ut molestie purus molestie et. Vivamus nisl felis, tempus eget eros non, mollis efficitur odio. Nullam tempus ligula at rutrum volutpat. </p>

     </div></div>

  <div class="world-block">
  <div class="header">
    <span>религия и боги</span>
    </div>
   <img src="https://i.ibb.co/PzDPppW/Untitled-1-copy-12.png">
   </div>
     <div class="info2 closed">     
     <div class="close-btn">— свернуть блок —</div>
       <div>
<h5>Header text 2</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
     </div></div>

  <div class="world-block">
    <div class="header">
    <span>решения стража</span>
    </div>
    <img src="https://i.ibb.co/NKgbMnM/Untitled-1-copy-05.png"></div>
  <div class="info3 closed">
         <div class="close-btn">— свернуть блок —</div>
    <div>
<h5>Header text 3</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
     </div></div>

  <div class="world-block">
        <div class="header">
    <span>решения хоука</span>
    </div>
    <img src="https://i.ibb.co/XjTwW91/Untitled-1-copy-08.png"></div>
  <div class="info4 closed">
         <div class="close-btn">— свернуть блок —</div>
    <div>
<h5>Header text 4</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
     </div></div>

  <div class="world-block">
        <div class="header">
    <span>решения инквизитора</span>
    </div>
    <img src="https://i.ibb.co/DGVdvtn/Untitled-1-copy-10.png"></div>
  <div class="info5 closed">
         <div class="close-btn">— свернуть блок —</div>
    <div>
<h5>Header text 5</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
     </div></div>

   <div class="world-block">
     <div class="header">
    <span>расы</span>
    </div>
     <img src="https://i.ibb.co/HpGjmWR/Untitled-1-copy-14.png"></div>
  <div class="info6 closed">
         <div class="close-btn">— свернуть блок —</div>
    <div>
<h5>Header text 6</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
     </div></div>

  <div class="world-block">
     <div class="header">
    <span>круги магов</span>
    </div>
    <img src="https://i.ibb.co/QCXxjdw/Untitled-1-copy-17.png"></div>
  <div class="info7 closed">
         <div class="close-btn">— свернуть блок —</div>
    <div>
<h5>Header text 7</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
     </div></div>

</div>

<style>
/* css мироописания от духа */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&family=Rubik:wght@500;600;800;900&display=swap');

.world-container {
  column-gap: 4px;  /* отступ между колонками */
  margin: 0px auto 20px auto;
  column-count: 2; /* количество столбцов*/
  width: 584px;  /* ширина контейнера с блоками*/
  position: relative;
  text-align: center;
}

.world-block {
  margin: 1px 0px;  /* нижний и верхний отступ между блоками*/
  padding: 0px;
  display: inline-block;
  line-height: 0;
  width: 290px;  /* ширина блоков */
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all .9s cubic-bezier(.63,.34,.09,.96) 0s;
}

.world-block .header {
  position: absolute;
background: linear-gradient(to bottom, rgba(41,154,11,0) 0%, rgba(0,0,0,0.29) 18%,rgba(0,0,0,0.48) 39%,rgba(0,0,0,0.69) 74%,rgba(0,0,0,0.85) 100%);
  color: #fefefe;  /* цвет шрифта заголовков на картинках */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content:  flex-end;
  align-items: center;
  font: 800 22px/150% 'Rubik';  /* шрифт заголовков на картинках */
  text-transform: uppercase;
  z-index: 1;
}

.world-block:hover {
  filter: grayscale(100%)
}

.world-block img {
    transition: all .3s cubic-bezier(.63,.34,.09,.96) 0s;
}

.world-block:hover img {
  transform: scale(1.1);
  filter: blur(1px)
}

.world-block .header span {
  display: block;
  margin-bottom: 20px;
  text-align: center
}

.closed{
  background: #fefefe;  /* фон выпадающего описания */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  padding: 25px;
  text-align: left;
  display: none;
  box-shadow: 0 0 0 9px #fefefe inset, 0 0 0 10px rgba(0,0,0,.1) inset  /* обводка */
}

.closed > div:not(.close-btn) {
  overflow-y: auto;
  height: calc(100% - 35px);
  padding-right: 5px;
}

.close-btn {
  background: rgba(0,0,0,.04);  /* фон кнопки закрытия */
  border: 1px solid rgba(0,0,0,.06);  /* бордер кнопки закрытия */
  height: 15px;
  text-transform: uppercase;
  font: 300 10px/15px merriweather;  /* шрифт кнопки закрытия*/
  text-align: center;
  margin-bottom: 20px;
  cursor: pointer;
  letter-spacing: 2px
}

.closed h5 {
  font: 700 20px merriweather;  /* шрифт заголовков описания */
  margin: 20px 0px 10px;
  position: relative;
  padding-left: 45px
}

.closed h5:before {
  content: "";
  height: 2px;
  width: 30px;
  background: rgba(0,0,0,.7);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%)
}

.closed h5:first-child {
  margin-top: 0
}

.closed em {
  font: 300 italic 11px merriweather;  /* шрифт мини цитаток */
  display: block;
  border-right: 5px solid rgba(0,0,0,.1);  /* правый бордер мини цитаток*/
  padding-right: 10px;
  text-align: right;
  margin: 10px 0;
}
</style>[/html]

0

24

  • Автор: SsangYong
  • Администратор
  • SsangYong
  • В кошельке: 3
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 38
  • Уважение: +13
  • Позитив: +12
  • Провел на форуме:
    1 час 41 минуту
  • Последний визит:
    2022-07-20 17:50:12

https://imagiart.ru/viewtopic.php?id=14 … 4#p1215404
простая анкета от вещего духа

https://imagiart.ru/viewtopic.php?id=14 … 4#p1221283
Гибкое (боксы линков сами выставятся по высоте\ширине контейнера ссылок в зависимости от количества текста) оформление описания подфорумов текст + ссылки.

0

25

  • Автор: покрышка
  • Администратор
  • покрышка
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 40
  • Уважение: +24
  • Позитив: +17
  • Провел на форуме:
    17 часов 44 минуты
  • Последний визит:
    2022-09-16 16:06:41

SsangYong, https://imagiart.ru/viewtopic.php?id=14 … 4#p1269055
тут прикольно мб для личной страницы с онекциями пойдет?

или вот это https://imagiart.ru/viewtopic.php?id=14 … 4#p1210708
но это можно в коллекцию прям где карточки будут жить

+1

26

  • Автор: покрышка
  • Администратор
  • покрышка
  • Зарегистрирован: 2022-06-28
  • Приглашений: 0
  • Сообщений: 40
  • Уважение: +24
  • Позитив: +17
  • Провел на форуме:
    17 часов 44 минуты
  • Последний визит:
    2022-09-16 16:06:41

шаблон эпизода мне нравится по дизу если подогнать к нашему дизу, будет классно

0

Страница: 1

Вы здесь » mercbenz » сервис » много разного и непонятного

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