[html]<style>
.kim-main { width: 500px; height: 500px; background: url(https://i.ibb.co/fqs85X9/image.png); background-size: cover; background-repeat: no-repeat; background-position: top center; overflow: hidden; }
.kim-sidebar { width: 100px; height: 460px; background: rgba(255,255,255,0.8); float: left; padding: 20px; }
.kim-sidebargif { width: 100px; height: 100px; background:url(https://i.ibb.co/9Yh8v1c/image.gif); background-size: cover; border-radius: 10px; text-align: center; }
.kim-button { width: 105px; background: rgba(255,255,255,0.3); border: 0; border-radius: 5px; font: 12px open sans; padding: 10px; color: #333; margin-top: 5px; }
.kimbuttonn { background: #663366; color: #ffffff; font-weigth: bold; }
.kim-content { margin-left: 130px; padding: 30px 20px 0px 0px; color: #282328; }
.kim-container { padding: 20px; overflow: auto; font: 12px open sans; background: rgba(255,255,255,0.9); max-height: 410px; border-radius: 0 10px 10px 0; }
.kim-container::-webkit-scrollbar { width: 2px; height: 2em; }
.kim-container::-webkit-scrollbar-track { background-color: #d6bcd6; height: 2em; }
.kim-container::-webkit-scrollbar-track-piece { background-color: #d6bcd6; border-radius: 0px; height: 2em; }
.kim-container::-webkit-scrollbar-thumb { background-color: #835983; border-radius: 0px; height: 2em; }
.kim-animate { position: relative; animation: kimanimate 0.4s; }
@keyframes kimanimate {from{bottom:-300px;opacity:0}to{bottom:0;opacity:1}}
#kiminfo, #kimpersonality, #kimplaylist { display: none; text-align: left; overflow-x: hidden; }
#kimsecrets, #kimrelationships, #kimtimeline { display: none; text-align: justify; }
#kimmoodboard { display: none; text-align: center; }
.kim-zag { color: #663366; border-bottom: 1px dashed #663366; font-weight: 800; text-transform: uppercase; margin-bottom: 3px; }
.kim-fact { background: rgba(255,255,255,.1); padding:5px; border:1px solid #d6bcd6; border-radius: 4%; overflow: hidden; margin-bottom: 5px; text-align: justify!important; }
.kim-fact .kim-factz { font: 11px open sans; color: #835983; text-transform: uppercase; text-align: left!important; }
.kim-fact .kim-factz:after {content:''; display: inline-block; width: 100%; height: 1px; margin-right: -99%; border-bottom: 1px solid #d6bcd6; vertical-align: middle; }
.kim-fact p {font: 12px open sans; padding: 10px; text-align: justify; }
#kimrelationships .ns { font-size:15px!important; }
#kimrelationships .ep, #kimrelationships .ep a { font-size:10px!important; }
.kim-person {margin-bottom: 8px; }
#kimrelationships .friend:after{content:'➕'; display: inline-block; background:#99cc99; color: #fff; padding: 2px; border-radius: 4px; font: 8px open sans; font-weight: bolder; text-transform: uppercase; margin-left: 5px; margin-top: -5px; }
#kimrelationships .enemy:after{content:'➖'; display: inline-block; background: #cc6666; color: #fff; padding: 2px; border-radius: 4px; font: 8px open sans; font-weight: bolder; text-transform: uppercase; margin-left: 5px; margin-top: -5px;}
#kimrelationships .love:after{content:'♥'; display: inline-block; background: #cc99cc; color: #fff; padding: 2px; border-radius: 4px; font: 8px open sans; font-weight: bolder; text-transform: uppercase; margin-left: 5px; margin-top: -5px;}
.kim-time { display: grid; grid-gap: 10px; grid-template-columns: auto 250px; grid-template-rows: auto auto auto; border-width: 5px; border-style: solid; border-image: linear-gradient(to bottom,#663366,#d6bcd6) 4 100%; border-right: 0; }
.kim-date { margin-left: 10px; }
.kim-date:before{ content:''; position: absolute; width: 10px; height: 10px; left: 17px; background-color:#fff; border:1px solid #663366; border-radius: 5px; z-index: 1; }
.kim-datepanel { display: inline-block; background: #663366; color: #fff; padding: 3px; text-align: center; border-radius: 4px; font: 8px open sans; font-weight: bolder; text-transform: uppercase; vertical-align: top; }
.kim-datet { font: 12px open sans; text-align: justify; padding-right: 15px; margin-right: 5px; }
.kim-song { margin-bottom: 10px; }
.kim-song a { font: 12px open sans; }
.kim-lyrics {font: 11px open sans; }
.kim-lyrics:before { content:'❝ '}
.kim-lyrics:after { content:''; display: inline-block; width: 100%; height: 1px; margin-right: -99%; border-bottom: 1px solid #e8e8e8; vertical-align: middle; }
#kimmoodboard img { width: 90px; border: 1px solid rgba(0,0,0,.1); margin-bottom: 2px; }
#kiminfo a, #kiminfo a:link, #kiminfo a:visited, #kiminfo a:active, #kimpersonality a, #kimpersonality a:link, #kimpersonality a:visited, #kimpersonality a:active, #kimsecrets a, #kimsecrets a:link, #kimsecrets a:visited, #kimsecrets a:active, #kimrelationships a, #kimrelationships a:link, #kimrelationships a:visited, #kimrelationships a:active, #kimtimeline a, #kimtimeline a:link, #kimtimeline a:visited, #kimtimeline a:active, #kimplaylist a, #kimplaylist a:link, #kimplaylist a:visited, #kimplaylist a:active { color: #835983!important;; font-weight: 700!important; text-decoration: none; transition: 0.2s linear; font: 12px open sans; }
/* цвет ссылок при наведении */
#kiminfo a:hover, #kiminfo a:focus, #kimpersonality a:hover, #kimpersonality a:focus, #kimsecrets a:hover, #kimsecrets a:focus, #kimrelationships a:hover, #kimrelationships a:focus, #kimtimeline a:hover, #kimtimeline a:focus, #kimplaylist a:hover, #kimplaylist a:focus { color: #663366!important;; font-weight: 800!important; text-decoration: none; }
</style>
<center>
<div class="kim-main">
<div class="kim-sidebar">
<div class="kim-sidebargif"></div>
<button class="kim-button tablink" onclick="openTab(event, 'kiminfo')">main info</button>
<button class="kim-button tablink" onclick="openTab(event, 'kimpersonality')">personality</button>
<button class="kim-button tablink" onclick="openTab(event, 'kimsecrets')">quote</button>
<button class="kim-button tablink" onclick="openTab(event, 'kimrelationships')">relationships</button>
<button class="kim-button tablink" onclick="openTab(event, 'kimtimeline')">timeline</button>
<button class="kim-button tablink" onclick="openTab(event, 'kimplaylist')">playlist</button>
<button class="kim-button tablink" onclick="openTab(event, 'kimmoodboard')">moodboard</button>
</div>
<div class="kim-content">
<div id="kiminfo" class="kim-container tab kim-animate">
<div class="kim-zag">ОСНОВНАЯ ИНФОРМАЦИЯ</div>
<b>полное имя -</b> ...; <br>
<b>дата рождения, возраст -</b> ...;<br>
<b>родной город -</b> ...;<br>
<b>настоящее местоположение -</b>...;<br>
<b>род занятий -</b> ...;<br>
<div class="kim-zag" style="margin-top: 9px;">ОТНОШЕНИЯ</div>
<b>ориентация -</b> ...;<br>
<div class="kim-zag" style="margin-top: 9px;">ВНЕШНОСТЬ</div>
<b>рост - </b> ...;<br>
<b>вес - </b> ... <br>
<b>цвет волос - </b> ...; <br>
<b>цвет глаз - </b> ...; <br>
</div>
<div id="kimpersonality" class="kim-container tab kim-animate">
<div class="kim-zag">ХАРАКТЕР</div>
<b>знак зодиака -</b> ...; <br>
<b>темперамент -</b> ...; <br>
<b>биоритмы -</b> ...; <br>
<b>положительные черты - </b> ...; <br>
<b>отрицательные черты - </b> ...; <br>
<b>страхи - </b> ...;<br>
<b>привычки -</b> ...;<br>
<b>любит - </b> ...; <br>
<b>не любит - </b> ...; <br>
<b>хобби - </b> ...; <br>
<b>мечты и цели - </b> ...; <br>
<div class="kim-zag" style="margin-top: 9px;">ЛЮБИМОЕ</div>
<b>еда - </b> ...; <br>
<b>напиток -</b> ...;<br>
<b>алкоголь - </b> ...; <br>
<b>цветы - </b> ...; <br>
<div class="kim-zag" style="margin-top: 9px;">ИМУЩЕСТВО</div>
<b>жилье </b> - ...; <br>
<div class="kim-zag" style="margin-top: 9px; margin-bottom: 5px;">ФАКТЫ</div>
<div class="kim-fact">
<h4 class="kim-factz">факт1</h4>
<p>...; </p>
</div>
<div class="kim-fact">
<h4 class="kim-factz">факт2</h4>
<p>...; </p>
</div>
<div class="kim-fact">
<h4 class="kim-factz">факт1</h4>
<p>...; </p>
</div>
</div>
<div id="kimsecrets" class="kim-container tab kim-animate">
<div class="kim-zag" style="margin-bottom: 5px;">ЦИТАТЫ</div>
<div class="kim-fact">
<h4 class="kim-factz">цитата</h4>
<p> .... </p>
</div>
<div class="kim-fact">
<h4 class="kim-factz">цитата1</h4>
<p>... </p>
</div>
</div>
<div id="kimrelationships" class="kim-container tab kim-animate">
<div class="kim-zag" style="margin-bottom: 5px; margin-top: 9px;">СЕМЬЯ/КОЛЛЕГИ (НПС)</div>
<b>мать - </b> ...;<br>
<b>отец - </b> ...; <br>
<b>сестра - </b> ...; <br>
<div class="kim-zag" style="margin-bottom: 5px; margin-top: 9px;">ДОПОЛНИТЕЛЬНО</div>
<b> ... </b> - ...; <br>
<b>... </b> - ...; <br>
<b>... </b> - ...; <br>
<div class="kim-zag" style="margin-bottom: 5px; margin-top: 9px;">ДОПОЛНИТЕЛЬНО 2</div>
<b>• ... </b> ...; <br>
<b>• ... </b> ...; <br>
<b>• ... </b> ...; <br>
<b>• ... </b> ...; <br>
<b>• ... </b> ...; <br>
<div class="kim-time">
<div class="kim-date"><span class="kim-datepanel">дата</span></div>
<div class="kim-datet">....</div>
<div class="kim-date"><span class="kim-datepanel">дата</span></div>
<div class="kim-datet">....</div>
<div class="kim-date"><span class="kim-datepanel">дата</span></div>
<div class="kim-datet">....</div>
<div class="kim-date"><span class="kim-datepanel">дата</span></div>
<div class="kim-datet">....</div>
<div class="kim-date"><span class="kim-datepanel">дата</span></div>
<div class="kim-datet">....</div>
</div></div>
</div>
<div id="kimtimeline" class="kim-container tab kim-animate">
<div class="kim-zag" style="margin-bottom: 5px;">ХРОНОЛОГИЯ СОБЫТИЙ</div>
<div class="kim-time">
<div class="kim-date"><span class="kim-datepanel">дата</span></div>
<div class="kim-datet">....</div>
<div class="kim-date"><span class="kim-datepanel">дата</span></div>
<div class="kim-datet">...</div>
<div class="kim-date"><span class="kim-datepanel">дата</span></div>
<div class="kim-datet">....</div>
<div class="kim-date"><span class="kim-datepanel">дата</span></div>
<div class="kim-datet">....</div>
<div class="kim-date"><span class="kim-datepanel">дата</span></div>
<div class="kim-datet">...</div>
<div class="kim-date"><span class="kim-datepanel">дата</span></div>
<div class="kim-datet">....</div>
<div class="kim-date"><span class="kim-datepanel">дата</span></div>
<div class="kim-datet">....</div>
<div class="kim-date"><span class="kim-datepanel">дата</span></div>
<div class="kim-datet">....</div>
<div class="kim-date"><span class="kim-datepanel">дата</span></div>
<div class="kim-datet">....</div>
<div class="kim-date"><span class="kim-datepanel">дата</span></div>
<div class="kim-datet">...</div>
</div></div>
<div id="kimplaylist" class="kim-container tab kim-animate">
<div class="kim-zag" style="margin-bottom: 5px;">ПЛЕЙЛИСТ</div>
<div class="kim-song">♪ <a href="https://m.youtube.com/watch?v=xiuuSoPphxI">She Brings The Rain</a> by CAN
<div class="kim-lyrics"> ...In the dawn of the silvery day clouds seem to melt away, she brings the rain, oh yeah, she brings the rain.</div></div>
</div>
<div id="kimmoodboard" class="kim-container tab kim-animate">
<div class="kim-zag" style="margin-bottom: 5px; text-align: left!important; ">МУДБОРД</div>
<img src="https://i.ibb.co/fqs85X9/image.png">
<img src="https://i.ibb.co/fqs85X9/image.png">
<img src="https://i.ibb.co/fqs85X9/image.png">
<img src="https://i.ibb.co/fqs85X9/image.png">
<img src="https://i.ibb.co/fqs85X9/image.png">
<img src="https://i.ibb.co/fqs85X9/image.png">
<img src="https://i.ibb.co/fqs85X9/image.png">
<img src="https://i.ibb.co/fqs85X9/image.png">
<img src="https://i.ibb.co/fqs85X9/image.png">
</div>
</div>
</div>
</center>
<script>
function openTab(evt, tabName) {
var i, x, tablinks;
x = document.getElementsByClassName("tab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace("kimbuttonn", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " kimbuttonn";
}
</script>[/html]
