Акции в Империю Азгар

КОДЫ ДЛЯ АКЦИИ ХТМЛ

[html]<link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
<style>
.ship {
display: flex;
align-items: center;
box-sizing: border-box;
overflow: hidden;
width: 650px;
height: 250px;
margin: 2em auto auto 2em;
padding: 40px 0;
background: #171b1c;
position: relative;
}

/* Общий стиль для изображений */
.shimg {
width: 300px;
height: 350px;
margin: -50px auto;
background-size: cover;
background-position: center;
}

.shimg1 {
order: 2; /* Изображение справа */
}

.shimg1::after {
display: block;
background: transparent;
width: 0;
height: 0;
margin-right: 92px;
margin-top: -2px;
border-left: 60px solid #171b1c;
border-bottom: 275px solid transparent;
}

.shimg2 {
order: 1; /* Изображение слева */
}

.shimg2::after {
display: block;
background: transparent;
width: 0;
height: 0;
margin-left: 241px;
margin-top: -2px;
border-right: 60px solid #171b1c;
border-bottom: 275px solid transparent;
}

/* Остальные стили... */

.stx1 {
order: 1;
width: 370px;
box-sizing: border-box;
text-align: center;
line-height: 130%;
font-size: 11px;
padding: 0 0 0 26px;
}

.stx1 h5 {
margin: 0 auto;
padding: 0 20px;
line-height: 150%;
font-style: normal !important;
font-weight: 100;
font-size: 34px;
font-family: "Dancing Script", Times New Roman, serif;
color: #b8b2a8;
text-shadow: 0 0 3px #000, 0 0 20px #b8b2a8;
}

.stx1 em {
display: block;
padding: 4px 0 18px 0;
font-family: Georgia, Arial, sans-serif;
font-weight: 400;
font-size: 11px;
font-style: italic !important;
color: #636363;
}

.stx2 {
display: block;
overflow: auto;
max-height: 120px;
text-align: center;
padding-right: 10px;
text-shadow: 0 0 2px #000;
color: #949494;
}

.stx2::-webkit-scrollbar {
width: 3px;
height: 3px;
background-color: transparent;
}

.stx2::-webkit-scrollbar-thumb {
background: #232323;
}

.footer-text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
font-size: 14px;
font-family: "Times New Roman", Times, serif;
color: #b8b2a8;
background-color: #171b1c;
padding: 5px 0;
letter-spacing: 1px;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.5);
}

.scroll-text-container {
display: flex;
align-items: center;
box-sizing: border-box;
overflow: hidden;
text-indent: 30px;
overflow-y: auto;
width: 650px;
min-height: 150px; /* Минимальная высота */
height: auto;
margin: auto auto auto 2em;
padding: 10px 10px 10px 10px;
color: #b8b2a8;
background: #171b1c;
position: relative;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Тень */
}

.scroll-text-container p {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
font-family: inherit !important; /* Наследует основной шрифт */
font-size: inherit !important; /* Наследует размер */
font-style: inherit !important; /* Наследует стиль */
font-weight: inherit !important; /* Наследует жирность */
color: inherit !important; /* Наследует цвет */
text-align: inherit !important; /* Наследует выравнивание */
}

@media (max-width: 540px) {
.ship {
flex-direction: column; /* Убедитесь, что элементы располагаются вертикально */
align-items: center; /* Центрируйте элементы по горизонтали */
width: 100%; /* Ширина 100% для мобильного */
height: auto; /* Высота авто для адаптации */
margin: 20px auto auto auto;
padding: 20px 0; /* Установите отступы для контейнера */
}

.shimg {
order: 1;
width: 100px !important;
height: 100px !important;
max-width: 100px;
max-height: 100px;
border-radius: 50%;
background-size: cover !important;
background-position: center;
margin: 0 auto 10px auto;
}

.shimg1::after, .shimg2::after {
display: none !important; /* Убедитесь, что треугольники скрываются */
}

.stx1 {
order: 2;
width: 90%;
font-size: 12px;
padding: 10px;
}

.stx1 h5 {
font-size: 24px;
}

.stx1 em {
font-size: 12px;
}

.stx2 {
font-size: 12px;
max-height: none;
overflow: visible;
}

.footer-text {
font-size: 12px;
}

.scroll-text-container {
width: 100%; /* Ширина 100% */
min-height: 150px; /* Минимальная высота */
height: auto;
margin: 0; /* Убедитесь, что нет внешних отступов */
padding: 40px 10px 10px 10px; /* Установите одинаковый внутренний отступ */
box-sizing: border-box; /* Включите это свойство */
background: #171b1c; /* Добавьте цвет фона, чтобы лучше видеть контейнер */
color: #b8b2a8; /* Цвет текста */
}
}
</style>

