<!--HTML-->
<link href="https://forumstatic.ru/files/0018/18/86/84136.css" rel="stylesheet">

<style>
#ground { 
width: 500px;
height: 500px; 
background-color: #ddcbd6; 
}

.role { 
width: 389px;
height: 389px; 
background-color: #d0b6c3; 
border: 4px solid #ecdde6; 
position: relative;
top: 50px;
}

.txt {
font-family: Stackyard PERSONAL USE;
font-size: 55px;
color: #a77f95;
text-shadow: 1px 1px #fff; 
position: relative;
top: -50px;
}

.on {
width: 130px;
height: 35px; 
}

.tabcontent ::-webkit-scrollbar { width: 5px; }
.tabcontent ::-webkit-scrollbar-thumb { background-color: transparent; }
.tabcontent ::-webkit-scrollbar-corner { background-color: transparent; }

.tab {
background: #ddcbd6;
overflow: hidden;
margin-top: 190px;
}

div.tab button {
width: 100px;
margin-left: 70px;
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
color: #a77f95;
}

div.tab button:hover {
background-color: #b595a7;
}

div.tab button.active {
background-color: #ddcbd6;
}

.tabcontent {
width: 300px;
height: 275px; 
overflow: auto;
display: none;
padding: 6px 12px;
border-top: none;
margin-top: -340px;
}

</style>

<center>
<div id="ground"> 
<div class="role"> 
<p class="txt">Inequality of Souls</p>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">guest book</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">reservations</button>
</div>

<div id="London" class="tabcontent">
<center><b><font size="0.5" face="georgia">южная корея, ульсан // 2017 год // реальная жизнь и немного сюжета</font></b></center>
<br><i>Четыре стихии и четыре стороны света, все делится по квадратам. Выбирай:<br>
• нереальный, потонувший в дыме и кривых зеркалах, мигающий в свете неоновых ламп, яркий до тошноты;<br>
• изменчивый и текучий, где избыточность выставляется на показ, скрывая за собой ненависть и шипение завистливых змей;<br>
• опасный, дерганный и закрытый, давно лишившийся всяких законов, затворов и дамб; <br>
• отрешенный от остальных, стабильный и серый, как будто застывший во временной петле. <br>
Какую чувствуешь в себе жизнь? Какую цель? <br>
Какой... подвох? <br>
Выбирай. <br>
Или стирай границы.</i><br></font>
<br>
<br><center><b>warning! список занятых внешностей спрятан во второй вкладке.</b></center><br>
<br>Рады приветствовать всех на ролевой Inequality of souls. Если у тебя возникли какие-то вопросы, можешь написать сюда, однако прежде мы бы посоветовали пробежаться по информационному отделу, может, там есть ответ. Шаблон для придержания внешности находится ниже. Срок составляет три дня. Если придерживаете внешность в первой половине дня, то день придержания считается, если во второй половине, то отсчет идет со следующего дня. Продлевать можно два раза максимум. Однако мы понимаем, что в жизни бывают разные ситуации, вы можете обратиться к амс для индивидуального рассмотрения. Возможно, получите разрешение на еще одно продление.<br><br>
</div>

<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p> 
</div>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</div>
</div>
</center>