[html]<style>
.kim-main { width: 500px; height: 500px; background: url(https://i.ibb.co/dpB13dm/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/1sQzdSK/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')">secrets</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> 28/09/1998, 20 лет<br>
<b>родной город</b> Брайтон, штат Луизиана, США <br>
<b>настоящее местоположение</b> Брайтон, штат Луизиана, США <br>
<b>род занятий</b> студентка университета Брайтона, экономический факультет, III курс; официантка в «Levels Plaza Hotel & Nightclub» <br>
<div class="kim-zag" style="margin-top: 9px;">ОТНОШЕНИЯ</div>
<b>ориентация</b> бисексуальна<br>
<b>семейное положение</b> не замужем <br>
<div class="kim-zag" style="margin-top: 9px;">ВНЕШНОСТЬ</div>
<b>рост</b> 162 см <br>
<b>вес</b> 51 кг <br>
<b>цвет и длина волос</b> темно-каштановые, <a href="https://i.ibb.co/R03F2N6/hair.jpg">по плечи</a> <br>
<b>цвет глаз</b> карие <br>
<b>пирсинг</b> <a href="https://i.ibb.co/BsVp8tZ/piercing1.jpg">правое ухо</a> — три прокола в мочке, двойной хеликс; левое ухо — два прокола в мочке; <a href="https://i.ibb.co/P5zJZwB/piercing2.jpg">грудная клетка</a> — микродермал <br>
<b>аксессуары</b> <a href="https://i.ibb.co/DRm0cxH/rings.jpg">кольца</a> на правой руке — два на среднем пальце и одно на безымянном; <a href="https://i.ibb.co/nBJn66R/bracelet.jpg">два браслета</a> на левой руке, <a href="https://i.ibb.co/n0gwgS0/airpods.jpg">наушники</a> с собой 24/7<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>
<div class="kim-zag" style="margin-top: 9px;">ПРЕДПОЧТЕНИЯ</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>
<div class="kim-zag" style="margin-top: 9px;">ЛЮБИМОЕ</div>
<b>еда</b> итальянская кухня<br>
<b>напиток</b> чай с лимоном<br>
<b>алкоголь</b> виски<br>
<b>время года</b> лето<br>
<b>животное</b> кошка<br>
<b>сериал</b> Черное зеркало<br>
<b>фильм</b> Жестокие игры (1999), Последняя любовь на земле (2010), Время (2011), Иллюзионист (2005)<br>
<b>книга</b> «451 градус по Фаренгейту» Рэй Брэдбери <br>
<b>цвет</b> фиолетовый, черный<br>
<b>цветок</b> нежно-розовые пионы<br>

<div class="kim-zag" style="margin-top: 9px;">КВАРТИРА</div>
<a href="https://i.ibb.co/mcdwN56/flat00.jpg">Планировка</a><br>
Кухня-гостиная: <a href="https://i.ibb.co/71vCSks/flat01.jpg">[01]</a>, <a href="https://i.ibb.co/myLt2p1/flat02.jpg">[02]</a>, <a href="https://i.ibb.co/GFdt76M/flat03.jpg">[03]</a> <br>
Спальня: <a href="https://i.ibb.co/X7PPqjV/flat04.png">[01]</a>, <a href="https://i.ibb.co/Gp7HzQP/flat05.jpg">[02]</a>, <a href="https://i.ibb.co/12jZJHJ/flat06.jpg">[03]</a> <br>
Ванная комната: <a href="https://i.ibb.co/BzkML6W/flat07.jpg">[01]</a>, <a href="https://i.ibb.co/mDZF0YB/flat08.jpg">[02]</a><br>
Балкон: <a href="https://i.ibb.co/ccG8cZh/flat09.jpg">[01]</a><br> <br>

Комната в предыдущей квартире: <a href="https://i.ibb.co/3hRGht7/roomold.jpg">[01]</a><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>

<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">секрет1</h4>
<p>... </p>
</div>
<div class="kim-fact">
<h4 class="kim-factz">секрет2</h4>
<p>... </p>
</div>
</div>

<div id="kimrelationships" class="kim-container tab kim-animate">

<div class="kim-zag" style="margin-bottom: 5px;">ОТНОШЕНИЯ</div>
<div class="kim-person"><a class="ns friend" href="">Имя Фамилия</a><br>Коротко о наших отношениях.<br><div class="ep">эпизоды: <a href="">эп1</a> • <a href="">эп2</a></div></div>
<div class="kim-person"><a class="ns enemy" href="">Имя Фамилия</a><br>Коротко о наших отношениях.<br><div class="ep">эпизоды: <a href="">эп1</a> • <a href="">эп2</a></div></div>
<div class="kim-person"><a class="ns love" href="">Имя Фамилия</a><br>Коротко о наших отношениях.<br><div class="ep">эпизоды: <a href="">эп1</a> • <a href="">эп2</a></div></div>

<div class="kim-zag" style="margin-bottom: 5px; margin-top: 9px;">СЕМЬЯ (НПС)</div>
<b>мать</b> Анита Шеферд, 44 года, педиатр. Прекрасно ладит со всеми детьми кроме своих.<br>
<b>отец</b> Николас Шеферд, 46 лет, сержант полиции. Все его сказки всегда заканчивались задержаниями, теперь же задержаниями заканчиваются все его нотациями: будешь делать как дядя — попадешь за решетку!<br>
<b>брат</b> Энтони Шеферд, 22 года, студент университета в Сан-Франциско. Образцовый пример для подражания, умник, спортсмен, успешный успех, и просто красавец (еще отлично врет, кстати, и ошивается в Новом Орлеане). <br>
<b>сестра</b> Сильвия Шеферд, 17 лет, ученица старшей школы. Не боится противоречить родителям, не собирается получать высшее образование, снимает тик-токи и мечтает стать визажистов или моделью, а лучше совмещать.<br>
<b>сестра</b> Вайолет Шеферд, 9 лет, ученица младшей школы. Послушная девочка-ангел, у которой всегда сделаны уроки, волосы заплетены в идеальные косы, а одежда выглажена.<br>
<b>брат</b> Кристофер Шеферд, 9 лет, ученик младшей школы, на 15 минут младше своей сестры-близнеца. Маленькая копия Ким: отвязный парень, не умеющий сидеть на месте. Тот, про которого говорят «очень умный, но большой лентяй».<br>
</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">28/09/1998</span></div>
<div class="kim-datet">Родилась в семействе Шеферд, став вторым ребенком в семье.</div>
<div class="kim-date"><span class="kim-datepanel">08/2003</span></div>
<div class="kim-datet">Первое занятие танцев, что совсем скоро стало самой настоящей страстью маленькой Ким.</div>
<div class="kim-date"><span class="kim-datepanel">05/2013</span></div>
<div class="kim-datet">Родители больше не смогли оплачивать увлечение Ким, девочка вынуждена бросить танцы. Время бунта, постоянных прогулов и неудовлетворительных оценок.</div>
<div class="kim-date"><span class="kim-datepanel">лето 2016</span></div>
<div class="kim-datet">Выпускные экзамены, весьма посредственные оценки. Поступление в университет Брайтона благодаря близкому знакомству матери Ким с деканом экономического факультета. Новоиспеченной студентке приходится взять государственный кредит на свое обучение, который пока выплачивают родители.</div>
<div class="kim-date"><span class="kim-datepanel">10/2016</span></div>
<div class="kim-datet">Переезд Ким в общежитие университета Брайтона. Тогда же у нее возникает желание не обременять родителей тратами на ее обучение, поэтому она уходит с головой в учебу, принимает активное участие в жизни института, вписываясь во всевозможные движухи. Также ищет (и находит!) мелкие подработки в кампусе. За несколько месяцев умудряется выбиться в хорошисты, демонстрируя большой прогресс результатами всех промежуточных тестирований.</div>
<div class="kim-date"><span class="kim-datepanel">09/2017</span></div>
<div class="kim-datet">Ловит своего парня на измене, узнает, что тот спал с двумя ее лучшими подругами. Сердце разбито, и Ким с еще большим усердием берется за учебу. К концу этого же года выбивается в отличники, получает стипендию, почти полностью покрывающую стоимость обучения и позволяющую отказаться от государственного кредита.</div>
<div class="kim-date"><span class="kim-datepanel">01/2018</span></div>
<div class="kim-datet">Переезжает из общежития, начав снимать маленькую комнатку в квартире на троих. Продолжает подрабатывать в кампусе, но параллельно ищет другие варианты работы.</div>
<div class="kim-date"><span class="kim-datepanel">06/2018</span></div>
<div class="kim-datet">Устраивается на работу официанткой в клуб «». Начинает получать ощутимо больше денег, возвращается к профессиональным занятиям танцами, по возможности посещает все возможные мастер-классы. Задумывается о том, чтобы начать снимать отдельную квартиру.</div>
<div class="kim-date"><span class="kim-datepanel">07/2018</span></div>
<div class="kim-datet">Переезд в отдельную квартиру.</div>
<div class="kim-date"><span class="kim-datepanel">08/2018</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://www.youtube.com/watch?v=vRBVXLPyoug">Кто-то</a> by Flёur
<div class="kim-lyrics"> ...так хочется остановиться, сказать своим светлым порывам — хватит... </div></div>
<div class="kim-song">♪ <a href="https://www.youtube.com/watch?v=WuGN30jXR9k"> Little Black Death </a> by Meg Myers
<div class="kim-lyrics"> ...a part of me died last night, i lost my innocence to your ignorance</div> </div>
<div class="kim-song">♪ <a href="https://www.youtube.com/watch?v=-Jp2wNF1rkM">Crystalised</a> by The XX
<div class="kim-lyrics"> ...glaciers have melted to the sea, i wish the tide would take me over</div> </div>
<div class="kim-song">♪ <a href="https://www.youtube.com/watch?v=ZTGe9K9EW-0">Ashes </a> by Claire Guerreso
<div class="kim-lyrics"> ...feels like I'm burning down the flames rise up, and i can't tell what's coming next</div> </div>
<div class="kim-song">♪ <a href="https://www.youtube.com/watch?v=PDboeQfAsww"> Can't Help Falling in Love </a> feat. brooke - Tommee Profitt (dark version)
<div class="kim-lyrics"> ...shall i stay, would it be a sin</div> </div>
<div class="kim-song">♪ <a href="https://www.youtube.com/watch?v=WJXiYTllVRE">I surrender</a> by Digital Daggers (piano version)
<div class="kim-lyrics"> ...secret, hidden underneath it, trying hard to keep it, safely out of reach.</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/mBzCGs9/1.png">
<img src="https://i.ibb.co/87SnSwr/3-1.png">
<img src="https://i.ibb.co/Jr8Ps3q/4.png">
<img src="https://i.ibb.co/jgNqMYx/6.png">
<img src="https://i.ibb.co/567D485/2.png">
<img src="https://i.ibb.co/grGgf1Z/7.png">
<img src="https://i.ibb.co/94FCtJJ/5.png">
<img src="https://i.ibb.co/XZ27NBL/9.png">
<img src="https://i.ibb.co/CbvTcbW/8.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]