Birds in shadow

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

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

Вы здесь » Birds in shadow » Платные услуги » [дизайн + шаблоны] [отпуск!] Шиповничья алхимия

[дизайн + шаблоны] [отпуск!] Шиповничья алхимия

Страница: 1

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

1

  • Автор: Religion
  • Очень длинный статус для проверки его _макс_ длины
  • Religion
  • Уважение: [+1/-1]
  • Позитив: [+2/-0]
  • Сообщений: 169
  • Зарегистрирован: 12-01-2022
  • Предупреждение: II
  • Последний визит:
    Вчера 14:59

[html]<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0012/ee/e9/63323.css" />
<style>#vultbase {max-width: 900px;}</style>
<center><div class="novost"><div class="novh1">« Да, зажрался »</div><div class="novh2">обязательная плашка-предупреждение</div></div>  <div class="novost"><div class="novh1">« Отпуск »</div><div class="novh2">Потому что иногда надо</div></div></center>
<br>
<div id="vultbase"><div class="tabset">
  <!-- Tab 1 -->
  <input type="radio" name="tabset" id="tab1" aria-controls="domper" checked>
  <label for="tab1">Кто здесь?</label>
  <!-- Tab 2 -->
  <input type="radio" name="tabset" id="tab2" aria-controls="domplot">
  <label for="tab2">Порядок работы</label>
  <!-- Tab 3 -->
  <input type="radio" name="tabset" id="tab3" aria-controls="domeps">
  <label for="tab3">Сколько?</label>
    <!-- Tab 4 -->
  <input type="radio" name="tabset" id="tab4" aria-controls="domsklad">
  <label for="tab4">Как забрать</label>
      <!-- Tab 5 -->
  <input type="radio" name="tabset" id="tab5" aria-controls="domship">
  <label for="tab5">HTML-шаблоны</label>
 
<div class="tab-panels">
   <section id="domper" class="tab-panel">

Привет! Это Шиповник / Виля / Wilhelm.<br>Связаться со мной можно через ЛС или telegram: @VillerA
<div class="vulth1">Что я делаю</div>
Создаю несколько однотипные дизайны, полные рюшечек и завитушек. Пожалуйста, посмотрите примеры и решите, нужно ли вам такое.
Экспериментирую редко. Сам скрипты не пишу, использую общедоступные с техподдержки. Мобильных версий пока еще не делаю.

