Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни.

Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить себя с толку. Он собрал семь своих заглавных букв, подпоясал инициал за пояс и пустился в дорогу. Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад, на силуэт своего родного города Буквоград, на заголовок деревни Алфавит и на подзаголовок своего переулка Строчка. Грустный реторический вопрос скатился по его щеке и он продолжил свой путь.

По дороге встретил текст рукопись. Она предупредила его: «В моей стране все переписывается по несколько раз. Единственное, что от меня осталось, это приставка «и». Возвращайся ты лучше в свою безопасную страну». Не послушавшись рукописи, наш текст продолжил свой путь. Вскоре ему повстречался коварный составитель рекламных текстов, напоивший его языком и речью и заманивший в свое агенство, которое использовало его снова и снова в своих проектах. И если его не переписали, то живет он там до сих пор.

[html]<div id="spiritworkroom"><div class="spiritfirst">
    <div class="spiritfirstpic"><img src="https://i.imgur.com/AGpYFme.png"></div>
    <div class="spiritfirsttitle">LOREM IMPULSE
      <subtitle>crossover</subtitle></div>
    <div class="spiritfirsttext"><subtitle>lorem ipsum dolor sit amet</subtitle>
      <about>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.</about></div>
  </div>
 
  <div class="spiritsecond">
<div class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1">гостевая</label>

    <input id="tab2" type="radio" name="tabs">
    <label for="tab2">придержано</label>

    <input id="tab3" type="radio" name="tabs">
    <label for="tab3">правила</label>

    <section id="content-tab1">
        <p>
<b>♦</b> роли задерживаются на <b>три дня</b> включительно<br>
<b>♦</b> заявки из серии <i>«хочу быть нужным»</i> оставлять здесь<br>
<b>♦</b> не забываем заполнять шаблон, он представлен ниже <br>
<br>
мы увидели и узнали, удивили друг друга слишком поздно — у каждого уже своя жизнь, свои муки и грёзы. взглядами и парой случайных фраз обменялись. да, мы увидели, узнали, удивили друг друга как-то странно — то ли поздней ночью, то ли утром неожиданно ранним. просто череда таких обычных совпадений. мы увидели, узнали, удивили друг друга очень просто — разные дороги привели нас на один перекрёсток. разные потоки когда-нибудь попадут в одно русло. мы увидели, узнали, удивили друг друга между прочим. вместе прочитали что-то важное там, между строчек. вместе мы увидели, как вдруг изменились. случайно.
<br><br>
поддавшись импульсу, мы вот так играем в слова. как другие играют в мяч. и эта игра слов — самая прелестная игра в мире. сыграем?
        </p>
    </section> 
    <section id="content-tab2">
        <p>

<b>j.k.rowling's wizarding world</b> // astoria greengrass <br>
<b>king arthur: legend of the sword</b> // the mage

        </p>
    </section>
    <section id="content-tab3">
        <p>
<font style="font-weight:900;font-family:playfair display;font-size: 14px;letter-spacing: 1px;color:#870000;">CROSSOVER;</font>
          жанр, подразумевающий смешение персонажей и/или локаций из разных произведений.</p>
<p>
<font style="font-weight:900;font-family:playfair display;font-size: 14px;letter-spacing: 1px;color:#870000;">NC-17 (18+);</font>
          рейтинг проекта, при котором разрешён и присутствует контент, не предназначенный для детей.</p>
<p>

<font style="font-weight:900;font-family:playfair display;font-size: 14px;letter-spacing: 1px;color:#870000;">EPISODES;</font>
          система игры — эпизодическая, игровой мастеринг со стороны администрации не предусмотрен.</p><br>
<p>

<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o1. ПЕРСОНАЖ;</font><br>
    </p><p style="line-height: 16px;margin-left: 30px;font-size: 11px; font-style: italic;">      в рамках кроссовера должен в обязательном порядке являться каноническим, но благодаря гибкости жанра образ может быть прописан в соответствии с представлениями игрока в представленных каноном рамках.</p>
<p>

<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o1.1;</font> в основной игре объединение нескольких образов в один не практикуется, при этом ограничения на отыгрыш подобного рода в альтернативе отсутствуют.</p>
<p>
<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o1.2;</font> смена персонажа предварительно обговаривается с администрацией.</p>
<p>
<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o1.3;</font> две роли в одни руки отдаются совершенно бесплатно, но обговариваются с администрацией; для последующих ролей необходим один игровой пост от каждой из предыдущих.</p>
<p>
<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o1.4;</font> альтернативный раздел остаётся альтернативным во всём, в том числе и в случае игры за персонажа, в рамках основной игры принадлежащего другому игроку; никакие особые условия на этот счёт не предусмотрены.
</p><br>
<p>
<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o2. ПРОФИЛЬ;</font><br>
     </p><p style="line-height: 16px;margin-left: 30px;font-size: 11px; font-style: italic;">     должен быть заполнен после принятия анкеты, в противном случае может быть приравнен к профилю с отсутствующей форумной активностью и удалён.
