BNHA Wikia Inspired Layout

<div class="col-md-4 float-md-right p-0 mb-3 ml-md-3">
<div class="card card-outline-primary bg-faded; text-center" style="border: 1px solid #F1CF52; background-color:#fff">
  <h2 class="card-inverse card-header" style="background-color:#8B0000; font-size: 20px; color: #fff">Surname Name</h2><div align="center">
  <img src="https://pa1.narvii.com/6743/b46e7d53bd3e52fa3f3ab982f952dffb58f8c18b_hq.gif" style="width:361px">
  <br><table border="0" cellspacing="0" cellpadding="0" style="background: #8B0000; width:363px">
<tbody><tr><td><div style="text-align: center; color: white; margin-left: 6px; margin-right: 6px; font-size:12px ;font-family:arial">
<p><b>Biographical Information</b>
</p></table>
<div align="left" style="font-size:11px; font-family:arial; margin-left:4px; margin-top:5px"><div class="row mb-2">
<div class="col-5 pl-4 font-weight-bold">• Japanese Name</div>
<div class="col-7 pr-2">-</div>
<div class="col-5 pl-4 font-weight-bold">• Rōmaji Name</div>
<div class="col-7 pr-2"><i>-</i></div>
<div class="col-5 pl-4 font-weight-bold">• Alias</div>
<div class="col-7 pr-2">-</div>
  </div></div>
<table border="0" cellspacing="0" cellpadding="0" style="background: #8B0000; width:363px">
<tbody><tr><td><div style="text-align: center; color: white; margin-left: 6px; margin-right: 6px; font-size:12px ;font-family:arial">
<p><b>Personal Description</b>
</p></table>
<div align="left" style="font-size:11px; font-family:arial; margin-left:4px; margin-top:5px"><div class="row mb-2">
<div class="col-5 pl-4 font-weight-bold">• Birthday</div>
<div class="col-7 pr-2">-</div>
<div class="col-5 pl-4 font-weight-bold">• Age</div>
<div class="col-7 pr-2">-</div>
<div class="col-5 pl-4 font-weight-bold">• Gender</div>
<div class="col-7 pr-2">-</div>
<div class="col-5 pl-4 font-weight-bold">• Height</div>
<div class="col-7 pr-2">-</div>
<div class="col-5 pl-4 font-weight-bold">• Hair Color</div>
<div class="col-7 pr-2">-</div>
<div class="col-5 pl-4 font-weight-bold">• Eye Color</div>
<div class="col-7 pr-2">-</div>
<div class="col-5 pl-4 font-weight-bold">• Blood Type</div>
<div class="col-7 pr-2">-</div>
<div class="col-5 pl-4 font-weight-bold">• Quirk</div>
<div class="col-7 pr-2">-</div>
  </div></div>
<table border="0" cellspacing="0" cellpadding="0" style="background: #8B0000; width:363px">
<tbody><tr><td><div style="text-align: center; color: white; margin-left: 6px; margin-right: 6px; font-size:12px ;font-family:arial">
<p><b>Status</b>
</p></table>
<div align="left" style="font-size:11px; font-family:arial; margin-left:4px; margin-top:5px"><div class="row mb-2">
<div class="col-5 pl-4 font-weight-bold">• Status</div>
<div class="col-7 pr-2">-</div>
<div class="col-5 pl-4 font-weight-bold">• Birthplace</div>
<div class="col-7 pr-2">-</div>
<div class="col-5 pl-4 font-weight-bold">• Family</div>
<div class="col-7 pr-2">-</div>
<div class="col-5 pl-4 font-weight-bold">• Occupation</div>
<div class="col-7 pr-2">-</div>
<div class="col-5 pl-4 font-weight-bold">• Affiliation</div>
<div class="col-7 pr-2">-</div>
<div class="col-5 pl-4 font-weight-bold">• Team(s)</div>
<div class="col-7 pr-2">-</div>
<div class="col-5 pl-4 font-weight-bold">• Fighting Style</div>
<div class="col-7 pr-2">-</div>
  </div></div>
  <table border="0" cellspacing="0" cellpadding="0" style="background: #8B0000; width:363px">