<div class="vulth1">Немного условий</div>
Дизайн - это <b>не гарант</b> притока игроков!<br><br>
Не беру предоплаты, но если вы пропадаете или отказываетесь от уже разработанного дизайна, то я оставляю за собой право использовать готовую работу по своему усмотрению (с частичным изменением, если использовано что-то специфичное): разобрать на части, доработать и выставить на продажу.<br><br>
Стараюсь использовать стоковые изображения и личные зарисовки. Многострадальные игрушки от "Алавар" я не режу на части, т.е. у меня все попроще в визуальном плане (:<br><br>
Спокойно вносите изменения в уже приобретенный дизайн, но не используйте мою структуру для коммерческих работ. Вам действительно нужны не свои, а чужие ошибки в коде?

   </section>
   <section id="domplot" class="tab-panel">
     <div class="vu-row">
<!--- НАБРОСОК --->
<div class="vu-col"><div class="vu-item">
<a href="http://images.vfl.ru/ii/1585637335/53cea2a4/30057512.jpg"><img class="domov" src="http://images.vfl.ru/ii/1585637261/e847e5d1/30057505.jpg"></a>
<em>  I.  Набросок</em>
<i>быстрый эскиз</i><br><br>
Ищем общую форму дизайна, обсуждаем концепт, определяемся с ключевой информацией. Набросок может быть разной степени детализации.
</div></div>

<!--- ФОРМЫ --->
<div class="vu-col"><div class="vu-item">
<a href="http://images.vfl.ru/ii/1585637530/60c07f10/30057534.jpg"><img class="domov" src="http://images.vfl.ru/ii/1585637492/6936b270/30057530.jpg"></a>
<em>  II.  Формы</em>
<i>Первые шаги в верстке</i><br><br>
Набросок обретает форму. Примеряем цвета, определяемся с размерами и окраской элементов.
</div></div>

<!--- ТЕКСТУРЫ --->
<div class="vu-col"><div class="vu-item">
<a href="http://images.vfl.ru/ii/1585637563/45af102a/30057537.jpg"><img class="domov" src="http://images.vfl.ru/ii/1585637627/6670b4d9/30057552.jpg"></a>
<em>  III.  Текстура</em>
<i>базовый дизайн</i><br><br>
Формы обретают текстуру. Определяемся с основными полотнами дизайна - удобно ли читать текст на подложке, не слишком ли контрастен фон и пр.
</div></div>

<!--- ДЕТАЛИ --->
<div class="vu-col"><div class="vu-item">
<a href="http://images.vfl.ru/ii/1585637712/ccbf4bd3/30057564.jpg"><img class="domov" src="http://images.vfl.ru/ii/1585637686/55c4a19b/30057562.jpg"></a>
<em>  IV.  Детали</em>
<i>узоры, украшения, дополнительные элементы</i><br><br>
Украшаем дизайн. Завитки, блики, дополнительные изображения и элементы - все это располагается и шлифуется на финальном этапе.
</div></div>
     </div>
Но порой все может выглядеть и так: <a href="https://i.imgur.com/ZR9kbTr.gif">< gif ></a>
   </section>
   <section id="domeps" class="tab-panel" style="text-align:left;">
<div class="vulth1" style="padding-top:10px;">По цене</a></div>
<table><tr><td width=20%><b>Стандарт</b></td><td>--- р. Классический набор. Html-оформление для заглавных сообщений обсуждается отдельно.
<br><br></td></tr><tr><td>
<b>Тестовый</b></td><td>
--- р. Самый простой дизайн без детальной проработки для форумов-тестов.
</td></tr></table>
Перевод на карту альфа-банка, qiwi, Ю-money, PayPal. Напоминаю, что при переводе может взиматься комиссия.
<div class="vulth1">По времени</a></div>
В среднем - <b>2 недели</b>. Сроки могут сдвигаться в ту или иную сторону, но если вы не потеряетесь, то будете об этом знать.
   </section>
   <section id="domsklad" class="tab-panel">
<div class="vulth1" style="padding-top:10px;">ВАЖНО</div>
Я практически никогда не высылаю весь макет в PSD или PDF-формате. Только формы для некоторых элементов, если без них не обойтись.
<div class="vulth1">"Под ключ"</a></div>
Мне выдается временный аккаунт с правами администратора и я самостоятельно устанавливаю дизайн, наполняю форум нужными скриптами и осуществляю первичную настройку.
<div class="vulth1">Просто отдайте нам код</a></div>
Я высылаю вам в ЛС или на почту архив с кодами CSS, HTML, картинками, скриптами и небольшими рекомендациями по установке.
   </section>

   <section id="domship" class="tab-panel">
<div id="shipshapk">
  <div class="shiblk">
    <a href="https://i.ibb.co/R76HbKc/shipovnik-chrono1.jpg"><shimg style="background-image:url(https://i.ibb.co/R76HbKc/shipovnik-chrono1.jpg);"></shimg></a>
    <ship> <a href="/viewtopic.php?pid=2042202#p2042202">Хронология 1</a><br>
     небольшие блоки вдоль вертикальной оси</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/3m0Qf6y/shipovnik-chrono2.jpg"><shimg style="background-image:url(https://i.ibb.co/3m0Qf6y/shipovnik-chrono2.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2055466#p2055466">Хронология 2</a><br>
    Еще одна хронология, с картинкой сбоку</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/g9f3nN9/shipovnik-chrono4.jpg"><shimg style="background-image:url(https://i.ibb.co/g9f3nN9/shipovnik-chrono4.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2109459#p2109459">Хронология 3</a><br>
    С боковыми индикаторами</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/Z1SjRbz/shipovnik-char01.jpg"><shimg style="background-image:url(https://i.ibb.co/Z1SjRbz/shipovnik-char01.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2052476#p2052476">Relations</a><br>
    Табличка для заполнения развернутых "отношений"</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/qR6b30w/shipovnik-char02.jpg"><shimg style="background-image:url(https://i.ibb.co/qR6b30w/shipovnik-char02.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2066770#p2066770">Relations [circle]</a><br>
    Табличка для заполнения развернутых "отношений". 2 варианта: со столбцами и строками.</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/0CM2HRf/shipovnik-char04.jpg"><shimg style="background-image:url(https://i.ibb.co/0CM2HRf/shipovnik-char04.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2071654#p2071654">Relations [rectangle]</a><br>
    Табличка для заполнения "отношений" или списка персонажей.</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/b371BQ1/shipovnik-char05.jpg"><shimg style="background-image:url(https://i.ibb.co/b371BQ1/shipovnik-char05.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2075661#p2075661">Relations [photo]</a><br>
    Табличка для заполнения "отношений" или списка персонажей.</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/fFzSkZj/shipovnik-char06.jpg"><shimg style="background-image:url(https://i.ibb.co/fFzSkZj/shipovnik-char06.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2099558#p2099558">Relations [Cat!]</a><br>
    Табличка с усиками</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/SNSg6PD/shipovnik-char07.jpg"><shimg style="background-image:url(https://i.ibb.co/SNSg6PD/shipovnik-char07.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2105055#p2105055">Relations [Color Space]</a><br>
    Цветные блоки с текстом внутри</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/tmyBG65/shipovnik-epic01.jpg"><shimg style="background-image:url(https://i.ibb.co/tmyBG65/shipovnik-epic01.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2042203#p2042203">Phobia</a><br>
    Простой черно-белый блок "описание + название"
    </ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/sPRJc57/shipovnik-epic02.jpg"><shimg style="background-image:url(https://i.ibb.co/sPRJc57/shipovnik-epic02.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2042204#p2042204">Twilight</a><br>
    Блок с ромбом посередине</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/LJHzzS2/shipovnik-epic05.jpg"><shimg style="background-image:url(https://i.ibb.co/LJHzzS2/shipovnik-epic05.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2042209#p2042209">Lighthouse</a><br>
    Шаблон с выпадающим сверху "флагом" при наведении</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/xHvzZFp/shipovnik-epic03.jpg"><shimg style="background-image:url(https://i.ibb.co/xHvzZFp/shipovnik-epic03.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2042205#p2042205">Not Broken</a><br>
    Небольшая карточка эпизода с неоновым заголовком и обрезанной иллюстрацией</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/XykzVck/shipovnik-epic04.jpg"><shimg style="background-image:url(https://i.ibb.co/XykzVck/shipovnik-epic04.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2042206#p2042206">Sky Map</a><br>
    Околофэнтезийная карточка персонажа с обрезанным портретом</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/7231w97/shipovnik-epic06.jpg"><shimg style="background-image:url(https://i.ibb.co/7231w97/shipovnik-epic06.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2042211#p2042211">Fragile</a><br>
    Блок с круглыми иконками, увеличивающимися при наведении</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/q5t0dBb/shipovnik-epic07.jpg"><shimg style="background-image:url(https://i.ibb.co/q5t0dBb/shipovnik-epic07.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2042212#p2042212">Silencio</a><br>
    Простой шаблон с названием внизу и обрезанной иллюстрацией</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.imgur.com/U2NLEe0.jpg"><shimg style="background-image:url(https://i.imgur.com/U2NLEe0.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=1866268#p1866268">Tutorial: рамка</a><br>
    Как нарисовать простую рамку для форума</ship>
  </div>
  <div class="shiblk">
    <a href="https://images.vfl.ru/ii/1557147956/be14dbde/26437746.jpg"><shimg style="background-image:url(https://images.vfl.ru/ii/1557147956/be1 … 437746.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=1820327#p1820327">Дизайн: Черепушка</a><br>
    Бесплатный простенький дизайн для тестового форума. Уже стоит на кодах</ship>
  </div>
  <div class="shiblk">
    <a href="https://imgur.com/I7cO61V"><shimg style="background-image:url(https://i.ibb.co/pX4fSfq/ship-shapka.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=1950806#p1950806">Tutorial: Дизайн</a><br>
    Бесплатный дизайн и разбор CSS-кода для самостоятельной сборки.</ship>
  </div>
</div>
   </section>
  </div>
 
</div></div>[/html]

Примеры готовых дизайнов
Подпись автора

:confused:

https://forumstatic.ru/files/0017/b4/09/11712.jpg

https://forumavatars.ru/img/avatars/000b/09/4f/18650-1600694306.png

0

2

  • Автор: Religion
  • Очень длинный статус для проверки его _макс_ длины
  • Religion
  • Уважение: [+1/-1]
  • Позитив: [+2/-0]
  • Сообщений: 169
  • Зарегистрирован: 12-01-2022
  • Предупреждение: II
  • Последний визит:
    Вчера 14:59


ХРОНОЛОГИЯ
html-шаблон для хронологии/отношений и иной информации

  • Ширина блока - измените 700px в строке [  --bgw  ], если необходимо "сжать" хронологию. Поставьте auto, чтобы растянуть по всей ширине.

  • Отступы от краев - если хронология "уплывает" куда-то за пределы окна, то измените первый margin: auto; на, например,  margin: auto 1em; - это задаст конкретный отступ от правого и левого края.

  • Заменить цвет фона - ищите #ececec в начале css-кода:  [  --bg1  ] (transparent - для прозрачности)

  • Цвет "Хронологии" - замените #2f5865 здесь: [  --clr1  ]

  • Цвет строки под "Хронологией" - замените #969696 тут: [  --clr2  ]

  • Цвет цифр - полупрозрачный. Пользуйтесь форматом rgba и измените rgba(161,190,199, 0.35) в строке: [  --clr4  ]

  • Цвет ссылок - замените #116b96 тут: [  --clr5  ]

  • Шрифт Хронологии - ищите в блоке [  #ship13h  ] и для подписи - в [  #ship13h em  ]

  • Шрифт цифр - [  .numbrow  ]

  • Шрифт названия месяцев - [  .boxcat  ]

  • Шрифт в текстовых блоках - [  textf  ]

Штука бестолковая, но забавная. Кто хочет приспособить себе куда-нибудь - берите, перекрашивайте, только не выдавайте за свое, пожалуйста.

Суть:
Блоки с одинаковым содержимым, отличие лишь в мелочах. Каждому четному блоку присваиваем эти самые отличия.
Ну, да, наверняка это все можно было сделать через какой-нибудь флекс, но флекс частенько говорит мне "выкуси" - и перекраивает все по-своему. Поэтому - так.

https://i.ibb.co/R76HbKc/shipovnik-chrono1.jpg

Подпись автора

:confused:

https://forumstatic.ru/files/0017/b4/09/11712.jpg

https://forumavatars.ru/img/avatars/000b/09/4f/18650-1600694306.png

0

3

  • Автор: Religion
  • Очень длинный статус для проверки его _макс_ длины
  • Religion
  • Уважение: [+1/-1]
  • Позитив: [+2/-0]
  • Сообщений: 169
  • Зарегистрирован: 12-01-2022
  • Предупреждение: II
  • Последний визит:
    Вчера 14:59

[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"><!--- НАЧАЛО БЛОКОВ --->

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

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

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

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

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

Подпись автора

:confused:

https://forumstatic.ru/files/0017/b4/09/11712.jpg

https://forumavatars.ru/img/avatars/000b/09/4f/18650-1600694306.png

0

4

  • Автор: Religion
  • Очень длинный статус для проверки его _макс_ длины
  • Religion
  • Уважение: [+1/-1]
  • Позитив: [+2/-0]
  • Сообщений: 169
  • Зарегистрирован: 12-01-2022
  • Предупреждение: II
  • Последний визит:
    Вчера 14:59

[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]

Подпись автора

:confused:

https://forumstatic.ru/files/0017/b4/09/11712.jpg

https://forumavatars.ru/img/avatars/000b/09/4f/18650-1600694306.png

0

Страница: 1

Вы здесь » Birds in shadow » Платные услуги » [дизайн + шаблоны] [отпуск!] Шиповничья алхимия

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