</p>
<p>
<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o2.1;</font> регистрация профилей осуществляется на латинице; ник представляет собой имя и фамилию персонажа либо его прозвище, если его персональные данные неизвестны.</p>
<p>
<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o2.2;</font> для оформления профиля могут быть использованы как реальные прототипы, так и концепт- и фан-арты; учёт занятых внешностей не ведётся.</p><br>
<p>

<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o3. АНКЕТА;</font><br>
      </p><p style="line-height: 16px;margin-left: 30px;font-size: 11px; font-style: italic;">    оформляется по шаблону, все пункты которого являются обязательными.
</p>
<p>
<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o3.1;</font> анкеты выкладываются только в готовом виде — тема с анкетой в разработке незамедлительно сносится в архив.</p>
<p>
<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o3.2;</font> анкеты, полностью скопированные из общедоступных источников в интернете, не принимаются — информация подлежит полной переработке.</p>
<p>
<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o3.3;</font> проверка анкет производится в течение трёх дней; столько же даётся на внесение исправлений в случае необходимости таковых; по истечению данного срока неисправленные анкеты отправляются в архив.</p>
<p>
<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o3.4;</font> при проверке анкеты персонажа, пришедшего по заявке, решение о принятии принимается администрацией, за исключением выкупленных заявок, где заказчик имеет право высказать своё мнение, которое будет считаться приоритетным.</p><br>
<p>

<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o4. ИГРОВАЯ ДЕЯТЕЛЬНОСТЬ;</font><br>
      </p><p style="line-height: 16px;margin-left: 30px;font-size: 11px; font-style: italic;">    полностью остаётся на откуп игрокам в плане оформления, объёма и стиля постов.
</p>
<p>
<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o4.1;</font> срок для начала игры — месяц с момента принятия; в дальнейшем минимальная игровая активность составляет один пост в месяц.
</p><br>
<p>
<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o5. ФОРУМНАЯ АКТИВНОСТЬ;</font><br>
    </p><p style="line-height: 16px;margin-left: 30px;font-size: 11px; font-style: italic;">      для каждого профиля рассматривается отдельно.
</p>
<p>
<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o5.1;</font> максимальный срок нулевой форумной активности, отсутствия без предупреждения и каких-либо признаков жизни — одна неделя, после чего профиль попадает в статус неактивного и может быть удалён.</p>
<p>
<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o5.2;</font> плановые чистки проходят раз в две-три недели; администрация не оповещает о чистках заранее, но вывешивает списки потенциальных кандидатов на удаление за три дня до чистки.</p><br>
<p>

<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o6. РЕКЛАМНАЯ ДЕЯТЕЛЬНОСТЬ;</font><br></p><p style="line-height: 16px;margin-left: 30px;font-size: 11px; font-style: italic;">
          осуществляется в специальном разделе и со специально созданного для этого рекламного аккаунта.
</p>
<p>
<font style="font-weight:900;font-family:playfair display;font-size: 12px;letter-spacing: 1px;">o6.1;</font> отсутствие партнёрства — решение администрации, которая, ввиду малой эффективности, решила отказаться от данного средства пиара, однако на форуме действует баннерообмен.
</p><br>
<p style="line-height: 16px;margin-left: 30px;font-size: 11px">

    Напоминаем, что в дополнение к данным правилам на форуме действуют правила сервиса <B>«QuadroSystems» LLC</B>. При необходимости правила могут быть дополнены.
    </p>
    </section>   
</div>
  </div>
</div>
<div class="clearer"></div>

<style>
/* код от вещего духа */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700');

#spiritworkroom {    width: 600px;
    height: 428px;
    background: #000202b5;
    margin: auto;
}

.spiritfirst {     float: right;
    margin: 7px;
    width: 184px;
    height: 405px;
    overflow: hidden;
    position: relative;
    border: 5px solid #dedede;
}

.spiritfirstpic {    margin: auto;
    width: 184px;
    height: 400px;
}