<tbody><tr><td><div style="text-align: center; color: white; margin-left: 6px; margin-right: 6px; font-size:12px ;font-family:arial">
<p><b>Portrayal</b>
</p></table>
<div align="left" style="font-size:11px; font-family:arial; margin-left:4px; margin-top:5px"><div class="row mb-2">
<div class="col-5 pl-4 font-weight-bold">• Japanese Voice</div>
<div class="col-7 pr-2">-</div>
<div class="col-5 pl-4 font-weight-bold">• Theme</div>
<div class="col-7 pr-2">-</div>
</div></div>
  </div></div></div>
<div class="row">
<div class="col-md-10 offset-md-1">
<div class="card p-2 bg-faded card-outline-default" style="background-color:#8B0000">
<em class="text-center" style="color:#fff"><i>"insert quote here"</i></em>
<div class="text-right" style="color:#fff">― <b>by Name</b></div>
</div></div></div>
<br><div class="row"><a id="toc"></a>
<div class="col-md-5 mb-2">
<div class="card bg-faded card-outline-default" style="background-color:#fff; width:150px">
<h6 class="p-2 mb-0 text-center" style="font-size:14px; font-family:arial; color:#000">Contents <small>[<a data-toggle="collapse" href="#tocshow" style="color:#E3B20E">show</a>]</small></h6>
<div class="collapse p-2 pt-0 rounded-bottom" id="tocshow">
1 <a href="#appearance" style="color:#E3B20E">Appearance</a><br />
2 <a href="#personality" style="color:#E3B20E">Personality</a><br />
3 <a href="#history" style="color:#E3B20E">History</a><br />
4 <a href="#quirk" style="color:#E3B20E">Quirk and Abilities</a><br />
<span class="pl-3" >4.1 <a href="#apply" style="color:#E3B20E">Applications</a></span><br />
<span class="pl-3" >4.2 <a href="#disadvantage" style="color:#E3B20E">Disadvantages</a></span><br />
5 <a href="#trivia" style="color:#E3B20E">Trivia</a>
</div></div></div></div>
<div style="font-size:12px;">
<!--
---- PERSONALITY --
--->
<br><div class="profile-fields-title" style="margin-bottom:-5px;"><a id="personality" /><h2>Personality</h2></div>
<div class="card bg-faded mb-1 border-top-0" style="height:1px;"> </div>
<p><div align="center">
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id orci sit amet arcu posuere ultrices vel pulvinar justo. Suspendisse placerat augue vitae massa consectetur tincidunt. Duis interdum arcu nibh, nec efficitur neque blandit nec. Donec at dictum arcu. Sed pharetra urna augue, eget facilisis magna malesuada in. Sed in turpis vel sem pretium dapibus ullamcorper nec lorem. Phasellus fringilla turpis et accumsan facilisis. Etiam dictum vel tortor quis lacinia. Morbi porttitor convallis enim, a auctor elit gravida ac. Phasellus eget arcu eu urna mollis finibus vitae quis ex. Curabitur gravida mi orci, ac feugiat quam accumsan nec. Aenean lacinia vehicula leo sed pellentesque. Ut vestibulum porta diam non gravida. Nulla consequat eu urna ut commodo. Nulla in augue ut ipsum tempus egestas. Mauris porta sapien facilisis turpis vehicula, eu convallis purus rutrum.<br><br>Aliquam varius accumsan lectus id molestie. Pellentesque dolor sem, molestie at sodales nec, feugiat sit amet tellus. Nullam pellentesque felis id justo pulvinar euismod. Donec in lacinia metus. Etiam orci nibh, cursus vitae fringilla dapibus, tincidunt ut orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla commodo massa vitae convallis congue. Aenean purus urna, dictum vitae quam sit amet, accumsan ullamcorper libero. Donec sed lorem semper, volutpat felis id, efficitur elit. Nunc congue et dui sed hendrerit. Mauris varius augue ut lacus condimentum fermentum.<br></p><br><br>
<!---
-- HISTORY --
--->
<div class="profile-fields-title" style="margin-bottom:-5px;"><a id="history" /><h2>History</h2></div>
<div class="card bg-faded mb-1 border-top-0" style="height:1px;"> </div>
<p><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id orci sit amet arcu posuere ultrices vel pulvinar justo. Suspendisse placerat augue vitae massa consectetur tincidunt. Duis interdum arcu nibh, nec efficitur neque blandit nec. Donec at dictum arcu. Sed pharetra urna augue, eget facilisis magna malesuada in. Sed in turpis vel sem pretium dapibus ullamcorper nec lorem. Phasellus fringilla turpis et accumsan facilisis. Etiam dictum vel tortor quis lacinia. Morbi porttitor convallis enim, a auctor elit gravida ac. Phasellus eget arcu eu urna mollis finibus vitae quis ex. Curabitur gravida mi orci, ac feugiat quam accumsan nec. Aenean lacinia vehicula leo sed pellentesque. Ut vestibulum porta diam non gravida. Nulla consequat eu urna ut commodo. Nulla in augue ut ipsum tempus egestas. Mauris porta sapien facilisis turpis vehicula, eu convallis purus rutrum.<br><br>Aliquam varius accumsan lectus id molestie. Pellentesque dolor sem, molestie at sodales nec, feugiat sit amet tellus. Nullam pellentesque felis id justo pulvinar euismod. Donec in lacinia metus. Etiam orci nibh, cursus vitae fringilla dapibus, tincidunt ut orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla commodo massa vitae convallis congue. Aenean purus urna, dictum vitae quam sit amet, accumsan ullamcorper libero. Donec sed lorem semper, volutpat felis id, efficitur elit. Nunc congue et dui sed hendrerit. Mauris varius augue ut lacus condimentum fermentum.<br></p><br>
<!--
--- QUIRK AND ABILITIES ---
-->
<div class="profile-fields-title" style="margin-bottom:-5px;"><a id="quirk" /><h2>Quirk and Abilities</h2></div>
<div class="card bg-faded mb-1 border-top-0" style="height:1px;"> </div>
<br><p>TLorem ipsum dolor sit amet, consectetur adipiscing elit. In id orci sit amet arcu posuere ultrices vel pulvinar justo. Suspendisse placerat augue vitae massa consectetur tincidunt. Duis interdum arcu nibh, nec efficitur neque blandit nec. Donec at dictum arcu. Sed pharetra urna augue, eget facilisis magna malesuada in. Sed in turpis vel sem pretium dapibus ullamcorper nec lorem. Phasellus fringilla turpis et accumsan facilisis. Etiam dictum vel tortor quis lacinia. Morbi porttitor convallis enim, a auctor elit gravida ac. Phasellus eget arcu eu urna mollis finibus vitae quis ex. Curabitur gravida mi orci, ac feugiat quam accumsan nec. Aenean lacinia vehicula leo sed pellentesque. Ut vestibulum porta diam non gravida. Nulla consequat eu urna ut commodo. Nulla in augue ut ipsum tempus egestas. Mauris porta sapien facilisis turpis vehicula, eu convallis purus rutrum.<br><br>Aliquam varius accumsan lectus id molestie. Pellentesque dolor sem, molestie at sodales nec, feugiat sit amet tellus. Nullam pellentesque felis id justo pulvinar euismod. Donec in lacinia metus. Etiam orci nibh, cursus vitae fringilla dapibus, tincidunt ut orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla commodo massa vitae convallis congue. Aenean purus urna, dictum vitae quam sit amet, accumsan ullamcorper libero. Donec sed lorem semper, volutpat felis id, efficitur elit. Nunc congue et dui sed hendrerit. Mauris varius augue ut lacus condimentum fermentum.<br>
<br><br>
<div class="row mb-2">
<div class="col-5 pl-4"><a id="apply" /><b>• Applications:</b></a>
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id orci sit amet arcu posuere ultrices vel pulvinar justo. Suspendisse placerat augue vitae massa consectetur tincidunt. Duis interdum arcu nibh, nec efficitur neque blandit nec. Donec at dictum arcu. Sed pharetra urna augue, eget facilisis magna malesuada in. Sed in turpis vel sem pretium dapibus ullamcorper nec lorem. Phasellus fringilla turpis et accumsan facilisis. </div>
<div class="col-7 pr-2"><a id="disadvantage" /><b>• Disadvantages:</b></a>
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id orci sit amet arcu posuere ultrices vel pulvinar justo. Suspendisse placerat augue vitae massa consectetur tincidunt. Duis interdum arcu nibh, nec efficitur neque blandit nec. Donec at dictum arcu. Sed pharetra urna augue, eget facilisis magna malesuada in. Sed in turpis vel sem pretium dapibus ullamcorper nec lorem. Phasellus fringilla turpis et accumsan facilisis. </div><br>
<!--
--- STATS ---
-->
</div></div>
<div align="center"><div class="card card-outline-warning" style="border: 1px solid #F1CF52; width:600px"><a data-toggle="collapse" href="#spoiler2" style="color:#E3B20E"><div class="card-inverse card-header" style="background-color:#8B0000" align="center">Stats </div></a>
<div class="collapse card-block bg-faded rounded-bottom" style="background-color:#fff" id="spoiler2">
<p> <div align="center"><div class="card card-outline-primary bg-faded; text-center" style="border: 1px solid #F1CF52; background-color:#fff; width:500px">
<table style="width: auto; border:3px outset #cc0000; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -khtml-border-radius: 4px; -icab-border-radius: 4px;; text-align:left; padding-left:10px; padding-top:5px; padding-right:10px;"><tbody><tr>
  <td><b>Power</b><div class="progress" style="background: #c9c9c9;">
