yuhh 2

<!------------
  ⏻ - WIKIA V2 (TH) by watergems
  do not remove credit/claim
  color: primary
  links: @@characterID
  ------------>

<!------ INFOBOX ------>
<div class="col-md-4 float-md-right p-0 mb-3 ml-md-3">
<div class="card card-outline-primary bg-faded">
<!-- CHARACTER NAME -->
  <h2 class="card-primary card-header card-inverse text-center text-white">Matt Starling</h2>
<!-- IMAGE // if you have one image, remove this section -->
<ul class="nav d-flex flex-row p-2 mx-auto list-unstyled">
  <li class="nav-item"><a data-toggle="tab" class="nav-link btn btn-primary mx-1" href="#current">Current</a></li>
  <li class="nav-item"><a data-toggle="tab" class="nav-link btn btn-primary mx-1" 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 pt-2 px-2" />
-->
<!-- SUBHEADING 1 -->
  <h5 class="bg-primary text-white text-center py-2 mt-0 mb-2">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="bg-primary text-white text-center py-2 mb-0 pl-4" style="padding-right:-.4rem">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 -->
  <h5 class="bg-primary text-white text-center py-2 mt-0 mb-2">Personal Status</h5>
<!-- FIELDS 3 // copy+paste 5/7 rows as needed -->
<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 -->
  <h5 class="bg-primary text-white text-center py-2 mt-0 mb-2">Magic</h5>
<!-- FIELDS 4 // copy+paste 5/7 rows as needed -->
<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 text-primary" />
<i class="fa-lg fas fa-quote-right float-right text-primary" />
  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>Matt 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" /></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" /></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" /></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:12px" /></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:12px" /></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="personality" /><h2>Equipment <a href="#toc"><i style="font-size:.75em" /></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>


<!------ RELATIONSHIPS ------>
<div class="profile-fields-title mt-2">
  <a id="relationships" /><h2>Relationships <a href="#toc"><i style="font-size:.75em" /></a></h2>
</div><div class="card bg-faded mt-1 mb-2 border-top-0" style="height:1px;"> </div>
  <a id="nameone" /><h4 class="mb-1"><a href="https://fairytail.fandom.com/wiki/Natsu_Dragneel">Natsu Dragneel</a>
<a href="#toc"><i style="font-size:12px" /></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>
  <a id="nametwo" /><h4 class="mb-1">Lucy Heartfilia <a href="#toc"><i style="font-size:12px" /></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" /></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 text-primary" style="padding:10px 10px 9px;text-decoration:none"><i class="far fa-code" /></a>
  </div>