КОДЫ ДЛЯ АКЦИИ ХТМЛ
[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: auto;
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;
content: "";
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;
content: "";
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: justify;
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;
overflow-y: auto;
width: auto;
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); /* Тень */
}
@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>
Если Вам требуется помощь в данном коде, обращайтесь к администрации!