<div class="ship">
<div class="shimg shimg1" style="background-image: url('https://images2.imgbox.com/83/88/gloyEMvG_o.png');
background-size: contain; /* заполнение всем телом картинки. альтернатива cover*/"></div>
<div class="stx1">
<h5>Персонаж 1</h5>
<em>Внешность персонажа 1</em>
<div class="stx2">
Раса, народность (если есть), титул, род деятельности. Государство. Любая краткая информация, на которую нужно обратить внимание.
</div>
</div>
<div class="footer-text">Общие сведения о персонаже 1</div>
</div>
<div class="scroll-text-container">
<div>
Здесь вы можете добавить длинный текст, который будет прокручиваться, если он превышает высоту контейнера. Например, вы можете описать историю персонажа, его особенности или любые другие детали. Здесь вы можете добавить длинный текст, который будет прокручиваться, если он превышает высоту контейнера. Например, вы можете описать историю персонажа, его особенности или любые другие детали. Здесь вы можете добавить длинный текст, который будет прокручиваться, если он превышает высоту контейнера. Например, вы можете описать историю персонажа, его особенности или любые другие детали.
</div>
</div>

<div class="ship">
<div class="shimg shimg2"
style="background-image: url('https://images2.imgbox.com/24/79/lMyl3ckZ_o.png');
margin-top: 0px; /* опускайте или поднимайте (-10px) изображение на 10 пикселей */
background-size: contain; /* заполнение всем телом картинки. альтернатива cover*/"></div>
<div class="stx1">
<h5>Персонаж 2</h5>
<em>Внешность персонажа 2</em>
<div class="stx2">
Раса, народность (если есть), титул, род деятельности. Государство. Любая краткая информация, на которую нужно обратить внимание.
</div>
</div>
<div class="footer-text">Общие сведения о персонаже 2</div>
</div>
<div class="scroll-text-container">
<div>
Здесь вы можете добавить длинный текст, который будет прокручиваться, если он превышает высоту контейнера. Например, вы можете описать историю персонажа, его особенности или любые другие детали. Здесь вы можете добавить длинный текст, который будет прокручиваться, если он превышает высоту контейнера. Например, вы можете описать историю персонажа, его особенности или любые другие детали. Здесь вы можете добавить длинный текст, который будет прокручиваться, если он превышает высоту контейнера. Например, вы можете описать историю персонажа, его особенности или любые другие детали.
</div>
</div>
[/html]

КОД ДЛЯ САМИХ БЛОКОВ
Вставляете столько блоков, сколько вам желается. Есть блок где картинка справа, есть блок, где картинка слева.
Для персонажа №1 картинка справа:

Код:

 
[html]<div class="ship">
    <div class="shimg shimg1" style="background-image: url('https://images2.imgbox.com/83/88/gloyEMvG_o.png');
                 background-size: contain; /* заполнение всем телом картинки. при ненадобности удалить строку*/
                 margin-top: 0px; /* опускайте или поднимайте (-10px) изображение на 10 пикселей */"></div>
    <div class="stx1">
      <h5>Персонаж 1</h5>
      <em>Внешность персонажа 1</em>
      <div class="stx2">
        Раса, народность (если есть), титул, род деятельности. Государство. Любая краткая информация, на которую нужно обратить внимание.
      </div>
    </div>
    <div class="footer-text">Общие сведения о персонаже 1</div>
  </div>
  <div class="scroll-text-container">
      <div>
         Здесь вы можете добавить длинный текст, который будет прокручиваться, если он превышает высоту контейнера. Например, вы можете описать историю персонажа, его особенности или любые другие детали. Здесь вы можете добавить длинный текст, который будет прокручиваться, если он превышает высоту контейнера. Например, вы можете описать историю персонажа, его особенности или любые другие детали. Здесь вы можете добавить длинный текст, который будет прокручиваться, если он превышает высоту контейнера. Например, вы можете описать историю персонажа, его особенности или любые другие детали.
      </div>
  </div>[/html]

