[html]<p style="display: block; width: 500px; height: 240px; line-height: 1.5; display: block;  white-space: pre-wrap; border: 7px ridge #bdc7aa; border-bottom: none; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.4); border-radius: 0px  0px  0px  0px;  text-align:center;  margin:auto; margin-top:5px; padding: 15px 15px 5px 15px; background-size: auto; text-align:center; font-size:18px; background: #e3e3e3";
Имя Фамилия на англ
<img src="https://upforme.ru/uploads/001c/60/80/9/822640.jpg" width="160" height="160"> <img src="https://upforme.ru/uploads/001c/60/80/9/822640.jpg" width="160" height="160"> 
имя внешности
• раса ^{100 y.o} • род деятельности • место рождения•

<p style="display: block; width: 500px;height: 450px; display: block; overflow-x: hidden; white-space: pre-wrap; border: 7px ridge #bdc7aa; border-top: none; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.4); border-radius: 0px  0px  0px  0px; text-align:left; margin:auto; margin-top:0px; padding: 10px 15px 5px 15px; background-size: auto; text-align:left; font-size:12px; background: #e3e3e3";
>
<img src="https://s.iimg.su/s/08/Rb5ZAoTHwouuCO9PvASCMPMuLpkBJepvjQmFZz1Z.jpg" width="500" height="40">

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

<img src="https://s.iimg.su/s/08/z5AuLDBmh9TzEV30GrTSSiA13eYB9pq1hVeeLrmr.jpg" width="500" height="40" >

краткое описание расы и/или способностей

Слабости
слабости персонажа, способы его убить и тд

<img src="https://s.iimg.su/s/08/f0KLMMv9ZCXXLXdrVF3FRlzcFdWMcoDIGgZqLIyA.jpg" width="500" height="40">

все, что считаете нужным сообщить о себе

[/html]

