mildly untidy
created by:sunxrice
Mixed ColorsHTMLCharacter
Copy
<!--
mildly untidy
by sunxrice
-->
<!-- background - replace url (or remove if you don't want it) -->
<div class="container p-0" style="
background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/74714642_re6Erok5jE44PPv.png);
background-size: cover;
filter: brightness(1.5) saturate(0.75);
background-attachment: fixed; position: absolute; min-width: 100%; min-height: 100%; top: -20px; left: -20px; right: -20px; bottom: 10px; z-index: -99;"></div>
<!-- /background -->
<!-- non-variables - use ctrl + f to find!
links -
page : link_here
image : imglink
-->
<!-- variables - replace values here -->
<div class="container my-5" style="
max-width: 800px;
/* colors */
--accent-1: #bc7162;
--accent-text: #fff;
--border: 2px solid #bbb;
--border-table: 2px solid var(--accent-1);
/* text stuff */
--font: 'courier new';
/* scrolling */
--tab-height: 320px;
--scrollbar-width: thin;
/* scrollbar color - can use toyhouse's variables, may not display on code editors but looks fine on toyhouse */
--scrollbar-color: var(--accent-1) var(--color-background);
">
<div class="row">
<!-- character fullbody -->
<div class="col-3" style="
background-image: url(imglink);
background-position: top 20px left 10px; background-size: contain; background-repeat: no-repeat;"></div>
<!-- card -->
<div class="col-9 card p-0 rounded-0" style="border: var(--border); position: relative; left: -10px;
transform: rotate(1deg);
box-shadow: 0 0 15px black
">
<!-- header -->
<div class="row p-0 m-0" style="border-bottom: var(--border); font-family: var(--font)">
<!-- text -->
<div class="col-sm py-2 my-auto">
<h3 class="mb-0 display-4 text-uppercase d-flex justify-content-between align-items-center" style="font-weight: 600;">
<span>
name
</span>
<i class="fas fa-star fa-xs"></i>
</h3>
<div class="mb-3">
<span class="d-inline-block px-2 py-1 font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1);">
occupation
</span>
<span class="d-inline-block">
pronouns, age
</span>
</div>
<blockquote class="font-italic">
“quote. keep short for best result.”
</blockquote>
</div>
<!-- /text -->
<!-- stamps -
- all should be the same size if possible
- to use with blinkies instead, replace:
flex-row flex-sm-column
with just:
flex-column
-->
<div class="col-sm-auto d-flex flex-row flex-sm-column px-1 py-1 justify-content-center">
<img class="m-1" style="min-width: 0; min-height: 0" src="imglink">
<img class="m-1" style="min-width: 0; min-height: 0" src="imglink">
<img class="m-1" style="min-width: 0; min-height: 0" src="imglink">
</div>
<!-- /stamps -->
</div>
<!-- /header -->
<!-- basic info -->
<div class="row p-0 m-0" style="border-bottom: var(--border);">
<!-- icon -->
<div class="col-12 col-sm-4 py-3 justify-content-center align-items-center">
<img src="imglink" alt=""
class="p-2 bg-light" style="transform: rotate(-3deg)">
</div>
<!-- /icon -->
<!-- info -->
<div class="col-12 col-sm-8 p-2">
<table class="table bg-faded m-0" style="border: var(--border-table)">
<!-- nicknames -->
<tr style="border-bottom: var(--border-table)">
<th class="px-2 py-1 w-25" style="color: var(--accent-text); background-color: var(--accent-1); font-family: var(--font)">
nicknames
</th>
<td class="px-2 p-1 w-75">
content, separate with commas
<br>or line breaks, or however you want
</td>
</tr>
<!-- birthdate -->
<tr style="border-bottom: var(--border-table)">
<th class="px-2 py-1 w-25" style="color: var(--accent-text); background-color: var(--accent-1); font-family: var(--font)">
birthdate
</th>
<td class="px-2 p-1 w-75">
00 month
</td>
</tr>
<!-- gender -->
<tr style="border-bottom: var(--border-table)">
<th class="px-2 py-1 w-25" style="color: var(--accent-text); background-color: var(--accent-1); font-family: var(--font)">
gender
</th>
<td class="px-2 p-1 w-75">
content
</td>
</tr>
<!-- orientation -->
<tr style="border-bottom: var(--border-table)">
<th class="px-2 py-1 w-25" style="color: var(--accent-text); background-color: var(--accent-1); font-family: var(--font)">
orientation
</th>
<td class="px-2 p-1 w-75">
content
</td>
</tr>
<!-- alignment -->
<tr style="border-bottom: var(--border-table)">
<th class="px-2 py-1 w-25" style="color: var(--accent-text); background-color: var(--accent-1); font-family: var(--font)">
alignment
</th>
<td class="px-2 p-1 w-75">
neutral idk
</td>
</tr>
<!-- status -->
<tr>
<th class="px-2 py-1 w-25" style="color: var(--accent-text); background-color: var(--accent-1); font-family: var(--font)">
status
</th>
<td class="px-2 p-1 w-75">
alive / present / etc
</td>
</tr>
<!-- add more items above this line - make sure the last table row doesn't have a border!! -->
</table>
</div>
<!-- /info -->
</div>
<!-- /basic info -->
<!-- tabs -->
<div style="border-bottom: var(--border);">
<!-- tab nav -->
<ul class="nav d-flex flex-column flex-sm-row mb-1" style="font-family: var(--font);" role="tablist">
<li class="nav-item w-100">
<a class="nav-link btn btn-default border-0 rounded-0 m-1 mb-sm-0 font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1);" data-toggle="tab" href="#about">about</a>
</li>
<li class="nav-item w-100">
<a class="nav-link btn btn-default border-0 rounded-0 m-1 mb-sm-0 font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1);" data-toggle="tab" href="#appearance">appearance</a>
</li>
<li class="nav-item w-100">
<a class="nav-link btn btn-default border-0 rounded-0 m-1 mb-sm-0 font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1);" data-toggle="tab" href="#story">story</a>
</li>
<li class="nav-item w-100">
<a class="nav-link btn btn-default border-0 rounded-0 m-1 mb-sm-0 font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1);" data-toggle="tab" href="#relationships">relationships</a>
</li>
</ul>
<!-- /tab nav -->
<!-- tab content -->
<div class="tab-content">
<!-- tab - about -->
<div class="tab-pane fade show active p-2" id="about" role="tabpanel" style="height: var(--tab-height); overflow-y: scroll; scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color);">
<!-- personality -->
<div class="mb-2">
<p>describe your character here. who are they, what do they do, what are they like, etc.</p>
<p>second paragraph. the box has a fixed height (customizable using variables) so everything inside all three of these tabs scrolls. 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>
<hr>
<!-- lists -->
<div class="row m-0">
<!-- likes -->
<div class="col-sm">
<h4>
<span class="d-inline-block px-2 py-1 font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1); font-family: var(--font)">
likes
</span>
</h4>
<ul class="pl-4">
<li>content</li>
</ul>
</div>
<!-- dislikes -->
<div class="col-sm">
<h4>
<span class="d-inline-block px-2 py-1 font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1); font-family: var(--font)">
dislikes
</span>
</h4>
<ul class="pl-4">
<li>content</li>
</ul>
</div>
<!-- fears -->
<div class="col-sm">
<h4>
<span class="d-inline-block px-2 py-1 font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1); font-family: var(--font)">
fears
</span>
</h4>
<ul class="pl-4">
<li>content</li>
</ul>
</div>
</div>
<!-- /lists -->
<hr>
<!-- trivia -->
<div>
<h4>
<span class="d-inline-block px-2 py-1 font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1); font-family: var(--font)">
trivia
</span>
</h4>
<ul class="pl-4">
<li>content</li>
<li>very long content. 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.</li>
</ul>
</div>
</div>
<!-- /tab -->
<!-- tab - appearance -->
<div class="tab-pane fade p-2" id="appearance" role="tabpanel" style="height: var(--tab-height); overflow-y: scroll; scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color);">
<!-- reference sheet -->
<div class="mb-2 text-center">
<img style="max-width: 360px" src="imglink" alt="reference sheet">
</div>
<!-- palette -
- make sure the hex codes in the style and inside the div are the same
- change text-dark and text-light accordingly! keep the hex codes readable -->
<div class="row no-gutters text-center my-2" style="font-size:10px">
<div class="col-sm py-1 text-dark" style="background:#e5e4e0">#e5e4e0</div>
<div class="col-sm py-1 text-dark" style="background:#c1bfba">#c1bfba</div>
<div class="col-sm py-1 text-light" style="background:#7c7b74">#7c7b74</div>
<div class="col-sm py-1 text-light" style="background:#403e3a">#403e3a</div>
<!-- put more colors above this line -->
</div>
<!-- /palette -->
<!-- table -->
<table class="table bg-faded m-0 mb-2" style="border: var(--border-table)">
<!-- species -->
<tr style="border-bottom: var(--border-table)">
<th class="px-2 py-1 w-25" style="color: var(--accent-text); background-color: var(--accent-1); font-family: var(--font)">
species
</th>
<td class="px-2 p-1 w-75">
content
</td>
</tr>
<!-- height -->
<tr style="border-bottom: var(--border-table)">
<th class="px-2 py-1 w-25" style="color: var(--accent-text); background-color: var(--accent-1); font-family: var(--font)">
height
</th>
<td class="px-2 p-1 w-75">
0 cm / 0'0"
</td>
</tr>
<!-- build -->
<tr style="border-bottom: var(--border-table)">
<th class="px-2 py-1 w-25" style="color: var(--accent-text); background-color: var(--accent-1); font-family: var(--font)">
build
</th>
<td class="px-2 p-1 w-75">
content
</td>
</tr>
<!-- designer -->
<tr>
<th class="px-2 py-1 w-25" style="color: var(--accent-text); background-color: var(--accent-1); font-family: var(--font)">
designer
</th>
<td class="px-2 p-1 w-75">
@
</td>
</tr>
<!-- add more items above this line - make sure the last table row doesn't have a border!! -->
</table>
<!-- /table -->
<!-- notes -->
<div class="row no-gutters p-0 m-0 mb-2">
<!-- description -->
<div class="col-12 col-sm-7">
<p>describe your character's physical appearance. this code isn't really designed to have a place for a refsheet, so if the image placement looks half-assed, that's because it kind of is lol. the image can be any size, the placeholder image size is just. well. a placeholder.</p>
</div>
<!-- list -->
<div class="col-12 col-sm-5">
<ul>
<li>notes in bullet list format</li>
<li>content</li>
</ul>
</div>
</div>
<!-- /notes -->
</div>
<!-- /tab -->
<!-- tab - story -->
<div class="tab-pane fade p-2" id="story" role="tabpanel" style="height: var(--tab-height); overflow-y: scroll; scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color);">
<!-- warning -->
<p class="p-1 mb-2 bg-faded" style="border: var(--border-table)">
<span class="d-inline-block px-2 py-1 font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1); font-family: var(--font)">
<i class="fas fa-warning"></i>
warning:
</span>
this looks better if you keep it short enough to stay in one line but if you have an entire paragraph's worth of warnings i'm not going to stop you.
</p>
<!-- /warning -->
<p>write your character's story here or something. put as many paragraphs and subheadings as you want. the box scrolls.</p>
<h4>
<span class="d-inline-block px-2 py-1 font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1); font-family: var(--font)">
subheading
</span>
</h4>
<p>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>
<p>another longer 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. Tootsie roll pie topping powder sugar plum soufflé. Gingerbread sugar plum tiramisu powder macaroon candy canes dragée icing. Sweet macaroon tootsie roll chocolate chocolate cake. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!-- /tab -->
<!-- tab - relationships
change the number in "transform: rotate(2deg)" for variety in image rotation
-->
<div class="tab-pane fade p-2" id="relationships" role="tabpanel" style="height: var(--tab-height); overflow-y: scroll; scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color);">
<!-- reputation -->
<div class="mb-3">
<p>intro paragraph. i describe the character's reputation here but you can delete this if you don't do that.</p>
</div>
<hr>
<!-- character -->
<div class="row no-gutters p-0 m-0 mb-3">
<!-- icon -->
<div class="col-12 col-sm-3 px-5 px-sm-3 py-2">
<img src="imglink" alt=""
class="p-2 bg-light" style="transform: rotate(2deg)">
</div>
<!-- /icon -->
<!-- info -->
<div class="col-12 col-sm-9">
<div class="mb-2" style="font-family: var(--font)">
<a href="link_here" class="d-inline-block px-2 py-1 text-uppercase font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1); text-decoration: none">
character
</a>
<span class="d-inline-block">
relationship
</span>
</div>
<p class="p-1 mb-2 bg-faded" style="border: var(--border-table)">
“what do i think of them? (write your character's thoughts of the other character in first person, or delete if you don't need this)”
</p>
<p>describe here. there are instructions if you want to change the image rotations. lorem ipsum or something.</p>
</div>
<!-- /info -->
</div>
<!-- /character -->
<!-- character -->
<div class="row no-gutters p-0 m-0 mb-3">
<!-- icon -->
<div class="col-12 col-sm-3 px-5 px-sm-3 py-2">
<img src="imglink" alt=""
class="p-2 bg-light" style="transform: rotate(2deg)">
</div>
<!-- /icon -->
<!-- info -->
<div class="col-12 col-sm-9">
<div class="mb-2" style="font-family: var(--font)">
<a href="link_here" class="d-inline-block px-2 py-1 text-uppercase font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1); text-decoration: none">
character
</a>
<span class="d-inline-block">
relationship
</span>
</div>
<p class="p-1 mb-2 bg-faded" style="border: var(--border-table)">
“thoughts”
</p>
<p>here's long text. 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>
<!-- /info -->
</div>
<!-- /character -->
<!-- character -->
<div class="row no-gutters p-0 m-0 mb-3">
<!-- icon -->
<div class="col-12 col-sm-3 px-5 px-sm-3 py-2">
<img src="imglink" alt=""
class="p-2 bg-light" style="transform: rotate(2deg)">
</div>
<!-- /icon -->
<!-- info -->
<div class="col-12 col-sm-9">
<div class="mb-2" style="font-family: var(--font)">
<a href="link_here" class="d-inline-block px-2 py-1 text-uppercase font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1); text-decoration: none">
character
</a>
<span class="d-inline-block">
relationship
</span>
</div>
<p class="p-1 mb-2 bg-faded" style="border: var(--border-table)">
“thoughts”
</p>
<p>describe here. lorem ipsum or something.</p>
</div>
<!-- /info -->
</div>
<!-- /character -->
<!-- add more items above this line -->
</div>
<!-- /tab -->
</div>
<!-- /tab content -->
</div>
<!-- /tabs -->
<!-- links -->
<div class="d-flex flex-column flex-sm-row flex-wrap mb-1" style="font-family: var(--font); border-bottom: var(--border);">
<!-- link -->
<a class="flex-fill btn btn-default border-0 rounded-0 m-1 font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1);"
href="link_here"> about story
</a>
<!-- link -->
<a class="flex-fill btn btn-default border-0 rounded-0 m-1 font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1);"
href="link_here"> artfight
</a>
<!-- link -->
<a class="flex-fill btn btn-default border-0 rounded-0 m-1 font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1);"
href="link_here"> playlist
</a>
<!-- link -->
<a class="flex-fill btn btn-default border-0 rounded-0 m-1 font-weight-bold" style="color: var(--accent-text); background-color: var(--accent-1);"
href="link_here"> etc
</a>
<!-- add more above this line -->
</div>
<!-- /links -->
<!-- credit -->
<div class="p-2 d-flex justify-content-end">
<a class="fas fa-postage-stamp fa-width-auto btn btn-outline-secondary border-0 p-2 ml-1 tooltipster" style="color: var(--accent-1)" title="stamps by user" href="link_here"></a>
<a class="fas fa-image fa-width-auto btn btn-outline-secondary border-0 p-2 ml-1 tooltipster" style="color: var(--accent-1)" title="background by TheDemonicArtist" href="https://toyhou.se/24773228.f2u-minecraft-screenshots"></a>
<a class="fas fa-sun-haze fa-width-auto btn btn-outline-secondary border-0 p-2 ml-1 tooltipster" style="color: var(--accent-1)" title="code by sunxrice" href="https://toyhou.se/41141192.mildly-untidy"></a>
</div>
</div>
<!-- /card -->
</div>
</div>
<!-- end -->