<!--
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 '238,209,51' (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 '230,129,22' 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://i.imgur.com/Wdvuwnz.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://i.imgur.com/Wdvuwnz.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(238,209,51,0.7) 20%,rgba(10,10,10,0.4),rgba(230,129,22,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">Golden rays of the glorious sunshine</span><br> <span class="float-right">Setting down, such a blood-red light</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>
<div class="card col-12 col-md-9 bg-faded mx-auto">
<div class="row">
<!--images; they can be any size greater than 300x300, but they must be square to look right. Be sure to replace both links!-->
<div class="col-12 col-md-3 mb-2 mt-4">
<div class="tab-content">
<div class="tab-pane container active" id="Image1">
<a href="https://f2.toyhou.se/file/f2-toyhou-se/images/29004712_fXnZiV5nNd4feJR.png" target="_blank">
<img class="" src="https://f2.toyhou.se/file/f2-toyhou-se/images/29004712_fXnZiV5nNd4feJR.png" style="border-style: inset; border-radius: 15px 50px; border-color: white; background: rgba(0, 0, 0, 0.3);">
</a>
</div>
<div class="tab-pane container fade" id="Image2">
<a href="https://f2.toyhou.se/file/f2-toyhou-se/images/29004725_ds8zWwdzv5NKsOk.png" target="_blank">
<img class="" src="https://f2.toyhou.se/file/f2-toyhou-se/images/29004725_ds8zWwdzv5NKsOk.png" style="border-style: inset; border-radius: 15px 50px; border-color: white; background: rgba(0, 0, 0, 0.3);">
</a>
</div>
<div class="tab-pane container fade" id="Image3">
<a href="https://f2.toyhou.se/file/f2-toyhou-se/images/29004730_IHhwK7x0EuDxAJ6.png" target="_blank">
<img class="" src="https://f2.toyhou.se/file/f2-toyhou-se/images/29004730_IHhwK7x0EuDxAJ6.png" style="border-style: inset; border-radius: 15px 50px; border-color: white; background: rgba(0, 0, 0, 0.3);">
</a>
</div>
<div class="tab-pane container fade" id="Image4">
<a href="https://f2.toyhou.se/file/f2-toyhou-se/images/29004735_6jEeeamGqClN1Lo.png" target="_blank">
<img class="" src="https://f2.toyhou.se/file/f2-toyhou-se/images/29004735_6jEeeamGqClN1Lo.png" style="border-style: inset; border-radius: 15px 50px; border-color: white; background: rgba(0, 0, 0, 0.3);">
</a>
</div>
<div class="tab-pane container fade" id="Image5">
<a href="https://f2.toyhou.se/file/f2-toyhou-se/images/29004743_HaDXRfNnzX2LZKM.png" target="_blank">
<img class="" src="https://f2.toyhou.se/file/f2-toyhou-se/images/29004743_HaDXRfNnzX2LZKM.png" style="border-style: inset; border-radius: 15px 50px; border-color: white; background: rgba(0, 0, 0, 0.3);">
</a>
</div>
</div>
<ul class="nav nav-pills nav-justified mt-2">
<li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#Image1">Main</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="pill" href="#Image2">Reference</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="pill" href="#Image3">Extra</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"></a>
<div class="dropdown-menu"><!--dropdown items support longer names-->
<a class="dropdown-item" data-toggle="pill" href="#Image4">Extra 2</a>
<a class="dropdown-item" data-toggle="pill" href="#Image5">Extra 3</a>
<!--<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="pill" href="#Image6">Extra 4</a>-->
</div></li>
</ul>
<div class="card bg-transparent border-0 col-12 mx-auto p-0 mt-2"><!--you can color these by adding a text-[color] class here-->
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent justify-content-between py-2"><span class="font-weight-light text-uppercase">Alias</span><span>Nickname</span></li>
<li class="list-group-item bg-transparent justify-content-between py-2"><span class="font-weight-light text-uppercase">Namesake</span><span>Thing</span></li>
<li class="list-group-item bg-transparent justify-content-between py-2"><span class="font-weight-light text-uppercase">Species</span><span>or Ethnicity</span></li>
<li class="list-group-item bg-transparent justify-content-between py-2"><span class="font-weight-light text-uppercase">Gender</span><span>E</span></li>
</ul>
</div>
</div>
<!--info box-->
<div class="col-12 col-md-9 align-self-center">
<div class="card m-2">
<div class="card-header bg-dark">
<div class="row justify-content-between px-4">
<h1 class="display-4 text-light">Name <!--<a href="Optional link to bigger profile goes here" class="fad fa-chevron-double-right"></a>--></h1>
<h1> </h1>
<div class="row"><!--You can use Trait ✧ Trait if you need to change the amount of items-->
<h1 class="align-self-center text-secondary font-weight-light"><small>Trait « Trait » Trait</small> </h1>
</div>
</div>
</div>
<div class="card-body p-3">
<div class="row">
<div class="pl-2 col-12">
<div class="container"><!--if the box gets too long, add this: style="height:350px;overflow-y:auto;" otherwise, it will size itself according to your content.-->
<h4 class="card-title font-weight-light">Header</h4>
<p>Basic info box. Sizes according to content, but can be changed to scrollable. Either requires roughly this much text, or an absolute height value.</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>
<h4 class="card-title font-weight-light">More Header</h4>
<p>According to all known laws of aviation, there is no way a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyway, because bees don't care what humans think is impossible.</p>
<!-- Include this if you want. If the box gets too big, change it to scrollable.
<h4 class="card-title font-weight-light mt-4">Thing List</h4>
<div class="row mt-2">
<div class="col-md-6">
<h5 class="font-weight-lighter">Thing</h5>
<p><i class="fad fa-minus text-primary"></i> Somebody once told me the world is gonna roll me, I ain't the sharpest tool in the shed</p>
<h5 class="font-weight-lighter">Thing</h5>
<p><i class="fad fa-minus text-primary"></i> She was lookin' kinda dumb with her finger and her thumb, in the shape of an L on her forehead</p>
<h5 class="font-weight-lighter">Thing</h5>
<p class="pb-2"><i class="fad fa-minus text-primary"></i> Well, the years start comin' and they don't stop comin', fed to the rules so I hit the ground runnin'</p>
</div>
<div class="col-md-6">
<h5 class="font-weight-lighter">Thing</h5>
<p>Didn't make sense not to live for fun, your brain gets smart but your head gets dumb, so much to do, so much to see, so what's wrong with takin' the back streets? You never know if you don't go, you never shine if you don't glow</p>
<h5 class="font-weight-lighter">Thing</h5>
<p>Hey now, you're an all star, get your game on, go play, hey now, you're a rock star, get the show on, get paid, and all that glitters is gold, only shooting stars break the mold</p>
</div>
</div>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--end header-->
<div class="card border-0 col-12 col-md-10 mx-auto my-4" style="background-image: url(https://i.imgur.com/Wdvuwnz.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(238,209,51,0.7) 20%,rgba(10,10,10,0.4),rgba(230,129,22,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-7 py-4" style="mix-blend-mode:soft-light">
<h1 class="display-3 text-uppercase" style="color:#FFF"><span class="float-left">Violence breeds within ourselves</span><br> <span class="float-right">No need for a cure</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>
<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/23oZbJNSd0s"><i class="fas fa-waveform tooltipster text-light" title="Header lyrics source - Red Sun by Jason Miller et. al (from Metal Gear Rising: Revengeance)"></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>
