Важные сведения:

Жанр: технофентези, стимпанк. Авторский мир. Мастеринг: смешанный - личные эпизоды и квесты с мастером.
Рейтинг: NC-17.

2318 год эры Врат, месяцы Кха-Вэлит и Вайриса

К слову: Ключ Врат нельзя потрогать, он неосязаем.

К слову: В мире продолжается поиск Ключей Врат. Кто найдет - того и тапки.

К слову: Капитан пиратов Бельфегор наводит ужас на Конкордию.

К слову: Пророчество предсказывает появление нефилимов, что может обернуться чем угодно...

К слову: Рано или поздно Вы умрете.

амс
Новости:

23.12.23 Радио-эфир завтра (24.12.23) в 18:00! Ждём всех желающих!


14.11.23 Запись на участие в Тайном Санте


12.11.23 Новый выпуск газеты Хронос Механикус, определены Победители Викторины


11.11.23 Опрос об организации Тайного Санты


10.11.23 Трон Допросов с Томайо Торховым


05.11.23 Новый выпуск газеты Хронос Механикус


05.11.2023 Завершается жуткая неделя, подведение итогов, награждение. Добавлена вкладка «Достижения» в профили игроков.


15.10.2023 Добавлен крафтинг артефактов. Вы все еще сомневаетесь, что вам нужны шестеренки?

07.10.2023 Добавлен новый выпуск газеты Хронос Механикус. Пароград предупреждает, чтение желтой прессы может быть опасно для вашего спокойствия.

