HEAR THE CALL HEAR THE CALL HEAR THE CALL HEAR THE CALL HEAR THE CALL HEAR THE CALL HEAR THE CALL HEAR THE CALL HEAR THE CALL HEAR THE CALL

НАВИГАЦИЯ ПО ФОРУМУ:

гостевая • сюжет • о городе
о зове • расы • персонажи
внешности • акции
Годфри голоден. Город полный кошмарных тварей не встречает туристов
с распростёртыми объятиями. В Годфри приезжают прятать
своих бесов или же прятаться от них.
В Годфри приезжают те, кого манит его Зов.
Прислушайся, может быть, он зовёт и тебя.
pythia • daniel • jack
NC-21 | Городская мистика, хоррор | США | ноябрь 2019

Down In The Forest

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

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

Вы здесь » Down In The Forest » do it and do it again » Полезные коды

Полезные коды

Страница: 1

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

1

  • Автор: Call
  • Администратор
  • Call
  • Сообщений: 287
  • Уважение: +326

Эта тема собирает в себе всё, что поможет игрокам сделать красивые посты, хронологии и прочее, если им интересно возиться с кодами. Разместить интересные коды в этой теме может любой желающий, но по определённой форме:

Демонстрация кода
Код

Это значит, что у игроков должна быть возможность скопировать код себе, а не только полюбоваться.
Важный нюанс! На нашем форуме не работает тэг [html], вместо него работает заключённый code[theloop]. То есть, перед всем вашим ХТМЛьным кодом вы ставиле ЛУП, а затем всё это вместе заключаете в КОД. Тогда всё работает.

0

2

Код:
[theloop]<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: #979797; /* главный фон */
  --clr1: #800000;   /* ХРОНОЛОГИЯ цвет названия */
  --clr2: #000000;   /* цвет строки под хронологией */
  --clr3: #000; /* цвет рамки */
  --clr4: rgba(255,255,255, 0.20);   /* полупрозрачная цифра */
  --clr5: #941e13;   /* цвет ссылок */
  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">1998</em><div class="boxcat">Октябрь</div>
<div class="textf">
<p><a href="https://weallscream.rusff.me/">Название эпизода</a> - Либо список участников, либо описание происходящих событий. Главное - не писать слишком много</p>
<p><a href="ссылка">Эпизод</a> - описание</p>
<p><a href="ссылка">Эпизод</a> - описание</p>

</div></div>


<!--- БЛОК ЭПИЗОДОВ В МЕСЯЦЕ --->
<div class="boxf"><em class="numbrow">2016</em><div class="boxcat">Месяц</div>
<div class="textf">
<p><a href="ссылка">Эпизод</a> - описание</p>

</div></div>


<!--- БЛОК ЭПИЗОДОВ В МЕСЯЦЕ --->
<div class="boxf"><em class="numbrow">2017</em><div class="boxcat">Месяц</div>
<div class="textf">
  <p><a href="ссылка">Эпизод</a> - описание</p>
</div></div>


<!--- БЛОК ЭПИЗОДОВ В МЕСЯЦЕ --->
<div class="boxf"><em class="numbrow">2019</em><div class="boxcat">Месяц</div>
<div class="textf">
  <p><a href="ссылка">Эпизод</a> - описание</p>
</div></div>


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

Скопируйте то, что находится в цитировании и поместите в код. Тогда он заработает.
В самом начале кода есть цвета рамок, ссылок и всего остального, вы можете настроить палитру для себя, главное, меняйте только значения, а не запятые)

[theloop]<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: #979797; /* главный фон */
  --clr1: #800000;   /* ХРОНОЛОГИЯ цвет названия */
  --clr2: #000000;   /* цвет строки под хронологией */
  --clr3: #000; /* цвет рамки */
  --clr4: rgba(255,255,255, 0.20);   /* полупрозрачная цифра */
  --clr5: #941e13;   /* цвет ссылок */
  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">1998</em><div class="boxcat">Октябрь</div>
<div class="textf">
<p><a href="https://weallscream.rusff.me/">Название эпизода</a> - Либо список участников, либо описание происходящих событий. Главное - не писать слишком много</p>
<p><a href="ссылка">Эпизод</a> - описание</p>
<p><a href="ссылка">Эпизод</a> - описание</p>

</div></div>

<!--- БЛОК ЭПИЗОДОВ В МЕСЯЦЕ --->
<div class="boxf"><em class="numbrow">2016</em><div class="boxcat">Месяц</div>
<div class="textf">
<p><a href="ссылка">Эпизод</a> - описание</p>

</div></div>

<!--- БЛОК ЭПИЗОДОВ В МЕСЯЦЕ --->
<div class="boxf"><em class="numbrow">2017</em><div class="boxcat">Месяц</div>
<div class="textf">
  <p><a href="ссылка">Эпизод</a> - описание</p>
</div></div>

<!--- БЛОК ЭПИЗОДОВ В МЕСЯЦЕ --->
<div class="boxf"><em class="numbrow">2019</em><div class="boxcat">Месяц</div>
<div class="textf">
  <p><a href="ссылка">Эпизод</a> - описание</p>
</div></div>

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

0

Страница: 1

Вы здесь » Down In The Forest » do it and do it again » Полезные коды

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