<!--
Layout by Hiilumaru!
Colors:
text: #939393
white tab: #fff , #dfbde4
pink tab: #fff0f9, #fcb5cb
yellow tab: #fffcf0, #f2e09d
green tab: #f0fffb. #c9f49d
blue tab: #f0faff, #b5dffc
purple tab: #fef0ff, #f3b5fc
-->
<div class="card mx-auto" style="border-image-source:url(https://i.imgur.com/cGQVhYD.png); border-image-slice: 50;border-image-width:20px; border-image-repeat: round; min-height:300px; max-width:500px;">
<!-- Content -->
<div class="card m-3" style="border:2px dashed #dfbde4;background-image:url(BG); background-size:fit; min-height:300px; max-width:500px;">
<div class="row no-gutters">
<div class="col-sm-5">
<!-- Name -->
<div class="mx-auto my-3 w-75 text-center p-1" style="color:#939393; font-size:12pt; background: #fff; border: 2px dashed #dfbde4">
<img src="IMG"> NAME <img src="IMG">
</div>
<!-- Photo + info -->
<div class="m-3 mx-auto text-right p-1" style="color:#939393; font-size:8pt; background: #fff; border: 2px dashed #dfbde4; width:90%; max-width:200px;">
<div class="card m-1" style=" background-image:url(CHAR IMG); background-size:cover; height:0; padding-top:100%; border: 2px dashed #dfbde4"></div>species ♡ age ♡ orientation ♡ other ♡ info
</div>
<!-- music box -->
<div class="mx-3" style="background:linear-gradient(45deg, #fcb5cb, #f2e09d, #c9f49d,#b5dffc,#f3b5fc); border:2px dashed #d399dc; border-radius:25px; height:25px;">
<audio controls="" style="width:100%; height:100%; border-radius:25px; opacity:0.1;"><source src="SONG URL"></audio>
</div>
</div>
<div class="col-sm-7 mx-3 mx-sm-0">
<ul class="nav nav-tabs mt-3" style="font-size:10pt;border-bottom:none;">
<li class="nav-item">
<a class="nav-link active px-2 py-1" data-toggle="tab" href="#bio" role="tab" style="border-radius:0px; color:#939393;border:2px dashed #dfbde4; background:#ffffff;border-bottom:none;">
<i class="fal fa-home"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2 py-1" data-toggle="tab" href="#info" role="tab" style="border-radius:0px; color:#939393;border:2px dashed #fcb5cb; background:#fff0f9;border-bottom:none;">
<i class="fal fa-star"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2 py-1" data-toggle="tab" href="#design" role="tab" style="border-radius:0px; color:#939393;border:2px dashed #f2e09d; background:#fffcf0;border-bottom:none;">
<i class="fal fa-paintbrush"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2 py-1" data-toggle="tab" href="#story" role="tab" style="border-radius:0px; color:#939393;border:2px dashed #c9f49d; background:#f0fffb;border-bottom:none;">
<i class="fal fa-book"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2 py-1" data-toggle="tab" href="#friends" role="tab" style="border-radius:0px; color:#939393;border:2px dashed #b5dffc; background:#f0faff;border-bottom:none;">
<i class="fal fa-heart"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2 py-1" data-toggle="tab" href="#worth" role="tab" style="border-radius:0px; color:#939393;border:2px dashed #f3b5fc; background:#fef0ff;border-bottom:none;">
<i class="fal fa-dollar"></i>
</a>
</li>
</ul>
<div class="tab-content mr-sm-3 mb-3">
<!-- Main tab -->
<div class="tab-pane active p-2" id="bio" style="color:#dfbde4;border:2px dashed #dfbde4; background:#ffffff;">
<span style="text-decoration:underline;"><b>TITLE</b> <I>!!</I></span><br>
<span>Put some info here! It looks better if you don't bold it. This box doesn't scroll. you can insert pixels into this text like this: <img src="URL"> to decorate this section. Looks best if kept short! yippee!!!</span>
</div>
<!-- Personality -->
<div class="tab-pane p-2" id="info" style="max-height:350px; color:#939393;border:2px dashed #fcb5cb; background:#fff0f9;">
<span style="text-decoration:underline;"><b>MORE INFO</b> <I>!!</I></span><br>
Personality - <span style="font-size:8pt;">this text is smaller so more will fit ♡</span>
<div class="row no-gutters" style="font-size:8pt;">
<div class="col text-right mr-1 p-1" style="background:#fff; line-height:1;">
like <span style="color:#fcb5cb; font-size:10pt;">♡ </span><br>
like <span style="color:#fcb5cb; font-size:10pt;">♡ </span><br>
like <span style="color:#fcb5cb; font-size:10pt;">♡ </span>
</div>
<div class="col-6 text-left mr-1 p-1" style="background:#fff; line-height:1;">
<span style="color:#fcb5cb; font-size:10pt;">x</span> dislike<br>
<span style="color:#fcb5cb; font-size:10pt;">x</span> dislike<br>
<span style="color:#fcb5cb; font-size:10pt;">x</span> dislike
</div>
</div>
Favorites -<br>
<span class="badge badge-pill" style="background:#fcb5cb; color:#fff; font-weight:normal;"><i class="far fa-burger"></i> food</span>
<span class="badge badge-pill" style="background:#fcb5cb; color:#fff; font-weight:normal;"><i class="far fa-paintbrush"></i> color</span>
<span class="badge badge-pill" style="background:#fcb5cb; color:#fff; font-weight:normal;"><i class="far fa-cat"></i> animal</span>
<span class="badge badge-pill" style="background:#fcb5cb; color:#fff; font-weight:normal;"><i class="far fa-burger"></i> drink</span>
<span class="badge badge-pill" style="background:#fcb5cb; color:#fff; font-weight:normal;"><i class="far fa-camera"></i> aesthetic</span>
<span class="badge badge-pill" style="background:#fcb5cb; color:#fff; font-weight:normal;"><i class="far fa-question"></i> etc</span>
<!-- add more favorites above this line -->
</div>
<!-- design notes -->
<div class="tab-pane p-2" id="design" style="max-height:350px; color:#939393;border:2px dashed #f2e09d; background:#fffcf0;">
<span style="text-decoration:underline;"><b>DESIGN NOTES</b> <I>!!</I></span><br>
<div class="row no-gutters" style="font-size:8pt;">
<div class="col text-center mr-1 p-1" style="background:#fff; line-height:2;">
<a href="REF LINK"><i class="fal fa-image" style="color:#f2e09d; font-size:12pt;"></i></a><br>
<a href="WARDROBE LINK"><i class="fal fa-shirt" style="color:#f2e09d; font-size:12pt;"></i></a><br>
<a href="PINTEREST BOARD LINK"><i class="fal fa-camera-polaroid" style="color:#f2e09d; font-size:12pt;"></i></a><br>
<div style="line-height: 1;">
<i class="fa fa-star fa-xs" style="color:#f00;"></i>
<i class="fa fa-star fa-xs" style="color:#ff0;"></i>
<i class="fa fa-star fa-xs" style="color:#0f0;"></i>
<i class="fa fa-star fa-xs" style="color:#0ff;"></i>
<i class="fa fa-star fa-xs" style="color:#00f;"></i>
<i class="fa fa-star fa-xs" style="color:#f0f;"></i>
<i class="fa fa-star fa-xs" style="color:#f00;"></i>
<i class="fa fa-star fa-xs" style="color:#ff0;"></i></div>
</div>
<div class="col-10 text-left mr-1 p-1" style="background:#fff; line-height:1;">
<img src="https://i.imgur.com/VaWU2kR.gif" style="height:auto; width:100%;">
</div>
</div>
<div style="font-size:8pt; line-height:1;">
Notes -<br>
♡ a note <br>
♡ a note <br>
♡ a note <br>
♡ a note <br>
♡ a note <br>
</div>
</div>
<!-- lore -->
<div class="tab-pane p-2" id="story" style="max-height:350px; color:#939393;border:2px dashed #c9f49d; background:#f0fffb;">
<span style="text-decoration:underline;"><b>lore</b> <I>!!</I></span><br>
<!-- box 1 -->
<div class="row no-gutters" style="font-size:8pt;">
<div class="col text-right mr-1 p-1" style="color:#c9f49d;">
<i class="fa fa-heart fa-2x"></i>
</div>
<div class="col-10 text-left mr-1 mb-1 p-1" style="background:#fff; line-height:1.2;">
these boxes don't scroll but they do get longer! the tab also scrolls too
</div>
</div>
<!-- box 2 -->
<div class="row no-gutters" style="font-size:8pt;">
<div class="col text-right mr-1 p-1" style="color:#c9f49d;">
<i class="fa fa-tree-alt fa-2x"></i>
</div>
<div class="col-10 text-left mr-1 mb-1 p-1" style="background:#fff; line-height:1.2;">
change the icons to match the subject of the box. these look better longer!
</div>
</div>
<!-- add more boxes above this line -->
</div>
<!-- friends -->
<div class="tab-pane p-2" id="friends" style="max-height:350px; color:#939393;border:2px dashed #b5dffc; background:#f0faff;">
<span style="text-decoration:underline;"><b>friends</b> <I>!!</I></span><br>
<!-- row 1 -->
<div class="justify-content-between mb-2">
<!-- friend 1 -->
<div class="p-1 text-center" style="color:#dfbde4;border:2px dashed #dfbde4; background:#ffffff; width:30%;">
<div style="height:0; padding-top:100%; background-image:url(LINK)"></div>
<a href="FRIEND LINK" style="color:#dfbde4">Name</a>
</div>
<!-- friend 2 -->
<div class="p-1 text-center" style="color:#dfbde4;border:2px dashed #dfbde4; background:#ffffff; width:30%;">
<div style="height:0; padding-top:100%; background-image:url(LINK)"></div>
<a href="FRIEND LINK" style="color:#dfbde4">Name</a>
</div>
<!-- friend 3 -->
<div class="p-1 text-center" style="color:#dfbde4;border:2px dashed #dfbde4; background:#ffffff; width:30%;">
<div style="height:0; padding-top:100%; background-image:url(LINK)"></div>
<a href="FRIEND LINK" style="color:#dfbde4">Name</a>
</div>
</div>
<!-- row 2 -->
<div class="justify-content-between mb-2">
<!-- friend 1 -->
<div class="p-1 text-center" style="color:#dfbde4;border:2px dashed #dfbde4; background:#ffffff; width:30%;">
<div style="height:0; padding-top:100%; background-image:url(LINK)"></div>
<a href="FRIEND LINK" style="color:#dfbde4">Name</a>
</div>
<!-- friend 2 -->
<div class="p-1 text-center" style="color:#dfbde4;border:2px dashed #dfbde4; background:#ffffff; width:30%;">
<div style="height:0; padding-top:100%; background-image:url(LINK)"></div>
<a href="FRIEND LINK" style="color:#dfbde4">Name</a>
</div>
<!-- friend 3 -->
<div class="p-1 text-center" style="color:#dfbde4;border:2px dashed #dfbde4; background:#ffffff; width:30%;">
<div style="height:0; padding-top:100%; background-image:url(LINK)"></div>
<a href="FRIEND LINK" style="color:#dfbde4">Name</a>
</div>
</div>
<!-- add more rows above this line -->
</div>
<!-- Personality -->
<div class="tab-pane p-2" id="worth" style="max-height:350px; color:#939393;border:2px dashed #f3b5fc; background:#fef0ff;">
<span style="text-decoration:underline;"><b>Meta info</b> <I>!!</I></span><br>
<span style="background:#fff">Sale <i class="fa fa-cancel" style="color:#f3b5fc"></i></span>
<span style="background:#fff">Trade <i class="fa fa-check" style="color:#f3b5fc"></i></span>
<span style="background:#fff">Offer <i class="fa fa-question" style="color:#f3b5fc"></i></span>
<span style="background:#fff">Ship <i class="fa fa-cancel" style="color:#f3b5fc"></i></span>
<span style="background:#fff">fanart <i class="fa fa-heart" style="color:#f3b5fc"></i></span>
<span style="background:#fff">Friends <i class="fa fa-question" style="color:#f3b5fc"></i></span>
<br>
<div class="row no-gutters" style="font-size:8pt;">
<div class="col mr-1 p-1" >
<div style="font-weight:bold; font-size:8pt;"><s>Pinglist</s> </div>
<div class="" style="opacity:.5; height:50px;background:#fff; border:2px dashed #f3b5fc; overflow:auto; font-size:7pt;">
<span>this box is faded to show you're not taking pings. remove the s tags on the title and opacity in the box style to un-fade it!</span>
</div>
</div>
<div class="col-6 mr-1 p-1" >
<div class="text-right" style="font-weight:bold; font-size:8pt;">Worth </div>
<div class=""style="height:50px;background:#fff; border:2px dashed #f3b5fc; overflow:auto; font-size:7pt;">
<span style="color:#f3b5fc;">$</span>123
<br> - $ (thing)
<br> - $ (thing)
<br> - $ (thing)
</div>
</div>
</div>
Other -<br>
<span style="font-size:8pt;">- this can be a trait list <br>
- or note any design changes <br>
- or anything you wanna note for people interested in the design</span>
</div>
</div>
</div>
<div class="text-left ml-3"><a href="https://toyhou.se/Hiilumaru/characters/folder:2492566"><i class="fa fa-code" style="color:#dfbde4;"></i></a><a href="SONG URL"> <i class="fa fa-music" style="color:#dfbde4;"></i></a></div>
</div>
</div>
</div>
</div>
