Sika's Template 02

Hi, thanks for your interest in my humble layout. You can check out a live example here.

This one can be a bit finicky. Some notes:

It's pretty easy for the layout to fall out of wack if your image isn't just right. The entire thing kind of relies on the image being a cutout (since it's placed in front of the background but behind the text), with best results if the image is around 800px height (width doesn't matter as much). If you have a different sized image and need to adjust the amount of overlap, look for the `content-container` and change the `margin-top` value until you get something that looks right for you!

The accordions will break if any naming is inconsistent, so be careful with anything prefixed `mw-customtoggle-` or `mw-customcollapsible-`. Here's the full documentation on collapsible Wiki shenanigans.

This time, all the color codes are defined at the top of the source code to allow for an easy reference for find-and-replace. I hope it's not too bad.

show template code >>

<!-- --------- VARIABLE DEFINITIONS ---------
we don't have #vardefine so i'm just putting this in an ugly comment for easy reference
{{#vardefine:ideally|this would work}}
page bg color: ................... | #fcfbf9
content bg color (w/ opacity): ... | rgba(35, 31, 45, 0.95)
title text color: ................ | #fcfbf9
heading color: ................... | #d1b7a1
content text color: .............. | #fcfbf9
hyperlink color: ................. | #ccaa8b
--------- END VARIABLE DEFS --------- -->
<div id="bg" style="width:100%; padding:20px 0px 20px 0px; background-color:#fcfbf9" align="center">
<div id="bg-img" align="center">
[[File:Sika2_placeholder.png|800px]]
</div>
<div id="content-container" style="margin-top:-250px; width:50vw; background:none">
<div id="title" style="margin-bottom:-44px">
<span style="color:#fcfbf9; font-size:50px; font-style:italic; font-family:constantia">— name —</span>
</div>
<div id="content-wrapper" style="padding-top:15px; background-color:rgba(35, 31, 45, 0.95); color:#fcfbf9; border-radius:3px">
<div id="subtitle" style="margin:20px 0px 20px">
<span id="quote-or-epithet" style="font-style:italic">“quote quote quote”</span>
<br/><span id="divider" style="line-height:40px">- ᚖ -</span>
</div>
<div id="finally-some-real-f-king-content" style="width:30vw; margin:0px auto 30px auto; text-align:left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo quis imperdiet massa tincidunt nunc. Lobortis mattis aliquam faucibus purus in massa. Egestas purus viverra accumsan in nisl nisi. Libero enim sed faucibus turpis in eu. Lacus sed turpis tincidunt id aliquet risus feugiat. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Neque gravida in fermentum et.
</div>

<div class="mw-customtoggle-stats" style="width:inherit; padding:0px 5px; font-size:20px; background-color:rgb(35, 31, 45); text-align:center; font-family:constantia; color:#ccaa8b; cursor:pointer">— stats —</div>

<div class="mw-collapsible" id="mw-customcollapsible-stats">
<table id="basics" align=center width="100%" style="margin:10px 0px">
<tr><td width="50%" style="text-align:right; font-size:10px; font-weight:bold; color:#ccaa8b; text-transform:uppercase">race</td><td style="text-align:center; color:#ccaa8b">▹</td>
<td width="50%" style="text-align:left">race</td></tr>
<tr><td width="50%" style="text-align:right; font-size:10px; font-weight:bold; color:#ccaa8b; text-transform:uppercase">clan</td><td style="text-align:center; color:#ccaa8b">▹</td>
<td width="50%" style="text-align:left">clan</td></tr>
<tr><td width="50%" style="text-align:right; font-size:10px; font-weight:bold; color:#ccaa8b; text-transform:uppercase">age</td><td style="text-align:center; color:#ccaa8b">▹</td>
<td width="50%" style="text-align:left">age</td></tr>
<tr><td width="50%" style="text-align:right; font-size:10px; font-weight:bold; color:#ccaa8b; text-transform:uppercase">nameday</td><td style="text-align:center; color:#ccaa8b">▹</td>
<td width="50%" style="text-align:left">nameday</td></tr>
<tr><td width="50%" style="text-align:right; font-size:10px; font-weight:bold; color:#ccaa8b; text-transform:uppercase">patron</td><td style="text-align:center; color:#ccaa8b">▹</td>
<td width="50%" style="text-align:left">patron</td></tr>
<tr><td width="50%" style="text-align:right; font-size:10px; font-weight:bold; color:#ccaa8b; text-transform:uppercase">height</td><td style="text-align:center; color:#ccaa8b">▹</td>
<td width="50%" style="text-align:left">height</td></tr>
</table>

<center><span class="mw-customtoggle-stats" style="color:#ccaa8b; cursor:pointer">— ✖ —</span></center><br/>
</div>

<div class="mw-customtoggle-appearance" style="width:inherit; padding:0px 5px; font-size:20px; background-color:rgb(35, 31, 45); text-align:center; font-family:constantia; color:#ccaa8b; cursor:pointer">— appearance —</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-appearance" style="padding:10px 10px 15px; text-align:left">
<p style="font-size:18px; font-weight:400; color:#d1b7a1">general</p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Morbi tempus iaculis urna id. Neque viverra justo nec ultrices. Purus viverra accumsan in nisl nisi. Consequat ac felis donec et odio pellentesque. Cursus turpis massa tincidunt dui ut ornare lectus sit amet. Sit amet mauris commodo quis imperdiet massa. Orci ac auctor augue mauris augue neque gravida in. Faucibus nisl tincidunt eget nullam non. Accumsan lacus vel facilisis volutpat est velit. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Nunc id cursus metus aliquam eleifend mi. Commodo elit at imperdiet dui accumsan. Egestas diam in arcu cursus euismod quis viverra nibh cras. Nascetur ridiculus mus mauris vitae ultricies leo. Id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Sed arcu non odio euismod lacinia at quis. Aliquam sem et tortor consequat id porta nibh.

<p style="font-size:18px; font-weight:400; color:#d1b7a1">clothing</p>
Id aliquet risus feugiat in ante metus dictum. Eu sem integer vitae justo eget magna fermentum. Tempor orci eu lobortis elementum. Vitae suscipit tellus mauris a diam. Arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nullam ac tortor vitae purus faucibus ornare suspendisse sed. Volutpat est velit egestas dui id ornare arcu odio ut. Lectus vestibulum mattis ullamcorper velit. Sit amet porttitor eget dolor morbi non arcu risus. Suscipit adipiscing bibendum est ultricies integer quis auctor. Sit amet luctus venenatis lectus magna fringilla. Libero nunc consequat interdum varius. Nisl vel pretium lectus quam id leo in vitae turpis. Ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Ultricies mi quis hendrerit dolor magna eget est.

<p style="font-size:18px; font-weight:400; color:#d1b7a1">voice</p>
Nisi vitae suscipit tellus mauris a diam. Mi quis hendrerit dolor magna eget. Arcu dictum varius duis at consectetur lorem donec. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Adipiscing tristique risus nec feugiat in fermentum posuere. Id cursus metus aliquam eleifend mi in nulla. Eget aliquet nibh praesent tristique. Ultricies mi eget mauris pharetra et ultrices. Rutrum quisque non tellus orci ac auctor augue. Ultricies leo integer malesuada nunc vel risus commodo. Elit at imperdiet dui accumsan sit.

<p style="font-size:18px; font-weight:400; color:#d1b7a1">habits</p>
In aliquam sem fringilla ut morbi tincidunt augue interdum velit. Sodales neque sodales ut etiam sit amet. Facilisis gravida neque convallis a cras semper auctor neque. Odio aenean sed adipiscing diam donec. Ipsum suspendisse ultrices gravida dictum. Id ornare arcu odio ut sem nulla. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Mi in nulla posuere sollicitudin aliquam ultrices. Donec pretium vulputate sapien nec sagittis aliquam. Pharetra pharetra massa massa ultricies mi. Sed vulputate mi sit amet mauris commodo quis. A condimentum vitae sapien pellentesque. Massa eget egestas purus viverra accumsan. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Sodales ut etiam sit amet nisl purus in mollis. Sed egestas egestas fringilla phasellus faucibus scelerisque. Varius quam quisque id diam. At ultrices mi tempus imperdiet nulla malesuada. In fermentum et sollicitudin ac orci phasellus egestas.

<br/><center><span class="mw-customtoggle-appearance" style="color:#ccaa8b; cursor:pointer">— ✖ —</span></center>
</div>

<div class="mw-customtoggle-personality" style="width:inherit; padding:0px 5px; font-size:20px; background-color:rgb(35, 31, 45); text-align:center; font-family:constantia; color:#ccaa8b; cursor:pointer">— personality —</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-personality" style="padding:10px 10px 15px; text-align:left">
Scelerisque in dictum non consectetur a erat nam at. Eu tincidunt tortor aliquam nulla facilisi. Dui id ornare arcu odio ut sem. In fermentum posuere urna nec tincidunt praesent semper feugiat. Justo eget magna fermentum iaculis eu non diam. Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Elementum pulvinar etiam non quam lacus suspendisse faucibus. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Ac felis donec et odio pellentesque diam volutpat commodo. Et tortor consequat id porta nibh venenatis cras sed felis. Pharetra convallis posuere morbi leo urna molestie at. Vestibulum lectus mauris ultrices eros in. Vulputate dignissim suspendisse in est ante in nibh mauris.

<div id="likes" width="100%" style="display:grid; grid-template-columns:50px auto; grid-column-gap:5px; margin-bottom:5px">
<div style="display:flex; align-items:center; justify-content:center; background-color:#a3b28e; padding:10px; border-radius:2px">
<center><span style="font-size:40pt">♥</span></center></div>
<table id="likes-table" style="width:100%; color:#a3b28e">
<tr style="vertical-align:top"><td style="width:110px; font-weight:bold">like1</td><td> ▹ </td><td style="color:#fcfbf9">In fermentum posuere urna nec tincidunt.</td></tr>
<tr style="vertical-align:top"><td style="font-weight:bold; white-space:nowrap">like2</td><td> ▹ </td><td style="color:#fcfbf9">Nisi vitae suscipit tellus mauris.</td></tr>
<tr style="vertical-align:top"><td style="font-weight:bold; white-space:nowrap">like3</td><td> ▹ </td><td style="color:#fcfbf9">Penatibus et magnis dis parturient montes nascetur ridiculus mus.</td></tr>
</table>
</div>

<div id="dislikes" width="100%" style="display:grid; grid-template-columns:50px auto; grid-column-gap:5px; margin-bottom:5px">
<div style="display:flex; align-items:center; justify-content:center; background-color:#9b4c69; padding:10px; border-radius:2px">
<center><span style="font-size:33pt">✖</span></center></div>
<table id="dislikes-table" style="width:100%; color:#9b4c69">
<tr style="vertical-align:top"><td style="width:110px; font-weight:bold; white-space:nowrap">dislike1</td><td> ▹ </td><td style="color:#fcfbf9">Egestas dui id ornare arcu.</td></tr>
<tr style="vertical-align:top"><td style="font-weight:bold; white-space:nowrap">dislike2</td><td> ▹ </td><td style="color:#fcfbf9">Magnis dis parturient montes nascetur ridiculus mus.</td></tr>
<tr style="vertical-align:top"><td style="font-weight:bold; white-space:nowrap">dislike3</td><td> ▹ </td><td style="color:#fcfbf9">Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus.</td></tr>
</table>
</div>

<div id="other" width="100%" style="display:grid; grid-template-columns:50px auto; grid-column-gap:5px; margin-bottom:5px">
<div style="display:flex; align-items:center; justify-content:center; background-color:#adaaaf; padding:10px; border-radius:2px">
<center><span style="font-size:20pt"><b>etc</b></span></center></div>
<table id="other-table" style="width:100%; color:#adaaaf">
<tr style="vertical-align:top"><td style="width:110px; font-weight:bold; white-space:nowrap">alignment</td><td> ▹ </td><td style="color:#fcfbf9">alignment</td></tr>
<tr style="vertical-align:top"><td style="font-weight:bold; white-space:nowrap">faults</td><td> ▹ </td><td style="color:#fcfbf9">faults</td></tr>
<tr style="vertical-align:top"><td style="font-weight:bold; white-space:nowrap">favorite foods</td><td> ▹ </td><td style="color:#fcfbf9">favorite foods</td></tr>
<tr style="vertical-align:top"><td style="font-weight:bold; white-space:nowrap">favorite color</td><td> ▹ </td><td style="color:#fcfbf9">favorite color</td></tr>
</table>
</div>

<br/><center><span class="mw-customtoggle-personality" style="color:#ccaa8b; cursor:pointer">— ✖ —</span></center>
</div>

<div class="mw-customtoggle-history" style="width:inherit; padding:0px 5px; font-size:20px; background-color:rgb(35, 31, 45); text-align:center; font-family:constantia; color:#ccaa8b; cursor:pointer">— history —</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-history" style="padding:10px 10px 15px; text-align:left">
<p style="font-size:18px; font-weight:400; color:#d1b7a1">childhood</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat imperdiet sed euismod nisi porta. Senectus et netus et malesuada fames. Suscipit adipiscing bibendum est ultricies integer quis auctor elit. Non blandit massa enim nec dui nunc mattis. Nibh sed pulvinar proin gravida hendrerit lectus. Vestibulum lectus mauris ultrices eros in cursus. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Suscipit tellus mauris a diam maecenas sed enim. Tempor nec feugiat nisl pretium fusce id velit. Dictum non consectetur a erat nam. Cum sociis natoque penatibus et magnis dis parturient montes. Enim diam vulputate ut pharetra. Facilisis leo vel fringilla est ullamcorper eget. Amet risus nullam eget felis eget nunc. Vitae congue eu consequat ac felis. Pellentesque habitant morbi tristique senectus.

<p style="font-size:18px; font-weight:400; color:#d1b7a1">teenage</p>
Ullamcorper malesuada proin libero nunc. Cras tincidunt lobortis feugiat vivamus at augue eget. Morbi tristique senectus et netus et malesuada. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Vitae congue mauris rhoncus aenean. Amet tellus cras adipiscing enim eu. Scelerisque purus semper eget duis at tellus. Auctor eu augue ut lectus arcu bibendum at varius vel. Vel facilisis volutpat est velit egestas. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Nam aliquam sem et tortor consequat. Netus et malesuada fames ac turpis egestas maecenas pharetra. Et malesuada fames ac turpis egestas maecenas. Ullamcorper dignissim cras tincidunt lobortis. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Pretium nibh ipsum consequat nisl vel pretium. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna.

<p style="font-size:18px; font-weight:400; color:#d1b7a1">present</p>
Augue eget arcu dictum varius duis at. Mauris rhoncus aenean vel elit scelerisque. Luctus accumsan tortor posuere ac ut consequat semper viverra. Est ante in nibh mauris cursus mattis molestie a. Vivamus at augue eget arcu. Convallis aenean et tortor at risus viverra adipiscing. Pellentesque massa placerat duis ultricies lacus sed turpis. Faucibus in ornare quam viverra orci sagittis eu volutpat odio. Nibh venenatis cras sed felis eget velit aliquet sagittis id. Sit amet risus nullam eget felis eget nunc lobortis. Habitant morbi tristique senectus et netus. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Commodo ullamcorper a lacus vestibulum sed arcu non. Ut pharetra sit amet aliquam id diam maecenas. Risus viverra adipiscing at in tellus integer. Quis hendrerit dolor magna eget est. Non quam lacus suspendisse faucibus. Congue mauris rhoncus aenean vel elit scelerisque mauris. Viverra mauris in aliquam sem fringilla ut morbi.

<br/><center><span class="mw-customtoggle-history" style="color:#ccaa8b; cursor:pointer">— ✖ —</span></center>
</div>

<div class="mw-customtoggle-rumors" style="width:inherit; padding:0px 5px; font-size:20px; background-color:rgb(35, 31, 45); text-align:center; font-family:constantia; color:#ccaa8b; cursor:pointer">— rumors —</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-rumors" style="padding:10px 10px 15px; text-align:left">

<div class="mw-customtoggle-common" style="font-size:12pt; text-align:center; color:#a3b28e; cursor:pointer">common knowledge ▿</div>
<div class="mw-collapsible" id="mw-customcollapsible-common">
: <em>"Quis ipsum suspendisse ultrices gravida dictum fusce ut. Magna sit amet purus gravida quis blandit turpis cursus."</em> <span style="opacity:0.7">— someone</span><br/>
: <em>"Ut aliquam purus sit amet luctus venenatis. Non tellus orci ac auctor."</em> <span style="opacity:0.65">— someone else</span><br/>
</div>

<div class="mw-customtoggle-moderate" style="font-size:12pt; text-align:center; color:#cca068; cursor:pointer">gossip ▿</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-moderate">
: <em>"Viverra orci sagittis eu volutpat. Nulla facilisi morbi tempus iaculis urna id. Quis risus sed vulputate odio ut enim blandit."</em> <span style="opacity:0.7">— ugh</span><br/>
: <em>"Enim sit amet venenatis urna cursus eget. At auctor urna nunc id cursus metus."</em> <span style="opacity:0.7">— ughh</span><br/>
: <em>"Nibh cras pulvinar mattis nunc sed."</em> <span style="opacity:0.7">— ughhhh</span><br/>
</div>

<div class="mw-customtoggle-rare" style="font-size:12pt; text-align:center; color:#9b4c69; cursor:pointer">under wraps ▿</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-rare">
: <em>"shhh"</em> <span style="opacity:0.7">— shhhhhh</span><br/>
</div>

<div class="mw-customtoggle-pc" style="font-size:12pt; text-align:center; color:#5d82aa; cursor:pointer">interviewed ▿</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-pc">
: <em>"cute quote from a cute friend"</em> <span style="opacity:0.7">— [[Name Name|<span style="color:#ccaa8b">Name Name</span>]]</span><br/>
</div>

<br/><center><span class="mw-customtoggle-rumors" style="color:#ccaa8b; cursor:pointer">— ✖ —</span></center>
</div>

<div class="mw-customtoggle-relationships" style="width:inherit; padding:0px 5px; font-size:20px; background-color:rgb(35, 31, 45); text-align:center; font-family:constantia; color:#ccaa8b; cursor:pointer">— relationships —</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-relationships" style="padding:10px 10px 15px; text-align:left">

<center><span id="relationships-key"><font color="#9b4c69">♥</font> romantic love    <font color="#d69ab0">♡</font> platonic love    <font color="#a3b28e">▲</font> positive    <font color="#adaaaf">■</font> neutral    <font color="#9b4c69">▼</font> negative</span></center><br/>

<div id="NAME1" class="mw-customtoggle-NAME1" width="100%" style="display:grid; grid-template-columns:20px 150px auto 20px; cursor:pointer">
<div style="display:flex; justify-content:center"><font color="#a3b28e">▲</font></div><div>[[Name Name|<span style="color:#ccaa8b">Name Name</span>]]</div>
<div>"quote from your character about this relationship"</div><div style="display:flex; justify-content:center">▿</div>
</div>
<div id="mw-customcollapsible-NAME1" class="mw-collapsible mw-collapsed" width="100%" style="display:grid; grid-template-columns:170px auto 20px">
<div></div><div>
more details if you want
</div><div></div>
</div>

<div id="NAME2" class="mw-customtoggle-NAME2" width="100%" style="display:grid; grid-template-columns:20px 150px auto 20px; cursor:pointer">
<div style="display:flex; justify-content:center"><font color="#a3b28e">▲</font></div><div>[[Name Name|<span style="color:#ccaa8b">Name Name</span>]]</div>
<div>"another quote about another person"</div><div style="display:flex; justify-content:center">▿</div>
</div>
<div id="mw-customcollapsible-NAME2" class="mw-collapsible mw-collapsed" width="100%" style="display:grid; grid-template-columns:170px auto 20px">
<div></div><div>
some more stuff
</div><div></div>
</div>

<div id="NAME3" class="mw-customtoggle-NAME3" width="100%" style="display:grid; grid-template-columns:20px 150px auto 20px; cursor:pointer">
<div style="display:flex; justify-content:center"><font color="#d69ab0">♡</font></div><div>[[Name Name|<span style="color:#ccaa8b">Name Name</span>]]</div>
<div>"..."</div><div style="display:flex; justify-content:center">▿</div>
</div>
<div id="mw-customcollapsible-NAME3" class="mw-collapsible mw-collapsed" width="100%" style="display:grid; grid-template-columns:170px auto 20px">
<div></div><div>
ye
</div><div></div>
</div>

<br/><center><span class="mw-customtoggle-relationships" style="color:#ccaa8b; cursor:pointer">— ✖ —</span></center>
</div>

<div class="mw-customtoggle-ooc" style="width:inherit; padding:0px 5px; font-size:20px; background-color:rgb(35, 31, 45); text-align:center; font-family:constantia; color:#ccaa8b; cursor:pointer">— ooc —</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ooc" style="padding:10px 10px 15px; text-align:left">

<p style="font-size:18px; font-weight:400; color:#d1b7a1">notes</p>
: ▹  feel free to use and tweak the layout, just be sure to leave credit (you can find some nice decorative symbols [https://unicode-table.com/en/<span style="color:#ccaa8b">here</span>])<br/>
: ▹  <em>layout last updated 11 june 2020</em><br/>

<p style="font-size:18px; font-weight:400; color:#d1b7a1">ingame</p>
: ▹  server, timezone<br/>

<p style="font-size:18px; font-weight:400; color:#d1b7a1">links</p>
: ▹  [http://link<span style="color:#ccaa8b">link text</span>]<br/>

<br/><center><span class="mw-customtoggle-ooc" style="color:#ccaa8b; cursor:pointer">— ✖ —</span></center>
</div><br/>

</div>

<table id="credits" align=center style="margin-top:20px; font-size:10px; color:rgba(35, 31, 45, 0.95)">
<tr>
<td style="padding-right:10px; text-align:right; font-size:10px; font-weight:bold; text-transform:uppercase; border-right:1px solid">character template</td>
<td style="padding-left:10px; text-align:left">[[Bancroft Gairn|<span style="color:#ccaa8b">Bancroft Gairn</span>]]</td>
</tr>
<tr>
<td style="padding-right:10px; text-align:right; font-size:10px; font-weight:bold; text-transform:uppercase; border-right:1px solid">layout</td>
<td style="padding-left:10px; text-align:left">[[Misik'a Rahsi|<span style="color:#ccaa8b">Misik'a Rahsi</span>]]</td>
</tr>
<tr>
<td style="padding-right:10px; text-align:right; font-size:10px; font-weight:bold; text-transform:uppercase; border-right:1px solid">art</td>
<td style="padding-left:10px; text-align:left">[[Misik'a Rahsi|<span style="color:#ccaa8b">Misik'a Rahsi</span>]] (unless stated otherwise)</td>
</tr>
</table>

</div>

---

— name —

“quote quote quote”
- ᚖ -

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo quis imperdiet massa tincidunt nunc. Lobortis mattis aliquam faucibus purus in massa. Egestas purus viverra accumsan in nisl nisi. Libero enim sed faucibus turpis in eu. Lacus sed turpis tincidunt id aliquet risus feugiat. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Neque gravida in fermentum et.

— stats —

race	▹	race
clan	▹	clan
age	▹	age
nameday	▹	nameday
patron	▹	patron
height	▹	height

— ✖ —

— appearance —

general

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Morbi tempus iaculis urna id. Neque viverra justo nec ultrices. Purus viverra accumsan in nisl nisi. Consequat ac felis donec et odio pellentesque. Cursus turpis massa tincidunt dui ut ornare lectus sit amet. Sit amet mauris commodo quis imperdiet massa. Orci ac auctor augue mauris augue neque gravida in. Faucibus nisl tincidunt eget nullam non. Accumsan lacus vel facilisis volutpat est velit. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Nunc id cursus metus aliquam eleifend mi. Commodo elit at imperdiet dui accumsan. Egestas diam in arcu cursus euismod quis viverra nibh cras. Nascetur ridiculus mus mauris vitae ultricies leo. Id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Sed arcu non odio euismod lacinia at quis. Aliquam sem et tortor consequat id porta nibh.

clothing

Id aliquet risus feugiat in ante metus dictum. Eu sem integer vitae justo eget magna fermentum. Tempor orci eu lobortis elementum. Vitae suscipit tellus mauris a diam. Arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nullam ac tortor vitae purus faucibus ornare suspendisse sed. Volutpat est velit egestas dui id ornare arcu odio ut. Lectus vestibulum mattis ullamcorper velit. Sit amet porttitor eget dolor morbi non arcu risus. Suscipit adipiscing bibendum est ultricies integer quis auctor. Sit amet luctus venenatis lectus magna fringilla. Libero nunc consequat interdum varius. Nisl vel pretium lectus quam id leo in vitae turpis. Ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Ultricies mi quis hendrerit dolor magna eget est.

voice

Nisi vitae suscipit tellus mauris a diam. Mi quis hendrerit dolor magna eget. Arcu dictum varius duis at consectetur lorem donec. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Adipiscing tristique risus nec feugiat in fermentum posuere. Id cursus metus aliquam eleifend mi in nulla. Eget aliquet nibh praesent tristique. Ultricies mi eget mauris pharetra et ultrices. Rutrum quisque non tellus orci ac auctor augue. Ultricies leo integer malesuada nunc vel risus commodo. Elit at imperdiet dui accumsan sit.

habits

In aliquam sem fringilla ut morbi tincidunt augue interdum velit. Sodales neque sodales ut etiam sit amet. Facilisis gravida neque convallis a cras semper auctor neque. Odio aenean sed adipiscing diam donec. Ipsum suspendisse ultrices gravida dictum. Id ornare arcu odio ut sem nulla. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Mi in nulla posuere sollicitudin aliquam ultrices. Donec pretium vulputate sapien nec sagittis aliquam. Pharetra pharetra massa massa ultricies mi. Sed vulputate mi sit amet mauris commodo quis. A condimentum vitae sapien pellentesque. Massa eget egestas purus viverra accumsan. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Sodales ut etiam sit amet nisl purus in mollis. Sed egestas egestas fringilla phasellus faucibus scelerisque. Varius quam quisque id diam. At ultrices mi tempus imperdiet nulla malesuada. In fermentum et sollicitudin ac orci phasellus egestas.

— ✖ —

— personality —

Scelerisque in dictum non consectetur a erat nam at. Eu tincidunt tortor aliquam nulla facilisi. Dui id ornare arcu odio ut sem. In fermentum posuere urna nec tincidunt praesent semper feugiat. Justo eget magna fermentum iaculis eu non diam. Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Elementum pulvinar etiam non quam lacus suspendisse faucibus. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Ac felis donec et odio pellentesque diam volutpat commodo. Et tortor consequat id porta nibh venenatis cras sed felis. Pharetra convallis posuere morbi leo urna molestie at. Vestibulum lectus mauris ultrices eros in. Vulputate dignissim suspendisse in est ante in nibh mauris.

♥

like1	▹	In fermentum posuere urna nec tincidunt.
like2	▹	Nisi vitae suscipit tellus mauris.
like3	▹	Penatibus et magnis dis parturient montes nascetur ridiculus mus.

✖

dislike1	▹	Egestas dui id ornare arcu.
dislike2	▹	Magnis dis parturient montes nascetur ridiculus mus.
dislike3	▹	Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus.

etc

alignment	▹	alignment
faults	▹	faults
favorite foods	▹	favorite foods
favorite color	▹	favorite color

— ✖ —

— history —

childhood

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat imperdiet sed euismod nisi porta. Senectus et netus et malesuada fames. Suscipit adipiscing bibendum est ultricies integer quis auctor elit. Non blandit massa enim nec dui nunc mattis. Nibh sed pulvinar proin gravida hendrerit lectus. Vestibulum lectus mauris ultrices eros in cursus. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Suscipit tellus mauris a diam maecenas sed enim. Tempor nec feugiat nisl pretium fusce id velit. Dictum non consectetur a erat nam. Cum sociis natoque penatibus et magnis dis parturient montes. Enim diam vulputate ut pharetra. Facilisis leo vel fringilla est ullamcorper eget. Amet risus nullam eget felis eget nunc. Vitae congue eu consequat ac felis. Pellentesque habitant morbi tristique senectus.

teenage

Ullamcorper malesuada proin libero nunc. Cras tincidunt lobortis feugiat vivamus at augue eget. Morbi tristique senectus et netus et malesuada. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Vitae congue mauris rhoncus aenean. Amet tellus cras adipiscing enim eu. Scelerisque purus semper eget duis at tellus. Auctor eu augue ut lectus arcu bibendum at varius vel. Vel facilisis volutpat est velit egestas. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Nam aliquam sem et tortor consequat. Netus et malesuada fames ac turpis egestas maecenas pharetra. Et malesuada fames ac turpis egestas maecenas. Ullamcorper dignissim cras tincidunt lobortis. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Pretium nibh ipsum consequat nisl vel pretium. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna.

present

Augue eget arcu dictum varius duis at. Mauris rhoncus aenean vel elit scelerisque. Luctus accumsan tortor posuere ac ut consequat semper viverra. Est ante in nibh mauris cursus mattis molestie a. Vivamus at augue eget arcu. Convallis aenean et tortor at risus viverra adipiscing. Pellentesque massa placerat duis ultricies lacus sed turpis. Faucibus in ornare quam viverra orci sagittis eu volutpat odio. Nibh venenatis cras sed felis eget velit aliquet sagittis id. Sit amet risus nullam eget felis eget nunc lobortis. Habitant morbi tristique senectus et netus. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Commodo ullamcorper a lacus vestibulum sed arcu non. Ut pharetra sit amet aliquam id diam maecenas. Risus viverra adipiscing at in tellus integer. Quis hendrerit dolor magna eget est. Non quam lacus suspendisse faucibus. Congue mauris rhoncus aenean vel elit scelerisque mauris. Viverra mauris in aliquam sem fringilla ut morbi.

— ✖ —

— rumors —

common knowledge ▿

"Quis ipsum suspendisse ultrices gravida dictum fusce ut. Magna sit amet purus gravida quis blandit turpis cursus." — someone

"Ut aliquam purus sit amet luctus venenatis. Non tellus orci ac auctor." — someone else

gossip ▿

"Viverra orci sagittis eu volutpat. Nulla facilisi morbi tempus iaculis urna id. Quis risus sed vulputate odio ut enim blandit." — ugh

"Enim sit amet venenatis urna cursus eget. At auctor urna nunc id cursus metus." — ughh

"Nibh cras pulvinar mattis nunc sed." — ughhhh

under wraps ▿

"shhh" — shhhhhh

interviewed ▿

"cute quote from a cute friend" — Name Name

— ✖ —

— relationships —

♥ romantic love    ♡ platonic love    ▲ positive    ■ neutral    ▼ negative

▲

Name Name

"quote from your character about this relationship"

▿

more details if you want

▲

Name Name

"another quote about another person"

▿

some more stuff

♡

Name Name

"..."

▿

ye

— ✖ —

— ooc —

notes

▹  feel free to use and tweak the layout, just be sure to leave credit (you can find some nice decorative symbols here)

▹  layout last updated 11 june 2020

ingame

▹  server, timezone

links

▹  link text

— ✖ —

character template	Bancroft Gairn
layout	Misik'a Rahsi