[html]<title>Центрированный блок с автоматическим разделением текста на абзацы</title>
  <style>
    /* Центрирование всей страницы */
    body {
      height: 100%;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Основной блок */
    .main-block {
      width: 550px;
      height: 750px;
      background-color: #e3e3e3; /* фон обоих блоков */
      border: 5px solid #bdc7aa; /* цвет бордюра */
      box-shadow: 0 4px 10px rgba(0,0,0,0.25);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      padding-top: 50px; /* Отступ сверху под вьюнок */
    }

    /* Вьюнок в бордере сверху (псевдоэлемент) */
    .main-block::before {
      content: "";
      position: absolute;
      top: 5px; /* чтобы не вышел за верх блока */
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 40px;
      background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/43/Ampelmann.svg');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      pointer-events: none;
      user-select: none;
      z-index: 10;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      filter: brightness(0.4) saturate(0.6);
    }

    /* Верхняя часть */
    .top-part {
      background-color: #e3e3e3;
      height: 265px;
      padding: 10px 10px 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
    }

    /* Заголовок */
    .top-part h2 {
      margin: 0 0 10px;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      user-select: none;
      color: #333;
    }

    /* Контейнер картинок */
    .images-row {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-bottom: 5px;
      box-sizing: border-box;
      flex-wrap: nowrap;
    }

    /* Картинки уменьшены для вместимости */
    .images-row img {
      width: 160px;
      height: 160px;
      object-fit: cover;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      user-select: none;
      flex-shrink: 0;
    }

    /* Текст под картинками — теперь будет plain text без <p>, и с автоматическим переносом абзацев */
    .text-below {
      width: 100%;
      text-align: center;
      font-size: 12px;
      color: #444;
      line-height: 1.4;
      user-select: text;
      font-weight: 550;
      white-space: pre-wrap; /* Сохраняет переносы строк и пробелы, переносит длинные строки */
    }

    /* Нижняя часть с прокруткой */
    .bottom-part {
      flex-grow: 1;
      overflow-y: auto;
      background-color: #e3e3e3;
      padding: 10px 20px 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-top: none;
    }

    /* Блок информации */
    .info-block {
      width: 100%;
      max-width: 550px;
      background-color: #eeebeb;
      border-radius: 6px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
      padding: 15px 20px 15px 20px;
font-size: 12px;
      box-sizing: border-box;
      margin-top: 30px; /* Отступ сверху для изображения */
      position: relative;
      color: #333;
      user-select: text;
      word-wrap: break-word;
      white-space: pre-wrap; /* Чтобы сохранялись переносы строк из текста без <p> */
    }

    /* Заголовок блока с отступом сверху под изображение */
    .info-block h3 {
      margin: 45px 0 10px 0; /* отступ сверху для картинки 40px + 5px */
      font-size: 18px;
      font-weight: 700;
      color: #222;
      user-select: text;
    }

    /* Изображение 550x40 над заголовком */
    .info-block .top-image {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 500px;
      max-width: calc(100% - 40px);
      height: 40px;
      object-fit: cover;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
      user-select: none;
      pointer-events: none;
      z-index: 5;
    }

    /* Чтобы заголовки и текст внутри воспринимались структурировано, но текст блоков без <p> */
   
    /* Для удобства восприятия скролла */
    .bottom-part::-webkit-scrollbar {
      width: 6px;
    }
    .bottom-part::-webkit-scrollbar-thumb {
      background-color: rgba(100,100,100,0.3);
      border-radius: 4px;
    }
    .bottom-part::-webkit-scrollbar-track {
      background-color: #e3e3e3;
    }

    .bottom-part:focus {
      outline: 2px solid #a1b56c;
      outline-offset: 2px;
    }
  </style>
</head>
<body>
  <div class="main-block" role="main" aria-label="Информационный блок с фиксированной верхней частью и прокручиваемой нижней частью">
    <!-- Верхняя часть -->
    <div class="top-part">
      <h2>Имя Фамилия персонажа</h2>

      <div class="images-row" aria-label="Три изображения в ряд">
        <img src="https://upforme.ru/uploads/001c/6d/da/2/371959.jpg" alt="Изображение 1" />
        <img src="https://upforme.ru/uploads/001c/6d/da/2/371959.jpg" alt="Изображение 2" />
        <img src="https://upforme.ru/uploads/001c/6d/da/2/371959.jpg" alt="Изображение 3" />
      </div>

      <!-- Текст без тегов p, с сохранением переносов -->
      <div class="text-below" aria-label="Дополнительный текст под изображениями" role="textbox" tabindex="0">
        имя фамилия внешности
Следующая строка в том же блоке остаётся отдельным абзацем.
      </div>
    </div>

    <!-- Нижняя часть с прокруткой -->
    <div class="bottom-part" tabindex="0" aria-label="Нижняя прокручиваемая часть с информацией">
      <section class="info-block" aria-labelledby="bio-title">
        <img class="top-image" src="https://upforme.ru/uploads/001c/6d/da/2/423712.jpg" alt="" aria-hidden="true" />
     
        <!-- Текст без p, с автоматическим переносом на абзацы -->
        Здесь размещается текст биографии. Этот текст может быть достаточно длинным, поэтому предусмотрена прокрутка только нижней части блока.
       
Дополнительный абзац для демонстрации прокрутки.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare, ipsum at iaculis faucibus, sapien nunc ultrices lorem, eget gravida purus nunc at elit.
      </section>

      <section class="info-block" aria-labelledby="race-title">
        <img class="top-image" src="https://upforme.ru/uploads/001c/6d/da/2/115538.jpg" alt="" aria-hidden="true" />
       
        Информация о расе персонажа или объекта. Можно добавить детали, особенности и другую важную информацию.
       
Дополнительный текст для увеличения содержания и проверки прокрутки.
      </section>

      <section class="info-block" aria-labelledby="personal-info-title">
        <img class="top-image" src="https://upforme.ru/uploads/001c/6d/da/2/456443.jpg" alt="" aria-hidden="true" />
       
        Дополнительная личная информация, контакты или прочие данные, которые могут быть длинными и потребовать прокрутки.
       
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.
       
End of the content block.
      </section>
    </div>
  </div>
</body>
</html>[/html]