<!--
Code by Hiilumaru!
Stitches: #5B118B
Box background: #EDDEFF
Fruit colors:
Pink - #FF83D0
Orange - #FDCA46
Yellow - #FFF96A
Green - #C4FF63
Purple - #0EA5FF
-->
<div class="card mx-auto p-1" Style="width:600px;background:url(https://images.unsplash.com/photo-1475274047050-1d0c0975c63e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1172&q=80);border:1px solid #5B118B;border-radius:20px;">
<div class="p-2" style="border:2px dashed #5B118B; 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-moon-cloud fa-xl" style="position:absolute;top:5px;left:40px;color:#FF83D0; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;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-ufo fa-xl" style="position:absolute;top:100px;left:60px;color:#FDCA46; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;z-index:9999;"></i></a></li>
</ul>
</div>
<div class="card p-1" style="height:105px;overflow:hidden;color:#5B118B;background:#EDDEFF;border:1px solid #5B118B;border-radius:20px;top:-10px;">
<div class="px-2 py-1" style="height:105px;overflow:hidden;border:2px dashed #5B118B; 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:#5B118B;text-Transform:uppercase;">Basics</span>
<div class="row text-left no-gutters">
<div class="col-6" style="color:#5B118B;text-Transform:uppercase;">
<span>Name
<br>Age
<br>Species
<br>Pronouns
</span></div>
<div class="col-6" style="color:#5B118B;">
<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:#5B118B;text-Transform:uppercase;">More</span>
<div class="row text-left no-gutters">
<div class="col-6" style="color:#5B118B;text-Transform:uppercase;">
<span>Sexuality
<br>Gender
<br>Magic
<br>Status
</span></div>
<div class="col-6" style="color:#5B118B;">
<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-star fa-xl" style="position:absolute;top:120px;left:150px;color:#FFF96A; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;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-comet fa-xl" style="position:absolute;top:240px;left:20px;color:#C4FF63; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;z-index:9999;"></i></a></li>
</ul>
</div>
<div class="card p-1" style="height:125px;color:#5B118B;background:#EDDEFF;border:1px solid #5B118B;border-radius:20px;top:-10px;">
<div class="px-2 py-1" style="height:125px;border:2px dashed #5B118B; border-radius:20px;">
<div class="tab-content">
<!-- Abilities -->
<div class="tab-pane fade active show" id="Abilities">
<div class="text-center">
<span style="color:#5B118B;text-Transform:uppercase;">Abilities</span>
<div class="row text-left no-gutters">
<div class="col-1" style="color:#5B118B;text-Transform:uppercase;">
<span><i class="fas fa-star" style="color:#FFF96A; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
<br><i class="fas fa-star" style="color:#C4FF63; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
<br><i class="fas fa-star" style="color:#FF83D0; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
<br><i class="fas fa-star" style="color:#0EA5FF; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
</span></div>
<div class="col" style="color:#5B118B;">
<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:#5B118B;text-Transform:uppercase;">Design notes</span>
<!-- Palette -->
<span>
<i class="fas fa-comet" title="#Hexcode" style="color:#0EA5FF; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
<i class="fas fa-comet" title="#Hexcode" style="color:#0EA5FF; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
<i class="fas fa-comet" title="#Hexcode" style="color:#0EA5FF; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
<i class="fas fa-comet" title="#Hexcode" style="color:#0EA5FF; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
<i class="fas fa-comet" title="#Hexcode" style="color:#0EA5FF; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i></span>
<!-- Notes -->
<div class="row text-right no-gutters">
<div class="col" style="color:#5B118B;">
<span>This box scrolls
<br>Design note
<br>Design note
<br>Design note
</span></div>
<div class="col-1" style="color:#5B118B;">
<span> <i class="fas fa-comet" style="color:#FF83D0; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
<br><i class="fas fa-comet" style="color:#FDCA46; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
<br><i class="fas fa-comet" style="color:#FFF96A; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
<br><i class="fas fa-comet" style="color:#C4FF63; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></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 #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"><i class="fas fa-cat-space" style="color:#0EA5FF; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i> Name <i class="fas fa-alien" style="color:#FF83D0; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i></div>
<div class="card p-1" style="height:220px;overflow:hidden;color:#5B118B;background:#EDDEFF;border:1px solid #5B118B;border-radius:20px;">
<!-- Image -->
<div class="px-2 py-1" style="
background:url(https://f2.toyhou.se/file/f2-toyhou-se/images/40942971_MFgU9nf3aXut283.png);
Background-size:cover;background-position:center;height:220px;overflow:hidden;border:2px dashed #5B118B; 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-planet-ringed fa-xl" style="position:absolute;top:5px;left:140px;color:#FF83D0; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;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-moon fa-xl" style="position:absolute;top:30px;left:175px;color:#FDCA46; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;z-index:9999;"></i></a></li>
</ul>
</div>
<div class="card p-1 m-1" style="height:105px;color:#5B118B;background:#EDDEFF;border:1px solid #5B118B;border-radius:20px;top:-15px;">
<div class="px-2 py-1" style="height:105px;border:2px dashed #5B118B; border-radius:20px;">
<div class="tab-content">
<!-- Abilities -->
<div class="tab-pane fade active show" id="Likes">
<div class="text-center">
<span style="color:#5B118B;text-Transform:uppercase;">Likes</span>
<div class="row text-left no-gutters">
<div class="col" style="color:#5B118B;">
<span><i class="fas fa-planet-ringed" style="color:#FFF96A; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
<br><i class="fas fa-planet-ringed" style="color:#C4FF63; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
<br><i class="fas fa-planet-ringed" style="color:#FF83D0; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
<br><i class="fas fa-planet-ringed" style="color:#0EA5FF; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
</span></div>
<div class="col-10 text-left" style="color:#5B118B;">
<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:#5B118B;text-Transform:uppercase;">Dislikes</span>
<!-- Notes -->
<div class="row text-right no-gutters">
<div class="col-10" style="color:#5B118B;">
<span>Dislike
<br>Dislike
<br>Dislike
<br>Dislike
</span></div>
<div class="col" style="color:#5B118B;">
<span> <i class="fas fa-moon" style="color:#FF83D0; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
<br><i class="fas fa-moon" style="color:#FDCA46; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
<br><i class="fas fa-moon" style="color:#FFF96A; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></i>
<br><i class="fas fa-moon" style="color:#C4FF63; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;"></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-moon-over-sun fa-xl" style="position:absolute;top:125px;left:20px;color:#C4FF63; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;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-cow fa-xl" style="position:absolute;top:230px;left:130px;color:#0EA5FF; text-shadow:1px 1px 0px #5B118B,-1px 1px 0px #5B118B,1px -1px 0px #5B118B,-1px -1px 0px #5B118B;z-index:9999;"></i></a></li>
</ul>
</div>
<div class="card p-1 ml-1" style="height:125px;color:#5B118B;background:#EDDEFF;border:1px solid #5B118B;border-radius:20px;top:-20px;">
<div class="px-1 py-1" style="height:125px;border:2px dashed #5B118B; 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:#5B118B;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:#5B118B;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:#5B118B;background:#EDDEFF;border:1px solid #5B118B;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-1468276311594-df7cb65d8df6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80); background-size:cover; background-position:center; border:2px dashed #5B118B; border-radius:20px;"></div>
<div class="col mx-1" style="Background-image:url(https://images.unsplash.com/photo-1468276311594-df7cb65d8df6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80); background-size:cover; background-position:center; border:2px dashed #5B118B; border-radius:20px;"></div>
<div class="col mx-1" style="Background-image:url(https://images.unsplash.com/photo-1468276311594-df7cb65d8df6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80); background-size:cover; background-position:center; border:2px dashed #5B118B; border-radius:20px;"></div>
<div class="col mx-1" style="Background-image:url(https://images.unsplash.com/photo-1468276311594-df7cb65d8df6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80); background-size:cover; background-position:center; border:2px dashed #5B118B; border-radius:20px;"></div>
<div class="col mx-1" style="Background-image:url(https://images.unsplash.com/photo-1468276311594-df7cb65d8df6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80); background-size:cover; background-position:center; border:2px dashed #5B118B; 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:#5B118B;"></i></a>
</div>
