Profile
<!---------------------------------------------->
<!--- --->
<!--- kye's codes: boxed in v1 --->
<!--- --->
<!--- edit however you want, but --->
<!--- DO NOT --->
<!--- remove my credit! --->
<!---------------------------------------------->
<!----------- color selectors ------------------
headers: #eebece
header box text: #ffffff
accent: #bf9aed
use find & replace on the above codes to quickly change the colors
please leave the main text colors alone so your profile can be read regardless of the viewer's toyhouse theme choice --->
<div class="container-fluid text-secondary p-0" style="min-height:240px;">
<div class="m-3 text-uppercase" style="font-size:30px;">
<span class="mr-4" style="color:#eebece;"><i class="fas fa-moon-stars"></i></span>
<span><strong>
character's name</strong></span>
</div>
<div class="row no-gutters">
<!---------- LEFT COLUMN ------------>
<div class="col-sm-4 p-0 mx-1 mb-2" id="accordionl">
<!---------- INFO SECTION ----------->
<div class="text-uppercase rounded-top" style="background:#eebece;">
<a data-toggle="collapse" data-target="#info" class="btn d-flex justify-content-between" style="color:#ffffff; font-size:16px;"><span>
info</span><i class="fas fa-paper-plane"></i>
</a>
</div>
<div id="info" class="collapse show" data-parent="#accordionl">
<div class="px-2 table-responsive" style="height:423px;">
<!---------- BASIC INFO ----------->
<div class="d-flex justify-content-between px-1 pb-1 pt-0">
<span class="text-uppercase" style="color:#bf9aed;">
species</span><span><a href="link to species sheet" class="text-secondary"><u>
info</u></a></span>
</div>
<div class="d-flex justify-content-between bg-faded p-1">
<span class="text-uppercase" style="color:#bf9aed;">
age</span><span>
info</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="text-uppercase" style="color:#bf9aed;">
gender</span><span>
info</span>
</div>
<div class="d-flex justify-content-between bg-faded p-1">
<span class="text-uppercase" style="color:#bf9aed;">
pronouns</span><span>
info</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="text-uppercase" style="color:#bf9aed;">
orientation</span><span>
info</span>
</div>
<div class="d-flex justify-content-between bg-faded p-1">
<span class="text-uppercase" style="color:#bf9aed;">
height</span><span>
info</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="text-uppercase" style="color:#bf9aed;">
build</span><span>
info</span>
</div>
<div class="d-flex justify-content-between bg-faded p-1">
<span class="text-uppercase" style="color:#bf9aed;">
job</span><span>
info</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="text-uppercase" style="color:#bf9aed;">
song</span><a href="theme song link" class="text-secondary"><u>
info</u></a></span>
</div>
<hr class="mx-5 mb-2 mt-1" style="background:#eebece;">
<!---------- TRAIT BARS ----------
change the "width: 50%;" to any number between 0-100%. the higher the number, the more the bar fills --->
<div class="d-flex justify-content-between mb-1">
<span class="text-uppercase">
oblivious</span><div class="progress mt-1 mx-2" style="height:15px; width:100%;"><div class="progress-bar"
style="width:50%; background:#bf9aed;"></div></div><span class="text-uppercase">perceptive</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="text-uppercase">
arrogant</span><div class="progress mt-1 mx-2" style="height:15px; width:100%;"><div class="progress-bar"
style="width:50%; background:#bf9aed;"></div></div><span class="text-uppercase">humble</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="text-uppercase">
cold</span><div class="progress mt-1 mx-2" style="height:15px; width:100%;"><div class="progress-bar"
style="width:50%; background:#bf9aed;"></div></div><span class="text-uppercase">affectionate</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="text-uppercase">
safe</span><div class="progress mt-1 mx-2" style="height:15px; width:100%;"><div class="progress-bar"
style="width:50%; background:#bf9aed;"></div></div><span class="text-uppercase">adventurous</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="text-uppercase">
introvert</span><div class="progress mt-1 mx-2" style="height:15px; width:100%;"><div class="progress-bar"
style="width:50%; background:#bf9aed;"></div></div><span class="text-uppercase">extrovert</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="text-uppercase">
flaky</span><div class="progress mt-1 mx-2" style="height:15px; width:100%;"><div class="progress-bar"
style="width:50%; background:#bf9aed;"></div></div><span class="text-uppercase">dependable</span>
</div>
</div>
</div><!--- closes basic info section--->
<!---------- NOTES SECTION ---------->
<div class="text-uppercase rounded-top" style="background:#eebece;">
<a data-toggle="collapse" data-target="#notes" class="btn d-flex justify-content-between" style="color:#ffffff; font-size:16px; margin-top:1px;"><span>
notes</span><i class="fas fa-note"></i>
</a>
</div>
<div id="notes" class="collapse" data-parent="#accordionl">
<div class="px-2 table-responsive" style="height:423px;">
<!----- design and resell info ----->
<div class="d-flex justify-content-between p-1">
<span class="text-uppercase" style="color:#bf9aed;">
designed by</span><span><a href="designer's url" class="text-secondary"><u>
info</u></a></span>
</div>
<div class="d-flex justify-content-between bg-faded p-1">
<span class="text-uppercase" style="color:#bf9aed;">
species creator</span><span><a href="designer's url" class="text-secondary"><u>
info</u></a></span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="text-uppercase" style="color:#bf9aed;">
purchased from</span><span><a href="previous owner's url" class="text-secondary"><u>
info</u></a></span>
</div>
<div class="d-flex justify-content-between bg-faded p-1">
<span class="text-uppercase" style="color:#bf9aed;">
value</span><span>
info</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="text-uppercase" style="color:#bf9aed;">
trade/resell</span><span>
(yes/no)</span>
</div>
<hr class="mx-5 my-2" style="background:#eebece;">
<!----- notes list ----->
<ul>
<li>put your design notes here</li>
<li>or character notes</li>
<li>write however much you like</li>
<li>the box will scroll with your text</li>
<li>note</li>
<li>note</li>
<li>note</li>
</ul>
</div>
</div><!--- closes notes section --->
</div>
<!---------- MIDDLE COLUMN ---------->
<div class="col-sm p-0 mx-1 mb-2" id="accordionm">
<!---------- FOCAL IMAGE ---------->
<div class="text-uppercase rounded-top" style="background:#eebece;">
<a data-toggle="collapse" data-target="#focal" class="btn d-flex justify-content-between" style="color:#ffffff; font-size:20px;">
</i><i class="fas fa-stars"></i><i class="fas fa-moon-stars"></i><i class="fas fa-stars"></i>
</a>
</div>
<div id="focal" class="collapse show" data-parent="#accordionm">
<div class="rounded-bottom" style="height:423px; border:0px;
background: url('https://i.imgur.com/te1Fhf7.jpg') center; background-size:cover;"></div>
</div>
<!---------- REF SHEET SECTION ---------->
<div class="text-uppercase rounded-top" style="background:#eebece;">
<a data-toggle="collapse" data-target="#refs" class=" btn d-flex justify-content-between" style="color:#ffffff; font-size:16px; margin-top:1px;"><i class="fas fa-tshirt"></i><span>
references</span><i class="fas fa-palette"></i>
</a>
</div>
<div id="refs" class="collapse" data-parent="#accordionm">
<div class="p-2 table-responsive text-center" style="height:423px;">
<!----- reference sheet ----->
<a href="link to ref sheet full view">
<img src="https://i.imgur.com/Ru3npF4.png" class="rounded" style="max-height:200px;">
</a>
<hr class="mx-5" style="background:#bf9aed;">
<!----- color palette boxes ------>
<div class="d-inline-block rounded mb-1 mr-1"
style="background-color:#727272; height:50px; width:50px;" data-toggle="tooltip"
title="color title">
</div>
<div class="d-inline-block rounded mb-1 mr-1"
style="background-color:#727272; height:50px; width:50px;" data-toggle="tooltip"
title="color title">
</div>
<div class="d-inline-block rounded mb-1 mr-1"
style="background-color:#727272; height:50px; width:50px;" data-toggle="tooltip"
title="color title">
</div>
<div class="d-inline-block rounded mb-1 mr-1"
style="background-color:#727272; height:50px; width:50px;" data-toggle="tooltip"
title="color title">
</div>
<div class="d-inline-block rounded mb-1 mr-1"
style="background-color:#727272; height:50px; width:50px;" data-toggle="tooltip"
title="color title">
</div>
<div class="d-inline-block rounded mb-1 mr-1"
style="background-color:#727272; height:50px; width:50px;" data-toggle="tooltip"
title="color title">
</div>
<div class="d-inline-block rounded mb-1 mr-1"
style="background-color:#727272; height:50px; width:50px;" data-toggle="tooltip"
title="color title">
</div>
<!----- copy and paste this code above this line for more color palette boxes -----
<div class="d-inline-block rounded mb-1 mr-1"
style="background-color:#727272; height:50px; width:50px;" data-toggle="tooltip"
title="color title">
</div>
----->
<hr class="mx-5" style="background:#bf9aed;">
<!----- alternate outfits/forms ----->
<span class="m-1 d-inline-block">
<a href="link to full view">
<img src="https://i.imgur.com/61qQZwf.png" class="rounded" style="max-height:200px;">
</a>
</span>
<span class="m-1 d-inline-block">
<a href="link to full view">
<img src="https://i.imgur.com/61qQZwf.png" class="rounded" style="max-height:200px;">
</a>
</span>
</div>
</div><!--- closes ref sheet section--->
</div>
<!---------- RIGHT COLUMN ---------->
<div class="col-sm-4 p-0 mx-1 mb-2" id="accordionr">
<!---------- STORY SECTION ---------->
<div class="text-uppercase rounded-top" style="background:#eebece;">
<a data-toggle="collapse" data-target="#story" class="btn d-flex justify-content-between" style="color:#ffffff; font-size:16px;"><i class="fas fa-books"></i><span>
story</span>
</a>
</div>
<div id="story" class="collapse show" data-parent="#accordionr">
<div class="p-2 table-responsive" style="height:423px;">
<h1 class="display-4 text-uppercase text-left" style="color:#bf9aed;">
header one</h1>
<p class="text-justify m-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non viverra nisi. Nunc nec dapibus odio. Ut faucibus ligula non lacus finibus gravida. Pellentesque laoreet vitae ligula porttitor tempor. Nulla facilisi. Integer at neque non leo sollicitudin dapibus. Cras et mi magna. Fusce facilisis maximus sem ut vehicula. Ut sed tortor at enim pretium vestibulum. Nullam fermentum tortor dapibus risus molestie, ut euismod sapien mollis. Cras mattis vitae ligula a dignissim. Mauris at nunc ante.
</p>
<p class="text-justify m-2">
Pellentesque finibus ut augue ut rutrum. Curabitur ac risus facilisis magna posuere tincidunt. Donec finibus ultrices mauris, in suscipit ex varius in. Integer scelerisque nunc id nulla feugiat accumsan. Sed sed elit nec est pharetra viverra non et massa. Nullam vulputate nulla vel ipsum efficitur, id consectetur orci molestie. Aenean vitae sagittis nibh, id fermentum ante. Nullam eros purus, tempus id diam a, ultricies sagittis lorem. Aliquam eget lacinia massa, varius elementum orci.
</p>
<hr class="mx-5 my-5" style="background-color:#eebece;"><!--- optional divider --->
<h1 class="display-4 text-uppercase text-right" style="color:#bf9aed;">
header two</h1>
<p class="text-justify m-2">
Nullam scelerisque sem neque, id luctus odio vehicula quis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum diam elit, tristique sit amet orci nec, hendrerit dictum neque. Phasellus faucibus eu ipsum a faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quam urna, faucibus egestas ante et, scelerisque euismod odio. Mauris quis augue vitae lorem semper laoreet.
</p>
<hr class="mx-5 my-5" style="background-color:#eebece;"><!--- optional divider --->
<h1 class="display-4 text-uppercase text-left" style="color:#bf9aed;">
header three</h1>
<p class="text-justify m-2">
Donec cursus tempor sagittis. Proin dolor augue, malesuada ac tortor placerat, dignissim posuere odio. Morbi orci ante, mollis vel massa at, tristique fringilla quam. Donec tincidunt metus ac dolor finibus sagittis. Morbi posuere sem a lacus luctus pulvinar. In ut arcu in massa scelerisque imperdiet sed sit amet odio. Proin mattis sagittis urna, id ullamcorper eros. Praesent tristique, augue quis feugiat volutpat, tortor ex condimentum nunc, at egestas sapien ipsum nec mauris. Vivamus pretium egestas pharetra.
</p>
<p class="text-justify m-2">
Duis non scelerisque velit, non ultrices mauris. Donec elementum fermentum risus aliquet tristique. In a sem in ipsum tempus lacinia non et quam. Suspendisse et augue nec mauris aliquam fringilla id sed nulla. Mauris eu ante a metus porttitor feugiat ac sed ipsum. Donec lobortis elit id urna dictum lacinia. Duis nisl nibh, commodo id metus ut, feugiat eleifend nunc. Vestibulum malesuada est sed justo pharetra, sed sollicitudin odio maximus. Sed a nisi id lacus pharetra finibus. Cras ullamcorper leo at sagittis porta. Nulla dapibus, justo in suscipit molestie, libero mauris pharetra eros, et iaculis arcu ipsum sit amet felis. Pellentesque mattis congue urna et congue. Curabitur commodo leo a lectus fermentum interdum.
</p>
</div>
</div><!--- closes story section --->
<!---------- RELATIONSHIPS SECTION ---------->
<div class="text-uppercase rounded-top" style="background:#eebece;">
<a data-toggle="collapse" data-target="#rel" class="btn d-flex justify-content-between" style="color:#ffffff; font-size:16px; margin-top:1px;"><i class="fas fa-users"></i><span>
relations</span>
</a>
</div>
<div id="rel" class="collapse" data-parent="#accordionr">
<div class="p-2 table-responsive" style="height:423px;">
<div class="row no-gutters">
<div class="col-4 p-1">
<a href="character link">
<img src="https://i.imgur.com/Ru3npF4.png" class="rounded" style="max-height:100px; max-width:100px;"></a>
</div>
<div class="col p-1">
<p class="d-flex justify-content-between text-uppercase mb-1" style="font-size:16px;">
<span style="color:#eebece;">
name</span><span>//</span><span style="color:#bf9aed;">
relationship</span>
</p>
<hr class="mx-5 my-1" style="background:#bf9aed;">
<p class="text-justify">
write a little bit about their relationship here. couple lines would be best.
</p>
</div>
</div>
<div class="row no-gutters">
<div class="col-4 p-1">
<a href="character link">
<img src="https://i.imgur.com/Ru3npF4.png" class="rounded" style="max-height:100px; max-width:100px;"></a>
</div>
<div class="col p-1">
<p class="d-flex justify-content-between text-uppercase mb-1" style="font-size:16px;">
<span style="color:#eebece;">
name</span><span>//</span><span style="color:#bf9aed;">
relationship</span>
</p>
<hr class="mx-5 my-1" style="background:#bf9aed;">
<p class="text-justify">
write a little bit about their relationship here. couple lines would be best.
</p>
</div>
</div>
<div class="row no-gutters">
<div class="col-4 p-1">
<a href="character link">
<img src="https://i.imgur.com/Ru3npF4.png" class="rounded" style="max-height:100px; max-width:100px;"></a>
</div>
<div class="col p-1">
<p class="d-flex justify-content-between text-uppercase mb-1" style="font-size:16px;">
<span style="color:#eebece;">
name</span><span>//</span><span style="color:#bf9aed;">
relationship</span>
</p>
<hr class="mx-5 my-1" style="background:#bf9aed;">
<p class="text-justify">
write a little bit about their relationship here. couple lines would be best.
</p>
</div>
</div>
<!--- copy this code and paste above this line for more relationship boxes ---
<div class="row no-gutters">
<div class="col-4 p-1">
<a href="character link">
<img src="character icon link" class="rounded" style="max-height:100px; max-width:100px;"></a>
</div>
<div class="col p-1">
<p class="d-flex justify-content-between text-uppercase mb-1" style="font-size:16px;">
<span style="color:#eebece;">
name</span><span>//</span><span style="color:#bf9aed;">
relationship</span>
</p>
<hr class="mx-5 my-1" style="background:#bf9aed;">
<p class="text-justify">
write a little bit about their relationship here. couple lines would be best.
</p>
</div>
</div>
--->
</div>
</div><!--- closes relations section --->
</div>
</div>
<div class="text-right small mr-2">
<a href="https://unsplash.com/photos/e3Fxq_BdCBE" style="color:#bf9aed;"data-toggle="tooltip" data-placement="left" title="focal image"><i class="fal fa-image"></i></a> |
<a href="https://toyhou.se/4120905.-04-boxed-in" style="color:#bf9aed;" data-toggle="tooltip" data-placement="left" title="code by kye"><i class="fal fa-code"></i></a></div>
</div><!--- this closes the entire outside container div --->
Recent Images
No images.