<!--THIS IS THE CUSTOM COLORS VERSION. The main text/element color is customizable; replace every instance of '#009788' with your desired hex value, using the method described below.-->
<!--
TO CHANGE THE HEADER OVERLAY COLORS:
Use a program such as Notepad++ that has a find and replace function, or use ctrl/cmd+F in your browser to find each instance in the code and replace it manually.
1) To change the left side, replace '33,150,243' (without quotes) with your desired RGB value. KEEP THE COMMAS and DON'T add anything else, including spaces, or it will break.
2) To change the right side, replace '139,194,74' using the same rules as above.
3) You can change the center color but that would require you to fiddle with them manually since these are different. The profile also looks best against a darker center, but any darker than this and the text will become unreadable. Change at your own risk.
Note that changing alpha values will also break the profile.
-->
<!--
TO CHANGE THE HEADER BACKGROUNDS:
Similarly to the color change method, find and replace all instances of 'https://imgur.com/jKzIpvg.png' with your desired image link.
Darker grayscale backgrounds work best. Be sure to change the credit button at the bottom.
If you don't have a background in mind, here's a starter pack I made: https://imgur.com/a/JoV6GZO
-->
<!--
TO CHANGE THE HEADER QUOTES:
On the div containing the h1 elements, there's a col-md-8 class. Adjust this number to change the spacing of the quote. 8 is your maximum, if a quote doesn't fit here it's not going to work. Don't adjust the col-12, this is for mobile.
Don't forget to add the song to the credit button at the bottom!
-->
<!--first header-->
<div class="card border-0 col-12 col-md-10 mx-auto my-4" style="background-image: url(https://imgur.com/jKzIpvg.png);background-size: cover; background-attachment: fixed; width: auto; position: relative;filter: drop-shadow(8px 8px 10px black);">
<div class="row rounded justify-content-between" style="background:linear-gradient(to right, rgba(33,150,243,0.7) 20%, rgba(10,10,10,.4) , rgba(139,194,74,0.7) 80%);mix-blend-mode:hard-light">
<div class="col-2 h-100 align-self-center border-0 text-center d-none d-md-block"><i class="fad fa-chevron-double-left fa-6x" style="color:#FFF;mix-blend-mode:soft-light"></i></div>
<div class="col-12 col-md-8 py-4" style="mix-blend-mode:soft-light">
<h1 class="display-3 text-uppercase" style="color:#FFF"><span class="float-left">Can't turn down, I refuse</span><br> <span class="float-right">to hold back anymore </span></h1>
</div>
<div class="col-2 h-100 align-self-center border-0 text-center d-none d-md-block"><i class="fad fa-chevron-double-right fa-6x" style="color:#FFF;mix-blend-mode:soft-light"></i></div>
</div>
</div>
<!--main-->
<div class="justify-content-center">
<!--image-->
<div class="row justify-content-center col-12 col-md-11">
<div class="col-10 col-md-4 pb-4 pb-md-0">
<div class="card border-0" style="position:relative;height:100%">
<div class="container" style="background-image:url(https://imgur.com/jKzIpvg.png);background-size:cover;background-attachment:fixed;filter:drop-shadow(8px 8px 10px black);height: 100% !important;width: 100%;padding-top: 100%;position: relative;"><!--background-->
<div class="row p-0 m-0" style="background:linear-gradient(to right,rgba(33,150,243,0.7) 55%,rgba(10,10,10,0.4));mix-blend-mode:hard-light;width: 100%;padding-bottom: 100% !important;position: absolute;top: 0;left: 0;"><!--overlay-->
</div>
</div>
<img class="border-0 p-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/29004712_fXnZiV5nNd4feJR.png" style="position:absolute; opacity:1; object-fit:cover; top: 0; left:0; width: 100%; height: 100%;"><!--visible image-->
</div>
</div>
<!--main data box-->
<div class="col-12 col-md-6">
<div class="card card-outline-danger bg-faded text-muted p-3 h-100" style="border-color:#009788">
<div class="card card-outline-danger bg-dark text-danger p-3 mb-2" style="border-color:#009788">
<h1 class="display-3 card-title text-center text-uppercase" style="color:#009788"><i class="fad fa-chevron-double-left"></i> Name <i class="fad fa-chevron-double-right"></i></h1><!--keep the spaces around the name-->
</div>
<!--Change both quotes, they are for different screen sizes-->
<h3 class="text-center lead d-none d-md-block" style="font-size:1.4rem;min-width:530px;color:#009788"><i class="fad fa-quote-left"></i> I like trains <i class="fad fa-quote-right"></i></h3>
<h3 class="text-center lead d-block d-md-none" style="font-size:1.4rem;color:#009788"><i class="fad fa-quote-left"></i> I like trains <i class="fad fa-quote-right"></i></h3>
<!--horizontal rule-->
<div class="border-0 px-3" style="background-image: url(https://imgur.com/jKzIpvg.png);background-size: cover; background-attachment: fixed; width: auto; position: relative;filter: drop-shadow(8px 8px 10px black);">
<div class="row d-none d-md-block" style="background:linear-gradient(to right, rgba(33,150,243,0.1) 10%, rgba(10,10,10,.4) , rgba(139,194,74,0.7) 80%);mix-blend-mode:hard-light"><div style="height:10px;"></div></div><!--big screen-->
<div class="row d-block d-md-none" style="background:linear-gradient(to right, rgba(33,150,243,0.7) 20%, rgba(10,10,10,.4) , rgba(139,194,74,0.7) 80%);mix-blend-mode:hard-light"><div style="height:10px;"></div></div><!--little screen-->
</div>
<!--info-->
<div class="card bg-transparent border-0 col-11 mx-auto" style="color:#009788">
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent justify-content-between py-2"><span class="lead text-uppercase">Namesake</span><span>Name reason</span></li>
<li class="list-group-item bg-transparent justify-content-between py-2"><span class="lead text-uppercase">Species</span><span>or Ethnicity</span></li>
<li class="list-group-item bg-transparent justify-content-between py-2"><span class="lead text-uppercase">Gender</span><span>E</span></li>
<li class="list-group-item bg-transparent justify-content-between py-2"><span class="lead text-uppercase">MBTI</span><span>or other form of personality type</span></li>
<li class="list-group-item bg-transparent justify-content-between py-2"><span class="lead text-uppercase">Alignment</span><span>or story role</span></li>
</ul>
</div>
</div>
</div>
<div class="w-100 d-block d-md-none py-2"></div>
<!--navigation-->
<div class="card card-outline-danger bg-faded text-danger p-3 col-6 col-md-1" style="border-color:#009788">
<div class="my-auto text-center" style="color:#009788">
<i class="fad fa-chevron-double-up fa-2x text-center my-2"></i>
<ul class="nav nav-pills flex-column">
<li style="border-color:#009788" class="nav-item btn btn-outline-danger bg-dark mx-1 tooltipster" data-toggle="tooltip" data-placement="right" title="Basics">
<a class="nav-link p-1" href="#ONE" data-toggle="tab"><i class="fa fa-horizontal-rule" style="color:#009788"></i></a>
</li>
<li style="border-color:#009788" class="nav-item btn btn-outline-danger bg-dark mx-1 tooltipster" data-toggle="tooltip" data-placement="right" title="Personality">
<a class="nav-link p-1" href="#TWO" data-toggle="tab"><i class="fa fa-horizontal-rule" style="color:#009788"></i></a>
</li>
<li style="border-color:#009788" class="nav-item btn btn-outline-danger bg-dark mx-1 tooltipster" data-toggle="tooltip" data-placement="right" title="Background">
<a class="nav-link p-1" href="#THREE" data-toggle="tab"><i class="fa fa-horizontal-rule" style="color:#009788"></i></a>
</li>
<li style="border-color:#009788" class="nav-item btn btn-outline-danger bg-dark mx-1 tooltipster" data-toggle="tooltip" data-placement="right" title="Appearance">
<a class="nav-link p-1" href="#FOUR" data-toggle="tab"><i class="fa fa-horizontal-rule" style="color:#009788"></i></a>
</li>
<li style="border-color:#009788" class="nav-item btn btn-outline-danger bg-dark mx-1 tooltipster" data-toggle="tooltip" data-placement="right" title="Meta">
<a class="nav-link p-1" href="#FIVE" data-toggle="tab"><i class="fa fa-horizontal-rule" style="color:#009788"></i></a>
</li>
</ul>
<i class="fad fa-chevron-double-down fa-2x text-center my-2"></i>
</div>
</div>
</div>
</div>
<div class="w-100 d-block d-md-none py-2"></div>
<!--middle header box-->
<div class="card border-0 col-12 col-md-10 mx-auto my-4" style="background-image: url(https://imgur.com/jKzIpvg.png);background-size: cover; background-attachment: fixed; width: auto; position: relative;filter: drop-shadow(8px 8px 10px black);">
<div class="row rounded justify-content-between" style="background:linear-gradient(to right, rgba(33,150,243,0.7) 20%, rgba(10,10,10,.4) , rgba(139,194,74,0.7) 80%);mix-blend-mode:hard-light">
<div class="col-2 h-100 align-self-center border-0 text-center d-none d-md-block"><i class="fad fa-minus fa-6x" style="color:#FFF;mix-blend-mode:soft-light"></i></div>
<div class="col-12 col-md-8 py-4" style="mix-blend-mode:soft-light">
<h1 class="display-3 text-uppercase" style="color:#FFF"><span class="float-left">When the night ends it's not over</span><br> <span class="float-right">we fight through to get closer</span></h1>
</div>
<div class="col-2 h-100 align-self-center border-0 text-center d-none d-md-block"><i class="fad fa-minus fa-6x" style="color:#FFF;mix-blend-mode:soft-light"></i></div>
</div>
</div>
<!--tabs-->
<div class="tab-content">
<!--first tab-->
<div class="tab-pane fade show active" id="ONE">
<div class="row justify-content-center">
<div class="card bg-faded card-outline-danger text-muted col-10 col-md-6 p-0 mx-2" style="border-color:#009788">
<div class="card-header bg-dark text-right text-white"><h1 class="font-weight-light text-uppercase" style="color:#009788"><i class="fad fa-chevron-double-left"></i> About</h1></div>
<div class="px-3 py-2" style="overflow-y:scroll; min-height:134px;max-height:190px;color:#009788">
<p class="pb-2">This is a very small box intended to be a quick look into your character. It'll get bigger for a bit until it starts to scroll. Less is more, save it for the Background tab.<br>
Do it Just do it Don't let your dreams be dreams Yesterday you said tomorrow So just do it Make your dreams come true Just do it Some people dream of success While you're gonna wake up and work hard at it Nothing is impossible You should get to the point Where anyone else would quit And you're not going to stop there No, what are you waiting for? Do it Just do it Yes you can Just do it If you're tired of starting over Stop giving up</p>
</div>
</div>
<div class="card bg-faded card-outline-danger text-muted col-10 col-md-2 p-0 mx-2" style="border-color:#009788">
<div class="card-header bg-dark text-right text-white"><h1 class=" font-weight-light text-uppercase" style="color:#009788"><i class="fad fa-chevron-double-left"></i> Album</h1></div>
<div class="h-100 row pt-3 pb-2">
<div class="my-auto mx-auto">
<div class="row no-gutters d-flex mb-2 justify-content-center" style="color:#009788">
<i class="fad fa-chevron-double-left fa-4x px-2"></i>
<a class="btn btn-outline-danger bg-dark tooltipster rounded-circle text-white py-3 melody-embed" style="position:relative;height:65px;width:65px;border-color:#009788">
<iframe style="opacity:.01;position:absolute;left:0;right:0;top:0;bottom:0;" class="h-100 w-100 mb-4" src="https://www.youtube-nocookie.com/embed/videoseries?controls=0&list=OLAK5uy_mk4zhA-5POhppuQfMOHN6PMw_bFEhi08E" frameborder="0"></iframe>
<!--Replace ONLY the list= part of the link with the list= part of the desired playlist link! It should be a long string like the example-->
<i class="fas fa-play fa-fw fa-2x" style="margin-top:3px;"></i>
</a>
<i class="fad fa-chevron-double-right fa-4x px-2"></i>
</div>
<h1 class="lead mx-auto pb-2 text-center" style="color:#009788">Starship Velociraptor <br> by Jonathan Young</h1>
<!--If your album/band name is short enough, you can collapse this into one line-->
</div>
</div>
</div>
</div>
</div>
<!--personality tab-->
<div class="tab-pane fade" id="TWO">
<div class="row justify-content-center">
<div class="card bg-faded card-outline-danger text-muted col-10 col-md-8 p-0 mx-2" style="border-color:#009788">
<div class="card-header bg-dark text-right text-white"><h1 class="font-weight-light text-uppercase" style="color:#009788"><i class="fad fa-chevron-double-left"></i> Personality</h1></div>
<div class="px-4 py-4" style="color:#009788">
<p>A wide open area for you to yell about your character. You can change the box's header and the tooltip in the nav if you want this box to be something other than Personality.</p>
<p>This box will expand forever. Write to your heart's content.</p>
<p>My name is Yoshikage Kira. I'm 33 years old. My house is in the northeast section of Morioh, where all the villas are, and I am not married. I work as an employee for the Kame Yu department stores, and I get home every day by 8 PM at the latest. I don't smoke, but I occasionally drink. I'm in bed by 11 PM, and make sure I get eight hours of sleep, no matter what. After having a glass of warm milk and doing about twenty minutes of stretches before going to bed, I usually have no problems sleeping until morning. Just like a baby, I wake up without any fatigue or stress in the morning. I was told there were no issues at my last check-up. I'm trying to explain that I'm a person who wishes to live a very quiet life. I take care not to trouble myself with any enemies, like winning and losing, that would cause me to lose sleep at night. That is how I deal with society, and I know that is what brings me happiness. Although, if I were to fight I wouldn't lose to anyone.</p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="THREE">
<div class="row justify-content-center">
<div class="card bg-faded card-outline-danger text-muted col-10 col-md-8 p-0 mx-2" style="border-color:#009788">
<div class="card-header bg-dark text-right text-white"><h1 class="font-weight-light text-uppercase" style="color:#009788"><i class="fad fa-chevron-double-left"></i> Backstory</h1></div>
<div class="px-4 py-4" style="color:#009788">
<p>A carbon copy of the Personality box except this one is Backstory.</p>
<p>You can add lists in here too:</p>
<ul>
<li>Things</li>
<li>More things</li>
<li>Another thing?</li>
</ul>
<p>Do you like my sword, sword? Sword, my diamond sword, sword You cannot afford, ‘ford ‘Ford my diamond sword, sword Even if you could, could I have a patent! No one else can make a sword Exactly in this manner, manner Welcome to my manor, manor I ca-ca-ca-canna, canna Swing, swing, swing my sword, sword Whenever I get bored, bored I can swing my sword, sword I can swing my sword, sword Once I hit the floorboards But I had it restored And it was expensive But it was a write-off! Swinging is my business And by that I mean swinging swords Please do not ignore Do you like my sword? Ha! That was rhetorical You know I am the oracle I know you like my sword It's made of freakin’ diamonds If you don't, you're lyin' But that would be fine Because it is awesome And you’re probably jealous! I can swing my sword, sword ‘Cause I am the lord, lord Lord of diamond swords</p>
</div>
</div>
</div>
</div>
<!--appearance tab-->
<div class="tab-pane fade" id="FOUR">
<div class="row justify-content-center">
<div class="card bg-faded card-outline-danger text-muted col-12 col-md-3 p-0 mx-2" style="border-color:#009788">
<div class="card-header bg-dark text-right text-white"><h1 class="font-weight-light text-uppercase" style="color:#009788"><i class="fad fa-chevron-double-left"></i> Image</h1></div>
<!--This here is designed to be a showcase of the character, NOT for their ref sheet. It's so you have a visual aid beside your description of the character's appearance since the only other image on this page is an icon. Works best with transparent portrait oriented fullbodies that aren't cut off.
Mess with the object-fit and object-position style values on the image if the alignment/sizing is weird.
You can remove the credit line if you drew the image.-->
<div class="w-100" style="padding-bottom:100%;">
<img class="col mx-auto" style="max-height:500px;width:100%;display:block;margin-left:auto;margin-right:auto;position: absolute;padding-top: 10px; object-fit: contain; object-position:center;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/40511147_tp6VO0ZCfjmU1Mz.png">
<span class="pb-2" style="position: absolute;bottom: 0;right: 10px;">image by yours truly</span>
</div>
</div>
<div class="card bg-faded card-outline-danger text-muted col-10 col-md-6 p-0 mx-2" style="border-color:#009788">
<div class="card-header bg-dark text-right text-white"><h1 class="font-weight-light text-uppercase" style="color:#009788"><i class="fad fa-chevron-double-left"></i> Appearance</h1></div>
<div class="px-4 py-4" style="color:#009788">
<p>Use this box to describe the character's appearance, both in and out of universe. Clarify parts of the design as needed. Whichever box is taller, this or the image's, will determine the other box's height. </p>
<p>As always lists work too:</p>
<ul>
<li>He got long ears</li>
<li>He got long teeth</li>
<li>Them feet be pretty long too</li>
<li>Lookit them arms</li>
<li>That beautiful body</li>
<li>He's surely one to look at</li>
</ul>
<p>Hey! We are Number One Hey! We are Number One Now listen closely: Here's a little lesson in trickery This is going down in history If you wanna be a villain number one You have to chase a superhero on the run Just follow my moves, and sneak around Be careful not to make a sound (Shh!) (No, don't touch that!) We are Number One Hey! We are Number One We are Number One Ha ha ha Now look at this net, that I just found When I say go, be ready to throw Go! (Throw it at him, not me!) (Ugh, let's try something else) Now watch and learn, here's the deal He'll slip and slide on this banana peel! (Ha ha ha, *gasp*! What are you doing!?) Ba-ba-biddly-ba-ba-ba-ba, ba-ba-ba-ba-ba-ba-ba We are Number One Hey! Ba-ba-biddly-ba-ba-ba-ba, ba-ba-ba-ba-ba-ba-ba Villain Number One! Ba-ba-biddly-ba-ba-ba-ba, ba-ba-ba-ba-ba-ba-ba We are Number One Hey! Ba-ba-biddly-ba-ba-ba-ba, ba-ba-ba-ba-ba-ba-ba We are Number One We are Number One We are Number One, hey hey!</p>
</div>
</div>
</div>
</div>
<!--meta tab-->
<div class="tab-pane fade" id="FIVE">
<div class="row justify-content-center">
<div class="card bg-faded card-outline-danger text-muted col-10 col-md-8 p-0 mx-2" style="border-color:#009788">
<div class="card-header bg-dark text-right text-white"><h1 class="font-weight-light text-uppercase" style="color:#009788"><i class="fad fa-chevron-double-left"></i> Other // Meta Info</h1></div>
<div class="px-4 py-4" style="color:#009788">
<p>This is your space to type out of universe info about your character. This is also the place to put additional credits, inspirations, random trivia, theme songs, anything like that.</p>
<p>Never gonna give you up, never gonna let you down, never gonna run around and desert you. Never gonna make you cry, never gonna say goodbye, never gonna tell a lie, and hurt you.</p>
</div>
</div>
</div>
</div>
</div><!--tab-content end-->
<!--end-->
<div class="card border-0 col-12 col-md-10 mx-auto my-4" style="background-image: url(https://imgur.com/jKzIpvg.png);background-size: cover; background-attachment: fixed; width: auto; position: relative;filter: drop-shadow(8px 8px 10px black);">
<div class="row rounded justify-content-between" style="background:linear-gradient(to right, rgba(33,150,243,0.7) 20%, rgba(10,10,10,.4) , rgba(139,194,74,0.7) 80%);mix-blend-mode:hard-light">
<div class="col-2 h-100 align-self-center border-0 text-center d-none d-md-block"><i class="fad fa-chevron-double-left fa-6x" style="color:#FFF;mix-blend-mode:soft-light"></i></div>
<div class="col-12 col-md-8 py-4" style="mix-blend-mode:soft-light">
<h1 class="display-3 text-uppercase" style="color:#FFF"><span class="float-left">Like a silver bullet piercing through</span><br> <span class="float-right">I throw myself into you</span></h1>
</div>
<div class="col-2 h-100 align-self-center border-0 text-center d-none d-md-block"><i class="fad fa-chevron-double-right fa-6x" style="color:#FFF;mix-blend-mode:soft-light"></i></div>
</div>
</div>
<!--credits-->
<div class="px-2" style="text-align:right;">
<a href="https://imgur.com/a/JoV6GZO"><i class="fas fa-image tooltipster text-light" title="Background image source"></i></a>
<a href="https://youtu.be/tnAoq3_6f5M"><i class="fas fa-waveform tooltipster text-light" title="Header lyrics source - Devil Trigger by Casey Edwards (from Devil May Cry 5)"></i></a>
<a href="https://toyhou.se/Battlewinner"><i class="fas fa-minus tooltipster text-light" title="Original profile code by B//EidolonEntropy"></i></a></div>