Для персонажа №2 картинка слева:

Код:

  [html]<div class="ship">
    <div class="shimg shimg2" 
         style="background-image: url('https://images2.imgbox.com/24/79/lMyl3ckZ_o.png'); 
                 background-size: contain; /* заполнение всем телом картинки. при ненадобности удалить строку*/
                 margin-top: 0px; /* опускайте или поднимайте (-10px) изображение на 10 пикселей */"></div>
    <div class="stx1">
      <h5>Персонаж 2</h5>
      <em>Внешность персонажа 2</em>
      <div class="stx2">
        Раса, народность (если есть), титул, род деятельности. Государство. Любая краткая информация, на которую нужно обратить внимание.
      </div>
    </div>
    <div class="footer-text">Общие сведения о персонаже 2</div>
  </div>
  <div class="scroll-text-container">
      <div>
         Здесь вы можете добавить длинный текст, который будет прокручиваться, если он превышает высоту контейнера. Например, вы можете описать историю персонажа, его особенности или любые другие детали. Здесь вы можете добавить длинный текст, который будет прокручиваться, если он превышает высоту контейнера. Например, вы можете описать историю персонажа, его особенности или любые другие детали. Здесь вы можете добавить длинный текст, который будет прокручиваться, если он превышает высоту контейнера. Например, вы можете описать историю персонажа, его особенности или любые другие детали.
      </div>
  </div>[/html]

Не забудьте поставить Ваши пожелания к роли и оставить связь с Вами для соискателей:

Код:

[b]⚜ Пожелания:[/b] .........
[b]⚜ Связь:[/b] ......

Для абзаца:

Код:

<p>Если хотите абзац, заключите каждый из них в такой код</p>
<p>Только тогда он заработает</p>

Если Вам требуется помощь в данном коде, обращайтесь к администрации!

[html]
<div class="ship">
<div class="shimg shimg2"
style="background-image: url('https://images2.imgbox.com/d9/21/oniSpKJG_o.gif');
background-size: contain; /* заполнение всем телом картинки. при ненадобности удалить строку*/
margin-top: -10px; /* опускайте или поднимайте (-10px) изображение на 10 пикселей */"></div>
<div class="stx1">
<h5>Афридда Тарн</h5>
<em>Eva Green</em>
<div class="stx2">
Маг, ангинка, ясновидящая семьи Акташ
</div>
</div>
<div class="footer-text">Общие сведения о персонаже</div>
</div>
<div class="scroll-text-container">
<div>
<p>Афридда Тарн — наследница древнего магического рода, обладающего склонностями к двум специализациям псионики - к Ясновидению и Воздаянию. В отличие от своей матери, Фрида — как коротко называли её близкие — обрела дар именно ясновидения: она стала способна предвидеть отрывки будущего, которые следовали за ней в течение всей её непростой жизни, полной скрытых опасностей и испытаний, свойственных тому, кто носит на себе печать магической крови.</p>

<p>Будучи долгожданным, но поздним ребенком в своей семье, она однажды, по недосмотру няньки, исчезла в лесу на несколько суток. Мшистые деревья и дикие звери стали её спутниками в этом странствии, а сам факт исчезновения стал толчком к пробуждению дара и стремительному развитию ее способностей. </p>
<p>Первые месяцы родители велели ей сдерживать свои непрошенные видения, не пуская их в разум. Они знали, какой ужасной может быть цена этих магических дарований: её отец, достигнув пятидесятилетнего возраста, порой терял границу между реальностью и призраками, что не позволяло ему оставлять свою дочь в неведении о потаённых опасностях её наследия.</p>

<p>Как и полагается магу в Азгаре, Афридда Тарн отточила свои навыки в гильдии, получив статус одной из самых сильных Видящих.
За щедрое вознаграждение её направили далеко от родных земель, в совершенно незнакомый ей теанский домен Акташ, где она несет службу уже три года.</p>
</div>
</div>[/html]
⚜ Пожелания: Фрида, в силу своего Дара, может казаться многим странной. Приветствуется, если вы решите сыграть ее медленно идущее навстречу сумасшествие. Вы можете сами выбрать отношение к членам семьи Акташ, но с Серен хотелось бы выстроить нечто доверительное, способное потом изменить судьбы обеим.
⚜ Связь: можно писать в личку/гостевую)