repose
created by:sunxrice
Mixed ColorsHTMLCharacter
Copy
<!--
repose
by sunxrice
accents -
background : #8149b2
shadow : #aa99e4
text : #faf8fc
icon : fa-sparkle
styles -
box-shadow:4px 4px 0 #aa99e4
use find and replace!
-->
<div class="container" style="max-width:900px">
<div class="row">
<!-- side -->
<div class="col-sm-4 order-sm-2 my-3">
<div class="row no-gutters">
<!-- image -->
<div class="col-6 col-sm-12 ml-3 mr-n3 mx-sm-0 mb-n4" style="height:240px;
background-image:url(imglink);
background-size:contain; background-position:center; background-repeat:no-repeat"></div>
<!-- /image -->
<!-- info -->
<div class="col-6 col-sm-12 ml-n3 mx-sm-auto my-auto" style="max-width:180px">
<!-- name -->
<p class="text-left"><span class="px-2 py-1" style="color:#faf8fc; font-size:1.5em; background-color:#8149b2; box-shadow:4px 4px 0 #aa99e4">
<i class="fal fa-sparkle mr-2"></i>
name
</span></p>
<!-- pronouns -->
<p class="text-right"><span class="px-2 py-1" style="color:#faf8fc; background-color:#8149b2; box-shadow:4px 4px 0 #aa99e4">
pr/ns
<i class="fal fa-comments ml-2"></i>
</span></p>
<!-- age -->
<p class="text-right"><span class="px-2 py-1" style="color:#faf8fc; background-color:#8149b2; box-shadow:4px 4px 0 #aa99e4">
age
<i class="fal fa-hourglass ml-2"></i>
</span></p>
<!-- birthday -->
<p class="text-right"><span class="px-2 py-1" style="color:#faf8fc; background-color:#8149b2; box-shadow:4px 4px 0 #aa99e4">
date month
<i class="fal fa-cake ml-2"></i>
</span></p>
<!-- occupation -->
<p class="text-right"><span class="px-2 py-1" style="color:#faf8fc; background-color:#8149b2; box-shadow:4px 4px 0 #aa99e4">
role
<i class="fal fa-clipboard-check ml-2"></i>
</span></p>
<!-- add more above this line -->
</div>
<!-- /info -->
</div>
<!-- bar -->
<div class="align-items-center mt-3">
<!-- music player - by rctface
replace "URL" after embed/ with the letters and numbers string of your youtube video after "watch?v="
-->
<p class="text-center m-0">
<iframe frameborder="0" style="height:1rem;width:1rem;opacity:.001;position:absolute;"
src="https://www.youtube.com/embed/URL"></iframe>
<i class="fas fa-play mr-1" style="color:#8149b2"></i>
<b class="text-uppercase">
title
</b>
-
<i class="text-lowercase">
artist
</i>
</p>
<!-- /music -->
<hr class="flex-fill mx-3" style="border-color:#8149b2">
<a class="btn btn-outline-secondary border-0 p-2 fal fa-sun-haze tooltipster" style="color:#8149b2" title="code by sunxrice" href="https://toyhou.se/31452149.repose"></a>
</div>
<!-- /bar -->
</div>
<!-- /side -->
<!-- main -->
<div class="col-sm-8 order-sm-1 my-auto">
<div class="row no-gutters" style="height:400px">
<!-- tab buttons -->
<div class="col-2">
<ul class="nav flex-column my-3" style="font-size:1.25rem">
<!-- tab -->
<li class="nav-item my-1">
<a class="nav-link active w-100 fas fa-star-shooting" style="color:#faf8fc; background-color:#8149b2; border-radius:20px 0 0 20px; box-shadow:4px 4px 0 #aa99e4" data-toggle="tab"
href="#tab-basic"></a>
</li>
<!-- tab -->
<li class="nav-item my-1">
<a class="nav-link w-100 fas fa-telescope" style="color:#faf8fc; background-color:#8149b2; border-radius:20px 0 0 20px; box-shadow:4px 4px 0 #aa99e4" data-toggle="tab"
href="#tab-indepth"></a>
</li>
<!-- tab -->
<li class="nav-item my-1">
<a class="nav-link w-100 fas fa-moon-over-sun" style="color:#faf8fc; background-color:#8149b2; border-radius:20px 0 0 20px; box-shadow:4px 4px 0 #aa99e4" data-toggle="tab"
href="#tab-relations"></a>
</li>
<!-- tab -->
<li class="nav-item my-1">
<a class="nav-link w-100 fas fa-moon-cloud" style="color:#faf8fc; background-color:#8149b2; border-radius:20px 0 0 20px; box-shadow:4px 4px 0 #aa99e4" data-toggle="tab"
href="#tab-extra"></a>
</li>
</ul>
</div>
<!-- /tab -->
<!-- content -->
<div class="col-10 card p-0" style="border:2px solid #8149b2; border-radius:20px; box-shadow:4px 4px 0 #aa99e4">
<div class="tab-content py-3" style="height:400px">
<!-- tab - basic -->
<div class="tab-pane fade show active text-justify" id="tab-basic">
<!-- heading -->
<p class="text-right mb-4 mx-3"><span class="text-right px-2 py-1" style="color:#faf8fc; font-size:1.2em; background-color:#8149b2">
01
<i class="fal fa-pipe mx-1"></i>
basic info
<i class="fal fa-star-shooting ml-2"></i>
</span></p>
<!-- /heading -->
<div class="px-3" style="height:300px; overflow-y:auto; scrollbar-width:thin">
<!-- adjectives -->
<div class="text-center">
adj
<i class="fal fa-sparkle mx-1" style="color:#8149b2"></i>
adj
<i class="fal fa-sparkle mx-1" style="color:#8149b2"></i>
adj
</div>
<!-- /adj-->
<div class="align-items-center my-2">
<hr class="w-100" style="border-color:#8149b2">
<i class="fal fa-sparkle mx-3" style="color:#8149b2"></i>
<hr class="w-100" style="border-color:#8149b2">
</div>
<p><b>character</b> is describe basic identity here. everything scrolls if it gets long. all of these placeholder notes are for my own characters.</p>
<p>second paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!-- /tab -->
<!-- tab - in-depth -->
<div class="tab-pane fade text-justify" id="tab-indepth">
<!-- heading -->
<p class="text-right mb-4 mx-3"><span class="text-right px-2 py-1" style="color:#faf8fc; font-size:1.2em; background-color:#8149b2">
02
<i class="fal fa-pipe mx-1"></i>
in-depth
<i class="fal fa-telescope ml-2"></i>
</span></p>
<!-- /heading -->
<div class="px-3" style="height:300px; overflow-y:auto; scrollbar-width:thin">
<p>describe personality. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- openness - remember to change EVERY number (valuenow, width, text inside div)! -->
<div class="progress my-3"><div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="50" style="width:50%;
color:#faf8fc; background-color:#8149b2">
openness - 50%
</div></div>
<!-- /openness -->
<div class="align-items-center my-2">
<hr class="w-100" style="border-color:#8149b2">
<i class="fal fa-sparkle mx-3" style="color:#8149b2"></i>
<hr class="w-100" style="border-color:#8149b2">
</div>
<!-- lists -->
<div class="row">
<!-- likes -->
<div class="col-md-6 my-2">
<!-- heading -->
<p class="mb-2"><span class="px-2 py-1" style="color:#faf8fc; background-color:#8149b2">
<i class="fal fa-moon-stars mr-2"></i>
likes
</span></p>
<!-- /heading -->
<!-- list -->
<ul>
<li>content</li>
<li>content</li>
</ul>
<!-- /list -->
</div>
<!-- /likes -->
<!-- dislikes -->
<div class="col-md-6 my-2">
<!-- heading -->
<p class="mb-2"><span class="px-2 py-1" style="color:#faf8fc; background-color:#8149b2">
<i class="fal fa-meteor mr-2"></i>
dislikes
</span></p>
<!-- /heading -->
<!-- list -->
<ul>
<li>content</li>
<li>content</li>
</ul>
<!-- /list -->
</div>
<!-- /dislikes -->
<div class="col-12"><hr></div>
<!-- abilities -->
<div class="col-md-6 my-2">
<!-- heading -->
<p class="mb-2"><span class="px-2 py-1" style="color:#faf8fc; background-color:#8149b2">
<i class="fal fa-bolt-lightning mr-2"></i>
abilities
</span></p>
<!-- /heading -->
<!-- list -->
<ul>
<li>content</li>
<li>content</li>
</ul>
<!-- /list -->
</div>
<!-- /abilities -->
<!-- fears -->
<div class="col-md-6 my-2">
<!-- heading -->
<p class="mb-2"><span class="px-2 py-1" style="color:#faf8fc; background-color:#8149b2">
<i class="fal fa-snowflakes mr-2"></i>
fears
</span></p>
<!-- /heading -->
<!-- list -->
<ul>
<li>content</li>
<li>content</li>
</ul>
<!-- /list -->
</div>
<!-- /fears -->
</div>
<!-- /lists -->
</div>
</div>
<!-- /tab -->
<!-- tab - relationships -->
<div class="tab-pane fade text-justify" id="tab-relations">
<!-- heading -->
<p class="text-right mb-4 mx-3"><span class="text-right px-2 py-1" style="color:#faf8fc; font-size:1.2em; background-color:#8149b2">
03
<i class="fal fa-pipe mx-1"></i>
relationships
<i class="fal fa-moon-over-sun ml-2"></i>
</span></p>
<!-- /heading -->
<div class="px-3" style="height:300px; overflow-y:auto; scrollbar-width:thin">
<p>describe character's reputation; how they generally appear to the public.</p>
<div class="align-items-center my-2">
<hr class="w-100" style="border-color:#8149b2">
<i class="fal fa-sparkle mx-3" style="color:#8149b2"></i>
<hr class="w-100" style="border-color:#8149b2">
</div>
<!-- ships -->
<!-- character -->
<div class="my-3">
<!-- image -->
<div class="mr-3 float-left" style="border:2px solid #8149b2; border-radius:20x; height:60px; width:60px;
background-image:url(imglink);
background-size:cover; background-position:center"></div>
<p>
<a class="btn px-2 py-1 mr-2 rounded-0" style="color:#faf8fc; background-color:#8149b2"
href="charlink">name
</a>
relationship. none of these individual sections scroll.
</p>
</div>
<!-- /character -->
<hr style="clear:both">
<!-- character -->
<div class="my-3">
<!-- image -->
<div class="mr-3 float-left" style="border:2px solid #8149b2; border-radius:20x; height:60px; width:60px;
background-image:url(imglink);
background-size:cover; background-position:center"></div>
<p>
<a class="btn px-2 py-1 mr-2 rounded-0" style="color:#faf8fc; background-color:#8149b2"
href="charlink">
name
</a>
this looks better when these descriptions a little bit long idk why the margins are kinda messed up when they're short. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
</div>
<!-- /character -->
<hr style="clear:both">
<!-- character -->
<div class="my-3">
<!-- image -->
<div class="mr-3 float-left" style="border:2px solid #8149b2; border-radius:20x; height:60px; width:60px;
background-image:url(imglink);
background-size:cover; background-position:center"></div>
<p>
<a class="btn px-2 py-1 mr-2 rounded-0" style="color:#faf8fc; background-color:#8149b2"
href="charlink">name
</a>
remember to copy the line (hr) between each character!! Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
<!-- /character -->
<!-- /ships - add more above this line -->
</div>
</div>
<!-- /tab -->
<!-- tab - extra -->
<div class="tab-pane fade text-justify" id="tab-extra">
<!-- heading -->
<p class="text-right mb-4 mx-3"><span class="text-right px-2 py-1" style="color:#faf8fc; font-size:1.2em; background-color:#8149b2">
04
<i class="fal fa-pipe mx-1"></i>
extra
<i class="fal fa-moon-cloud ml-2"></i>
</span></p>
<!-- /heading -->
<div class="px-3" style="height:300px; overflow-y:auto; scrollbar-width:thin">
<!-- heading -->
<p class="mb-2"><span class="px-2 py-1" style="color:#faf8fc; background-color:#8149b2">
<i class="fal fa-cloud-showers-heavy mr-2"></i>
trivia
</span></p>
<!-- /heading -->
<!-- list -->
<ul>
<li>Character was originally created in <b>year</b> for purpose</li>
<li>content</li>
<li>content</li>
</ul>
<!-- /list -->
<div class="align-items-center my-2">
<hr class="w-100" style="border-color:#8149b2">
<i class="fal fa-sparkle mx-3" style="color:#8149b2"></i>
<hr class="w-100" style="border-color:#8149b2">
</div>
<!-- links -->
<a class="btn btn-block px-2 py-1 my-1 rounded-0" style="color:#faf8fc; background-color:#8149b2"
href="worldlink">
<i class="fal fa-globe mr-2"></i>
about world
</a>
<a class="btn btn-block px-2 py-1 my-1 rounded-0" style="color:#faf8fc; background-color:#8149b2"
href="reflink">
<i class="fal fa-clothes-hanger mr-2"></i>
reference sheet
</a>
<a class="btn btn-block px-2 py-1 my-1 rounded-0" style="color:#faf8fc; background-color:#8149b2"
href="aflink">
<i class="fal fa-paintbrush-pencil mr-2"></i>
artfight page
</a>
<a class="btn btn-block px-2 py-1 my-1 rounded-0" style="color:#faf8fc; background-color:#8149b2"
href="taglink">
<i class="fal fa-at mr-2"></i>
tumblr tag
</a>
<a class="btn btn-block px-2 py-1 my-1 rounded-0" style="color:#faf8fc; background-color:#8149b2"
href="whateverlink">
<i class="fal fa-messages-question mr-2"></i>
ask blog
</a>
<!-- /links -->
</div>
</div>
<!-- /tab -->
</div>
</div>
<!-- /content -->
</div>
</div>
<!-- /main -->
</div>
</div>
<!-- end -->