.spiritfirsttitle {    font-family: playfair display;
    font-weight: 900;
    width: 184px;
    color: #dfdfdf;
    text-shadow: 1px 1px 0px #000;
    font-size: 18px;
    height: 73px;
    margin: -80px 0 0 0px;
    z-index: 10;
    position: relative;
    padding-left: 10px;
    background: rgba(0,0,0,.65);
    transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s;
}

.spiritfirsttitle subtitle {    box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
    font-family: arial;
    font-weight: normal;
    color: #cecece;
    text-shadow: 1px 1px 0px #333;
    font-size: 7px;
    display: block;
    text-align: right;
    letter-spacing: 1px;
    margin-top: 4px;
    margin-right: 20px;
}
.spiritfirsttitle:before {background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));
content: "";
display: block;
position: absolute;
width: 100%;
height: 50px;
top: -50px;
margin-left: -10px}

.spiritfirsttext {
z-index: 8;
    position: relative;
    background: rgba(0,0,0,.65);
    width: 185px;
    margin: 0px 0 0 0px;
    font-family: arial;
    font-size: 9px;
    text-align: justify;
    padding: 1px 0px;
    color: #efefef;
}

.spiritfirsttext about {margin: 10px 15px;
    display: block;
    box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
    padding-top: 10px;
}

.spiritfirsttext:after {background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
content: "";
display: block;
position: absolute;
width: 100%;
height: 100px;
bottom: -100px;
margin-left: 0px}

.spiritfirsttext subtitle {
text-align: center;
    display: block;
    width: 185px;
    font-size: 9px;
    font-family: playfair display;
    color: #999;
    opacity: 0;
    transform: translate(0,400px);
    transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s;
}

.spiritfirst:hover .spiritfirsttitle {    margin-top: -466px;
}
.spiritfirst:hover subtitle {opacity:1;
  transform: translate(0,0px)}

