<!--
Code by Hiilumaru!
Color 1: #7b0aa4
Color 2: #ff61c0
Color 3: #fff
-->
<div style="position:absolute; top:0; bottom:0px; left:0px; background-image:url(BACKGROUND URL);background-size:cover; width:100%; height:100%; z-index:-999;"></div>
<div class="mx-auto" style="Border:3px solid #7b0aa4; Border-radius:50px; max-width:1200px;font-family: ms gothic; color:#7b0aa4;">
<div class="p-4 text-right" style="border-bottom:1px solid #7b0aa4; border-radius: 45px 45px 0px 0px; margin-bottom:3%; background-color:#fff; Background-image:url(URL HERE) font-weight:bold; overflow:hidden;">
<div style="z-index:999;margin-right:50px;"><h1><span style="background: #ff61c0">♡ Title, quote or whatever! ♡</span></h1></div>
<i class="fa fa-flower fa-6x" style="line-height:0px; margin-top:-80px; margin-right:-50px; transform:rotate(30deg)"></i>
<i class="fa fa-flower fa-5x float-left" style="line-height:0px; margin-top:30px; margin-left:-30px; transform:rotate(-10deg)"></i>
</div>
<div class="row no-gutters" style="margin-left:4%; margin-right:4%;">
<div class="col-12 col-sm-6 col-md-8 order-2 order-sm-1 mr-sm-4 p-2" style="border:2px solid #7b0aa4; background:#fff; border-radius:25px;">
<div>
<div><ul class="nav justify-content-end" style="position:absolute; right:20px; top:0; font-size:12pt;">
<li class="nav-item m-2" style="height:14px; width:14px;"><a class="nav-link" data-toggle="tab" href="#front"><i class="fal fa-arrow-left" style="color:#7b0aa4;"></i></a></li>
<li class="nav-item m-2" style="height:14px; width:14px;"><a class="nav-link" data-toggle="tab" href="#personality"><i class="fal fa-cloud-question" style="color:#7b0aa4"></i></a></li>
<li class="nav-item m-2" style="height:14px; width:14px;"><a class="nav-link" data-toggle="tab" href="#body"><i class="fal fa-heart" style="color:#7b0aa4"></i></a></li>
<li class="nav-item m-2" style="height:14px; width:14px;"><a class="nav-link" data-toggle="tab" href="#design"><i class="fal fa-camera-polaroid" style="color:#7b0aa4"></i></a></li>
</ul>
</div>
<div class="tab-content m-2" style="font-size:10pt; height:300px; overflow:auto; scrollbar-width:none;">
<div class="tab-pane fade active show" id="front">
<div class=" col-6 p-2" style="margin-bottom:3%; background:#fff; font-weight:bold;">
<h4><span style="background: #ff61c0">♡ Another title</span></h4>
</div>
<div class="float-right ml-2 mb-2" style="border:1px solid #ff61c0; width:20%; height:auto;">
<img src="IMG URL">
</div>
<span style="color:#ff61c0">♡</span>
<span class="badge badge-pill" style="background:#ff61c0; font-weight:normal;">trait</span>
<span class="badge badge-pill" style="background:#ff61c0; font-weight:normal;">quality</span>
<span class="badge badge-pill" style="background:#ff61c0; font-weight:normal;">quirk</span>
<span class="badge badge-pill" style="background:#ff61c0; font-weight:normal;">or whatever</span>
<span style="color:#ff61c0">♡</span> <br>
Write about Your character here! This box is meant for lots of info- it looks kinda small here, because I'm terrible at coming up with filler text, but it scrolls when it gets longer than the max size. The image width is set to 25% but you can specify a height if the text is shorter than the default height! yippee!! text is hard!
<div style="border-bottom: 2px dashed #ff61c0; width:100%; margin-top:1%;"></div>
<div class="row no-gutters">
<div class="col-12 col-sm-6 display-inline">
<div class="float-right mx-2 d-none d-sm-block" style="border-left:2px dashed #ff61c0; height:100%;"></div>
<div class="float-left">
♡ Like <br>
♡ Like <br>
♡ Like <br>
♡ Like <br>
♡ Like <br>
</div>
<div class="float-right">
Dislike ⨯ <br>
Dislike ⨯ <br>
Dislike ⨯ <br>
Dislike ⨯ <br>
Dislike ⨯ <br>
</div>
</div>
<div class="col-12 col-sm-6 display-inline">
<div class="text-right mt-2" style=" margin-bottom:3%;">
<span style="background: #ff61c0">subtitle</span>
</div>
Hangs out at malls all day forever, makes friendship bracelets for everyone they know. Smells like lip smacker and sunscreen
</div>
</div>
</div>
<div class="tab-pane fade" id="personality">
<div class=" col-6 p-2" style="margin-bottom:3%; background:#fff; font-weight:bold;">
<h4><span style="background: #ff61c0">♡ Thoughts</span></h4>
</div>
<div class="float-right p-2" style="font-size:8pt; border:1px solid #ff61c0; width:40%;">
<div class="text-center" style="font-weight:bold;">
Favorites
</div>
<span style="background:#ff61c0;">Color:</span> Info <br>
<span style="background:#ff61c0;">Food:</span> Info <br>
<span style="background:#ff61c0;">Drink:</span> Info <br>
<span style="background:#ff61c0;">Color:</span> Info <br>
<span style="background:#ff61c0;">Season:</span> Info <br>
<span style="background:#ff61c0;">Music genre:</span> Info <br>
<span style="background:#ff61c0;">Scary movie:</span> Info <br>
<span style="background:#ff61c0;">Copy these lines:</span> to add more info <br>
</div>
<span class="badge badge-pill" style="background:#7b0aa4; color:#ff61c0; font-weight:normal;">+ pos trait</span>
<span class="badge badge-pill" style="background:#7b0aa4; color:#ff61c0; font-weight:normal;">+ pos trait</span>
<span class="badge badge-pill" style="background:#7b0aa4; color:#ff61c0; font-weight:normal;">+ pos trait</span>
<span class="badge badge-pill" style="background:#ff61c0; font-weight:normal;">- neg trait</span>
<span class="badge badge-pill" style="background:#ff61c0; font-weight:normal;">- neg trait</span>
<span class="badge badge-pill" style="background:#ff61c0; font-weight:normal;">- neg trait</span>
<br>This is where the stuff in their head goes! yaaay! This section's made for deeper interests, quirks, behaviors and disorders. The box over there floats, so this will wrap around if you take lines out
<div style="border-bottom: 1px dashed #ff61c0; width:50%; margin-top:1%;"></div>
<span style="background:#7b0aa4; color:#ff61c0">Hobbies:</span><br>
- hobby<br>
- hobby<br>
- hobby<br>
- hobby
<div class="row no-gutters">
<div class="col-12 col-sm-6">
<div class="m-2 p-1" style="background:#ff61c0; border:1px solid #7b0aa4;">
<div class="text-center"><span style="color:#fff">☆</span> Quirks <span style="color:#fff">☆</span></div>
- little behavioral things <br>
- habits <br>
- etc<br>
- etc<br>
- etc<br>
- etc
</div>
</div>
<div class="col-12 col-sm-6" style="font-size:8pt;">
<div class="float-left"> Optimist</div>
<div class="float-right"> Pessimist</div>
<br>
<div class="mx-auto mt-1 mb-2" style="width:90%;background-color:#ff61c0; height:5px;">
<div class="progress-bar d-flex" style="
width:50%;
background-color:#ff61c0; height:5px">
<hr class="w-100 my-auto" style="border:none;">
<div class="col-auto p-0" style="width:8px;height:0px;background-color:black; color:#7b0aa4; margin-top:-5px;">☆</div>
</div>
</div>
<div class="float-left"> Stable</div>
<div class="float-right"> Unstable</div>
<br>
<div class="mx-auto mt-1 mb-2" style="width:90%;background-color:#ff61c0; height:5px;">
<div class="progress-bar d-flex" style="
width:50%;
background-color:#ff61c0; height:5px">
<hr class="w-100 my-auto" style="border:none;">
<div class="col-auto p-0" style="width:8px;height:0px;background-color:black; color:#7b0aa4; margin-top:-5px;">☆</div>
</div>
</div>
<div class="float-left"> Hyperactive</div>
<div class="float-right"> Mellow</div>
<br>
<div class="mx-auto mt-1 mb-2" style="width:90%;background-color:#ff61c0; height:5px;">
<div class="progress-bar d-flex" style="
width:50%;
background-color:#ff61c0; height:5px">
<hr class="w-100 my-auto" style="border:none;">
<div class="col-auto p-0" style="width:8px;height:0px;background-color:black; color:#7b0aa4; margin-top:-5px;">☆</div>
</div>
</div>
<div class="float-left"> Patient</div>
<div class="float-right"> Temperamental</div>
<br>
<div class="mx-auto mt-1 mb-2" style="width:90%;background-color:#ff61c0; height:5px;">
<div class="progress-bar d-flex" style="
width:50%;
background-color:#ff61c0; height:5px">
<hr class="w-100 my-auto" style="border:none;">
<div class="col-auto p-0" style="width:8px;height:0px;background-color:black; color:#7b0aa4; margin-top:-5px;">☆</div>
</div>
</div>
<div class="float-left"> Truthful</div>
<div class="float-right"> Deceitful</div>
<br>
<div class="mx-auto mt-1 mb-2" style="width:90%;background-color:#ff61c0; height:5px;">
<div class="progress-bar d-flex" style="
width:50%;
background-color:#ff61c0; height:5px">
<hr class="w-100 my-auto" style="border:none;">
<div class="col-auto p-0" style="width:8px;height:0px;background-color:black; color:#7b0aa4; margin-top:-5px;">☆</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="body">
<div class=" col-6 p-2" style="margin-bottom:3%; background:#fff; font-weight:bold;">
<h4><span style="background: #ff61c0">♡ Health</span></h4>
</div>
<div class="row no-gutters mb-3">
<div class="col">
Height: Info <br>
Blood type: Info <br>
D.O.B: Info <br>
Eyesight: Info <br>
Allergies: Info <br>
Physical issues: Info <br>
</div>
<div class="col">
Weight: Info<br>
Build: Info <br>
Activity level: Info <br>
Hearing: Info <br>
Blood type: Info <br>
Disorders: Info <br>
</div>
</div>
<div class="float-right p-1" style="border:1px solid #ff61c0; font-size:8pt;">
<span style="font-weight:bold;font-size:10pt;">
Attributes
</span>
<br>Strength <br>
<span style="color:#7b0aa4">☆</span>
<span style="color:#ff61c0">☆</span>
<span style="color:#ff61c0">☆</span>
<span style="color:#ff61c0">☆</span>
<span style="color:#ff61c0">☆</span>
<br>Stamina <br>
<span style="color:#7b0aa4">☆</span>
<span style="color:#ff61c0">☆</span>
<span style="color:#ff61c0">☆</span>
<span style="color:#ff61c0">☆</span>
<span style="color:#ff61c0">☆</span>
<br>Resilience <br>
<span style="color:#7b0aa4">☆</span>
<span style="color:#ff61c0">☆</span>
<span style="color:#ff61c0">☆</span>
<span style="color:#ff61c0">☆</span>
<span style="color:#ff61c0">☆</span>
<br>Agility <br>
<span style="color:#7b0aa4">☆</span>
<span style="color:#ff61c0">☆</span>
<span style="color:#ff61c0">☆</span>
<span style="color:#ff61c0">☆</span>
<span style="color:#ff61c0">☆</span>
</div>
<div class="text-center">
<span style="background: #ff61c0">Abilities</span>
</div>
<span style="Background:#ff61c0">Ability -</span> Info <br>
<span style="Background:#ff61c0">Ability -</span> Info info <br>
<span style="Background:#ff61c0">Ability -</span> don't be afraid to make these real long<br>
<span style="Background:#ff61c0">Ability -</span> It's what they're for!
</div>
<div class="tab-pane fade" id="design">
<div class=" col-6 p-2" style="margin-bottom:3%; background:#fff; font-weight:bold;">
<h4><span style="background: #ff61c0">♡ Design</span></h4>
</div>
<div class="float-left mr-2 mb-2" style="width:40%; border:1px solid #ff61c0; background-image:url(REF IMG); padding-bottom:40%; background-position:center; background-size:cover">
<a href="REF URL" style="color:#7b0aa4; text-shadow: 1px 1px 0px #fff, 1px -1px 0px #fff, -1px 1px 0px #fff, -1px -1px 0px #fff;"><i class="fa fa-image"></i></a>
</div>
<span style="background:#7b0aa4; color:#ff61c0">Required traits:</span><br>
- trait<br>
- trait<br>
- trait<br>
- trait
<br><span style="background:#ff61c0">Optional traits:</span><br>
- trait<br>
- trait<br>
- trait<br>
- trait<br>
<br>
<a href="REF LINK"><span class="badge badge-pill" style="background:#ff61c0; font-weight:normal;">Ref →</span></a>
<a href="ALT LINK"><span class="badge badge-pill" style="background:#ff61c0; font-weight:normal;">Alt form →</span></a>
<a href="SPECIES LINK"><span class="badge badge-pill" style="background:#ff61c0; font-weight:normal;">Species info →</span></a>
<a href="PINTEREST LINK"><span class="badge badge-pill" style="background:#ff61c0; font-weight:normal;">Pinterest board →</span></a>
<div class="float-right mt-3 p-2" style="width:40%;background:#ff61c0; border:1px solid #7b0aa4;">
<b>Designer:</b> <a href="" style="color:#fff;">user</a><br>
<b>Original price:</b> Info<br>
<b>Value:</b> Info<br>
<b>Pinglist:</b> Info
</div>
<div class="float-left m-3 p-2" style="background:#ff61c0; border:1px solid #7b0aa4;width:40%;">
<div class="float-left p-1" style="width:48%; border:1px solid #7b0aa4">
<div class="text-center" style=" font-weight:bold; text-shadow: 2px -2px 0px #fff">
Yes
</div>
<span class="badge badge-pill" style="background:#7b0aa4; font-weight:normal;">Trade</span>
<span class="badge badge-pill" style="background:#7b0aa4; font-weight:normal;">Offer</span>
<span class="badge badge-pill" style="background:#7b0aa4; font-weight:normal;">Fanart</span>
<span class="badge badge-pill" style="background:#7b0aa4; font-weight:normal;">Friends</span>
</div>
<div class="float-right p-1" style="width:48%; border:1px solid #fff">
<div class="text-center" style="color:#fff; font-weight:bold; text-shadow: 2px -2px 0px #7b0aa4">
No
</div>
<span class="badge badge-pill" style="background:#7b0aa4; font-weight:normal;">Sale</span>
<span class="badge badge-pill" style="background:#7b0aa4; font-weight:normal;">NSFW</span>
<span class="badge badge-pill" style="background:#7b0aa4; font-weight:normal;">Ships</span>
<span class="badge badge-pill" style="background:#7b0aa4; font-weight:normal;">Pings</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm col-md order-1 order-sm-2 mx-auto">
<div class="p-2" style="border:2px solid #7b0aa4; background:#fff; height:200px;">
<h4><span style="background: #ff61c0">About me</span></h4><p>
<b>Name:</b> Info<br>
<b>Age:</b> Info<br>
<b>Species:</b> Info<br>
<b>Gender:</b> Info<br>
<b>Pronouns:</b> Info<br>
<b>Orientation:</b> Info<br>
<b>Status:</b> Info<br>
</div>
<div class="justify-content-around">
<div class="my-3 display-inline" style="background: #ff61c0; border:1px solid #7b0aa4; width:50%; max-width:250px;height:40px; overflow:hidden;">
<audio controls="" style="mix-blend-mode: darken;width:100%;height:40px;">
<source src="MP3LINK">
</audio>
</div>
<div class="display-inline text-center my-3 p-1" style="font-size:8pt;background:#ff61c0; border:1px solid #7b0aa4;">
<span style="border-bottom:1px dotted #7b0aa4; padding-bottom:1px;">Song</span> <br>
Artist
</div>
</div>
</div>
</div>
<div class="row no-gutters pt-3" style="margin-lft:0px;margin-right:4%; margin-bottom:4%;">
<div class="col-1" style="padding-left:4%;">
<div><ul class="nav flex-column" style="margin-right:-10px;font-size:10pt;">
<li class="nav-item" style="background:#ff61c0; width:30px; border:1px solid #7b0aa4;"><a class="nav-link" data-toggle="tab" href="#mood" style="margin-left:-7px;"><i class="fal fa-camera-polaroid" style="color:#7b0aa4;"></i></a></li>
<li class="nav-item" style="background:#ff61c0; width:30px; border:1px solid #7b0aa4;"><a class="nav-link" data-toggle="tab" href="#story" style="margin-left:-5px;"><i class="fal fa-book" style="color:#7b0aa4"></i></a></li>
</ul>
</div>
<div style="position:absolute; bottom:0px;"><a href="https://toyhou.se/Hiilumaru/characters/folder:2492566"><i class="fa fa-code" style="color:#7b0aa4"></i></a></div>
</div>
<div class="col-11 col-sm-6 col-md-8" style="">
<div style="border:1px solid #7b0aa4; background:#fff; margin-left:0px">
<div class="tab-content m-2" style="font-size:10pt; height:300px;overflow:auto; scrollbar-width:none;">
<div class="tab-pane fade active show" id="mood">
<div class="row no-gutters">
<div class="col m-1 my-1">
<div class="mb-1" style="height:150px; overflow:hidden;
background-image:url(MOOD 1);
background-size:cover;background-position:center;"></div>
<div style="height:150px; overflow:hidden;
background-image:url(MOOD 4);
background-size:cover;background-position:center;"></div>
</div>
<div class="col d-none d-md-block my-1 mr-1">
<div class="mb-1" style="height:150px; overflow:hidden;
background-image:url(MOOD 2);
background-size:cover;background-position:center;"></div>
<div style="height:150px; overflow:hidden;
background-image:url(MOOD 5);
background-size:cover;background-position:center;"></div>
</div>
<div class="col mr-1 my-1">
<div class="mb-1" style="height:150px; overflow:hidden;
background-image:url(MOOD 3);
background-size:cover;background-position:center;"></div>
<div style="height:150px; overflow:hidden;
background-image:url(MOOD 6);
background-size:cover;background-position:center;"></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="story">
<span style="font-weight:bold; text-shadow: 2px -2px 0px #ff61c0"><b> Background </b></span>
<div style="border-bottom: 1px dashed #ff61c0"></div>
<p class="mb-0" style="text-indent: 20px" align="justify"> Each block of text will be indented if you copy the p tag around this paragraph. This scrolls, so you can write as much as you like! </p>
<span style=" text-shadow: 2px -2px 0px #ff61c0"> Background </span>
<div style="border-bottom: 1px dashed #ff61c0; width:100px;"></div>
<p class="mb-0" style="text-indent: 20px" align="justify"> ^ there's a small header and divider for you, in case you want to have separate sections. You can also copy the ones at the top of this page, for bigger headers. Here's some <span style="background:#ff61c0">highlighted text</span>, some <b>bold text</b> and some <i>italic text.</i> Italics look kinda weird in this font, so watch out! </p>
</div>
</div>
</div>
</div>
</div>
<div class="col d-none d-sm-block" style="height:0;">
<img src="PAGEDOLL URL" style="max-width:250px;position:absolute; right:0px;bottom:0px;">
</div>
</div>