Хочу видеть

Здесь оставляем краткое описание на того, кого хотели бы видеть на форуме.

[html]<style>
.character-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
margin: 20px auto;
max-width: 600px;
background: #171b1c;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
color: #b8b2a8;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.character-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.character-image {
width: 100%;
height: 300px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.character-info {
text-align: center;
font-family: "Arial", sans-serif;
padding: 20px;
}

.character-info h5 {
font-size: 24px;
margin: 0;
color: #b8b2a8;
}

.character-info em {
font-size: 14px;
color: #6c6c6c;
margin-bottom: 10px;
display: block;
}

.character-description {
font-size: 14px;
color: #949494;
text-align: justify;
line-height: 1.5;
text-indent: 30px;
max-height: 150px;
overflow: hidden;
padding: 0 10px;
transition: max-height 0.3s ease, opacity 0.3s ease;
position: relative;
}

/* "Читать дальше ▼" изначально видно */
.expand-text {
display: block;
text-align: center;
font-size: 14px;
color: #b8b2a8;
font-weight: bold;
padding: 5px;
cursor: pointer;
transition: opacity 0.3s ease;
}

/* Когда текст раскрывается - скрываем "Читать дальше" */
.character-card:hover .character-description {
max-height: 500px;
}

.character-card:hover .expand-text {
display: none;
}

/* Чтобы "Читать дальше" было всегда внизу, если текст скрыт */
.character-description-wrapper {
position: relative;
padding-bottom: 20px; /* Отступ, чтобы текст не перекрывался */
}

.expand-text-wrapper {
position: absolute;
bottom: 0;
width: 100%;
background: #171b1c;
text-align: center;
padding: 5px 0;
}

.character-description p {
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
}

@media (max-width: 540px) {
.character-image {
width: 150px;
height: 150px;
border-radius: 50%;
margin: 20px auto;
}

.character-card {
padding: 10px;
}

.character-info {
padding: 10px;
}

.character-info h5 {
font-size: 20px;
}

.character-description {
font-size: 12px;
padding: 0 10px;
}

.character-description p {
font-size: 12px !important;
line-height: inherit;
}
}
</style>

<div class="character-card">
<div class="character-image" style="background-image: url('https://i.pinimg.com/736x/cb/ad/5d/cbad5d432d2a1ce23bc2f24959bd20f2.jpg'); background-position: center 0px;"></div>
<div class="character-info">
<h5>Персонаж 1</h5>
<em>Внешность персонажа 1</em>
<div class="character-description-wrapper">
<div class="character-description">
Раса, народность (если есть), титул, род деятельности. Государство. Любая краткая информация, на которую нужно обратить внимание. Здесь вы можете добавить длинный текст, который будет раскрываться полностью при наведении мышки. Например, вы можете описать историю персонажа, его особенности или любые другие детали.
<p>Каждый новый абзац стоит заключить вот в такой код [p][/p], но в треугольных скобках. Так он перенесется на новую строку и автоматически сделает отступ, вписанный уже в код, создав красную строку.</p>
<p>Следующий абзац также нужно заключить в такой же код. И так до бесконечности. Однако старайтесь не расписывать слишком много. Оставьте что-то и тому, кто откликнется на заявку!</p>
</div>
<div class="expand-text-wrapper">
<span class="expand-text">Читать дальше ▼</span>
</div>
</div>
</div>
</div>

[/html]

Отдельно код на плашку. Можно несколько друг за другом.

Код:

[html]<div class="character-card">
<div class="character-image" style="background-image: url('!ССЫЛКА НА КАРТИНКУ!'); background-position: center 0px;"></div>
  <div class="character-info">
    <h5>ИМЯ ПЕРСОНАЖА</h5>
    <em>ВНЕШНОСТЬ КОТОРУЮ ХОТИТЕ ВИДЕТЬ У ПЕРСОНАЖА</em>
    <div class="character-description-wrapper">
      <div class="character-description">
        Раса, народность (если есть), титул, род деятельности. Государство. Любая краткая информация, на которую нужно обратить внимание. Здесь вы можете добавить длинный текст, который будет раскрываться полностью при наведении мышки. Например, вы можете описать историю персонажа, его особенности или любые другие детали.
        <p>Каждый новый абзац стоит заключить вот в такой код [p][/p], но в треугольных скобках. Так он перенесется на новую строку и автоматически сделает отступ, вписанный уже в код, создав красную строку.</p>
        <p>Следующий абзац также нужно заключить в такой же код. И так до бесконечности. Однако старайтесь не расписывать слишком много. Оставьте что-то и тому, кто откликнется на заявку!</p>
      </div>
      <div class="expand-text-wrapper">
        <span class="expand-text">Читать дальше ▼</span>
      </div>
    </div>
  </div>
</div>[/html]

Код абзаца для удобства:

Код: