yuhhh 1

<!------------
  ⏻ - WIKIA V2 by watergems
  do not remove credit/claim
  color: #AA53C6
  links: manual href; copy+paste below
    <a href="/" color:#AA53C6">link</a>
  ------------>

<!------ INFOBOX ------>
<div class="col-md-4 float-md-right p-0 mb-3 ml-md-3">
<div class="card bg-faded" style="border:1px solid #AA53C6;border-radius:.25rem">
<!-- CHARACTER NAME -->
  <h2 class="card-header card-inverse text-center text-white" style="background:#AA53C6;border-radius:.25rem 0">Matt Starling</h2>
<!-- IMAGE // if you have one image, remove this section -->
<ul class="nav d-flex flex-row p-1 mx-auto list-unstyled">
  <li class="nav-item"><a data-toggle="tab" class="nav-link btn mx-1 text-white" style="background:#AA53C6" href="#current">Current</a></li>
  <li class="nav-item"><a data-toggle="tab" class="nav-link btn mx-1 text-white" style="background:#AA53C6" href="#debut">Debut</a></li>
</ul>
<div class="tab-content text-center"><div class="tab-pane fade width-auto active show" id="current">
  <img src="http://placehold.it/800x1200" class="pt-2 px-2" />
</div><div class="tab-pane fade width-auto" id="debut">
  <img src="http://placehold.it/800x1200" class="pt-2 px-2" />
</div></div>
<!-- IMAGE // if you have one image, remove the comment lines around the next line
  <img src="http://placehold.it/800x1200" class="mx-auto mt-2 mx-2" />
-->
<!-- SUBHEADING 1 -->
  <h5 class="text-white text-center py-2 mt-0 mb-2" style="background:#AA53C6">Characteristics</h5>
<!-- FIELDS 1 // copy+paste 5/7 rows as needed -->
<div class="row mb-2">
  <div class="col-5 pl-4 font-weight-bold">Race</div>
  <div class="col-7 pr-4">Human</div>
  <div class="col-5 pl-4 font-weight-bold">Gender</div>
  <div class="col-7 pr-4"><span data-toggle="tooltip" title="he/him, crow/crows">Trans Male</div>
  <div class="col-5 pl-4 font-weight-bold">Age</div>
  <div class="col-7 pr-4">22 (X793)</div>
  <div class="col-5 pl-4 font-weight-bold">Hair Color</div>
  <div class="col-7 pr-4">Brown</div>
  <div class="col-5 pl-4 font-weight-bold">Eye Color</div>
  <div class="col-7 pr-4">Hazel</div>
</div>
<!-- SUBHEADING 2 // collapsible section, copy+paste and replace #heading2 as needed -->
  <h5 class="text-white text-center py-2 mb-0 pl-4" style="padding-right:-.4rem;background:#AA53C6">Professional Status<a href="#heading2" data-toggle="collapse"><i class="fa-lg fas fa-angle-down float-right text-white pr-2 ml-0" /></a></h5>
<!-- FIELDS 2 -->
<div class="collapse mt-2" id="heading2"><div class="row mb-2">
  <div class="col-5 pl-4 font-weight-bold">Affiliation</div>
  <div class="col-7 pr-4">Fairy Tail</div>
  <div class="col-5 pl-4 font-weight-bold">Previous Affiliation</div>
  <div class="col-7 pr-4">Devil's Blood</div>
  <div class="col-5 pl-4 font-weight-bold">Guild Mark Location</div>
  <div class="col-7 pr-4">Back of left hand</div>
  <div class="col-5 pl-4 font-weight-bold">Occupation</div>
  <div class="col-7 pr-4">Mage</div>
  <div class="col-5 pl-4 font-weight-bold">Previous Occupation</div>
  <div class="col-7 pr-4">Assassin</div>
  <div class="col-5 pl-4 font-weight-bold">Team</div>
  <div class="col-7 pr-4">Team Natsu</div>
  <div class="col-5 pl-4 font-weight-bold">Previous Team</div>
  <div class="col-7 pr-4">
  <div id="first">Team Tenrou</div>
  <div id="second">Fairy Tail Team A</div>
  <div id="third">Team Fairy Tail</div>
  <div id="fourth">Rescue Team</div>
  </div>
  <div class="col-5 pl-4 font-weight-bold">Previous Partner(s)</div>
  <div class="col-7 pr-4">Natsu Dragneel</div>
  <div class="col-5 pl-4 font-weight-bold">Base of Operations</div>
  <div class="col-7 pr-4">
  <div id="first">Devil's Blood Building (former)</div>
  <div id="second">First Fairy Tail Building</div>
  <div id="third">Second Fairy Tail Building (former)</div></div>
</div>
<!-- SUBHEADING 3 // collapsible section, copy+paste and replace #heading3 as needed -->
  <h5 class="text-white text-center py-2 mb-0 pl-4" style="padding-right:-.4rem;background:#AA53C6">Personal Status<a href="#heading3" data-toggle="collapse"><i class="fa-lg fas fa-angle-down float-right text-white pr-2 ml-0" /></a></h5>
<!-- FIELDS 3 -->
<div class="row mb-2">
  <div class="col-5 pl-4 font-weight-bold">Status</div>
  <div class="col-7 pr-4">Active</div>
  <div class="col-5 pl-4 font-weight-bold">Relatives</div>
  <div class="col-7 pr-4">
  <div id="first">Unnamed Father (deceased)</div>
  <div id="second">Unnamed Mother</div>
  <div id="third">Unnamed Brother (deceased)</div>
  <div id="fourth">Unnamed Sister</div></div>
  <div class="col-5 pl-4 font-weight-bold">Counterpart</div>
  <div class="col-7 pr-4">Matthew Crane</div>
</div>
<!-- SUBHEADING 4 // collapsible section, copy+paste and replace #heading4 as needed -->
  <h5 class="text-white text-center py-2 mb-0 pl-4" style="padding-right:-.4rem;background:#AA53C6">Magic<a href="#heading4" data-toggle="collapse"><i class="fa-lg fas fa-angle-down float-right text-white pr-2 ml-0" /></a></h5>
<!-- FIELDS 4 -->
<div class="row mb-2">
  <div class="col-5 pl-4 font-weight-bold">Magic</div>
  <div class="col-7 pr-4">
  <div id="first">Crow Magic</div>
  <div id="second">Take Over</div>
  <div id="third">Aera</div></div>
  <div class="col-5 pl-4 font-weight-bold">Weapons</div>
  <div class="col-7 pr-4">
  <div id="first">Dark Sword (former)</div>
  <div id="second">Erza's Magic Sword (former)</div></div>
</div></div>
<!------ END INFOBOX ------>
</div></div>

<!------ QUOTE ------>
<div class="row mb-3"><div class="col-md-10 offset-md-1">
<div class="card p-2 bg-faded card-outline-default"><span class="text-center mb-2">
<i class="fa-lg fas fa-quote-left float-left" style="color:#AA53C6" />
<i class="fa-lg fas fa-quote-right float-right" style="color:#AA53C6" />
  Revenge doesn't feel how I thought it would. Now I know... Now I know I need to focus on who really matters!!
</span><div class="text-right text-muted">
  ― Matt Starling to Team Natsu
</div></div>
</div></div>

<!------ INTRODUCTION ------>
  <p><strong>Matt Starling</strong> is a guy.</p>

<!------ APPEARANCE ------>
<div class="profile-fields-title mt-2">
  <a id="appearance" /><h2>Appearance <a href="#toc"><i style="font-size:.75em;color:#AA53C6" class="fas fa-bars" /></a></h2>
</div><div class="card bg-faded mt-1 mb-2 border-top-0" style="height:1px;"> </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>

<!------ PERSONALITY ------>
<div class="profile-fields-title mt-2">
  <a id="personality" /><h2>Personality <a href="#toc"><i style="font-size:.75em;color:#AA53C6" class="fas fa-bars" /></a></h2>
</div><div class="card bg-faded my-1 border-top-0" style="height:1px;"> </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>

<!------ ABILITIES ------>
<div class="profile-fields-title mt-2">
  <a id="abilities" /><h2>Magic and Abilities <a href="#toc"><i style="font-size:.75em;color:#AA53C6" class="fas fa-bars" /></a></h2>
</div><div class="card bg-faded mt-1 mb-2 border-top-0" style="height:1px;"> </div>
  <h4 class="mb-1">Magic<a href="#toc"><i style="font-size:.75em;color:#AA53C6" class="fas fa-bars" /></a></h4>
<ul class="pl-4">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
  <h4 class="mb-1">Abilities <a href="#toc"><i style="font-size:.75em;color:#AA53C6" class="fas fa-bars" /></a></h4>
<ul class="pl-4">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

<!------ EQUIPMENT ------>
<div class="profile-fields-title mt-2">
  <a id="history" /><h2>Equipment<a href="#toc"><i style="font-size:.75em;color:#AA53C6" class="fas fa-bars" /></a></h2>
</div><div class="card bg-faded mt-1 mb-2 border-top-0" style="height:1px;"> </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>

<!------ RELATIONSHIPS ------>
<div class="profile-fields-title mt-2">
  <a id="relationships" /><h2>Relationships <a href="#toc"><i style="font-size:.75em;color:#AA53C6" class="fas fa-bars" /></a></h2>
</div><div class="card bg-faded mt-1 mb-2 border-top-0" style="height:1px;"> </div>
  <h4 class="mb-1"><a href="/" style="color:#AA53C6"><a href="https://fairytail.fandom.com/wiki/Natsu_Dragneel">Natsu Dragneel</a> <a href="#toc"><i style="font-size:.75em;color:#AA53C6" class="fas fa-bars" /></a></h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
  <h4 class="mb-1"><a href="/" style="color:#AA53C6"><a href="https://fairytail.fandom.com/wiki/Natsu_Dragneel">Lucy Heartfilia</a> <a href="#toc"><i style="font-size:.75em;color:#AA53C6" class="fas fa-bars" /></a></h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>

<!------ TRIVIA ------>
<div class="profile-fields-title mt-3">
  <a id="trivia" /><h2>Trivia <a href="#toc"><i style="font-size:.75em;color:#AA53C6" class="fas fa-bars" /></a></h2>
</div><div class="card bg-faded my-1 border-top-0" style="height:1px;"> </div>
<ul class="pl-4">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

<!------ !! DO NOT DELETE CREDIT !! ------>
  <div class="float-right card bg-faded card-outline-default ml-1">
    <a href="http://toyhou.se/watergems" title="Layout by watergems" class="d-inline-flex" style="padding:10px 10px 9px;text-decoration:none;color:#AA53C6"><i class="far fa-code" /></a>
  </div>