[html]<style>
.quest-box {
width:950px;
height:500px;
background:url(https://upforme.ru/uploads/001c/c0/fe/2/34137.png) top left no-repeat;
}
.quest-user-box {
display:flex;
flex-wrap:wrap;
justify-content:left;
align-content:space-between;
width:280px;
height:460px;
padding:20px;
background:linear-gradient(90deg, #E8C8BD 0%, #E2CCCE 100%);
position:absolute;
margin:0px 0 0 600px;
}
.user-window {
width:225px;
padding: 20px;
background:var(--pun-color);
}
.user-window span {
display:block;
height:100px;
overflow-y:scroll;
font:400 11px var(--font-text);
line-height:18px;
}
.user-window name {
position:absolute;
display:inline-block;
font:700 13px var(--font-text);
height:16px;
padding: 0px 5px;
background:var(--color-text);
color:var(--pun-color);
margin:-28px 0 0 00px;
}
.user-window data {
display:block;
margin:5px 0;
font:700 13px var(--font-text);
color:var(--color2);
}
.quest-text {
position:absolute;
margin:197px 0 0 44px;
width:255px;
font:400 10px var(--font-text);
text-align:justify;
}
.quest-text big {
display:block;
margin-top:20px;
font:600 13px var(--font-text);
}
.quest-ams {
position:absolute;
margin:245px 0 0 456px;
width:110px;
}
.quest-ams a:link, .quest-ams a:visited {
display:inline-block;
padding:0 10px;
height:17px;
background:var(--color-text);
color:var(--pun-color);
font:600 14px var(--font-text);
}
.quest-ams a:hover, .quest-ams a:active {
background:var(--color2);
}
.htmlcode {
position:absolute;
margin:391px 0 0 272px;
background:var(--pun-color);
width:280px;
height:60px;
padding:10px;
}
.htmlcode pre {
padding-top:10px;
color:var(--color2);
font:400 10px Lucida Console;
}
.htmlcode a.codelink:link, .htmlcode a.codelink:visited {
display:inline-block;
padding:0 20px;
height:22px;
background:var(--color2);
color:var(--pun-color);
font:600 11px var(--font-text);
line-height:22px;
}
</style>
<script>
function copyPreContent(link) {
  // Находим родительский div, затем внутри него ищем pre
  const parentDiv = link.closest('.htmlcode');
  const pre = parentDiv.querySelector('pre');
 
  // Получаем HTML-содержимое pre
  const htmlContent = pre.innerHTML;
 
  // Создаём временный элемент для копирования
  const temp = document.createElement('textarea');
  temp.value = htmlContent; // Берём HTML-разметку
  document.body.appendChild(temp);
  temp.select();
  document.execCommand('copy');
  document.body.removeChild(temp);
 
  // Визуальный фидбек
  link.textContent = 'скопировано';
  setTimeout(() => {
    link.textContent = 'скопировать код';
  }, 1500);
}
</script>

<div class=quest-box>

<div class=quest-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae turpis libero. Integer eget arcu vitae turpis ornare tristique id a massa. Etiam sed justo massa. Integer nec mattis ex. Integer ut felis mi.
<big>внешности бронируются на три дня</big></div>

<div class=quest-ams>
<a href="https://troyandesign.rusff.me/">амс один</a>
<a href="https://troyandesign.rusff.me/">второй амс</a>
<a href="https://troyandesign.rusff.me/">амс три</a>
</div>

<div class="htmlcode">
  <a class=codelink href="#" onclick="copyPreContent(this); return false;">скопировать код</a>
  <pre><b>имя внешности</b> — <a href="ссылка на профиль">имя игрока</a><br></pre>
</div>

<div class=quest-user-box>
<div class=user-window><name>мужские внешности</name><span>

<data>до 12.02</data>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>
<data>до 12.02</data>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>

</span></div>
<div class=user-window><name>женские внешности</name><span>

<data>до 12.02</data>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>
<data>до 12.02</data>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>

</span></div>
<div class=user-window><name>выкупленные</name><span>

<data>за амс</data>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>
<data>за игроками</data>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>
<b>имя внешности</b> — <a href="https://troyandesign.rusff.me/">имя игрока</a><br>

</span></div>
</div></div>[/html][hideprofile]

[html]<style>
.news-box {
display:flex;
flex-wrap:wrap;
justify-content:left;
align-content:flex-start;
gap:10px;
width:800px;
height:auto;
background:var(--pun-color);
border:1px solid var(--border1);
padding:40px;
}
.news-title {
display:flex;
flex-wrap:wrap;
justify-content:right;
align-content:center;
width:100%;
height:200px;
background:url(https://upforme.ru/uploads/001c/c0/fe/2/869026.jpg) top left no-repeat;
padding:0 40px;
}
.news-title .titlebox {
display:inline-block;
text-align:right;
width:200px;
}
.news-title title {
display:inline-block;
height:40px;
background:var(--color2);
color:var(--pun-color);
font:800 32px var(--font-text);
padding:0 10px;
line-height:40px;
}
.text-block {
width:100%;
height:auto;
padding:20px;
text-align:justify;
border:1px solid var(--border1);
background:var(--pun-color);
font:400 12px var(--font-text);
line-height:19px;
}
.text-block quotes {
display:block;
width:100%;
max-width:720px;
height:auto;
text-align:justify;
padding:20px;
margin:15px 0;
background:var(--pun-quote);
font:400 12px var(--font-text);
line-height:19px;
}
.news-box h1 {
display:inline-block;
height:24px;
background:var(--color-text);
color:var(--pun-color);
font:800 20px var(--font-text);
padding:0 10px;
line-height:24px;
}
mus {
display:block;
width:100%;
text-align:right;
height:30px;
color:var(--color2);
font:600 12px var(--font-text);
line-height:30px;
}
.results-block {
width:100%;
height:auto;
padding:20px;
text-align:justify;
border:1px solid var(--border1);
background:var(--pun-quote);
font:400 12px var(--font-text);
line-height:19px;
}
.results-block div {
display:flex;
gap:10px;
}
.results-block a:link, .results-block a:visited {
display:inline-block;
height:18px;
padding:0 10px;
margin-top:3px;
background:var(--color2);
font:600 12px var(--font-text);
color:var(--color-text);
line-height:18px;
}
.results-block a:hover, .results-block a:active {
background:var(--color1);
}
</style>

<div class=news-box>
<div class=news-title><div class=titlebox><title>новости</title><title>от имя амс</title></div></div>

<div class=text-block>
Шла лиса по дорожке и нашла ла́поток, пришла к мужику и просится: «Хозяин, пусти меня ночевать». Он говорит: «Некуда, лисонька! Тесно!» – «Да много ли нужно мне места! Я сама на лавку, а хвост под лавку». Пустили ее ночевать; она и говорит: «Положите мой ла́поток к вашим курочкам». Положили, а лисонька ночью встала и забросила свой лапоть. Поутру встают, она и спрашивает свой лапоть, а хозяева говорят:
<br><br>
<b>«Лисонька, ведь он пропал!» – «Ну, отдайте мне за него курочку».</b>
<quotes>Взяла курочку, приходит в другой дом и просит, чтоб ее курочку посадили к хозяйским гуськам. Ночью лиса припрятала курочку и получила за нее утром гуська. Приходит в новый дом, просится ночевать и говорит, чтоб ее гуська посадили к барашкам; опять схитрила, взяла за гуська барашка и пошла еще в один дом. Осталась ночевать и просит посадить ее барашка к хозяйским бычкам. Ночью лисонька украла и барашка, а поутру требует, чтобы за него отдали ей бычка.</quotes>
Всех – и курочку, и гуська, и барашка, и бычка – она передушила, мясо припрятала, а шкуру бычка набила соломой и поставила на дороге. Идет медведь с волком, а лиса говорит: «Подите, украдите сани да поедемте кататься».
</div>

<mus>рекомендованный тречок для вайба — ла ла ла</mus>

<div class=results-block>
<div style="justify-content:left;"><h1>активисты</h1>
<a href="https://troyandesign.rusff.me/">имя один</a>
<a href="https://troyandesign.rusff.me/">имя два</a>
<a href="https://troyandesign.rusff.me/">имя три</a>
<a href="https://troyandesign.rusff.me/">имя четыре</a>
<a href="https://troyandesign.rusff.me/">имя пять</a>
</div>
<br>
<div style="justify-content:right;">
<a href="https://troyandesign.rusff.me/">имя один</a>
<a href="https://troyandesign.rusff.me/">имя два</a>
<a href="https://troyandesign.rusff.me/">имя три</a>
<a href="https://troyandesign.rusff.me/">имя четыре</a>
<a href="https://troyandesign.rusff.me/">имя пять</a>
<h1>ивенты</h1></div>
</div>

</div>[/html][hideprofile]