[hideprofile]
[html]
<div class="html-content"><style>
.coop{position:relative;width:949px;max-width:100%;height:650px;margin:0 auto;border-radius:13px;
  background:url(https://forumstatic.ru/files/001c/bd/a1/99543.png) -6px 0/955px 650px no-repeat;
  font-family:var(--font-main);overflow:hidden}
.coop a{text-decoration:none}

/* скролл в тон */
.coop-intro,.coop-list{scrollbar-width:thin;scrollbar-color:#D9B6C6 transparent}
.coop-intro::-webkit-scrollbar,.coop-list::-webkit-scrollbar{width:5px}
.coop-intro::-webkit-scrollbar-track,.coop-list::-webkit-scrollbar-track{background:transparent}
.coop-intro::-webkit-scrollbar-thumb,.coop-list::-webkit-scrollbar-thumb{background:#D9B6C6;border-radius:5px}

/* интро в салфетке */
.coop-intro{position:absolute;left:282px;top:253px;width:240px;height:211px;overflow:auto;
  font-style:italic;font-weight:500;font-size:12px;line-height:157%;text-align:justify;
  letter-spacing:-.01em;text-transform:lowercase;color:#987E88;transform:rotate(-6.39deg)}

/* меню-ссылки */
.coop-menu a{position:absolute;width:110px;font-style:italic;font-weight:600;font-size:10px;
  letter-spacing:.09em;text-transform:lowercase;color:#C78499;white-space:nowrap;
  transform:matrix(.99,-.12,.17,.98,0,0)}
.coop-menu a:hover{color:#92628a}
.coop-menu .m1{left:422px;top:475px}
.coop-menu .m2{left:310px;top:516px}
.coop-menu .m3{left:421px;top:502px}
.coop-menu .m4{left:312px;top:538px}
.coop-menu .m5{left:424px;top:524px}
.coop-menu .m6{left:368px;top:553px}

/* имена в «ams:» */
.coop-ams{position:absolute;left:619px;top:77px;width:197px;display:flex;flex-direction:column;gap:4px}
.coop-ams .row{display:flex}
.coop-ams a{flex:1;text-align:center;font-style:italic;font-weight:500;font-size:12px;
  letter-spacing:-.01em;text-transform:lowercase;color:#4F6295}
.coop-ams a:hover,.coop-ams a.on{color:#D28094}

/* списки по датам */
.coop-list{position:absolute;left:569px;top:177px;width:288px;height:346px;overflow:auto;text-align:center}
.coop-list .d{font-style:italic;font-weight:600;font-size:12px;letter-spacing:-.01em;text-transform:lowercase;
  color:#4F6295;margin:8px 0 6px}
.coop-list p{margin:0 0 3px;line-height:17px;font-style:italic;font-weight:500;font-size:12px;
  letter-spacing:-.01em;text-transform:lowercase;color:#5F5F6B}
.coop-list p a{color:#4F6295}

/* кнопка «забрать код» */
.coop-grab{position:absolute;left:647px;top:558px;width:132px;height:18px;border:none;border-radius:2px;
  background:#E2B5CC;box-shadow:-1px 1px 1px rgba(0,0,0,.26),0 0 1px rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:#fff;font-family:var(--font-main);font-style:italic;font-weight:600;font-size:10px;
  letter-spacing:.1em;text-transform:lowercase}

/* поле внешности */
.coop-face{position:absolute;left:599px;top:594px;width:232px;height:18px;border:none;background:transparent;
  font-family:var(--font-main);font-style:italic;font-weight:600;font-size:10px;letter-spacing:.08em;
  text-transform:lowercase;text-align:center;color:#C78499;outline:none}
.coop-face::placeholder{color:#b9a6af;font-style:italic}
</style>

<div class="coop">

  <div class="coop-intro">Доброго времени суток всем ожидающим!<br>
На связи Бостон. И если вы читаете это - добро пожаловать на борт. Мы пока не взлетели, но у нас идет уверенная подготовка к этому, чтобы все было по красоте. <br>
- бронь внешности за зарегистрированными пользователями держится до открытия ролевой, с исключением, если игрок не оставляет сообщения в течении 3-х дней, тогда его внешность может быть передана другому. <br>
- внешность за гостями, для друзей или на подумать держится ровно на одни сутки (24 часа с момента сообщения).<br>
- регистрация дублей внешности или близнецов только с разрешением игрока занявшего внешность первым.<br>
- переезда не будет, мы остаемся на этом адресе.</div>

  <div class="coop-menu">
    <a class="m1" href="#"></a>
    <a class="m2" href="#">новости</a>
    <a class="m3" href="#">конкурсы</a>
    <a class="m4" href="#">флуд</a>
    <a class="m5" href="#">реклама</a>
    <a class="m6" href="#">полезная ссылка</a>
  </div>

  <div class="coop-ams">
    <div class="row"><a class="on" href="#">name</a><a href="#">name</a><a href="#">name</a></div>
    <div class="row"><a href="#">name</a><a href="#">name</a><a href="#">name</a></div>
  </div>

  <div class="coop-list">
    <div class="d">23.06</div>
    <p>name surname//<a href="#">ник персонажа</a></p>
    <p>name surname//<a href="#">ник персонажа</a></p>
    <p>name surname//<a href="#">ник персонажа</a></p>
    <p>name surname//<a href="#">ник персонажа</a></p>
    <p>name surname//<a href="#">ник персонажа</a></p>

    <div class="d">23.06</div>
    <p>name surname//<a href="#">ник персонажа</a></p>
    <p>name surname//<a href="#">ник персонажа</a></p>
    <p>name surname//<a href="#">ник персонажа</a></p>
    <p>name surname//<a href="#">ник персонажа</a></p>
    <p>name surname//<a href="#">ник персонажа</a></p>

    <div class="d">23.06</div>
    <p>name surname//<a href="#">ник персонажа</a></p>
    <p>name surname//<a href="#">ник персонажа</a></p>
  </div>

  <button type="button" class="coop-grab" data-label="внешность персонажа" data-until="до" data-guest="гость">забрать код</button>

  <input type="text" class="coop-face" placeholder="впиши внешность">

</div></div>
[/html]