<!--
Code by Hiilumaru!
Stitches: #BD6F79
Box background: #FFF8F9
Fruit colors:
Pink - #FECCDA
Orange - #FEC8C4
Yellow - #F3E5AC
Green - #B8EAE5
Purple - #FEC0DB
-->
<div class="card mx-auto p-1" Style="width:600px;background:url(https://images.unsplash.com/photo-1645245171130-8e76f7f572c4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80);border:1px solid #BD6F79;border-radius:20px;">
<div class="p-2" style="border:2px dashed #BD6F79; border-radius:20px; font-size:11px;">
<div class="row no-gutters">
<!-- Col 1 -->
<div class="col-4 px-1">
<!-- Info box -->
<div>
<ul class="nav" style="background:none;border:none;">
<li class="nav-item"><a class="nav-link" title="Basics" data-toggle="tab" href="#Info1"><i class="fas fa-strawberry fa-xl" style="position:absolute;top:5px;left:40px;color:#FECCDA; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;z-index:9999;"></i></a></li>
<li class="nav-item"><a class="nav-link" title="More" data-toggle="tab" href="#Info2"><i class="fas fa-peach fa-xl" style="position:absolute;top:100px;left:60px;color:#FEC8C4; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;z-index:9999;"></i></a></li>
</ul>
</div>
<div class="card p-1" style="height:105px;overflow:hidden;color:#BD6F79;background:#FFF8F9;border:1px solid #BD6F79;border-radius:20px;top:-10px;">
<div class="px-2 py-1" style="height:105px;overflow:hidden;border:2px dashed #BD6F79; border-radius:20px;">
<div class="tab-content">
<!-- Info 1 -->
<div class="tab-pane fade active show" id="Info1">
<div class="text-center">
<span style="color:#BD6F79;text-Transform:uppercase;">Basics</span>
<div class="row text-left no-gutters">
<div class="col-6" style="color:#BD6F79;text-Transform:uppercase;">
<span>Name
<br>Age
<br>Species
<br>Pronouns
</span></div>
<div class="col-6" style="color:#BD6F79;">
<span>info
<br>info
<br>info
<br>info
</span></div>
</div>
</div>
</div>
<!-- Info 2 -->
<div class="tab-pane fade" id="Info2">
<div class="text-center">
<span style="color:#BD6F79;text-Transform:uppercase;">More</span>
<div class="row text-left no-gutters">
<div class="col-6" style="color:#BD6F79;text-Transform:uppercase;">
<span>Sexuality
<br>Gender
<br>Magic
<br>Status
</span></div>
<div class="col-6" style="color:#BD6F79;">
<span>info
<br>info
<br>info
<br>info
</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Details -->
<div>
<ul class="nav" style="background:none;border:none;">
<li class="nav-item"><a class="nav-link" title="Abilities" data-toggle="tab" href="#Abilities"><i class="fas fa-lemon fa-xl" style="position:absolute;top:120px;left:150px;color:#F3E5AC; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;z-index:9999;"></i></a></li>
<li class="nav-item"><a class="nav-link" title="Design notes" data-toggle="tab" href="#Design"><i class="fas fa-apple-whole fa-xl" style="position:absolute;top:240px;left:20px;color:#B8EAE5; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;z-index:9999;"></i></a></li>
</ul>
</div>
<div class="card p-1" style="height:125px;color:#BD6F79;background:#FFF8F9;border:1px solid #BD6F79;border-radius:20px;top:-10px;">
<div class="px-2 py-1" style="height:125px;border:2px dashed #BD6F79; border-radius:20px;">
<div class="tab-content">
<!-- Abilities -->
<div class="tab-pane fade active show" id="Abilities">
<div class="text-center">
<span style="color:#BD6F79;text-Transform:uppercase;">Abilities</span>
<div class="row text-left no-gutters">
<div class="col-1" style="color:#BD6F79;text-Transform:uppercase;">
<span><i class="fas fa-lemon" style="color:#F3E5AC; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
<br><i class="fas fa-lemon" style="color:#B8EAE5; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
<br><i class="fas fa-lemon" style="color:#FECCDA; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
<br><i class="fas fa-lemon" style="color:#FEC0DB; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
</span></div>
<div class="col" style="color:#BD6F79;">
<span>An ability
<br>An ability
<br>An ability
<br>An ability
</span></div>
</div>
</div>
</div>
<!-- Notes -->
<div class="tab-pane fade" id="Design">
<div class="text-center pr-1" style="overflow:auto;">
<span style="color:#BD6F79;text-Transform:uppercase;">Design notes</span>
<!-- Palette -->
<span>
<i class="fas fa-apple-whole" title="#Hexcode" style="color:#FEC0DB; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
<i class="fas fa-apple-whole" title="#Hexcode" style="color:#FEC0DB; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
<i class="fas fa-apple-whole" title="#Hexcode" style="color:#FEC0DB; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
<i class="fas fa-apple-whole" title="#Hexcode" style="color:#FEC0DB; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
<i class="fas fa-apple-whole" title="#Hexcode" style="color:#FEC0DB; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i></span>
<!-- Notes -->
<div class="row text-right no-gutters">
<div class="col" style="color:#BD6F79;">
<span>This box scrolls
<br>Design note
<br>Design note
<br>Design note
</span></div>
<div class="col-1" style="color:#BD6F79;">
<span> <i class="fas fa-apple-whole" style="color:#FECCDA; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
<br><i class="fas fa-apple-whole" style="color:#FEC8C4; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
<br><i class="fas fa-apple-whole" style="color:#F3E5AC; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
<br><i class="fas fa-apple-whole" style="color:#B8EAE5; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Col 2 -->
<div class="col-4 p-1">
<div class="text-center" style="color:#FFF; font-size:15px; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"><i class="fas fa-grapes" style="color:#FEC0DB; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i> Name <i class="fas fa-cherries" style="color:#FECCDA; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i></div>
<div class="card p-1" style="height:220px;overflow:hidden;color:#BD6F79;background:#FFF8F9;border:1px solid #BD6F79;border-radius:20px;">
<!-- Image -->
<div class="px-2 py-1" style="
background:url(https://f2.toyhou.se/file/f2-toyhou-se/images/46252880_hlNCW8br8tRHj4S.png?1646382280);
Background-size:cover;background-position:center;height:220px;overflow:hidden;border:2px dashed #BD6F79; border-radius:20px;">
</div></div>
</div>
<!-- Col 3 -->
<div class="col-4">
<!-- likes -->
<div>
<ul class="nav" style="background:none;border:none;">
<li class="nav-item"><a class="nav-link" title="Likes" data-toggle="tab" href="#Likes"><i class="fas fa-cherries fa-xl" style="position:absolute;top:5px;left:140px;color:#FECCDA; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;z-index:9999;"></i></a></li>
<li class="nav-item"><a class="nav-link" title="Dislikes" data-toggle="tab" href="#Dislikes"><i class="fas fa-citrus fa-xl" style="position:absolute;top:30px;left:175px;color:#FEC8C4; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;z-index:9999;"></i></a></li>
</ul>
</div>
<div class="card p-1 m-1" style="height:105px;color:#BD6F79;background:#FFF8F9;border:1px solid #BD6F79;border-radius:20px;top:-15px;">
<div class="px-2 py-1" style="height:105px;border:2px dashed #BD6F79; border-radius:20px;">
<div class="tab-content">
<!-- Abilities -->
<div class="tab-pane fade active show" id="Likes">
<div class="text-center">
<span style="color:#BD6F79;text-Transform:uppercase;">Likes</span>
<div class="row text-left no-gutters">
<div class="col" style="color:#BD6F79;">
<span><i class="fas fa-cherries" style="color:#F3E5AC; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
<br><i class="fas fa-cherries" style="color:#B8EAE5; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
<br><i class="fas fa-cherries" style="color:#FECCDA; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
<br><i class="fas fa-cherries" style="color:#FEC0DB; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
</span></div>
<div class="col-10 text-left" style="color:#BD6F79;">
<span>Like
<br>Like
<br>Like
<br>Like
</span></div>
</div>
</div>
</div>
<!-- Notes -->
<div class="tab-pane fade" id="Dislikes">
<div class="text-center pr-1" style="overflow:auto;">
<span style="color:#BD6F79;text-Transform:uppercase;">Dislikes</span>
<!-- Notes -->
<div class="row text-right no-gutters">
<div class="col-10" style="color:#BD6F79;">
<span>Dislike
<br>Dislike
<br>Dislike
<br>Dislike
</span></div>
<div class="col" style="color:#BD6F79;">
<span> <i class="fas fa-citrus" style="color:#FECCDA; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
<br><i class="fas fa-citrus" style="color:#FEC8C4; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
<br><i class="fas fa-citrus" style="color:#F3E5AC; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
<br><i class="fas fa-citrus" style="color:#B8EAE5; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;"></i>
</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bio -->
<div>
<ul class="nav" style="background:none;border:none;">
<li class="nav-item"><a class="nav-link" title="Personality" data-toggle="tab" href="#Personality"><i class="fas fa-leaf fa-xl" style="position:absolute;top:125px;left:20px;color:#B8EAE5; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;z-index:9999;"></i></a></li>
<li class="nav-item"><a class="nav-link" title="Backstory" data-toggle="tab" href="#Backstory"><i class="fas fa-blueberries fa-xl" style="position:absolute;top:230px;left:130px;color:#FEC0DB; text-shadow:1px 1px 0px #BD6F79,-1px 1px 0px #BD6F79,1px -1px 0px #BD6F79,-1px -1px 0px #BD6F79;z-index:9999;"></i></a></li>
</ul>
</div>
<div class="card p-1 ml-1" style="height:125px;color:#BD6F79;background:#FFF8F9;border:1px solid #BD6F79;border-radius:20px;top:-20px;">
<div class="px-1 py-1" style="height:125px;border:2px dashed #BD6F79; border-radius:20px;overflow:auto;">
<div class="tab-content">
<!-- Personality -->
<div class="tab-pane fade active show" id="Personality">
<div class="text-center">
<span style="color:#BD6F79;text-Transform:uppercase;">Personality</span>
<div class="text-left" style="word-break:break-all;">
Lorem ipsum or whatever! This box has word break on, but it also scrolls! it looks better if you keep it short though
</div>
</div>
</div>
<!-- Backstory -->
<div class="tab-pane fade" id="Backstory" style="">
<div class="text-center p-0" style="word-break:break-all;">
<span style="color:#BD6F79;text-Transform:uppercase;">Past</span>
<div class="text-left">
Backstory! this box scrolls. Also has word break on but tbh it looks kinda funny sometimes so you can just delete "word-break:break-all;" and turn that off
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Moodboard -->
<div class="card p-1 m-0" style="height:105px;color:#BD6F79;background:#FFF8F9;border:1px solid #BD6F79;border-radius:20px; top:-5px;">
<div class="row m-1 h-100">
<div class="col mx-1" style="Background-image:url(https://images.unsplash.com/photo-1523192703014-26cdc03ab82a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80); background-size:cover; background-position:center; border:2px dashed #BD6F79; border-radius:20px;"></div>
<div class="col mx-1" style="Background-image:url(https://images.unsplash.com/photo-1523192703014-26cdc03ab82a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80); background-size:cover; background-position:center; border:2px dashed #BD6F79; border-radius:20px;"></div>
<div class="col mx-1" style="Background-image:url(https://images.unsplash.com/photo-1523192703014-26cdc03ab82a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80); background-size:cover; background-position:center; border:2px dashed #BD6F79; border-radius:20px;"></div>
<div class="col mx-1" style="Background-image:url(https://images.unsplash.com/photo-1523192703014-26cdc03ab82a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80); background-size:cover; background-position:center; border:2px dashed #BD6F79; border-radius:20px;"></div>
<div class="col mx-1" style="Background-image:url(https://images.unsplash.com/photo-1523192703014-26cdc03ab82a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80); background-size:cover; background-position:center; border:2px dashed #BD6F79; border-radius:20px;"></div>
</div>
</div>
</div></div>
<div class="mx-auto text-center">
<a href="https://toyhou.se/Hiilumaru/characters/folder:2492566"><i class="fas fa-code fa-xs" style="color:#BD6F79;"></i></a>
</div>
