code
unknown
html
3 years ago
23 kB
3
Indexable
<!--
#aaa : text
#f5cac3 : highlights (pink)
secondary : bootstrap
#fff : background colour
link_url : external links
img_url : image links
-->
<!-- main bg -->
<div class="container my-3 mx-auto" style="
background: url(https://i.imgur.com/wrBdJyP.png)
repeat fixed; padding: 50px 0px; border-radius:1rem; color:#aaa; font-size:12px; letter-spacing:1px;">
<div class="container" style="max-width:850px;">
<div class="row my-4 mx-auto justify-content-center">
<!-- left column, buttons -->
<div class="col-lg-4">
<div class="row"><div class="col-lg-12 my-2 text-center mt-2">
<img class="btn btn-outline-secondary rounded-circle p-1 m-3"style="width:160px;" src="https://i.imgur.com/AHdoYby.png">
<span class="badge badge-pill text-lowercase" style="background: #ffbb3f; font-size: 20px; font-weight:400;">LAURISSA VORONIN</span>
<div class="p-3 mt-3" style="border-radius:1rem;background-color:#fff;">
<p><i class="fal fa-quote-left pull-left"></i>i am not a good person<br>and i do not try to be a good<br>person. i will help if i can<br>and leave if I can't.<i class="fal fa-quote-right pull-right"></i></p>
<ul class="nav flex-column justify-content-center my-2">
<li class="nav-item"><a class="text-center nav-link active my-1 btn btn-outline-secondary text-left" style="font-size:12px;" data-toggle="tab" role="tab" href="#one">biography</a></li>
<li class="nav-item"><a class="text-center nav-link my-1 btn btn-outline-secondary text-left" style="font-size:12px;" data-toggle="tab" role="tab" href="#two">education</a></li>
<li class="nav-item"><a class="text-center nav-link my-1 btn btn-outline-secondary text-left" style="font-size:12px;" data-toggle="tab" role="tab" href="#three">abilities</a></li>
<li class="nav-item"><a class="text-center nav-link my-1 btn btn-outline-secondary text-left" style="font-size:12px;" data-toggle="tab" role="tab" href="#four">qualities</a></li>
<li class="nav-item"><a class="text-center nav-link my-1 btn btn-outline-secondary text-left" style="font-size:12px;" data-toggle="tab" role="tab" href="#five">disorder</a></li>
<li class="nav-item"><a class="text-center nav-link my-1 btn btn-outline-secondary text-left" style="font-size:12px;" data-toggle="tab" role="tab" href="#six">summary</a></li>
<li class="nav-item"><a class="text-center nav-link my-1 btn btn-outline-secondary text-left" style="font-size:12px;" data-toggle="tab" role="tab" href="#seven">characteristic</a></li>
<li class="nav-item"><a class="text-center nav-link my-1 btn btn-outline-secondary text-left" style="font-size:12px;" data-toggle="tab" role="tab" href="#eight">connection</a></li>
</ul></div></div></div></div>
<!-- right column, character content -->
<div class="col-lg-8 my-3 py-3">
<div class="p-3 mt-2" style="card border; border-radius:1rem;background-color:#fff;height:622px">
<div class="tab-content">
<!-- about -->
<div class="tab-pane fade show active" id="one">
<p style="font-size:1.2rem;font-weight:400;" class="my-0 mx-1 pl-1"><i class="fal fa-stars pull-right p-1"></i>biography</p><hr>
<div style="height:520px;overflow:auto;">
<div class="row no-gutters mb-3 pl-1">
<div class="col-3 p-1">
<span>name</span>
</div>
<div class="col-9 p-1">laurissa voronin | Ларисса Воронин</div>
<div class="col-3 p-1">
<span>nickname</span>
</div>
<div class="col-9 p-1">laura「 <i>by claudius</i> 」</div>
<div class="col-3 p-1">
<span>title</span>
</div>
<div class="col-9 p-1">corpses interpreter</div>
<hr class="mx-1 w-100">
<div class="col-3 p-1">
<span>race</span>
</div>
<div class="col-9 p-1">human</div>
<div class="col-3 p-1">
<span>gender</span>
</div>
<div class="col-9 p-1">female</div>
<div class="col-3 p-1">
<span>pronounce</span>
</div>
<div class="col-9 p-1">she / her</div>
<div class="col-3 p-1">
<span>sexuality</span>
</div>
<div class="col-9 p-1">heterosexual</div>
<hr class="mx-1 w-100">
<div class="col-3 p-1">
<span>age</span>
</div>
<div class="col-9 p-1">21「 <i>begin</i> 」| 26「 <i>end</i> 」</div>
<div class="col-3 p-1">
<span>d.o.b</span>
</div>
<div class="col-9 p-1">18.09</div>
<div class="col-3 p-1">
<span>zodiac</span>
</div>
<div class="col-9 p-1">virgo</div>
<div class="col-3 p-1">
<span>hale</span>
</div>
<div class="col-8 p-1">「 <i>unknown</i> 」</div>
<div class="col-3 p-1">
<span>status</span>
</div>
<div class="col-9 p-1">alive</div>
<div class="col-3 p-1">
<span>blood type</span>
</div>
<div class="col-9 p-1">b-</div>
<hr class="mx-1 w-100">
<div class="col-3 p-1">
<span>nationality</span>
</div>
<div class="col-9 p-1">yekaterinburg, russia</div>
<div class="col-3 p-1">
<span>residence</span>
</div>
<div class="col-9 p-1">amsterdam, netherlands</div>
</div></div></div>
<!-- trivia -->
<div class="tab-pane fade" id="two">
<p style="font-size:1.2rem;font-weight:400;" class="my-0 mx-1"><i class="fal fa-stars pull-right p-1"></i>education</p><hr>
<ul class="fa-ul mt-2">
<li class="my-3"><i class="fa-li fal fa-angle-right"></i>academic level » doctor
<li class="my-3"><i class="fa-li fal fa-angle-right"></i>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <span style="color:#fff;background:#f5cac3;" class="px-1">tempor incididunt ut labore</span> et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco.</li>
<li class="my-3"><i class="fa-li fal fa-angle-right"></i>lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<ul class="fa-ul">
<li class="my-3"><i class="fa-li fal fa-angle-right"></i>lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<li class="my-3"><i class="fa-li fal fa-angle-right"></i>lorem ipsum dolor sit amet, <span style="color:#f5cac3;">consectetur</span> adipiscing elit</li>
</ul><hr>
<!-- notes and worth -->
<div class="row no-gutters mt-2">
<div class="col-lg-6">
<span class="badge badge-pill text-uppercase" style="background:#f5cac3;font-size:12px;font-weight:400;"><i class="fal fa-info-circle mr-2"></i>notes</span>
<ul class="fa-ul mt-2">
<li><i class="fa-li fal fa-angle-right"></i>content</li>
<li><i class="fa-li fal fa-angle-right"></i>content</li>
<li><i class="fa-li fal fa-angle-right"></i>content</li>
</ul></div>
<div class="col-lg-6">
<span class="badge badge-pill text-uppercase" style="background:#f5cac3;font-size:12px;font-weight:400;"><i class="fal fa-dollar-sign mr-2"></i>worth</span>
<ul class="fa-ul mt-2">
<li><i class="fa-li fal fa-angle-right"></i>base value: $0</li>
<li><i class="fa-li fal fa-angle-right"></i>added value: $0</li>
<li><i class="fa-li fal fa-angle-right"></i>total worth: $0</li>
</ul></div>
</div>
</div>
<!-- story -->
<div class="tab-pane fade" id="three">
<p style="font-size:1.2rem;font-weight:400;" class="my-0 mx-1 pl-1"><i class="fal fa-stars pull-right p-1"></i>abilities</p><hr>
<span class="badge badge-pill" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px"> statistics </span>
<div class="row no-gutters mt-2">
<div class="col-lg-6">
<ul class="fa-ul mt-2">
<li><i class="fa-li fal fa-angle-right"></i>luck</li>
<div class="progress my-2 rounded-0" style="height:10px; margin-right:50px">
<div class="progress-bar" style="width:65%; background:#ffbb3f"></div></div>
<li><i class="fa-li fal fa-angle-right"></i>agility</li>
<div class="progress my-2 rounded-0" style="height:10px; margin-right:50px">
<div class="progress-bar" style="width:45%; background:#ffbb3f"></div></div>
<li><i class="fa-li fal fa-angle-right"></i>resilience</li>
<div class="progress my-2 rounded-0" style="height:10px; margin-right:50px">
<div class="progress-bar" style="width:40%; background:#ffbb3f"></div></div>
<li><i class="fa-li fal fa-angle-right"></i>endurance</li>
<div class="progress my-2 rounded-0" style="height:10px; margin-right:50px">
<div class="progress-bar" style="width:30%; background:#ffbb3f"></div></div>
<li><i class="fa-li fal fa-angle-right"></i>awareness</li>
<div class="progress my-2 rounded-0" style="height:10px; margin-right:50px">
<div class="progress-bar" style="width:80%; background:#ffbb3f"></div></div>
</ul></div>
<div class="col-lg-6">
<ul class="fa-ul mt-2">
<li><i class="fa-li fal fa-angle-right"></i>imaginative</li>
<div class="progress my-2 rounded-0" style="height:10px; margin-right:50px">
<div class="progress-bar" style="width:70%; background:#ffbb3f"></div></div>
<li><i class="fa-li fal fa-angle-right"></i>magic energy</li>
<div class="progress my-2 rounded-0" style="height:10px; margin-right:50px">
<div class="progress-bar" style="wwidth:0%; background:#ffbb3f"></div></div>
<li><i class="fa-li fal fa-angle-right"></i>physical strength</li>
<div class="progress my-2 rounded-0" style="height:10px; margin-right:50px">
<div class="progress-bar" style="width:40%; background:#ffbb3f"></div></div>
<li><i class="fa-li fal fa-angle-right"></i>emotional quotient</li>
<div class="progress my-2 rounded-0" style="height:10px; margin-right:50px">
<div class="progress-bar" style="width:80%; background:#ffbb3f"></div></div>
<li><i class="fa-li fal fa-angle-right"></i>intelligence quotient</li>
<div class="progress my-2 rounded-0" style="height:10px; margin-right:50px">
<div class="progress-bar" style="width:80%; background:#ffbb3f"></div></div>
</ul></div>
</div>
</div>
<!-- qualities -->
<div class="tab-pane fade" id="four">
<p style="font-size:1.2rem;font-weight:400;" class="my-0 mx-1 pl-1"><i class="fal fa-stars pull-right p-1"></i>qualities</p><hr>
<div style="height:520px;overflow:auto;">
<span class="badge badge-pill" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px"> habit </span>
<ul class="fa-ul mt-2">
<li><i class="fa-li fal fa-angle-right"></i>pen-clicking</li>
<li class="mb-2 mt-1"><i>"my apologise, i'm deeply thinking about it."</i></li>
<li><i class="fa-li fal fa-angle-right"></i>nail-biting</li>
<li class="mb-2 mt-1"><i>sometimes, there is no way for us to hide our anxiety.</i></li>
</ul>
<span class="badge badge-pill" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px"> interest </span>
<ul class="fa-ul mt-2">
<li><i class="fa-li fal fa-angle-right"></i>working</li>
<li class="mb-2 mt-1"><i>keep trying and trying and trying, just feel scared to stop.</i></li>
<li><i class="fa-li fal fa-angle-right"></i>skeleton</li>
<li class="mb-2 mt-1"><i>skeleton is the second heart of humans.</i></li>
<li><i class="fa-li fal fa-angle-right"></i>money</li>
<li class="mb-2 mt-1 pr-5"><i>she already knows what money can do and how money can affect her life from the beginning of her life.</i></li>
<li><i class="fa-li fal fa-angle-right mt-1"></i>classical music</li>
<li class="mb-2 mt-1"><i>"when he plays piano, i feel like i am, yes in the heaven."</i></li>
</ul>
<span class="badge badge-pill mt-1" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px"> detestation </span>
<ul class="fa-ul mt-2">
<li><i class="fa-li fal fa-angle-right"></i>crowds & noise</li>
<li class="mb-2 mt-1"><i>when there're crowds and noise, there is trouble.</i></li>
</ul>
<span class="badge badge-pill mt-1" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px"> fear </span>
<ul class="fa-ul mt-2">
<li><i class="fa-li fal fa-angle-right"></i>slug</li>
<li class="mb-2 mt-1 pr-5"><i>no matter how long the time passed by, vague childhood memories can still throw you in a panic, like old times.</i></li>
</ul>
<span class="badge badge-pill mt-1" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px"> forte </span>
<ul class="fa-ul mt-2">
<li><i class="fa-li fal fa-angle-right mt-1"></i>skeleton reconstruction</li>
<li class="mb-2 mt-1 pr-5"><i>she can completely and painstakingly reconstruct the skeletal remains of a human, even when it had broken into hundreds of bite-sized pieces.</i></li>
<li><i class="fa-li fal fa-angle-right"></i>photographic memory</li>
<li class="mb-2 mt-1 pr-5"><i>she is a genius, a fucking genius with the ability to memorize every details that can scare you to death.</i></li>
<li><i class="fa-li fal fa-angle-right"></i>calculate</li>
<li class="mb-2 mt-1"><i>her mental arithmetic skill is what you call unbelievable.</i></li>
</ul>
<span class="badge badge-pill mt-1" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px"> weakness </span>
<ul class="fa-ul mt-2">
<li><i class="fa-li fal fa-angle-right mt-1"></i>emotional</li>
<li class="mb-2 mt-1 pr-5"><i>she forced herself to hide who she truly is to become the perfect version she wants to be.</i></li>
<li><i class="fa-li fal fa-angle-right"></i>self-care</li>
<li class="mb-2 mt-1 pr-5"><i>try to help, then realize, you already put your life in danger.</i></li>
<li><i class="fa-li fal fa-angle-right"></i>self-deprecating</li>
<li class="mb-2 mt-1"><i>"don't feel proud, don't accept it."</i></li>
</ul>
</div>
<!-- disorder -->
<div class="tab-pane fade" id="five">
<p style="font-size:1.2rem;font-weight:400;" class="my-0 mx-1 pl-1"><i class="fal fa-stars pull-right p-1"></i>disorder</p><hr>
<span class="badge badge-pill mt-1" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px"> physical condition </span>
<ul class="fa-ul mt-2">
<li class="my-2"><i class="fa-li fal fa-angle-right"></i>short-sighted</li>
<li class="my-2 ">
laurissa's eyesight got worse and she started to have wear glasses since she was twelve years old and now, she has both astigmatism and short-sightedness, and her exact myopia degree is -3.75 diopters「 <i>left eye</i> 」and -4.00 diopters「 <i>right eye</i> 」
</li>
<li class="my-2"><i class="fa-li fal fa-angle-right"></i>spinal cord compression</li>
<li class="my-2">
in an investigation with the police station, laurissa had been attacked and damaged by the killer as a warning. as a result, she had a nasty injury to the spine, which led to spinal cord compression. although the disease is curable, it got worse and badly afflicted her. in the end, the spinal cord compression made laurissa unable to walk or even stand, she had to use the wheelchair and received treatment for a long time. however, after having treatment, she just only can walk and stand for a short time, or her disease might recur again.
</li></ul>
<span class="badge badge-pill mt-1" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px"> mental condition </span>
<ul class="fa-ul mt-2">
<li class="my-2"><i class="fa-li fal fa-angle-right"></i>none</li></ul>
<span class="badge badge-pill mt-1" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px"> infection status </span>
<ul class="fa-ul mt-2">
<li class="my-2"><i class="fa-li fal fa-angle-right"></i>none</li></ul>
<span class="badge badge-pill mt-1" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px"> past injuries </span>
<ul class="fa-ul mt-2">
<li class="my-2"><i class="fa-li fal fa-angle-right"></i>none</li></ul></div>
<!-- summary -->
<div class="tab-pane fade" id="six">
<p style="font-size:1.2rem;font-weight:400;" class="my-0 mx-1 pl-1"><i class="fal fa-stars pull-right p-1"></i>summary</p><hr>
<span class="badge badge-pill mt-1" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px"> synopsis </span>
<p class="mt-2 pl-3 pr-2">
the economic crisis broke out, government revenue hit the bottom, a high-risk economic strategy was implicitly adopted, the class division pushed the lower class to the end of despair and Russia was in the depths of the recession.
</p>
<p class="mt-2 pl-3 pr-2">
her family was no exception when their house was confiscated and had to run, hide for their life, to survive as an underclass. after all, they have all suffered grievously: shame, stigma, and extreme social exclusion. laurissa was born in that situation, in a slum outside yekaterinburg where she could hear cows cawed at the dead of night until the daybreak.
</p>
<p class="mt-2 pl-3"><i>"shut up unless you want to take your own life!"</i></p>
<p class="mt-2 pl-3 pr-2">
no one really knows who is their father because he was missing when laurissa was two years old, her family especially her mother evaded talking about that and they have no picture of him either.
</p>
<p class="mt-2 pl-3"><i>"i can barely remember everything in my life except his face."</i></p>
<span class="badge badge-pill mt-2" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px"> future demise </span>
<p class="mt-2 pl-3">
as time passed, everything finally got better. The economic crisis ended, her sister started up a business of her own and her twin brothers graduated from medical school and law school as well. however, she left russian after finished high school’s curriculum and moved to amsterdam to pursue her dream.
</p>
</div>
<!-- characteristic -->
<div class="tab-pane fade" id="seven">
<p style="font-size:1.2rem;font-weight:400;" class="my-0 mx-1 pl-1"><i class="fal fa-stars pull-right p-1"></i>characteristic</p><hr>
<div class="row no-gutters mb-3">
<div class="col-md-5 d-flex justify-content-between p-1">
<span class="badge badge-pill" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px">height</span>
<span class="w-50 text-right">5'2.3''</span></div>
<div class="col-md-7 d-flex justify-content-between p-1">
<span class="badge badge-pill" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px">complexion</span>
<span class="w-50 text-right">pale ivory</span></div>
<div class="col-md-5 d-flex justify-content-between p-1">
<span class="badge badge-pill" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px">weight</span>
<span class="w-50 text-right">122 lbs</span></div>
<div class="col-md-7 d-flex justify-content-between p-1">
<span class="badge badge-pill" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px">dominant hand</span>
<span class="w-50 text-right">right hand</span></div>
<div class="col-md-5 d-flex justify-content-between p-1">
<span class="badge badge-pill" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px">eye color</span>
<span class="w-50 text-right">raisin black</span></div>
<div class="col-md-7 d-flex justify-content-between p-1">
<span class="badge badge-pill" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px">body shape</span>
<span class="w-50 text-right">rectangle</span></div>
<div class="col-md-5 d-flex justify-content-between p-1">
<span class="badge badge-pill" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px">hair color</span>
<span class="w-50 text-right">black</span></div>
<div class="col-md-7 d-flex justify-content-between p-1">
<span class="badge badge-pill" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px">body type</span>
<span class="w-50 text-right">ecto-mesomorphs</span></div>
</div><hr>
<span class="badge badge-pill" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px">distinctive features</span>
<ul class="fa-ul mt-2">
<li class="my-2"><i class="fa-li fal fa-angle-right"></i>tattoos</li>
<li class="my-2">
laurissa has five tattoos in her body which are on the neck, the left ankle, the right ribcage, the left hip, and in-between the finger.</li></ul>
<span class="badge badge-pill" style="background:#ffb734;font-size:13px;font-weight:400; margin-left:10px">accessories</span>
<ul class="fa-ul mt-2">
<li class="my-2"><i class="fa-li fal fa-angle-right"></i>piercing </li>
<li class="my-2">
she also has three types of piercing which are the standard lobe, upper lobe, and helix in both ears. </li>
</ul><hr>
</div>
<!-- connection-->
<div class="tab-pane fade" id="eight">
<p style="font-size:1.2rem;font-weight:400;" class="my-0 mx-1"><i class="fal fa-stars pull-right p-1"></i>relationships</p><hr>
<!-- reln. -->
<div class="mt-2 mr-3 float-sm-left justify-content-center">
<img src="https://i.imgur.com/atRjyD0.png"
class="fr-rounded mt-1 p-0 mr-lg-1" style="height:90px; width:90px;">
</div>
<div class="pt-3">
<p><a href="link_url"><span class="badge badge-pill" style="background:#ffb734;font-size:13px;font-weight:400">claudius amsel</span></a>
<span class="pull-right pr-4">
<i class="fas fa-heart pt-1"></i>
<i class="fas fa-heart pt-1"></i>
<i class="fas fa-heart pt-1"></i>
<i class="fas fa-heart pt-1"></i>
<i class="fas fa-heart pt-1"></i>
</span></p>
<p class="mt-2 pr-2" style="margin-left:6px">"i thought i would forever be free, like a bird, with its wings to fly to every promised neverlands but then i met her, yes i met her, the one fine woman that i had never think of. she bound my wings with her softest kiss and warmest hug, and that is when i feel love, enough to give up all the flights."</p>
</div></div></div></div>
<!-- credits - dont remove! -->
<div class="col-lg-13 text-right mt-2 pr-1">
<a href="https://www.toptal.com/designers/subtlepatterns/webb-pattern/" style="color:#f5cac3;" class="tooltipster" title="bg credit"><i class="fal fa-image"></i></a>
<a href="https://toyhou.se/11380615." class="text-secondary tooltipster" title="code by CCXVII"><i class="fal fa-skull-cow"></i></a>
</div></div>
<!-- add more above this line!! -->
</div></div></div></div></div></div></div>Editor is loading...