.spiritsecond {
     background: url(https://i.imgur.com/1byd5x1.png);
    width: 385px;
    margin: 7px;
    padding-bottom: 15px;
    height: auto;
    position: absolute;
}

.tabs {
padding: 0px;
margin: 0 auto;
}

.tabs>section {
    display: none;
    padding: 17px;
    height: 310px;
    margin-right: -5px!important;
    overflow-y: auto;
    padding-right: 22px;
    margin: 5px;
    font-family: arial;
    font-size: 11.5px;
    text-align: justify;
}
.tabs>section>p {
margin: 0 0 5px;
line-height: 1.5;
color: #383838;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
.tabs>section::-webkit-scrollbar {
    width: 3px;
    height: 5px;
}
.tabs>section::-webkit-scrollbar-thumb {
    background-color: #5e7377;
    border: solid 2px #2b2b2b;
}
.tabs>section::-webkit-scrollbar-track {
    background-color: #ffffff;
    border: solid 1px #166677;
}

@keyframes fadeIn {
from {
    transform: translate(-400px,0);
    transform-origin: 50% 0%;
}
to {
    transform: translate(0px,0);
}
}

.tabs>input {
display: none;
position: absolute;
}

.tabs>label:first-of-type {box-shadow: none}
.tabs>label {
display: inline-grid;
    margin: 5px -15px 4px 2px;
    padding: 13px 0px;
    font-weight: 600;
    text-align: center;
    width: 130px;
    border-width: 0px 0px 1px 0px;
    left: 3px;
    top: 0px;
    position: relative;
    font-family: playfair display;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.tabs>label:after {content: "";
    display: block;
    position: absolute;
    width: 109px;
    height: 1px;
    background: #dfdfdf;
    left: 11px;
    bottom: 3px;
    transform: scaleX(0);
    transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;
}

/*.tabs>label:hover:after {transform: scaleX(1); background: #888;}*/

.tabs>label:hover {
    color: #888;
    cursor: pointer;
    transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;
}

.tabs>input:checked+label {
color: #555;
  background: #f1f1f1;
background: url(https://i.imgur.com/CSDUXFf.png);
}

.tabs>input:checked+label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 1px;
/*background: #888;*/
left:3px;
bottom:3px;
transform: scaleX(1);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
display: block;}
</style>
[/html]

ЗДЕСЬ ВЫ МОЖЕТЕ ПРОДАТЬ ДУШУ САТАНЕ

[html]

<div class="spiritfirst">
<div class="spiritfirstpic1"><img src="http://funkyimg.com/i/2Q4SY.gif"></div>
<div class="spiritfirstpic"><img src="http://funkyimg.com/i/2Q4SJ.gif"></div>
<div class="spiritfirsttitle">NOCTIS LUCIS CAELUM
<subtitle>фантазёр, ты меня называла</subtitle></div>
<div class="spiritfirsttext"><subtitle>координатор × чистка × пивасик × модерация</subtitle>
<about>Здесь просто рандомный текст можно подобрать цитату можно нет, короче пусть он уходит в ебеня потому что мне так нравится Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat.</about></div></div>

<div class="spiritfirst">
<div class="spiritfirstpic1"><img src="http://funkyimg.com/i/2Q4WM.gif"></div>
<div class="spiritfirstpic"><img src="http://funkyimg.com/i/2Q4WN.gif"></div>
<div class="spiritfirsttitle">TAKASHI SHIROGANE
<subtitle>однако, дратути</subtitle></div>
<div class="spiritfirsttext"><subtitle>текстовик × графика × винишко × модерация</subtitle>
<about>Здесь просто рандомный текст можно подобрать цитату можно нет, короче пусть он уходит в ебеня потому что мне так нравится Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.</about></div></div>

<div class="spiritfirst">
<div class="spiritfirstpic"><div class="spiritfirstpic1"><img src="http://funkyimg.com/i/2Q4Ya.gif"></div><img src="http://funkyimg.com/i/2Q4Y9.gif"></div>
<div class="spiritfirsttitle">KOTARO BOKUTO
<subtitle>однако, дратути</subtitle></div>
<div class="spiritfirsttext"><subtitle>массовик затейник × конкурсы × шампусик × модерация</subtitle>
<about>Здесь просто рандомный текст можно подобрать цитату можно нет, короче пусть он уходит в ебеня потому что мне так нравится Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.</about></div></div>

<style>

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700');

.spiritfirst {
display: inline-block;
    margin: 3px;
    width: 588px;
    background-color: #16444c;
    height: 100px;
    overflow: hidden;
    position: relative;
    border: 5px solid #f1f1f1;
}

.spiritfirstpic { margin: auto;
    width: 588px;
    height: 100px;
}

.spiritfirsttitle {    font-family: playfair display;
    font-weight: 900;
    width: 230px;
    color: #dfdfdf;
    text-shadow: 1px 1px 0px #000;
    font-size: 18px;
    height: 89px;
    padding-top: 15px;
    margin: -99px 0 0px 293px;
    z-index: 10;
    position: relative;
    padding-left: 10px;
    background: rgba(0,0,0,.65);
    transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s;
}

.spiritfirsttitle subtitle { box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
    font-family: pt sans;
    font-weight: normal;
    color: #9c9c9c;
    text-shadow: 1px 1px 0px #333;
    font-size: 9px;
    display: block;
    text-align: right;
    letter-spacing: 1px;
    margin-top: 4px;
    margin-right: 20px;
    transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1) .5s;
}
.spiritfirsttitle:before {     background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.65));
    content: "";
    display: block;
    position: absolute;
    width: 90px;
    height: 105px;
    top: -5px;
    margin-left: -100px;
}
.spiritfirsttitle:after {
    background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,.65));
    content: "";
    display: block;
    position: absolute;
    width: 186px;
    height: 105px;
    top: -5px;
    margin-left: 230px;
}

.spiritfirsttext {
z-index: 5000;
    position: relative;
    width: 480px;
    margin: -61px 0 0px 588px;
    font-family: arial;
    font-size: 9px;
    height: 33px;
    box-shadow: none;
    text-align: justify;
    padding: 1px 0px;
    color: #969696;
    transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .1s;
}

.spiritfirsttext about {     margin: -8px 0px;
    display: block;
    height: 41px;
    padding-left: 219px;
}

.spiritfirsttext:after {content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: -100px;
    margin-left: 0px;}

.spiritfirsttext subtitle {
text-align: center;
    display: block;
    width: 290px;
    padding-bottom: 17px;
    margin-top: -19px;
    font-size: 9px;
    font-family: playfair display;
color: #dfdfdf;
    opacity: 0;
    transform: translate(0,400px);
    transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s;
}

.spiritfirst:hover .spiritfirsttitle {        margin-left: 0px;
}
.spiritfirst:hover .spiritfirsttext { margin-left: -5px;
    box-shadow: 0px -2px 0px 0 rgba(255,255,255,.1)!important;
}
.spiritfirst:hover subtitle {opacity: 1;
    transform: translate(-526px);
    box-shadow: none;
}
.spiritfirst:hover .spiritfirsttext subtitle {
    transform: translate(205px);
}
</style>
[/html]