holliday

Объявление

ДОБРО ПОЖАЛОВАТЬ !
магическая америка; нью-йорк; 2024 год; nc -21
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.название

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

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

Вы здесь » holliday » Тестовый форум » коды

коды

Страница: 1

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

1

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000
Код:
<!-- Быстрое редактирование постов © Alex_63 // V.3 -->
    <script src="https://forumstatic.ru/files/0015/c4/3f/97896.js" type="text/javascript"></script>

0

2

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000

[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

3

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000

[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

4

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000

[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

5

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000

[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

6

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000

[html]<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet"><style>
:root {
  --s6m: auto;  /* отступ от левого края, auto - для центровки */
  --shav1: 100px; /* ширина аватара */
  --shav2: 100px; /* высота аватара */
  --shclr: #9fb1c3; /* границы */
  --shbg: rgba(255, 255, 255, 0.17); /* фон блока с текстом */
}
.ship6 {max-width:700px;  /* ограничиваем ширину блока*/
position:relative; display:block; box-sizing:border-box; padding: 8px 0 0 0; margin: auto auto auto var(--s6m);}
.ship6 * {box-sizing:border-box;}
.ship6 .sh1 {margin: 18px auto 0px auto !important; padding:0px !important; display:grid; grid-template-columns: auto auto; align-items: start;}
.ship6 .sh1:nth-child(1) {margin-top: 0px !important;}
.ship6 .sh2 {display:grid; grid-template-columns: auto 1fr;}
.ship6 .sh2 {order:1; min-width:200px; min-height:100px;}
/* блок текста */
.ship6 .sh3 {order:2; text-align:justify; border: 1px solid var(--shclr); background:var(--shbg); padding:14px; line-height: 120%; font-size: 11px; min-height:64px; min-width:100px;}
/* аватар */
.ship6 .ava {order:1; display: block; object-fit: cover; object-position: 50% 50%; background-color:var(--shclr); border: 1px solid var(--shclr); outline: 1px solid var(--shclr); outline-offset:5px; margin:6px; width:var(--shav1); height:var(--shav2);}
/* никнейм */
.ship6 .ava2 {order:2; padding: 10px; min-width:90px; max-width:180px; font-size:10px;}
.ship6 .ava2 em {display:block; position:relative; border-bottom: 1px solid var(--shclr); margin: 0px -10px 5px -10px; padding: 0 10px 5px 10px; font-style:normal !important; font-weight: 600; font-size: 16px; text-transform: uppercase; font-family: 'Roboto Condensed', Tahoma, sans-serif;}
/* четные блоки */
.ship6 .ava2 em:after {display:block; content:""; background:var(--shclr); border-radius:50%; width:6px; height:6px; position: absolute; margin: 3px -3px auto auto !important; right: 0px;} /* shipovnik */
.ship6 .sh1:nth-child(2n) .sh3 {order:-1;}
.ship6 .sh1:nth-child(2n) .ava2 {order:-1; text-align:right;}
.ship6 .sh1:nth-child(2n) .ava2 em:after {margin: 3px auto auto -3px !important; left: 0px;}
.ship6 .sh1:nth-child(2n) .sh2 {grid-template-columns: 1fr auto;}
</style><div class="ship6"><!-- НАЧАЛО -->

<!-- ПЕРВЫЙ -->
  <div class="sh1"><div class="sh2"><img class="ava" src="https://i.ibb.co/VHPhdg0/mikasa.jpg"><div class="ava2">
  <em><a href="#">Персонаж_1</a></em>
Некоторое пояснение или описание
  </div></div><div class="sh3">
Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.
  </div></div>

<!-- ВТОРОЙ -->
  <div class="sh1"><div class="sh2"><img class="ava" src="https://i.ibb.co/bH6cVrS/armin.jpg"><div class="ava2">
  <em><a href="#">Персонаж_2</a></em>
Некоторое пояснение или описание
  </div></div><div class="sh3">
Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.
  </div></div>

<!-- ТРЕТИЙ -->
  <div class="sh1"><div class="sh2"><img class="ava" src="https://i.ibb.co/M8xDyrG/eren.jpg"><div class="ava2">
  <em><a href="#">Персонаж_3</a></em>
Некоторое пояснение или описание
  </div></div><div class="sh3">
Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.
  </div></div>

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

0

7

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000

[html]<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>.ship8 {
--sh1: 80px;   /* ширина и высота картинки */
--sh2: #808080;   /* цвет описания персонажа и рамки */
}

.ship8 {max-width: 700px;  /*** ограничить ширину блока ***/
display:flex; flex-wrap: wrap; position:relative; overflow:hidden; width:100%; height:auto; box-sizing:border-box; padding-top: 10px;}
.ship8 * {box-sizing:border-box;}
/* весь блок карточки */
.shipp {display:flex; flex-direction: row; width: calc(50% - 14px); min-height: calc(var(--sh1) + 20px); margin-bottom: 28px !important; margin-right: 20px !important;} /* shipovnik */
.shipp:nth-child(2n) {margin-right: 0px !important;}
.shipp:nth-last-child(1), .shipp:nth-last-child(2) {margin-bottom:0px !important}

/* круг */
.krt {display:block; width: var(--sh1); height: var(--sh1); border-radius:50%; outline: 1px solid var(--sh2); outline-offset: 6px; margin: 6px 16px auto 10px !important;}
.kar {display:block; width: var(--sh1); height: var(--sh1); border-radius:50%; background: 50% 50% no-repeat transparent; background-size:cover;}
.namep, .namp {display:block; text-align: center;}
/* имя */
.namep {line-height:110%; font-family: 'Oswald', Tahoma, sans-serif; font-size: 20px;}
/* описание */
.namp {margin-top:4px !important; color: var(--sh2); font-size: 10px;}

/* текст */
.shipp p {display:block; padding:0 !important; margin-top:10px !important; font-family: Tahoma, Arial, sans-serif; line-height:130% !important; text-align: justify;}
</style><div class="ship8"><!-- START -->

<!-- ПЕРСОНАЖ_1 -->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://pp.userapi.com/c845020/v8450203 … nu1PeM.jpg)"></div>
</div>
   <div><span class="namep"><a href="#"> Имя Персонажа</a></span>
   <div class="namp">Описание персонажа</div>
   <p>
Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.
   </p></div></div>

<!-- ПЕРСОНАЖ_2 -->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://pp.userapi.com/c845020/v8450203 … nu1PeM.jpg)"></div>
</div>
   <div><span class="namep"><a href="#"> Имя Персонажа</a></span>
   <div class="namp">Описание персонажа</div>
   <p>
Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.
   </p></div></div>

<!-- ПЕРСОНАЖ_3 -->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://pp.userapi.com/c845020/v8450203 … nu1PeM.jpg)"></div>
</div>
   <div><span class="namep"><a href="#"> Имя Персонажа</a></span>
   <div class="namp">Описание персонажа</div>
   <p>
Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.
   </p></div></div>

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

0

8

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000

[html]<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>.ship8 {
--sh1: 80px;   /* ширина и высота картинки */
--sh2: #808080;   /* цвет описания персонажа и рамки */
}

.ship8 {  max-width: 700px;  /*** ограничить ширину блока ***/
display:flex; flex-wrap: wrap; position:relative; overflow:hidden; width:100%; height:auto; box-sizing:border-box; padding-top: 10px;}
.ship8 * {box-sizing:border-box;}
/* весь блок карточки */
.shipp {display:flex; flex-direction: row; width: calc(100% - 14px); min-height: calc(var(--sh1) + 20px); margin-bottom: 28px !important; margin-right: 0px !important;}
.shipp:last-child {margin-bottom:0px !important;}
/* круг */
.krt {display:block; width: var(--sh1); height: var(--sh1); border-radius:50%; outline: 1px solid var(--sh2); outline-offset: 6px; margin: 6px 16px auto 10px !important;}
.kar {display:block; width: var(--sh1); height: var(--sh1); border-radius:50%; background: 50% 50% no-repeat transparent; background-size:cover;}
.namep, .namp {display:block; text-align: left;}
/* имя */
.namep {line-height:110%; font-family: 'Oswald', Tahoma, sans-serif; font-size: 20px;}
/* описание */
.namp {margin-top:4px !important; color: var(--sh2); font-size: 10px;}
/* текст */
.shipp p {display:block; padding:0 !important; margin-top:10px !important; font-family: Tahoma, Arial, sans-serif; line-height:130% !important; text-align: justify;}
</style><div class="ship8"><!-- START -->

<!-- ПЕРСОНАЖ_1 -->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://pp.userapi.com/c845020/v8450203 … nu1PeM.jpg)"></div>
</div>
   <div><span class="namep"><a href="#"> Имя Персонажа</a></span>
   <div class="namp">Описание персонажа</div>
   <p>
Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.
   </p></div></div>

<!-- ПЕРСОНАЖ_2 -->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://pp.userapi.com/c845020/v8450203 … nu1PeM.jpg)"></div>
</div>
   <div><span class="namep"><a href="#"> Имя Персонажа</a></span>
   <div class="namp">Описание персонажа</div>
   <p>
Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.
   </p></div></div>

<!-- ПЕРСОНАЖ_3 -->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://pp.userapi.com/c845020/v8450203 … nu1PeM.jpg)"></div>
</div>
   <div><span class="namep"><a href="#"> Имя Персонажа</a></span>
   <div class="namp">Описание персонажа</div>
   <p>
Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.
   </p></div></div>

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

0

9

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000

[html]<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>.ship9 {
--sh1: 120px;   /* ширина и минимальная высота картинки */
--sh2: #6d888e;   /* цвет описания персонажа */
}
.ship9 {max-width:700px; display:block; position:relative; overflow:hidden; width:100%; height:auto;}
.ship9, .ship9 * {box-sizing:border-box;}
.ship9 .shipp {display:grid; grid-template-columns: calc(var(--sh1) + 20px) auto auto; grid-template-rows: auto auto; width: 100%; margin-bottom: 20px;}
.ship9 .shipp:last-child {margin-bottom: 0px;}
.ship9 .kartin {grid-row-start: 1; grid-row-end:3; grid-column-start:1; grid-column-end:2; display:block; width: var(--sh1); min-height: var(--sh1); height:auto; background: 50% 50% no-repeat transparent; background-size:cover;}
.ship9 .namep, .ship9 .namp {display:block; grid-row-start: 1; grid-row-end:2;}
/*** ИМЯ ПЕРСОНАЖА ***/
.ship9 .namep {grid-column-start:2; grid-column-end:3; place-self: center left; font-family: 'Oswald', Tahoma, sans-serif; font-size:22px;}
.ship9 .namp {grid-column-start:3; grid-column-end:4; place-self: center right; color: var(--sh2); font-style: italic;}
.ship9 .shipp > p {grid-row-start: 2; grid-row-end:3; grid-column-start:2; grid-column-end:4; align-self: start; padding:0 8px 0 0 !important; margin:10px auto 6px 0px !important; overflow:auto; line-height:130% !important; text-align: justify; font-family: Tahoma, Arial, sans-serif; max-height:70px;}
.ship9 .shipp *::-webkit-scrollbar {width:3px; height:3px; background: rgba(0, 0, 0, 0.05);}
.ship9 .shipp *::-webkit-scrollbar-thumb {background: var(--sh2);} /*shipovnik*/
.ship9 .shipp *::-webkit-scrollbar-corner {background: transparent;}
</style>
<div class="ship9"><!-- START -->

   <!-- ПЕРСОНАЖ_1 -->
<div class="shipp"><div class="kartin" style="background-image:url(https://pp.userapi.com/c845020/v8450203 … nu1PeM.jpg)"></div>
   <div class="namep"><a href="#">Имя Персонажа</a></div>
   <div class="namp">Описание персонажа</div>
   <p>
Краткая информация, отношения и прочее.
   </p></div>

   <!-- ПЕРСОНАЖ_2 -->
<div class="shipp"><div class="kartin" style="background-image:url(https://pp.userapi.com/c845020/v8450203 … nu1PeM.jpg)"></div>
   <div class="namep"><a href="#">Имя Персонажа</a></div>
   <div class="namp">Описание персонажа</div>
   <p>
Краткая информация, отношения и прочее.
   </p></div>

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

0

10

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000

[html]<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet"><style>
.ship10 {
--sh1: 80px;   /* ширина и минимальная высота картинки */
--sh2: #ffffff; /* цвет карточки */
--sh3: 700px; /* максимальная ширина шаблона */
}
.ship10 {display:flex; flex-wrap: wrap; position:relative; width:100%; height:auto; box-sizing:border-box; padding: 8px 0 0 8px;
max-width: var(--sh3);} .ship10 * {box-sizing:border-box; /*shipovnik*/}
.ship10 .karta {display:block; width: calc(50% - 20px); text-align: justify; margin-right: 30px !important; margin-bottom: 28px !important;}
.ship10 .karta:nth-child(2n) {margin-right: 0px !important;}
.ship10 .karta:last-child {margin-bottom: 8px !important;}
.ship10 .kartin {display:inline-block; float:left; padding: 10px 10px 8px 10px; margin: auto 10px 4px auto !important; width: calc(var(--sh1) + 20px); height:auto; transform: rotate(4deg); text-align:center; background: var(--sh2); box-shadow: 0 1px 4px rgba(0,0,0,0.35);}
.ship10 .kart {display:block; width: var(--sh1); height: var(--sh1); background: 50% 50% no-repeat transparent; background-size:cover;}
.ship10 p {display: inline; padding: 0 !important; margin: 0px !important; text-align:justify; line-height:120%;}
/* описание в карточке */
.ship10 .pers {display:block; margin-top: 10px !important; word-wrap: break-word; line-height: 110%; font-style: italic; font-family: Arial, Tahoma, sans-serif; font-size: 12px;}
/* имя персонажа в ссылке */
.ship10 .namp {display:block; text-align:center; margin-bottom: 10px !important; line-height: 110%; font-family: 'Oswald', Tahoma, sans-serif; font-size: 22px;}</style>
<div class="ship10"><!-- START -->

<!-- ПЕРСОНАЖ_1 -->
  <div class="karta"><div class="kartin"><div class="kart" style="background-image:url(https://pp.userapi.com/c845020/v8450203 … nu1PeM.jpg)"></div>
  <div class="pers"> Подпись </div></div>
  <div class="namp"><a href="#"> Имя персонажа </a></div>
  <p>
Описание персонажа, отношения к нему и прочее.
  </p></div>

<!-- ПЕРСОНАЖ_2 -->
  <div class="karta"><div class="kartin"><div class="kart" style="background-image:url(https://pp.userapi.com/c845020/v8450203 … nu1PeM.jpg)"></div>
  <div class="pers"> Подпись </div></div>
  <div class="namp"><a href="#"> Имя персонажа </a></div>
  <p>
Описание персонажа, отношения к нему и прочее.
  </p></div>

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

0

11

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000

[html]<style>.ship11 {
--wd2: 550px; /* общая ширина блока */
--fh1: 1em;  /* размер шрифта */
--hd1: 100px;  /*  высота аватара  */
--wd1:80px;  /* ширина аватара  */
--wb1: #334451;  /* цвет рамки */
background: rgba(255, 255, 255, 0.3);   /* цвет фона */
margin: 10px auto;

display:block; box-sizing: border-box; overflow: hidden; padding: 20px; max-width: var(--wd2); font-size: var(--fh1); border: 3px solid var(--wb1); outline: 1px solid var(--wb1); outline-offset: 8px;}
.ship11 * {box-sizing: border-box;}
.pers {display: flex; flex-direction: row; align-items: flex-start; width: auto; box-sizing: border-box; margin: 10px auto 30px 24px !important;}
.pers:last-child {/*shipovnik*/ margin-bottom: 10px !important;}
.kart {display:inline-block; position:relative; margin-right: 40px !important;}
.us1, .us2 {position:absolute; z-index:+1; display: block; bottom: 12px; width:52px; height:28px; background: url(https://forumupload.ru/uploads/001b/03/40/91/984540.png) 0% 0% no-repeat transparent;}
em.us1 {margin-left: calc(var(--wd1) / 2 + 25%) !important;}
em.us2 {right: calc(0px + var(--wd1) / 2 + 25%) !important; transform: rotateY(180deg);}
.ava {display:block; position: relative; box-sizing:border-box; width: var(--wd1); height: var(--hd1); padding:2px;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background: #000;}
.ava em {display:block; width: auto; height: 100%; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background: 50% 50% no-repeat #000; background-size:cover;}
.ship11 p {margin: 0px !important; padding: 0 !important;}
.nik1 {display: block; padding: 8px 0; font-family: BebasB, Tahoma, sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: 16px;}
.nik2 {display: block; padding: 0 0 8px; font-family: Tahoma, sans-serif; font-size: 10px; opacity: 0.7;}
@font-face {font-family: BebasB; src: url(https://forumstatic.ru/files/0018/62/a0/30681.ttf);}
</style><div class="ship11"><!-- START -->

   <!------ ПЕРСОНАЖ 1 ------>
   <div class="pers"><div class="kart"><em class="us1"></em><div class="ava">
<a href="ссылка"><em style="background-image: url(https://forumupload.ru/uploads/001b/03/40/3/718212.png);"></em></a></div><em class="us2"></em></div><div><div class="nik1">
   <a href="ссылка"> Имя Персонажа </a></div>
   <div class="nik2"> Краткое описание </div>
Расширенное описание
   </div></div>

   <!------ ПЕРСОНАЖ 2 ------>
   <div class="pers"><div class="kart"><em class="us1"></em><div class="ava">
<a href="ссылка"><em style="background-image: url(https://forumupload.ru/uploads/001b/03/40/3/718212.png);"></em></a></div><em class="us2"></em></div><div><div class="nik1">
   <a href="ссылка"> Имя Персонажа </a></div>
   <div class="nik2"> Краткое описание </div>
Расширенное описание
   </div></div>

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

0

12

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000

[html]<link href="https://fonts.googleapis.com/css2?family=Oranienbaum&family=PT+Sans&display=swap" rel="stylesheet">
<style>.shrama {
--shm0: 926px;  /*  ширина рамы-ограничителя */
--smp0: 270px; /*  максимальная ширина карточки */
--shh1: 270px;   /*  высота блока  */
--smp1: 30px;   /*  внутренний отступ от краев */
--clrp: #b6b4b1;   /*  цвет внутреннего текста  */
--clrt: 1em;   /*  размер внутреннего текста  */
--clrta: #ffc072;   /* цвет имени */
--clrba: #949494;   /* цвет краткого описания */
}

.shrama {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; width:100%; max-width:var(--shm0); margin-left: 0px;} .shrama * {box-sizing:border-box;}
.ship18 {display:inline-block; position:relative; width: calc(100% - 8px); max-width: var(--smp0); height: var(--shh1); margin: auto 4px 10px 4px; font-size:var(--clrt); font-family: Tahoma, Verdana, sans-serif; overflow: hidden;}
/*** блок с картинкой shipovnik ***/
.shins {background: 50% 50% no-repeat; background-size: cover; box-sizing:border-box; position: absolute; width: 100%; height: 100%; filter: grayscale(1); mix-blend-mode: multiply; opacity: 1;}
/*** блок с подложкой-затемнением ***/
.shtext {display:flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; position:absolute; box-sizing: border-box; padding: calc(var(--smp1) * 1.5) var(--smp1) var(--smp1); height: 100%; width: 100%; background: rgba(0,0,0,0); transition: background 0.9s 0.5s;}
.shtext:hover {background: rgba(0,0,0,0.7); transition: background 0.95s;}
.shtext p {overflow: auto; padding: 0 6px 0 0 !important; line-height: 130% !important; text-align: center; box-sizing: border-box; width: 100%; text-shadow: 0 1px 3px #000; color: var(--clrp);}
.shtext p, .shtext:hover p:nth-child(2) {max-height: calc(var(--shh1) - var(--smp1) * 4.5);}
/*** подробный текст отношений-описаний ***/
.shtext p:nth-child(2){background:transparent; transform: scale(0); opacity: 0; transition: all 0.6s 0s;}
.shtext:hover p:nth-child(2){opacity: 1; height: auto; transform: scale(1); transition: all 0.6s 0.4s; }
.shtext p::-webkit-scrollbar {width: 3px; height:3px; background-color: transparent;}
.shtext p::-webkit-scrollbar-thumb {background: rgba(134,134,134, 0.35);}
/*** Имя и краткое описание ***/
.shtext p:first-child, .shtext p:last-child {width: calc(100% - var(--smp1) * 2);}
.shtext p:first-child, .shtext p:first-child a {font-family: 'Oranienbaum', Tahoma, serif; font-size: 18px; text-transform: uppercase; color: var(--clrta) !important;}
.shtext p:first-child a:hover {filter: brightness(1.2);}
.shtext p:first-child {transition: all 2s; position: absolute; top: calc(var(--shh1) - var(--smp1) * 3); transition: top 0.65s 0.2s;}
.shtext p:last-child {font-family: 'PT Sans', Tahoma, sans-serif; font-size: 11px; position: absolute; top: calc(var(--shh1) - var(--smp1) * 1.8); color: var(--clrba); transition: top 0.5s 0.1s;}
.shtext:hover p:first-child{position: absolute; top: var(--smp1); transition: top 0.7s 0.1s;}
.shtext:hover p:last-child{position: absolute; top: calc(var(--shh1) - var(--smp1) * 1.2); transition: top 0.6s 0.1s;}</style>

<div class="shrama"> <!--- START --->

<!-----  ПЕРВЫЙ ПЕРСОНАЖ  ----->
  <div class="ship18" style="background: #164d86;">
  <div class="shins" style="background-image: url(https://pp.userapi.com/c845020/v8450203 … nu1PeM.jpg);"></div>
  <div class="shtext">
  <p>  <a href="#">Имя персонажа</a>  </p>
  <p>
Подробное описание персонажа, отношений и прочего.
  </p><p>
Краткое описание
  </p></div></div>

<!-----  ВТОРОЙ ПЕРСОНАЖ  ----->
  <div class="ship18" style="background: #6a6a6a;">
  <div class="shins" style="background-image: url(https://pp.userapi.com/c845020/v8450203 … nu1PeM.jpg);"></div>
  <div class="shtext">
  <p> <a href="#">Пример ссылки</a> </p>
  <p>
Подробное описание персонажа, отношений и прочего.
  </p><p>
Краткое описание
  </p></div></div>

<!-----  ТРЕТИЙ ПЕРСОНАЖ  ----->
  <div class="ship18" style="background: #9a0f35;">
  <div class="shins" style="background-image: url(https://pp.userapi.com/c845020/v8450203 … nu1PeM.jpg);"></div>
  <div class="shtext">
  <p>  <a href="#">Имя персонажа</a>  </p>
  <p>
Подробное описание персонажа, отношений и прочего.
  </p><p>
Краткое описание
  </p></div></div>

<!-----  ЧЕТВЕРТЫЙ ПЕРСОНАЖ  ----->
  <div class="ship18" style="background: #326009;">
  <div class="shins" style="background-image: url(https://pp.userapi.com/c845020/v8450203 … nu1PeM.jpg);"></div>
  <div class="shtext">
  <p>  <a href="#">Имя персонажа</a>  </p>
  <p>
Подробное описание персонажа, отношений и прочего.
  </p><p>
Краткое описание
  </p></div></div>

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

0

13

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000

[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

14

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000

[html]<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Cuprum&display=swap" rel="stylesheet"><style>
<style>.chr2, .chr2 * {box-sizing:border-box;}
.chr2 {
--chrw: 600px; /* ширина блока */
--chrbg: #f4f4f4; /* цвет фона */
--chrd: #ffffff; /* активный эпизод */
--chrc: #6a8972; /* закрытый эпизод */
--chbs: rgba(0,0,0,0.3); /* цвет границы */
}
.chr2 {width:var(--chrw); background:var(--chrbg); border-radius:16px; border:1px solid var(--chbs);
margin:10px auto 10px 10px; padding:26px 20px 24px 10px; position:relative;}
.chr2 p {padding:0px !important; margin:0px !important;}
.chr2 h7 {display:block; text-align:center; font-family:Cuprum, Tahoma, sans-serif; font-size:24px;}
.ch1 {position:relative; padding: 15px 0px; display:grid; grid-template-columns: 180px 1fr; grid-template-rows:auto; align-items:stretch;}
.ch1:first-of-type {/*shipovnik*/ padding-top:0px;}
.ch1:last-of-type {padding-bottom:0px;}
.ch2 {display:block; grid-column:1 / 2; grid-row:1 / -1; text-align:center; padding-right:10px; border-right:1px solid var(--chbs);}
.ch3 {display:block; grid-column:-2 / -1; grid-row:1 / -1; padding-left:14px; text-align:justify;}
.ch2 em {display:block; font-style:normal !important; font-weight:600; font-family:Cuprum, Tahoma, sans-serif; font-size:16px; padding-bottom:4px;}
.ch4 {text-transform:uppercase; font-family:Oswald, Tahoma, sans-serif; font-size:14px; letter-spacing:0.03em;}
.ch1:before {content:''; display:block; width:12px; height:12px; border-radius:50%; position:absolute; top:15px; left:-10px; transform:translateX(-50%);
background: var(--chrd); border:1px solid var(--chbs);}
.close.ch1:before {background:var(--chrc);}
</style>
<div class="chr2"><!----- START ----->

<div class="ch1">
  <div class="ch2"><em> дата эпизода </em>
  Участники
  </div>
  <div class="ch3"><a href="ссылка" class="ch4">Название эпизода</a>
  <p> Описание эпизода </p>
  </div>
</div>

<div class="ch1">
  <div class="ch2"><em> дата эпизода </em>
  Участники
  </div>
  <div class="ch3"><a href="ссылка" class="ch4">Название эпизода</a>
  <p> Описание эпизода </p>
  </div>
</div>

<div class="ch1 close">
  <div class="ch2"><em> дата эпизода </em>
  Участники
  </div>
  <div class="ch3"><a href="ссылка" class="ch4">Название эпизода</a>
  <p> Описание эпизода </p>
  </div>
</div>

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

0

15

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000

[html]<!-- html от духа, который не знает, что он такое -->
<link href="https://fonts.googleapis.com/css2?family=Italiana&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link href="https://forumstatic.ru/files/001b/71/36/72996.css?v=6" rel="stylesheet">

  <div class="amadeo_wrap">
   
   
    <div class="amadeo_box_wrap">
      <div class="amadeo_box_img">
      </div>
      <div class="amadeo_box_inner">
        <div class="amadeo_box_content">
          <div class="amadeo_person_img">
            <img src="https://i.imgur.com/JNtPhJv.jpg">
          </div>
          <div class="amadeo_person_text">
            <span>Alistair</span>
            <div>
              человек, Серый Страж, король Ферелдена
            </div>
          </div>
        </div>
      </div>
    </div>
   
        <div class="amadeo_box_wrap">
      <div class="amadeo_box_img">
      </div>
      <div class="amadeo_box_inner">
        <div class="amadeo_box_content">
          <div class="amadeo_person_img">
            <img src="https://i.imgur.com/fyHNFDm.jpg">
          </div>
          <div class="amadeo_person_text">
            <span>Cassandra </span>
            <div>
              человек, сооснователь Инквизиции, 78ая в очереди на трон Неварры
            </div>
          </div>
        </div>
      </div>
    </div>
   
    <div class="amadeo_box_wrap">
      <div class="amadeo_box_img">
      </div>
      <div class="amadeo_box_inner">
        <div class="amadeo_box_content">
          <div class="amadeo_person_img">
            <img src="https://i.imgur.com/B6rB4CN.jpg">
          </div>
          <div class="amadeo_person_text">
            <span>Zevran</span>
            <div>
              эльф, бывший Антиванский Ворон
            </div>
          </div>
        </div>
      </div>
    </div>
   
        <div class="amadeo_box_wrap">
      <div class="amadeo_box_img">
      </div>
      <div class="amadeo_box_inner">
        <div class="amadeo_box_content">
          <div class="amadeo_person_img">
            <img src="https://i.imgur.com/jPsyLiM.jpg">
          </div>
          <div class="amadeo_person_text">
            <span>Fenris</span>
            <div>
              эльф, пьянь тевинтерская
            </div>
          </div>
        </div>
      </div>
    </div>
   
    <div class="amadeo_box_wrap">
      <div class="amadeo_box_img">
      </div>
      <div class="amadeo_box_inner">
        <div class="amadeo_box_content">
          <div class="amadeo_person_img">
            <img src="https://i.imgur.com/JNtPhJv.jpg">
          </div>
          <div class="amadeo_person_text">
            <span>Alistair</span>
            <div>
              человек, Серый Страж, король Ферелдена
            </div>
          </div>
        </div>
      </div>
    </div>
   
        <div class="amadeo_box_wrap">
      <div class="amadeo_box_img">
      </div>
      <div class="amadeo_box_inner">
        <div class="amadeo_box_content">
          <div class="amadeo_person_img">
            <img src="https://i.imgur.com/fyHNFDm.jpg">
          </div>
          <div class="amadeo_person_text">
            <span>Cassandra </span>
            <div>
              человек, сооснователь Инквизиции, 78ая в очереди на трон Неварры
            </div>
          </div>
        </div>
      </div>
    </div>
   
  </div>

<style>
:root {
  --am-bg: linear-gradient(0deg, rgba(47, 46, 46, 0.67), rgba(47, 46, 46, 0.67)); /* полупрозрачная заливка на фоне */
  --am-bg-img: url(https://i.imgur.com/UzOM1XX.jpg); /* изображение фона */
  --am-accent: #E8EA7A; /* желтый цвет обводок и текста */
  --am-padding: 13px;  /* отступ рамки */
  --am-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1); /* тень карточки */
  --am-padding-in: 30px; /* внутренний отступ для контента */
  --am-text: #F0F0F0; /* белый текст */
  --am-transition: transform 1s cubic-bezier(0.72, -0.01, 0, 1);
  --am-t1: scaleX(1) scaleY(1) scaleZ(1) rotateX(-4deg) rotateY(-4deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
  --am-t2: scaleX(1) scaleY(.97) scaleZ(1) rotateX(4deg) rotateY(4deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
  --am-t-reset: scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
}

/*УБИРАЕМ ПРОФИЛЬ ИЗ СООБЩЕНИЯ*/
#p12 .post-author,
#p12 .post-sig {
display:none !important
}
#p12 .post-body,
#p12 .post-links,
#p12 .post-links ul,
#p12 h3>span {
margin-left:10px !important
}
#p12 .pl-email,
#p12 .pl-website {
float:  none
}
#p12 .pl-delete {
border-left: 1px solid rgba(0,0,0,.2) !important;
margin-left: 10px
}
#p12 .post-content {
margin-top: 0px !important;
margin-left: 0 !important;
margin-right: 0 !important
}
#p12 .post-box {
margin: 0px !important
}
</style>[/html]

0

16

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000

[html]<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Галерея с параллаксом</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
        }

        .gallery-container {
            width: 100%;
            max-width: 600px;
            padding: 0.25rem;
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 0.25rem;
        }

        .card {
            height: 200px;
            overflow: hidden;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 0.5rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

        .card:hover {
            transform: scale(1.05);
        }

        .card-image-wrapper {
            height: 100%;
            width: 100%;
            overflow: hidden;
            position: relative;
        }

        .card-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: translateZ(0);
            transition: transform 0.5s ease;
        }

        .card:hover .card-image-wrapper img {
            transform: scale(1.1);
        }

        .card a {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            padding: 0.5rem 1rem;
            background-color: rgba(0, 0, 0, 0.7);
            color: #fff;
            text-decoration: none;
            border-radius: 0.25rem;
            font-size: 0.875rem;
            transition: background-color 0.3s;
        }

        .card a:hover {
            background-color: rgba(0, 0, 0, 0.9);
        }

        @media (max-width: 800px) {
            .gallery {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
        }

        @media (max-width: 400px) {
            .gallery {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            }
        }
    </style>
</head>
<body>
    <div class="gallery-container">
        <main class='gallery'>
            <div class='card'>
                <div class='card-image-wrapper'>
                    <img src='https://images.unsplash.com/photo-1607419726991-5fc7e74cda67?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'>
                    <a href='#'>Подробнее</a>
                </div>
            </div>
            <div class='card'>
                <div class='card-image-wrapper'>
                    <img src='https://images.unsplash.com/photo-1601042879364-f3947d3f9c16?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'>
                    <a href='#'>Подробнее</a>
                </div>
            </div>
            <div class='card'>
                <div class='card-image-wrapper'>
                    <img src='https://images.unsplash.com/photo-1536098561742-ca998e48cbcc?q=80&w=2272&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'>
                    <a href='#'>Подробнее</a>
                </div>
            </div>
            <div class='card'>
                <div class='card-image-wrapper'>
                    <img src='https://images.unsplash.com/photo-1514439827219-9137a0b99245?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'>
                    <a href='#'>Подробнее</a>
                </div>
            </div>
            <div class='card'>
                <div class='card-image-wrapper'>
                    <img src='https://images.unsplash.com/photo-1525790935716-36a6c45ad067?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'>
                    <a href='#'>Подробнее</a>
                </div>
            </div>
            <div class='card'>
                <div class='card-image-wrapper'>
                    <img src='https://images.unsplash.com/photo-1561344640-2453889cde5b?q=80&w=2467&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'>
                    <a href='#'>Подробнее</a>
                </div>
            </div>
            <div class='card'>
                <div class='card-image-wrapper'>
                    <img src='https://images.unsplash.com/photo-1561602009-0ecd1cada8bd?q=80&w=2456&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'>
                    <a href='#'>Подробнее</a>
                </div>
            </div>
            <div class='card'>
                <div class='card-image-wrapper'>
                    <img src='https://images.unsplash.com/photo-1560583306-bd304a162229?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'>
                    <a href='#'>Подробнее</a>
                </div>
            </div>
            <div class='card'>
                <div class='card-image-wrapper'>
                    <img src='https://images.unsplash.com/photo-1535478044878-3ed83d5456ef?q=80&w=2382&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'>
                    <a href='#'>Подробнее</a>
                </div>
            </div>
        </main>
    </div>
</body>
</html>
[/html]

0

17

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000

[html]<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Code Generator</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f5f5f5;
            padding: 20px;
            box-sizing: border-box;
        }
        .form-container {
            width: 100%;
            max-width: 600px;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
        .form-section {
            margin-bottom: 20px;
        }
        .form-section label {
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
        }
        .form-section input, .form-section textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }
        .output-container {
            margin-top: 20px;
        }
        .output-container textarea {
            width: 100%;
            height: 300px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <form id="generatorForm">
            <div class="form-section">
                <label for="avatar-url">Avatar URL</label>
                <input type="url" id="avatar-url" name="avatar-url" placeholder="https://example.com/avatar.jpg" required>
            </div>
            <div class="form-section">
                <label for="character-name">Character Name</label>
                <input type="text" id="character-name" name="character-name" required>
            </div>
            <div class="form-section">
                <label for="age">Age</label>
                <input type="text" id="age" name="age" required>
            </div>
            <div class="form-section">
                <label for="gender">Gender</label>
                <input type="text" id="gender" name="gender" required>
            </div>
            <div class="form-section">
                <label for="biography">Biography</label>
                <textarea id="biography" name="biography" rows="4" required></textarea>
            </div>
            <div class="form-section">
                <label for="appearance">Appearance</label>
                <textarea id="appearance" name="appearance" rows="2" required></textarea>
            </div>
            <div class="form-section">
                <label for="abilities">Abilities</label>
                <textarea id="abilities" name="abilities" rows="4" required></textarea>
            </div>
            <button type="button" onclick="generateHTML()">Generate HTML</button>
        </form>

        <div class="output-container">
            <label for="output">Generated HTML Code</label>
            <textarea id="output" readonly></textarea>
        </div>
    </div>

    <script>
        function generateHTML() {
            const avatarUrl = document.getElementById('avatar-url').value;
            const characterName = document.getElementById('character-name').value;
            const age = document.getElementById('age').value;
            const gender = document.getElementById('gender').value;
            const biography = document.getElementById('biography').value;
            const appearance = document.getElementById('appearance').value;
            const abilities = document.getElementById('abilities').value;
           
            const htmlCode = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stylish Character Profile</title>
    <style>
        body {
            margin: 0;
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f5f5f5;
        }
        .profile-container {
            width: 600px;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 15px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            font-family: 'Arial', sans-serif;
            color: #333;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .profile-header {
            text-align: center;
            margin-bottom: 20px;
            width: 100%;
        }
        .profile-header h2 {
            margin: 0;
            font-size: 28px;
            color: #555;
        }
        .profile-section {
            margin-bottom: 15px;
            width: 100%;
        }
        .profile-section label {
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
            color: #777;
        }
        .profile-section p {
            margin: 0;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 10px;
        }
        .profile-section img {
            max-width: 100%;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .decorative-element {
            width: 100%;
            height: 2px;
            background-color: #ddd;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="profile-container">
        <div class="profile-header">
            <img src="${avatarUrl}" alt="Character Avatar">
            <h2>Character Profile</h2>
        </div>
        <div class="profile-section">
            <label>Character Name</label>
            <p>${characterName}</p>
        </div>
        <div class="profile-section">
            <label>Age</label>
            <p>${age}</p>
        </div>
        <div class="profile-section">
            <label>Gender</label>
            <p>${gender}</p>
        </div>
        <div class="decorative-element"></div>
        <div class="profile-section">
            <label>Biography</label>
            <p>${biography}</p>
        </div>
        <div class="decorative-element"></div>
        <div class="profile-section">
            <label>Appearance</label>
            <p>${appearance}</p>
        </div>
        <div class="decorative-element"></div>
        <div class="profile-section">
            <label>Abilities</label>
            <p>${abilities}</p>
        </div>
    </div>
</body>
</html>`;
           
            document.getElementById('output').value = htmlCode.trim();
        }
    </script>
</body>
</html>
[/html]

0

18

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000
Код:
@import url(style_cs.css);

/********** Чистый стардартный стиль для MyBB ***********/
/******** Cпециально для ForumD.ru © Gerda, 2023 ********/
/**************************************************
!!! Условия использования !!!

1. Данный копирайт не удалять
2. При публикации производных работ указывать ссылку на автора и ForumD.ru
3. При публикации в общий доступ указывать ссылку на автора и ForumD.ru
4. Публичный производный контент должен распостраняться на тех же условиях

Подробно: forumd.ru/viewtopic.php?id=5751#rule
**************************************************/

/* ================== */

/* Скрываем элементы форума */

#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {clear: both; content: "."; display: block; height: 0; visibility: hidden; overflow:hidden; line-height: 0.0; font-size: 0;}

.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2,
#pun-title h1,
#pun-announcement h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position:absolute;
  left: -9999px;
  overflow: hidden
}

/* ================== */

/* Общие стили */
body {margin: 0;}
ul, dl, li, dd, dt {list-style: none;}

body {font: 12px Verdana;}
h1, h2 {
font-size: 16px; 
font-weight: normal;
padding: 5px 10px;
margin: 0;
}

address, em {font-style: normal}

a {text-decoration: none;}

/* ================== */

/* Тело форума */
.punbb {
max-width: 1000px;
margin: 0 auto;
}

/* ================== */

/* Меню навигации */
#pun-navlinks .container {
margin: 0;
padding: 8px 10px;
}
#pun-navlinks li {
display: inline;
padding-right: 10px;
}

/* Юзер меню */
#pun-ulinks .container {padding: 8px 10px;}
#pun-ulinks li {
display: inline;
padding-right: 10px;
}

/* ================== */

/* Объявление */
#pun-announcement .container {padding: 10px;}

/* Статус (Добро пожаловать) */
#pun-status .container {
margin-bottom: 0;
padding: 8px 10px 10px;
}
#pun-status span {
white-space: nowrap;
margin-right: 5px;
}

#pun-crumbs1 {font-weight: bold;}
#pun-crumbs1 p.container {
padding: 10px 10px 8px 10px;
margin-top: 0;
}

/*хлебные крошки */
.container.crumbs {
font-weight: bold;
padding: 10px 10px 8px 10px;
}
#pun-crumbs1 .container.crumbs {margin-top: 0;}
#pun-crumbs2 .container.crumbs {margin-bottom: 0;}

/* Копирайт майбб */
#pun-about .container {text-align: right;}

/* ================== */

/* Форумные таблицы */
table {table-layout: fixed; width: 100%;}
.tcl {width: 50%;}
.tc2, .tc3, .tcmod {
text-align: center;
width: 10%;
}
.tcr {width: 30%;}

#pun-searchtopics .tcl,
#pun-modviewforum .tcl {
width: 40%
}

#pun-searchtopics .tc2 {
text-align: left;
width: 20%;
}

#pun-debug table .tcl {width: 15%;white-space:normal;}
#pun-debug .tcr {width: 90%; white-space: normal;}

td {padding: 8px 10px;}
th {padding: 4px 10px;}

tbody.hasicon td.tcl {padding-left: 40px}
div.icon {
position: absolute; 
margin-left: -30px;
width: 20px;
height: 20px;
background: red;
}

/* ================== */

/* Категории */
.category {margin-top: 10px;}
#pun-category1 {margin-top: 0;}
.punbb td .modlist {
display: block;
padding-top: 5px;
}

/* Статистика */
#pun-stats .container {padding: 8px 10px}
#pun-stats li.item1, #pun-stats li.item2 {
float: left;
clear: both;
line-height: 150%;
}
#pun-stats li.item3, #pun-stats li.item4 {
text-align: right;
line-height: 150%;
}
li#onlinelist {
margin-top: 10px;
float: left;
line-height: 130%;
}
li#onlinelist div {padding: 8px 0 0 0;}

/* ================== */

/* Пагинация (Переключаемые страницы, Новая тема + Опрос, Подписка) */
.multipage {margin-top: 30px;}
.punbb .linkst {
position: relative;
height: 0;
}
.linkst .pagelink,
.linkst .postlink {
position: absolute;
top: -50px;
}
.linkst .pagelink {left: 10px;}
.linkst .postlink {right: 10px; text-align: right;}

.punbb .linksb {
text-align: right;
padding: 4px 10px;
}
.linksb .pagelink {float: left; text-align: left;}
.linksb .postlink {float: right;}
.subscribelink {
clear:both;
padding: 5px 0;
}

/* Модераторское меню, RSS, Atom */
.modmenu .container {padding: 5px 10px;text-align: right;}
.modmenu .container strong {float: left;}
.modmenu input {margin-left: 10px;}

/* ================== */

/* Страница топика */
.post {margin-top: 10px;}
.toppost, .topicpost {margin-top: 0;}

.post .container {}
.post h3 {}
.post h3 span {
padding: 5px 10px;
display: block;
margin-left: 300px;
}
.post h3 strong {
float: right;
text-align: right;
font-weight: normal;
}

.post .post-author {
float: left;
margin-top: -40px;
width: 300px;
}
.post-body {margin-left: 300px;}
.post-box {padding: 10px;}

.post-links {margin-left: 300px;}
.post-links ul {
padding: 0 10px 0 0;
margin-left: -300px;
text-align: right;
}
.post-links li {
display: inline;
padding-left: 10px;
}

.pl-email, .pl-website {float: left;}
.clearer {clear: both; height: 0; font-size: 0;}

/* ================== */

/* Подпись в топике */
.post-sig dt, .post-sig dd, .post-sig dl {margin: 0} 
.post-sig dt {
display: block;
margin: 5px 0;
}

/* Контент поста */
pre {font: 11px monaco;}
.post-content em {font-style: italic}
.post-content em.bbuline {font-style: normal; text-decoration: underline;}
.post-content p {
margin: 0;
line-height: 150%;
padding: 0 0 12px 0;
}
.post-content img {vertical-align: middle;}
.scrollbox {
width: 100%;
overflow: auto;
max-height: 200px;
}
.quote-box, .code-box {
margin: 4px 10px 10px;
padding: 5px;
border: 1px solid #ccc;
}
.quote-box cite {
display: block;
padding-bottom: 5px;
}
.code-box strong.legend {
display: block;
padding-bottom: 5px;
font-weight: bold;
font-style: normal;
}

/* ================== */

/* Формы */
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 3px;}
p[class="checkfield"] *, div[class="checkfield"] *, fieldset[class="radiofield"] * {height: 20px; vertical-align: middle;}

textarea, input, select, optgroup {font-size: 14px;}
optgroup {font-weight: bold;}

.formal .container {padding: 10px 20px;}

.formsubmit {
padding: 0 0 0 15px;
margin: 10px 0 0 0;
}
.formsubmit input, .formsubmit a, .formsubmit span {margin: 0 6px 0 0;}

fieldset {border: none;}
fieldset legend {
font-style: italic;
font-weight: bold
}
fieldset fieldset {
border: none;
margin: 0;
padding: 0 0 8px 0
}
.fs-box {padiing: 5px 0;}
.fs-box p, .fs-box fieldset {padding: 0 0 8px 0;}

.inline .inputfield, .inline .selectfield, .inline .passfield {float: left;margin-right: 1em;}
.inline .infofield {clear:both}
.datafield br {display: none}
.required label, .datafield span.input {font-size: 10px;}
textarea, .longinput input {width: 64%; margin: 0;}
.hashelp {position: relative;}

/* ================== */

/* Предпросмотр сообщения */
#pun-post .topic {margin-top: 10px;}

/* ================== */

/* Профиль + ЛС */
#profile .container {padding-left: 300px;}
#profilenav {
  float: left;
  width: 300px;
  margin-left: -300px;
}

#profilenav li {padding-bottom: 10px;}
#viewprofile ul, #profilenav ul {
padding: 10px;
margin: 0 0 10px 0;
}
#viewprofile h2, #profilenav h2 {
padding: 0;
margin: 0;
}
#viewprofile li {margin-bottom:2px;}
#viewprofile li span {
float: left;
width: 180px;
padding: 5px 10px;
font-weight: bold;
}
#viewprofile li strong, #viewprofile li div {
display: block;
padding: 5px 10px;
font-weight: normal;
}
.punbb img.avatardemo {float: right;margin: 0 0 8px 18px;}

/* ================== */

/* Список пользователей */
#pun-userlist .formal, #pun-userlist .formal .container {margin-bottom: 0;}
#pun-userlist .tc2 {
text-align: left;
width: 20%;
}
#pun-userlist .tcl {width: 40%}

/* ================== */

/* Собщения об ошибках */
.info .container {padding: 5px 10px;}
.info .container .backlink {padding-top: 8px;}

/* ================== */

/* Регистрация */
.info-box {
padding: 10px 15px;
margin: 0 0 10px 0;
}
.punbb .info-box * {padding: 0 0 5px 0;}
.punbb #pun-main .info-box .legend {
font-weight: bold;
}

0

19

  • post: 0
  • Администратор
  • Автор: holliday
  • фон:
  • holliday
  • лз:
    Кристофер Мун, 24

    где я? там только тьма. мое пустое сердце не наполнить
  • плашка:
  • Сообщений: 260
  • Уважение: [+4/-0]
  • Последний визит:
    Сегодня 02:35:11
  • $: 0000
Код:
<!-- Мелодия в профиле, Romych -->
<script language="javascript">
$('td#profile-right li:has(span:contains("Любимая мелодия"))').map(function(){var Ku=$('strong',this).html();
if(Ku.match(/.mp3/)){plr=/(https?://[^s<"]+?.mp3)/gi; Ku=Ku.replace(plr,'<audio src="$1" controls style="width: 190px !important;"></audio>');};$('strong',this).html(Ku);});
$('li[class^="pa-fld"]:contains("Любимая мелодия")').map(function(){
var lm=$(this).text();if(!lm){return false;};
if(lm.match(/.mp3/)){var plr=/Любимая мелодия:(https?://[^s<"]+?.mp3)/gi;
lm=lm.replace(plr,'Любимая мелодия:<br><audio src="$1" controls style="width: 190px !important;"></audio>');};$(this).html(lm);});
</script>

Название "Любимая мелодия" надо заменить на ваше название дополнительного ПОЛЯ
В настройках поля обязательно должно быть Расположение - под названием. Если выбрать "без названия" скрипт работать не будет!
При необходимости скрыть название поля с этой версией используйте css: .pa-fld1 .fld-name {display: none;}

0

Страница: 1

Вы здесь » holliday » Тестовый форум » коды

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