[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 {
    background: #D9D9D9;
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    padding: 30px 15px;
  }

  .wrap {
    max-width: 700px;
    margin: 0 auto;
    background: #c1b8b6;
    padding: 35px 40px;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  }

  .name {
    color: #3b4739;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 4px;
    text-transform: lowercase;
  }

  .name-sub {
    color: #3b4739;
    font-size: 14px;
    text-align: center;
    margin-bottom: 6px;
    font-style: italic;
  }

  .fandom {
    color: #3b4739;
    font-size: 12px;
    text-align: center;
    margin-bottom: 25px;
    text-transform: lowercase;
    opacity: 0.7;
  }

  .divider {
    height: 1px;
    background: rgba(59, 71, 57, 0.25);
    margin: 20px 0;
  }

  .section-title {
    color: #3b4739;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(59, 71, 57, 0.2);
  }

  .top-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 15px 0;
  }

  .top-table td {
    vertical-align: top;
  }

  .top-table td.img-cell {
    width: 200px;
  }

  .top-table td.info-cell {
    width: auto;
    white-space: pre-wrap;
  }

  .char-img {
    width: 320px;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
  }

  .info-row {
    margin-bottom: 10px;
  }

  .info-label {
    color: #3b4739;
    font-size: 11px;
    text-transform: lowercase;
    font-style: italic;
    display: block;
    margin-bottom: 1px;
  }

  .info-value {
    color: #000;
    font-size: 13px;
    font-weight: 500;
  }

  .player-info {
    margin-top: 5px;
  }

  details {
    background: rgba(59, 71, 57, 0.04);
    border-radius: 4px;
    overflow: hidden;
  }

  summary {
    color: #3b4739;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 18px;
    cursor: pointer;
    list-style: none;
    transition: background 0.2s;
  }

  summary:hover {
    background: rgba(59, 71, 57, 0.08);
  }

  summary::-webkit-details-marker {
    display: none;
  }

  summary::before {
    content: "▸ ";
    color: #3b4739;
    margin-right: 4px;
  }

  details[open] summary::before {
    content: "▾ ";
  }

  .post-sample {
    padding: 0 18px 15px;
    color: #333;
    font-size: 13px;
    line-height: 1.7;
white-space: pre-wrap;
text-align: justify;
  }

  @media (max-width: 600px) {
    .wrap { padding: 25px 20px; }
    .top-table td.img-cell,
    .char-img { width: 140px; height: 224px; }
    .name { font-size: 18px; }
  }
</style>
<base target="_blank">
</head>
<body>

<div class="wrap">

  <div class="name">name surname</div>
  <div class="name-sub">имя фамилия</div>
  <div class="fandom">fandome</div>

  <table class="top-table">
    <tr>
      <td class="img-cell">
        <img src="ссылка на картинку" class="char-img" alt="">
      </td>
      <td class="info-cell">
        <div class="section-title">информация о персонаже</div>
        то, что вы хотите сказать о вашем персонаже по пунктам, можно ссылкой на вики
для ссылки используйте <code><a href="адрес ссылки">текст ссылки</a></code>
        </div>
      </td>
    </tr>
  </table>

  <div class="divider"></div>

  <div class="section-title">информация об игроке</div>
  <div class="player-info">
    <div class="info-row">
      <span class="info-label">связь</span>
      <span class="info-value">значение</span>
    </div>
    </div>

  <div class="divider"></div>

  <details>
    <summary>пример поста</summary>
    <div class="post-sample">
      текст поста
    </div>
  </details>

</div>

</body>
</html>[/html]