03.10.2023 Добавлена новая раса Тифлинги. Добавлено три новые организации: РПО, Клан О`Гадли, Городская Стража Парограда


24.09.2023 Выложен первый выпуск нашей газеты Хронос Механикус. Читать всем)


23.09.2023 Добавлен раздел Школа Ролевиков, где будут выкладываться статьи для игроков и мастеров. Так же скоро организуем площадку для тестовых игр, если кто-то хочет попробовать себя в качестве ГМ или сыграть тренировочный бой с Мастером на кубиках.


17.09.23 Выложили несколько квестов и акций от АМС. Разбирайте, как горячие пирожки.


16.09.23 Мы дописали Организации. Теперь игроки могут выбрать себе организацию для персонажа, что даст направляющую для сюжета и квестов. При желании можно возглавить ту или иную организацию. По всем вопросам обращаться к Тэмплару.


13.09.23 Мы открылись! Полным ходом дописываем: Сетка ролей, Организации, Бестиарий, Акции от АМС. Пока можете расположиться и изучить всю эту огромную матчасть.


Пароград

Объявление

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

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


Вы здесь » Пароград » Справочная » Для красивого оформления эпизодов


Для красивого оформления эпизодов

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

1

[html]<style>#ship6 {
--s6pad: auto;
    --s6g1: #000;
    --s6g2: #009c88;
    --s6bd: #cac6b6;
    --s6h: #d0ab84;
    --s6p: #0ac2bb;
    --s6t: #9e9988;
}
#ship6 * {box-sizing:border-box;}
#ship6 {display: block; box-sizing: border-box; max-width: 650px; margin: auto auto auto var(--s6pad); padding: 20px; background: linear-gradient(0deg, var(--s6g1) 0%, var(--s6g2) 100%); background-color:var(--s6g1);}
.shipdia {margin: 10px auto 30px; height: 350px; width: 350px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background-size: cover; background-position: 50% 50%;}
.stx4 {background: transparent; padding: 20px; border: 1px solid var(--s6bd); text-align:center; font-size:12px; color: var(--s6t);}
.stx4 > p {padding-bottom: 0px !important; letter-spacing: 1px; text-transform: uppercase;}
.stx4 > p > span {padding: 0 30px 5px; border-bottom: 1px solid var(--s6bd); font-family: Cambria, Georgia, serif;  font-size: 20px; color: var(--s6h);}
.stx4 > em {display:block; font-style: italic; font-size: 1em; margin: 12px auto 12px auto !important; font-family: Cambria, Georgia, times; letter-spacing: 1px; color: var(--s6p);}</style>
        <div id="ship6"><div class="stx4">

<div class="shipdia" style="background-image: url(https://forumupload.ru/uploads/001b/ed/70/2/891963.png);"></div>

<!----- НАЧАЛО ТЕКСТА ----->
  <p><span>НАЗВАНИЕ ЭПИЗОДА</span></p>

  <em>Первый игрок, Второй игрок, Третий игрок</em>
тут описание эпизода текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст <br>
Место действия<br>
2318 год эры Врат, месяц такой-то<br>
Личный/Сюжетный/Квест

<!-- КОНЕЦ ТЕКСТА --></div></div>[/html]

Код:
[html]<style>#ship6 {
--s6pad: auto;
    --s6g1: #000;
    --s6g2: #009c88;
    --s6bd: #cac6b6;
    --s6h: #d0ab84;
    --s6p: #0ac2bb;
    --s6t: #9e9988;
}
#ship6 * {box-sizing:border-box;}
#ship6 {display: block; box-sizing: border-box; max-width: 650px; margin: auto auto auto var(--s6pad); padding: 20px; background: linear-gradient(0deg, var(--s6g1) 0%, var(--s6g2) 100%); background-color:var(--s6g1);}
.shipdia {margin: 10px auto 30px; height: 350px; width: 350px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background-size: cover; background-position: 50% 50%;}
.stx4 {background: transparent; padding: 20px; border: 1px solid var(--s6bd); text-align:center; font-size:12px; color: var(--s6t);}
.stx4 > p {padding-bottom: 0px !important; letter-spacing: 1px; text-transform: uppercase;}
.stx4 > p > span {padding: 0 30px 5px; border-bottom: 1px solid var(--s6bd); font-family: Cambria, Georgia, serif;  font-size: 20px; color: var(--s6h);}
.stx4 > em {display:block; font-style: italic; font-size: 1em; margin: 12px auto 12px auto !important; font-family: Cambria, Georgia, times; letter-spacing: 1px; color: var(--s6p);}</style>
        <div id="ship6"><div class="stx4">

<div class="shipdia" style="background-image: url(https://forumupload.ru/uploads/001b/ed/70/2/891963.png);"></div>

<!----- НАЧАЛО ТЕКСТА ----->
  <p><span>НАЗВАНИЕ ЭПИЗОДА</span></p>

  <em>Первый игрок, Второй игрок, Третий игрок</em>
тут описание эпизода текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст <br>
Место действия<br>
2318 год эры Врат, месяц такой-то<br>
Личный/Сюжетный/Квест

<!-- КОНЕЦ ТЕКСТА --></div></div>[/html]
Другой цвет
Код:
[html]<style>#ship6 {
--s6pad: auto;
    --s6g1: #000;
    --s6g2: #777467;
    --s6bd: #cac6b6;
    --s6h: #d0ab84;
    --s6p: #0ac2bb;
    --s6t: #9e9988;
}
#ship6 * {box-sizing:border-box;}
#ship6 {display: block; box-sizing: border-box; max-width: 650px; margin: auto auto auto var(--s6pad); padding: 20px; background: linear-gradient(0deg, var(--s6g1) 0%, var(--s6g2) 100%); background-color:var(--s6g1);}
.shipdia {margin: 10px auto 30px; height: 350px; width: 350px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background-size: cover; background-position: 50% 50%;}
.stx4 {background: transparent; padding: 20px; border: 1px solid var(--s6bd); text-align:center; font-size:12px; color: var(--s6t);}
.stx4 > p {padding-bottom: 0px !important; letter-spacing: 1px; text-transform: uppercase;}
.stx4 > p > span {padding: 0 30px 5px; border-bottom: 1px solid var(--s6bd); font-family: Cambria, Georgia, serif;  font-size: 20px; color: var(--s6h);}
.stx4 > em {display:block; font-style: italic; font-size: 1em; margin: 12px auto 12px auto !important; font-family: Cambria, Georgia, times; letter-spacing: 1px; color: var(--s6p);}</style>
        <div id="ship6"><div class="stx4">

<div class="shipdia" style="background-image: url(https://forumupload.ru/uploads/001b/ed/70/2/891963.png);"></div>

<!----- НАЧАЛО ТЕКСТА ----->
  <p><span>НАЗВАНИЕ ЭПИЗОДА</span></p>

  <em>Первый игрок, Второй игрок, Третий игрок</em>
тут описание эпизода текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст <br>
Место действия<br>
2318 год эры Врат, месяц такой-то<br>
Личный/Сюжетный/Квест

<!-- КОНЕЦ ТЕКСТА --></div></div>[/html]

Код взят у Шиповника

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

На земле обязательно должны быть рыцари и менестрели.

+1

2

[html]<link href="https://fonts.googleapis.com/css2?family=Alegreya+SC:wght@400;500;700&display=swap" rel="stylesheet"><style>#ship5 {
    --s5m: auto;
    --s5bg: #3b3933;
    --s5bp: #dedcd2;
    --s5c: #1b1b1b;
    --s5h: #d0ab84;
    --s5r: #898075;
}
#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: #171305;
    color: #3b3933;
    width: 650px;
} /* 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><!-- ТЕКСТ -->

<i>Первый игрок, Второй игрок, Третий игрок</i><br><br>
тут описание эпизода текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
Место действия<br>
2318 год эры Врат, месяц такой-то<br>
Личный/Сюжетный/Квест

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

  <h5>НАЗВАНИЕ ЭПИЗОДА</h5></div>

  <div class="shimg2" style="background-image: url(http://forumupload.ru/uploads/001b/ed/70/2/228668.jpg);"></div></div>
[/html]

Код:
[html]<link href="https://fonts.googleapis.com/css2?family=Alegreya+SC:wght@400;500;700&display=swap" rel="stylesheet"><style>#ship5 {
    --s5m: auto;
    --s5bg: #3b3933;
    --s5bp: #dedcd2;
    --s5c: #1b1b1b;
    --s5h: #d0ab84;
    --s5r: #898075;
}
#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: #171305;
    color: #3b3933;
    width: 650px;
} /* 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><!-- ТЕКСТ -->

<i>Первый игрок, Второй игрок, Третий игрок</i><br><br>
тут описание эпизода текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст 
Место действия<br>
2318 год эры Врат, месяц такой-то<br>
Личный/Сюжетный/Квест

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

  <h5>НАЗВАНИЕ ЭПИЗОДА</h5></div>

  <div class="shimg2" style="background-image: url(http://forumupload.ru/uploads/001b/ed/70/2/228668.jpg);"></div></div>
[/html]

Код взят у Шиповника

Другой цвет
Код:
[html]<link href="https://fonts.googleapis.com/css2?family=Alegreya+SC:wght@400;500;700&display=swap" rel="stylesheet"><style>#ship5 {
    --s5m: auto;
    --s5bg: #023735;
    --s5bp: #dedcd2;
    --s5c: #1b1b1b;
    --s5h: #d0ab84;
    --s5r: #898075;
}
#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: #171305;
    color: #3b3933;
    width: 650px;
} /* 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><!-- ТЕКСТ -->

<i>Первый игрок, Второй игрок, Третий игрок</i><br><br>
тут описание эпизода текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст 
Место действия<br>
2318 год эры Врат, месяц такой-то<br>
Личный/Сюжетный/Квест

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

  <h5>НАЗВАНИЕ ЭПИЗОДА</h5></div>

  <div class="shimg2" style="background-image: url(http://forumupload.ru/uploads/001b/ed/70/2/228668.jpg);"></div></div>
[/html]
Подпись автора

На земле обязательно должны быть рыцари и менестрели.

+1

3

[html]<link href="https://fonts.googleapis.com/css2?family=Oranienbaum&display=swap" rel="stylesheet">
<style>#ship1 {
    --sh1mr: auto;
    --sh1w1: 620px;
    --sh1bg: #3b3933;
    --sh1br: #898075;
    --sh1cl1: #d6a271;
}
#ship1 {
display: block;
    padding: 40px;
    margin: 1.2em;
    background: #3b3933;
    outline: 1px solid #898075;
    outline-offset: 10px;
    width: var(--sh1w1);
    box-shadow: #0000008f 1px 1px 4px 2px;
} /* 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 10px;
    font-size: 12px;
    color: #a6a399;
    font-family: Arial, Tahoma, sans-serif;
    text-align: justify;
}
/***   ПЕРСОНАЖИ   ***/
.btext > p {    margin: auto !important;
    padding-bottom: 14px !important;
    text-align: center;
    font-style: italic;
    font-size: 14px !important;
    font-family: 'Oranienbaum';
    color: #0ac2bb;
}
</style>

  <div id="ship1"><div class="shiprs">
  <!--   ЗДЕСЬ АВАТАРЫ   -->
<div class="shiav" style="background-image:url(http://forumupload.ru/uploads/001b/ed/70/2/403355.jpg)"></div>
<div class="shiav" style="background-image:url(http://forumupload.ru/uploads/001b/ed/70/2/451785.jpg)"></div>
<div class="shiav" style="background-image:url(http://forumupload.ru/uploads/001b/ed/70/2/441503.jpg)"></div>
  </div>

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

  <div class="btext"><p>
Персонаж_1   —   Персонаж_2   —   Персонаж_3
  </p>
<center>
тут описание эпизода текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст <br>
Место действия <br>
2318 год эры Врат, месяц такой-то <br>
Личный/Сюжетный/Квест
</center>

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

Код:
[html]<link href="https://fonts.googleapis.com/css2?family=Oranienbaum&display=swap" rel="stylesheet">
<style>#ship1 {
    --sh1mr: auto;
    --sh1w1: 620px;
    --sh1bg: #3b3933;
    --sh1br: #898075;
    --sh1cl1: #d6a271;
}
#ship1 {
display: block;
    padding: 40px;
    margin: 1.2em;
    background: #3b3933;
    outline: 1px solid #898075;
    outline-offset: 10px;
    width: var(--sh1w1);
    box-shadow: #0000008f 1px 1px 4px 2px;
} /* 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 10px;
    font-size: 12px;
    color: #a6a399;
    font-family: Arial, Tahoma, sans-serif;
    text-align: justify;
}
/***   ПЕРСОНАЖИ   ***/
.btext > p {    margin: auto !important;
    padding-bottom: 14px !important;
    text-align: center;
    font-style: italic;
    font-size: 14px !important;
    font-family: 'Oranienbaum';
    color: #0ac2bb;
}
</style>

  <div id="ship1"><div class="shiprs">
  <!--   ЗДЕСЬ АВАТАРЫ   -->
<div class="shiav" style="background-image:url(http://forumupload.ru/uploads/001b/ed/70/2/403355.jpg)"></div>
<div class="shiav" style="background-image:url(http://forumupload.ru/uploads/001b/ed/70/2/451785.jpg)"></div>
<div class="shiav" style="background-image:url(http://forumupload.ru/uploads/001b/ed/70/2/441503.jpg)"></div>
  </div>

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

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

<center>
тут описание эпизода текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст <br>
Место действия <br>
2318 год эры Врат, месяц такой-то <br>
Личный/Сюжетный/Квест
</center>

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

Другой цвет

[html]<link href="https://fonts.googleapis.com/css2?family=Oranienbaum&display=swap" rel="stylesheet">
<style>#ship1 {
    --sh1mr: auto;
    --sh1w1: 620px;
    --sh1bg: #3b3933;
    --sh1br: #898075;
    --sh1cl1: #d6a271;
}
#ship1 {
display: block;
    padding: 40px;
    margin: 1.2em;
    background: #023735;
    outline: 1px solid #898075;
    outline-offset: 10px;
    width: var(--sh1w1);
    box-shadow: #0000008f 1px 1px 4px 2px;
} /* 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 10px;
    font-size: 12px;
    color: #a6a399;
    font-family: Arial, Tahoma, sans-serif;
    text-align: justify;
}
/***   ПЕРСОНАЖИ   ***/
.btext > p {    margin: auto !important;
    padding-bottom: 14px !important;
    text-align: center;
    font-style: italic;
    font-size: 14px !important;
    font-family: 'Oranienbaum';
    color: #0ac2bb;
}
</style>

  <div id="ship1"><div class="shiprs">
  <!--   ЗДЕСЬ АВАТАРЫ   -->
<div class="shiav" style="background-image:url(http://forumupload.ru/uploads/001b/ed/70/2/403355.jpg)"></div>
<div class="shiav" style="background-image:url(http://forumupload.ru/uploads/001b/ed/70/2/451785.jpg)"></div>
<div class="shiav" style="background-image:url(http://forumupload.ru/uploads/001b/ed/70/2/441503.jpg)"></div>
  </div>

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

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

<center>
тут описание эпизода текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст <br>
Место действия <br>
2318 год эры Врат, месяц такой-то <br>
Личный/Сюжетный/Квест
</center>

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

Код:
[html]<link href="https://fonts.googleapis.com/css2?family=Oranienbaum&display=swap" rel="stylesheet">
<style>#ship1 {
    --sh1mr: auto;
    --sh1w1: 620px;
    --sh1bg: #3b3933;
    --sh1br: #898075;
    --sh1cl1: #d6a271;
}
#ship1 {
display: block;
    padding: 40px;
    margin: 1.2em;
    background: #023735;
    outline: 1px solid #898075;
    outline-offset: 10px;
    width: var(--sh1w1);
    box-shadow: #0000008f 1px 1px 4px 2px;
} /* 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 10px;
    font-size: 12px;
    color: #a6a399;
    font-family: Arial, Tahoma, sans-serif;
    text-align: justify;
}
/***   ПЕРСОНАЖИ   ***/
.btext > p {    margin: auto !important;
    padding-bottom: 14px !important;
    text-align: center;
    font-style: italic;
    font-size: 14px !important;
    font-family: 'Oranienbaum';
    color: #0ac2bb;
}
</style>

  <div id="ship1"><div class="shiprs">
  <!--   ЗДЕСЬ АВАТАРЫ   -->
<div class="shiav" style="background-image:url(http://forumupload.ru/uploads/001b/ed/70/2/403355.jpg)"></div>
<div class="shiav" style="background-image:url(http://forumupload.ru/uploads/001b/ed/70/2/451785.jpg)"></div>
<div class="shiav" style="background-image:url(http://forumupload.ru/uploads/001b/ed/70/2/441503.jpg)"></div>
  </div>

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

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

<center>
тут описание эпизода текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст <br>
Место действия <br>
2318 год эры Врат, месяц такой-то <br>
Личный/Сюжетный/Квест
</center>

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

Код взят у Шиповника

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

На земле обязательно должны быть рыцари и менестрели.

+2


Вы здесь » Пароград » Справочная » Для красивого оформления эпизодов


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