<div class="progress-bar" style="background: #11EF11; width:100%;">5/5 <b>A</b></div></div>
<br><b>Speed</b><div class="progress" style="background: #c9c9c9;">
<div class="progress-bar" style="background: #11EF11; width:100%;">5/5 <b>A</b></div></div>
<br><b>Technique</b><div class="progress" style="background: #c9c9c9;">
<div class="progress-bar" style="background: #11EF11; width:100%;">5/5 <b>A</b></div></div>
<br><b>Intelligence</b><div class="progress" style="background: #c9c9c9;">
<div class="progress-bar" style="background: #11EF11; width:100%;">5/5 <b>A</b></div></div>
<br><b>Cooperativeness</b><div class="progress" style="background: #c9c9c9;">
<div class="progress-bar" style="background: #11EF11; width:100%;">5/5 <b>A</b></div></div></td>
</tr>
</tbody></table></p></div></div></div>
</div></div><div style="font-size:12px;">
<!---
-- TRIVIA --
--->
<div class="profile-fields-title" style="margin-bottom:-5px;"><a id="trivia" /><h2>Trivia</h2></div>
<div class="card bg-faded mb-1 border-top-0" style="height:1px;"> </div>
<br><p>• Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id orci sit amet arcu posuere ultrices vel pulvinar justo. Suspendisse placerat augue vitae massa consectetur tincidunt. Duis interdum arcu nibh, nec efficitur neque blandit nec. Donec at dictum arcu. Sed pharetra urna augue, eget facilisis magna malesuada in. Sed in turpis vel sem pretium dapibus ullamcorper nec lorem. Phasellus fringilla turpis et accumsan facilisis.</p></div><br>
<div class="row"><div class="col-sm-3 text-center mb-4">
<img src="https://data.whicdn.com/images/304216895/original.gif" class="rounded-circle" style="width:200px; height:200px">
</div>
<div class="col-sm-3 text-center mb-4">
<img src="https://d.wattpad.com/story_parts/472300794/images/14e64c92a7f36d0d835539669951.gif" class="rounded-circle" style="width:200px; height:200px">
</div>
<div class="col-sm-3 text-center mb-4">
<img src="https://78.media.tumblr.com/8dac951b4a422c94b424ef6d54b16d6b/tumblr_opxaoqSMmB1v14hqvo1_500.gif" class="rounded-circle" style="width:200px; height:200px">
</div>
<div class="col-sm-3 text-center mb-4">
<img src="https://78.media.tumblr.com/8f8be50ad87091c755f13ac4fc6fc943/tumblr_o7hpdqkUpC1rtzax2o1_1280.gif" class="rounded-circle" style="width:200px; height:200px"> </div>
</div>
<div align="right"><!-----DON'T REMOVE THE CREDIT, PLEASE-----><small>LAYOUT BY <a href="https://toyhou.se/ChainOfRain">CHAINOFRAIN</a></small><!----></div>