API tools faq
paste
Advertisement
Guest User

One Peice Oc Wiki Template

a guest
May 30th, 2021
572
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 122.07 KB | None | 0 0
raw download clone embed print report
  1. <!--- HELLO~ Thank you so much for using the One Piece Wikia code! I put this all together using the resources from the wiki and some code help from toyhou.se lol ; I'll leave some tips in here that I learned from the almighty ArtyTiffy's code with Hunterpedia template :'DD You can take this section out but it helps to follow through and this note will be hidden from the actual bio and coding in toyhouse
  2.  
  3. Tips:
  4. - DO NOT ENABLE "WYSIWYG". I know it's helpful, but it will ruin the whole code if you don't. I suggest editing the code in one page then open a new tab to see what it looks like actually.
  5. - I RECOMMEND USING "SUBLIME TEXT3" for coding. Honestly, it helps a lot and you can use the Syntax function to see the different parts of your code clearly.
  6. - "CTRL+F" is your friend if you need to find something.
  7. - Use a separate file cuz you would be bonkers if you code with Toyhouse and lost net or accidentally refreshed since save is non-existent there.
  8. - If you need any help, just go ahead and ask me (shann.ta in insta, shannta in toyhouse, Shannta#0461) and I'll gladly help you out!
  9. --->
  10.  
  11. <table style="font-size: 95%; margin: 0 auto 10px auto; border: 1px #AAA solid; border-collapse: collapse; background-color: #FFFFE0; border-left: 10px solid #3399FF; z-index: 3;">
  12.  
  13. <tbody><tr>
  14. <td style="width: 10px; padding: 2px 0px 2px 0.25em; text-align: center;"><img alt="Featured Article.png" src="https://static.wikia.nocookie.net/onepiece/images/2/2f/Featured_Article.png" data-image-name="Featured Article.png" data-image-key="Featured_Article.png" data-src="https://static.wikia.nocookie.net/onepiece/images/2/2f/Featured_Article.png" width="65" height="50">
  15. </td>
  16. <td style="padding: 0.25em 0.5em; color:#000;"><b>Ahoy! Here is a <em>free to use</em> One Piece Wiki Profile!</b>
  17. <div style="font-size: 95%; margin-top:0.5em;">
  18. <a href="https://pastebin.com/r6uyHiZN">Here</a> is the link to the code! You can find an example <a href="https://toyhou.se/11316266.grimmore-rhea">here</a></div>
  19. </td></tr></tbody></table>
  20.  
  21. <!--- Tiny Floating Image Section (Use transparent images): You can add or remove them as you please --->
  22. <img style="max-width:10%;position:fixed;bottom:5px;right:5px;z-index:3;" src="https://freepngimg.com/thumb/one_piece/23231-5-one-piece-chibi-image.png">
  23.  
  24. <!--- BACKGROUND IMAGE: You can also add a GIF! Do not edit "&quot;" --->
  25. <div style="position:absolute; top:0; bottom: 0; left: 0; background: url(&quot;https://i.imgur.com/JIMrxxj.png&quot;) fixed center repeat; width: 100%; z-index: -1;">
  26. </div>
  27. <!--- END BG IMAGE --->
  28.  
  29. <div class="container p-0" style="z-index: 2;">
  30. <table style="border:none;width:100%;height:100%;">
  31. <div class="container py-3" style="background-color: #e7e7e7; border: none; width:100%; margin-top:0px; margin-bottom:15px; float:left; height: auto;">
  32. <tbody style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11pt; color:#3A3A3A;">
  33. <h1 class="display-4 font-weight-bold" style="color: #3A3A3A;">Name McName</h1>
  34. <hr class="mt-0">
  35.  
  36. <!--- LINKS/PILLS TAB --->
  37. <div class="p-2 mb-2">
  38. <ul class="nav nav-tabs justify-content-center row text-center card-header-tabs">
  39. <li class="nav-item col m-1 pt-1">
  40. <a class="nav-link btn-block p-2 active show" style="background-color: #FFD800; color: #FF0000; border-color: #3a3a3a; border-radius: 2ex 2ex 0 0;" data-toggle="tab" href="#Introduction">
  41. <span class="hidden-sm-down" style="font-size: 11px; color: #FF0000;"><strong>Introduction</strong></span><span class="hidden-md-up"><i class="fas fa-info" style="color: #FF0000;"></i></span></a>
  42. </li>
  43. <li class="nav-item col m-1 pt-1">
  44. <a class="nav-link btn-block p-2" style="background-color: #FFD800; color: #FF0000; border-color: #3a3a3a; border-radius: 2ex 2ex 0 0;" data-toggle="tab" href="#Powers">
  45. <span class="hidden-sm-down" style="font-size: 11px; color: #FF0000;"><strong>Abilities and Powers</strong></span><span class="hidden-md-up"><i class="fas fa-stars" style="color: #FF0000;"></i></span></a>
  46. </li>
  47. <li class="nav-item col m-1 pt-1">
  48. <a class="nav-link btn-block p-2" style="background-color: #FFD800; color: #FF0000; border-color: #3a3a3a; border-radius: 2ex 2ex 0 0;" data-toggle="tab" href="#History">
  49. <span class="hidden-sm-down" style="font-size: 11px; color: #FF0000;"><strong>History</strong></span><span class="hidden-md-up"><i class="fas fa-book-open" style="color: #FF0000;"></i></span></a>
  50. </li>
  51. <li class="nav-item col m-1 pt-1">
  52. <a class="nav-link btn-block p-2" style="background-color: #FFD800; color: #FF0000; border-color: #3a3a3a; border-radius: 2ex 2ex 0 0;" data-toggle="tab" href="#Relationships">
  53. <span class="hidden-sm-down" style="font-size: 11px; color: #FF0000;"><strong>Relationships</strong></span><span class="hidden-md-up"><i class="fas fa-users" style="color: #FF0000;"></i></span></a>
  54. </li>
  55. <li class="nav-item col m-1 pt-1">
  56. <a class="nav-link btn-block p-2" style="background-color: #FFD800; color: #FF0000; border-color: #3a3a3a; border-radius: 2ex 2ex 0 0;" data-toggle="tab" href="#Misc">
  57. <span class="hidden-sm-down" style="font-size: 11px; color: #FF0000;"><strong>Misc.</strong></span><span class="hidden-md-up"><i class="fas fa-thumbtack" style="color: #FF0000;"></i></span></a>
  58. </li>
  59. <li class="nav-item col m-1 pt-1">
  60. <a class="nav-link btn-block p-2" style="background-color: #FFD800; color: #FF0000; border-color: #3a3a3a; border-radius: 2ex 2ex 0 0;" data-toggle="tab" href="#LINK">
  61. <span class="hidden-sm-down" style="font-size: 11px; color: #FF0000;"><strong>Gallery</strong></span><span class="hidden-md-up"><i class="fas fa-image" style="color: #FF0000;"></i></span></a>
  62. </li>
  63. </ul>
  64. </div>
  65. <!--- END LINKS/PILLS TAB --->
  66.  
  67. <br>
  68.  
  69. <div class="tab-content mb-2">
  70.  
  71. <!--- START OF TABLE --->
  72. <div class="pull-right col-xl-4 col-lg-6 col-md-6 ml-md-3 mb-3 p-0">
  73. <div class="card" style="white-space: normal;">
  74. <div class="card-header card-warning" style="background-color: #FFD800; background: #FFD800; border-radius: 0px; border: none;">
  75. <h3 class="text-center font-weight-bold mb-0" style="color: #FF0000;">Name McName</h3>
  76. </div>
  77.  
  78. <ul class="nav nav-tabs justify-content-center row no-gutters text-center" style="display: inline-flex;">
  79. <li class="nav-item">
  80. <a data-toggle="tab" class="nav-link p-2 active" data-toggle="tab" href="#a-post" style="background:transparent;">Post-Timeskip</a>
  81. </li>
  82. <li class="nav-item">
  83. <a data-toggle="tab" class="nav-link p-2" data-toggle="tab" href="#a-pre" style="background:transparent;">Pre-Timeskip</a>
  84. </li>
  85.  
  86. <!--- NOTE: If you want to add more images, copy from "<li>"" to to "</li>" and make sure that you do the same with the divs below --->
  87.  
  88. </ul>
  89.  
  90. <div class="tab-content text-center mb-2">
  91. <div class="tab-pane fade show active" id="a-post">
  92. <a href="%5BLINK%5D">
  93. <img class="card-img-top w-75" src="https://static.wikia.nocookie.net/onepiece/images/6/6d/Monkey_D._Luffy_Anime_Post_Timeskip_Infobox.png" alt="111.png">
  94. </a>
  95. </div>
  96. <div class="tab-pane fade" id="a-pre">
  97. <a href="%5BLINK%5D"><img class="card-img-top w-75" src="https://static.wikia.nocookie.net/onepiece/images/e/e5/Monkey_D._Luffy_Anime_Pre_Timeskip_Infobox.png" alt="112.png">
  98. </a>
  99. </div>
  100.  
  101. <!--- COPY OF IMAGE LINK FROM HERE
  102. <div class="tab-pane fade" id="link id">
  103. <a href="%5BLINK%5D"><img class="card-img-top w-75" src="https://i.imgur.com/PEkr7nq.png" alt="112.png">
  104. </a>
  105. </div>
  106. TO HERE AND REMOVE THE "< ! --- --- />" FOR CODE TO ACTIVATE --->
  107.  
  108.  
  109. </div>
  110.  
  111. <div class="card-header card-primary card-warning text-center font-weight-bold p-0" style="background-color: #FFD800; color: #3A3A3A; border:0px solid #AAAAAA;">
  112. <h6 class="text-center font-weight-bold mb-0" style="color: #FF0000; height: 27px; padding-top: 5px;">Biographical Information<a href="#heading2" data-toggle="collapse" class="collapsed" aria-expanded="false"><i class="fa-lg fas fa-angle-down float-right pr-2 ml-0" style="color: #FF0000;"></i></a></h6>
  113. </div>
  114. <div id="heading2" class="collapse show">
  115. <table class="w-auto" style="border:1px;">
  116. <tbody>
  117. <tr>
  118. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  119. <span style="color:#000; font-size: 10pt;"><strong>Japanese Name:</strong></span>
  120. </td>
  121. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%;">
  122. <span style="color:#3A3A3A; font-size: 10pt;">This is a test</span>
  123. </td>
  124. </tr>
  125. <tr>
  126. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  127. <span style="color:#000; font-size: 10pt;"><strong>Romanized Name:</strong></span>
  128. </td>
  129. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%; word-break: break-all;">
  130. <span style="color:#3A3A3A; font-size: 10pt;"><em>This is a test</em></span>
  131. </td>
  132. </tr>
  133. <tr>
  134. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  135. <span style="color:#000; font-size: 10pt;"><strong>Official English Name:</strong></span>
  136. </td>
  137. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%; word-break: break-all;">
  138. <span style="color:#3A3A3A; font-size: 10pt;">This is a test</span>
  139. </td>
  140. </tr>
  141. <tr>
  142. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  143. <span style="color:#000; font-size: 10pt;"><strong>Debut:</strong></span>
  144. </td>
  145. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%; word-break: break-all;">
  146. <span style="color:#3A3A3A; font-size: 10pt;">This is a test</span>
  147. </td>
  148. </tr>
  149. <tr>
  150. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  151. <span style="color:#000; font-size: 10pt;"><strong>Affiliations:</strong></span>
  152. </td>
  153. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%; word-break: break-all;">
  154. <span style="color:#3A3A3A; font-size: 10pt;"><a href="">This is a test</a>;</span>
  155. <br>
  156. <span style="color:#3A3A3A; font-size: 10pt;"><a href="#LINK">This is a test</a>;</span>
  157. </td>
  158. </tr>
  159. <tr>
  160. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  161. <span style="color:#000; font-size: 10pt;"><strong>Occupation:</strong></span>
  162. </td>
  163. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%; word-break: break-all;">
  164. <span style="color:#3A3A3A; font-size: 10pt;">This is a test</span>
  165. </td>
  166. </tr>
  167. <tr>
  168. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  169. <span style="color:#000; font-size: 10pt;"><strong>Residence:</strong></span>
  170. </td>
  171. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%; word-break: break-all;">
  172. <span style="color:#3A3A3A; font-size: 10pt;">This is a test</span>
  173. </td>
  174. </tr>
  175. <tr>
  176. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  177. <span style="color:#000; font-size: 10pt;"><strong>Alias:</strong></span>
  178. </td>
  179. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%;">
  180. <span style="color:#3A3A3A; font-size: 10pt;">English Name (Japanese name <em>Romanized</em>, Another possible translation)</span>
  181. </td>
  182. </tr>
  183. <tr>
  184. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  185. <span style="color:#000; font-size: 10pt;"><strong>Epithet:</strong></span>
  186. </td>
  187. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%;">
  188. <span style="color:#3A3A3A; font-size: 10pt;">English Name (Japanese name <em>Romanized</em>, Another translation)</span>
  189. </td>
  190. </tr>
  191. <tr>
  192. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  193. <span style="color:#000; font-size: 10pt;"><strong>Status:</strong></span>
  194. </td>
  195. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%; word-break: break-all;">
  196. <span style="color:#3A3A3A; font-size: 10pt;">This is a test</span>
  197. </td>
  198. </tr>
  199. <tr>
  200. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  201. <span style="color:#000; font-size: 10pt;"><strong>Age:</strong></span>
  202. </td>
  203. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%; word-break: break-all;">
  204. <span style="color:#3A3A3A; font-size: 10pt;">This is a test (debut)</span>
  205. <br>
  206. <span style="color:#3A3A3A; font-size: 10pt;">This is a test (post-timeskip)</span>
  207. </td>
  208. </tr>
  209. <tr>
  210. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  211. <span style="color:#000; font-size: 10pt;"><strong>Birthday:</strong></span>
  212. </td>
  213. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%; word-break: break-all;">
  214. <span style="color:#3A3A3A; font-size: 10pt;">This is a test</span>
  215. </td>
  216. </tr>
  217. <tr>
  218. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  219. <span style="color:#000; font-size: 10pt;"><strong>Height:</strong></span>
  220. </td>
  221. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%; word-break: break-all;">
  222. <span style="color:#3A3A3A; font-size: 10pt;">This is a test</span>
  223. </td>
  224. </tr>
  225. <tr>
  226. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  227. <span style="color:#000; font-size: 10pt;"><strong>Blood Type:</strong></span>
  228. </td>
  229. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%; word-break: break-all;">
  230. <span style="color:#3A3A3A; font-size: 10pt;">This is a test</span>
  231. </td>
  232. </tr>
  233. <tr>
  234. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  235. <span style="color:#000; font-size: 10pt;"><strong>Japanese VA:</strong></span>
  236. </td>
  237. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%; word-break: break-all;">
  238. <span style="color:#3A3A3A; font-size: 10pt;"><a href="">This is a test</a></span>
  239. </td>
  240. </tr>
  241. <tr>
  242. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  243. <span style="color:#000; font-size: 10pt;"><strong>Funi English VA:</strong></span>
  244. </td>
  245. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%; word-break: break-all;">
  246. <span style="color:#3A3A3A; font-size: 10pt;"><a href="">This is a test</a></span>
  247. </td>
  248. </tr>
  249.  
  250. <!--- Start copying here to add more section ---->
  251. <tr>
  252. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  253. <span style="color:#000; font-size: 10pt;"><strong>Funi English VA:</strong></span>
  254. </td>
  255. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%; word-break: break-all;">
  256. <span style="color:#3A3A3A; font-size: 10pt;"><a href="">This is a test</a></span>
  257. </td>
  258. </tr>
  259. <!--- End copying here to add more section ---->
  260. </tbody>
  261. </table>
  262.  
  263. <!--- REMOVE this section FROM HERE if your OC don't have DF --->
  264.  
  265. <div class="card-header card-primary card-warning text-center font-weight-bold p-0" style="background-color: #FFD800; color: #3A3A3A; border:0px solid #AAAAAA;">
  266. <h6 class="text-center font-weight-bold mb-0" style="color: #FF0000; height: 27px; padding-top: 5px;">Devil Fruit<a href="#df-info" data-toggle="collapse" class="collapsed" aria-expanded="false"><i class="fa-lg fas fa-angle-down float-right pr-2 ml-0" style="color: #FF0000;"></i></a></h6>
  267. </div>
  268. <div id="df-info" class="collapse show">
  269. <table class="w-auto" style="border:1px;">
  270. <tbody>
  271. <tr>
  272. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  273. <span style="color:#000; font-size: 10pt;"><strong>Japanese Name:</strong></span>
  274. </td>
  275. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%;">
  276. <span style="color:#3A3A3A; font-size: 10pt;"><a href="">This is a test</a></span>
  277. </td>
  278. </tr>
  279. <tr>
  280. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  281. <span style="color:#000; font-size: 10pt;"><strong>English Name:</strong></span>
  282. </td>
  283. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%;">
  284. <span style="color:#3A3A3A; font-size: 10pt;">This is a test</span>
  285. </td>
  286. </tr>
  287. <tr>
  288. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  289. <span style="color:#000; font-size: 10pt;"><strong>Meaning:</strong></span>
  290. </td>
  291. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%;">
  292. <span style="color:#3A3A3A; font-size: 10pt;">This is a test</span>
  293. </td>
  294. </tr>
  295. <tr>
  296. <td style="width:160px; background-color: #fff; vertical-align:top; border-bottom:1pt solid rgb(194,194,194);">
  297. <span style="color:#000; font-size: 10pt;"><strong>Type</strong></span>
  298. </td>
  299. <td style="background-color: #FFF; border-bottom:1pt solid rgb(194,194,194); width:65%;">
  300. <span style="color:#3A3A3A; font-size: 10pt;"><a href="">This is a test</a></span>
  301. </td>
  302. </tr>
  303. </tbody>
  304. </table>
  305. </div>
  306.  
  307. <!--- TO HERE --->
  308. </div>
  309. </div>
  310. </div>
  311.  
  312.  
  313. <div class="tab-pane fade show active" id="Introduction">
  314.  
  315. <!--- GENERAL --->
  316.  
  317. <div class="card border-0 p-3" style="border-radius:1em; background-color: transparent; margin-bottom: 2em;"><p class="text-center" style="letter-spacing:1px; color: #3A3A3A;">
  318. <i class="fal fa-quote-left fa-fw mr-1 pull-left"></i><i>
  319. Write a quote or tagline here
  320. </i><i class="fal fa-quote-right fa-fw ml-1 pull-right"></i></p>
  321. <p class="text-right pull-right" style="letter-spacing:1px; color: #3A3A3A;">— <em>Character Name, Chapter/Episode xx.</em></p></div>
  322.  
  323.  
  324. <div style="font-size: 11pt; color: #3A3A3A;">
  325. <p>
  326. <span><strong>Name McName</strong> (Japanese Name, <em>Romanized Name</em>) is a describe your OC's characteristics here.</span>
  327. </p>
  328. <p>
  329. Why not add your OC's role in arcs, the crew, or anywhere else?
  330. </p>
  331. </div>
  332.  
  333. <!--- TABLE OF CONTENT --->
  334.  
  335. <div class="col" style="max-width: 200pt; background:transparent; border:1pt solid #fff; padding:5pt; text-align:left; margin:1em 0; border-collapse:separate; color: #3a3a3a; border-radius:1.5ex; overflow:hidden;">
  336. <div class="card card-outline-danger acards" style="background:transparent;border:transparent;">
  337. <p style="text-align:left; font-size: 11pt; color: #3A3A3A;">
  338. Contents [<a href="#contents" data-toggle="collapse" data-target="#contents" aria-expanded="false" title="show">show</a>]
  339. </p>
  340. <div id="contents" class="collapse show active" style="font-size: 11pt;">
  341. <ul style="margin: 0; list-style-type:square; color: #3A3A3A;">
  342. <li class="toclevel-1">
  343. <a href="#Appearance">Appearance</a>
  344. <ol class="m-0">
  345. <li>Before Timeskip</li>
  346. <li>After Timeskip</li>
  347. </ol>
  348. </li>
  349. <li class="toclevel-1">
  350. <a href="#Personality">Personality</a>
  351. </li>
  352. <li class="toclevel-1">
  353. <a href="#Trivia">Trivia</a>
  354. </li>
  355. </ul>
  356. </div>
  357. </div>
  358. </div>
  359.  
  360. <!--- END TOC --->
  361.  
  362. <!--- APPEARANCE --->
  363.  
  364. <div>
  365. <h2 style="border-bottom:1pt solid #CCCCCC;padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  366. <span class="mw-headline" id="Appearance" style="color: #3A3A3A;"><i class="fal fa-male fa-fw mx-2"></i>Appearance</span>
  367. </h2>
  368. <div class="float-left ml-sm-2 d-block p-1 mx-2" style="background-color: transparent; border:0px solid #fff; max-width: 300px;"><img src="https://static.wikia.nocookie.net/onepiece/images/2/2e/Luffy_Heart_of_Gold_2.png"><br><span style="font-size: small; text-align: center; color: #8A8A8A;">describe your picture</span></div>
  369. <div style="font-size: 11pt; color: #3A3A3A;">
  370. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget est lorem ipsum dolor sit amet consectetur. Ut sem nulla pharetra diam. Congue mauris rhoncus aenean vel elit scelerisque. Sit amet justo donec enim diam vulputate. Nibh tellus molestie nunc non blandit massa enim nec dui. Lectus urna duis convallis convallis. Laoreet sit amet cursus sit amet dictum sit amet. Orci ac auctor augue mauris. Sed elementum tempus egestas sed sed. Felis eget velit aliquet sagittis id consectetur purus ut. Montes nascetur ridiculus mus mauris vitae. Enim sit amet venenatis urna cursus eget. Ultrices dui sapien eget mi proin sed libero. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Volutpat lacus laoreet non curabitur gravida arcu ac. Felis bibendum ut tristique et. Non curabitur gravida arcu ac tortor dignissim.</p>
  371.  
  372. <p>Nisl purus in mollis nunc sed id semper risus in. Eget felis eget nunc lobortis mattis aliquam. Turpis nunc eget lorem dolor sed. Morbi non arcu risus quis varius quam. Fermentum dui faucibus in ornare quam viverra orci sagittis. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Sed vulputate mi sit amet mauris commodo. Donec ac odio tempor orci. Non consectetur a erat nam at. Non arcu risus quis varius quam quisque. Vestibulum mattis ullamcorper velit sed ullamcorper. Vel turpis nunc eget lorem dolor sed viverra. Pharetra sit amet aliquam id diam maecenas ultricies mi. Id semper risus in hendrerit gravida. Mauris vitae ultricies leo integer malesuada nunc vel risus. Diam in arcu cursus euismod quis viverra nibh cras. In est ante in nibh mauris. Volutpat commodo sed egestas egestas fringilla. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor.</p>
  373.  
  374. <p>Vestibulum sed arcu non odio euismod lacinia at quis. Nec sagittis aliquam malesuada bibendum. In nibh mauris cursus mattis molestie a iaculis. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Mattis vulputate enim nulla aliquet porttitor lacus. Accumsan tortor posuere ac ut consequat. Sollicitudin aliquam ultrices sagittis orci a scelerisque. Sit amet porttitor eget dolor morbi non. Elit pellentesque habitant morbi tristique. Mi sit amet mauris commodo quis imperdiet massa tincidunt. At consectetur lorem donec massa sapien faucibus et molestie ac. At tellus at urna condimentum mattis pellentesque id nibh.</p>
  375.  
  376. <p>Ullamcorper a lacus vestibulum sed arcu non odio. Ipsum a arcu cursus vitae congue mauris rhoncus aenean vel. Semper eget duis at tellus. Nunc congue nisi vitae suscipit tellus mauris a diam. Ac felis donec et odio. Arcu dui vivamus arcu felis bibendum ut. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Mi quis hendrerit dolor magna eget est lorem ipsum. Faucibus et molestie ac feugiat sed lectus vestibulum mattis. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Malesuada fames ac turpis egestas maecenas. Sodales neque sodales ut etiam. Gravida neque convallis a cras semper auctor. Amet nisl suscipit adipiscing bibendum est ultricies integer. Quis commodo odio aenean sed adipiscing diam. Facilisis volutpat est velit egestas dui. Viverra maecenas accumsan lacus vel facilisis volutpat. Sagittis vitae et leo duis ut.</p>
  377. </div>
  378.  
  379. </div>
  380. <!--- END OF APPEARANCE --->
  381.  
  382. <!--- PERSONALITY --->
  383.  
  384. <h2 style="border-bottom:1pt solid #CCCCCC; padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  385. <span class="mw-headline" id="Personality" style="color: #3A3A3A;"><i class="fal fa-comments fa-fw mx-2"></i>Personality</span>
  386. </h2>
  387.  
  388. <div style="font-size: 11pt; color: #3A3A3A;">
  389. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget est lorem ipsum dolor sit amet consectetur. Ut sem nulla pharetra diam. Congue mauris rhoncus aenean vel elit scelerisque. Sit amet justo donec enim diam vulputate. Nibh tellus molestie nunc non blandit massa enim nec dui. Lectus urna duis convallis convallis. Laoreet sit amet cursus sit amet dictum sit amet. Orci ac auctor augue mauris. Sed elementum tempus egestas sed sed. Felis eget velit aliquet sagittis id consectetur purus ut. Montes nascetur ridiculus mus mauris vitae. Enim sit amet venenatis urna cursus eget. Ultrices dui sapien eget mi proin sed libero. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Volutpat lacus laoreet non curabitur gravida arcu ac. Felis bibendum ut tristique et. Non curabitur gravida arcu ac tortor dignissim.</p>
  390.  
  391. <p>Nisl purus in mollis nunc sed id semper risus in. Eget felis eget nunc lobortis mattis aliquam. Turpis nunc eget lorem dolor sed. Morbi non arcu risus quis varius quam. Fermentum dui faucibus in ornare quam viverra orci sagittis. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Sed vulputate mi sit amet mauris commodo. Donec ac odio tempor orci. Non consectetur a erat nam at. Non arcu risus quis varius quam quisque. Vestibulum mattis ullamcorper velit sed ullamcorper. Vel turpis nunc eget lorem dolor sed viverra. Pharetra sit amet aliquam id diam maecenas ultricies mi. Id semper risus in hendrerit gravida. Mauris vitae ultricies leo integer malesuada nunc vel risus. Diam in arcu cursus euismod quis viverra nibh cras. In est ante in nibh mauris. Volutpat commodo sed egestas egestas fringilla. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor.</p>
  392.  
  393. <p>Vestibulum sed arcu non odio euismod lacinia at quis. Nec sagittis aliquam malesuada bibendum. In nibh mauris cursus mattis molestie a iaculis. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Mattis vulputate enim nulla aliquet porttitor lacus. Accumsan tortor posuere ac ut consequat. Sollicitudin aliquam ultrices sagittis orci a scelerisque. Sit amet porttitor eget dolor morbi non. Elit pellentesque habitant morbi tristique. Mi sit amet mauris commodo quis imperdiet massa tincidunt. At consectetur lorem donec massa sapien faucibus et molestie ac. At tellus at urna condimentum mattis pellentesque id nibh.</p>
  394.  
  395. <p>Ullamcorper a lacus vestibulum sed arcu non odio. Ipsum a arcu cursus vitae congue mauris rhoncus aenean vel. Semper eget duis at tellus. Nunc congue nisi vitae suscipit tellus mauris a diam. Ac felis donec et odio. Arcu dui vivamus arcu felis bibendum ut. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Mi quis hendrerit dolor magna eget est lorem ipsum. Faucibus et molestie ac feugiat sed lectus vestibulum mattis. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Malesuada fames ac turpis egestas maecenas. Sodales neque sodales ut etiam. Gravida neque convallis a cras semper auctor. Amet nisl suscipit adipiscing bibendum est ultricies integer. Quis commodo odio aenean sed adipiscing diam. Facilisis volutpat est velit egestas dui. Viverra maecenas accumsan lacus vel facilisis volutpat. Sagittis vitae et leo duis ut.</p>
  396. </div>
  397.  
  398. <br>
  399.  
  400. <div class="card mb-md-4" style="background-color: transparent; padding: 0em 5em;">
  401. <div class="mb-1 mt-4">
  402. <div class="row no-gutters mb-1" style="font-size: 16pt; color: #3A3A3A;"><div class="col-auto">
  403. Character Stats
  404. </div><div class="col mx-2 my-auto"><hr class="my-0" style="background-color: #3A3A3A;"></div>
  405. </div>
  406. <div style="font-size: 11pt; color: #3A3A3A;">
  407. <div class="row">
  408. <div class="col-md-6">
  409. <div class="justify-content-between">
  410. <span>Empathy</span>
  411. <span><i class="fas fa-circle fa-xs"></i>
  412. <i class="fas fa-circle fa-xs"></i>
  413. <i class="fas fa-circle fa-xs"></i>
  414. <i class="fas fa-circle fa-xs"></i>
  415. <i class="far fa-circle fa-xs"></i>
  416. <i class="far fa-circle fa-xs"></i></span></div>
  417. <hr class="my-1 mb-0 mt-0" style="width:100%;">
  418. <div class="justify-content-between">
  419. <span>Confidence</span>
  420. <span><i class="fas fa-circle fa-xs"></i>
  421. <i class="fas fa-circle fa-xs"></i>
  422. <i class="fas fa-circle fa-xs"></i>
  423. <i class="fas fa-circle fa-xs"></i>
  424. <i class="fas fa-circle fa-xs"></i>
  425. <i class="far fa-circle fa-xs"></i></span></div>
  426. <hr class="my-1 mb-0 mt-0" style="width:100%;">
  427. <div class="justify-content-between">
  428. <span>Intellect</span>
  429. <span><i class="fas fa-circle fa-xs"></i>
  430. <i class="fas fa-circle fa-xs"></i>
  431. <i class="fas fa-circle fa-xs"></i>
  432. <i class="fas fa-circle fa-xs"></i>
  433. <i class="fas fa-circle fa-xs"></i>
  434. <i class="far fa-circle fa-xs"></i></span></div>
  435. <hr class="my-1 mb-0 mt-0" style="width:100%;">
  436. <div class="justify-content-between">
  437. <span>Patience</span>
  438. <span><i class="fas fa-circle fa-xs"></i>
  439. <i class="fas fa-circle fa-xs"></i>
  440. <i class="fas fa-circle fa-xs"></i>
  441. <i class="fas fa-circle fa-xs"></i>
  442. <i class="fas fa-circle fa-xs"></i>
  443. <i class="far fa-circle fa-xs"></i></span></div>
  444. <hr class="my-1 mb-0 mt-0" style="width:100%;">
  445. </div>
  446. <div class="col-md-6">
  447. <div class="justify-content-between">
  448. <span>Dedication</span>
  449. <span><i class="fas fa-circle fa-xs"></i>
  450. <i class="fas fa-circle fa-xs"></i>
  451. <i class="fas fa-circle fa-xs"></i>
  452. <i class="fas fa-circle fa-xs"></i>
  453. <i class="fas fa-circle fa-xs"></i>
  454. <i class="far fa-circle fa-xs"></i></span></div>
  455. <hr class="my-1 mb-0 mt-0" style="width:100%;">
  456. <div class="justify-content-between">
  457. <span>Humour</span>
  458. <span><i class="fas fa-circle fa-xs"></i>
  459. <i class="fas fa-circle fa-xs"></i>
  460. <i class="fas fa-circle fa-xs"></i>
  461. <i class="far fa-circle fa-xs"></i>
  462. <i class="far fa-circle fa-xs"></i>
  463. <i class="far fa-circle fa-xs"></i></span></div>
  464. <hr class="my-1 mb-0 mt-0" style="width:100%;">
  465. <div class="justify-content-between">
  466. <span>Charisma</span>
  467. <span><i class="fas fa-circle fa-xs"></i>
  468. <i class="fas fa-circle fa-xs"></i>
  469. <i class="fas fa-circle fa-xs"></i>
  470. <i class="fas fa-circle fa-xs"></i>
  471. <i class="far fa-circle fa-xs"></i>
  472. <i class="far fa-circle fa-xs"></i></span></div>
  473. <hr class="my-1 mb-0 mt-0" style="width:100%;">
  474. <div class="justify-content-between">
  475. <span>Perception</span>
  476. <span><i class="fas fa-circle fa-xs"></i>
  477. <i class="fas fa-circle fa-xs"></i>
  478. <i class="fas fa-circle fa-xs"></i>
  479. <i class="fas fa-circle fa-xs"></i>
  480. <i class="fas fa-circle fa-xs"></i>
  481. <i class="far fa-circle fa-xs"></i></span></div>
  482. <hr class="my-1 mb-0 mt-0" style="width:100%;">
  483. </div>
  484. </div>
  485. </div>
  486. </div>
  487. <div class="row no-gutters mb-1 mt-1">
  488. <div class="col-sm">
  489. <div class="row no-gutters" style="font-size: 16pt; color: #3A3A3A;"><div class="col-auto">
  490. Likes
  491. </div><div class="col mx-2 my-auto"><hr class="my-0" style="background-color: #3A3A3A;"></div>
  492. <div class="col-auto px-1 my-auto"><i class="fal fa-check"></i>
  493. </div></div>
  494. <ul class="my-1 mb-2 mb-md-0" style="color: #3A3A3A; list-style: square; font-size: 11pt;">
  495. <li>content</li>
  496. <li>content</li>
  497. <li>content</li>
  498. <li>content</li>
  499. </ul>
  500. </div>
  501. <div class="col-auto p-2 hidden-xs-down"></div>
  502. <div class="col-sm">
  503. <div class="row no-gutters" style="font-size: 16pt; color: #3A3A3A;"><div class="col-auto">
  504. Dislikes
  505. </div><div class="col mx-2 my-auto"><hr class="my-0" style="background-color: #3A3A3A;"></div>
  506. <div class="col-auto px-1 my-auto"><i class="fal fa-times"></i>
  507. </div></div>
  508. <ul class="my-1" style="color: #3A3A3A; list-style: square; font-size: 11pt;">
  509. <li>content</li>
  510. <li>content</li>
  511. <li>content</li>
  512. <li>content</li>
  513. </ul>
  514. </div>
  515. </div>
  516. </div>
  517.  
  518.  
  519. <!--- END PERSONALITY --->
  520.  
  521. <!--- TRIVIA --->
  522. <h2 style="border-bottom:1pt solid #CCCCCC;padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  523. <span class="mw-headline" id="Trivia" style="color: #3A3A3A;"><i class="fal fa-question-circle fa-fw mx-2"></i>Trivia</span>
  524. </h2>
  525. <div class="float-right mx-2 d-block p-1 mx-2" style="background-color: transparent; border:0px solid #fff; max-width: 100%;"><img src="https://static.wikia.nocookie.net/onepiece/images/7/72/Luffy_G-8_Arc_Outfit.png"><br><span style="font-size: small; text-align: center; color: #8A8A8A;">You can add more images!</span></div>
  526. <div style="padding: 1px; margin-bottom: 5px;">
  527. <ul style="margin: 0; list-style-type:square; color: #3A3A3A;">
  528. <li>Add a trivia about your OC here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas egestas fringilla phasellus faucibus scelerisque. Tellus at urna condimentum mattis pellentesque id nibh tortor id. Ipsum dolor sit amet consectetur adipiscing elit duis. Nunc sed id semper risus in hendrerit gravida rutrum quisque. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. At elementum eu facilisis sed odio morbi quis. Nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Blandit volutpat maecenas volutpat blandit aliquam. Congue eu consequat ac felis donec. Enim nec dui nunc mattis. Vitae congue eu consequat ac felis donec et odio pellentesque. Condimentum vitae sapien pellentesque habitant.</li>
  529. <li>Add a trivia about your OC here! A condimentum vitae sapien pellentesque habitant morbi. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Eu ultrices vitae auctor eu augue ut lectus arcu. Eu nisl nunc mi ipsum faucibus vitae. Rhoncus urna neque viverra justo nec ultrices dui sapien. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Elit sed vulputate mi sit amet mauris commodo quis. Laoreet sit amet cursus sit amet. Tincidunt tortor aliquam nulla facilisi. In tellus integer feugiat scelerisque varius morbi enim nunc. Nibh cras pulvinar mattis nunc sed blandit libero volutpat. Eros donec ac odio tempor orci. Auctor elit sed vulputate mi sit amet mauris commodo. Et malesuada fames ac turpis egestas. Mauris rhoncus aenean vel elit scelerisque. Erat velit scelerisque in dictum non consectetur a erat nam. Proin nibh nisl condimentum id venenatis.</li>
  530. <li>Add a trivia about your OC here! </li>
  531. <li>Odio morbi quis commodo odio aenean sed adipiscing diam donec. Sem nulla pharetra diam sit amet nisl. Aliquam id diam maecenas ultricies mi eget mauris. Duis ut diam quam nulla porttitor massa id. Ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum. In metus vulputate eu scelerisque felis imperdiet. Fermentum iaculis eu non diam phasellus vestibulum lorem sed risus. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Orci porta non pulvinar neque laoreet. Malesuada fames ac turpis egestas integer eget aliquet. Sit amet porttitor eget dolor. Auctor augue mauris augue neque gravida in fermentum et sollicitudin. Sed felis eget velit aliquet. Sit amet nisl purus in mollis nunc sed. Iaculis urna id volutpat lacus.</li>
  532. </ul>
  533. </div>
  534.  
  535. <!--- END TRIVIA --->
  536.  
  537. <hr class="mt-4">
  538. <!--- Author's Notes --->
  539. <div class="col" style="background: transparent; border:1pt solid #3A3A3A; padding:5pt; text-align:left; margin:1em 0; border-collapse:separate; color:black; border-radius: 0ex;">
  540. <div class="card card-outline-danger acards" style="background:transparent; border:transparent;">
  541. <p style="text-align:left;font-size: 11pt; color: #3A3A3A;">Author's Notes [<a href="#notes" data-toggle="collapse" data-target="#notes" aria-expanded="false" title="show">show</a>]
  542. </p>
  543. <div id="notes" class="collapse">
  544. <ul style="margin: 0; list-style-type:square; color: #3A3A3A;">
  545. <li>Why are we still here, just to suffer—</li>
  546. </ul>
  547. </div>
  548. </div>
  549. </div>
  550.  
  551.  
  552. </div>
  553. <!--- END OF INTRO --->
  554.  
  555.  
  556. <div class="tab-pane fade" id="Powers">
  557.  
  558. <!--- TABLE OF CONTENT --->
  559.  
  560. <div class="col" style="max-width: 200pt; background:transparent; border:1pt solid #3A3A3A; padding:5pt; text-align:left; margin:1em 0; border-collapse:separate; color:#3a3a3a; border-radius:1.5ex; overflow:hidden;">
  561. <div class="card card-outline-danger acards" style="background:transparent;border:transparent;">
  562. <p style="text-align:left; font-size: 11pt; color: #3A3A3A;">
  563. Contents [<a href="#contents_abi" data-toggle="collapse" data-target="#contents_abi" aria-expanded="false" title="show">show</a>]
  564. </p>
  565. <div id="contents_abi" class="collapse show active" style="font-size: 11pt;">
  566. <ul style="margin: 0; list-style-type:square; color: #3A3A3A;">
  567. <li class="toclevel-1">
  568. <a href="#Overview">Overview</a>
  569. </li>
  570. <li class="toclevel-1">
  571. <a href="#Stats">Stats</a>
  572. </li>
  573. <li class="toclevel-1">
  574. <a href="#Physical">Physical Abilities</a>
  575. </li>
  576. <li class="toclevel-1">
  577. <a href="#Skill_1">Skill 1</a>
  578. </li>
  579. <li class="toclevel-1">
  580. <a href="#Skill_2">Skill 2</a>
  581. </li>
  582. <li class="toclevel-1">
  583. <a href="#Weapon">Weapons</a>
  584. <ol class="m-0">
  585. <li><a href="Weapon_1">Weapon 1</a></li>
  586. <li><a href="#Weapon_2">Weapon 2</a></li>
  587. </ol>
  588. </li>
  589. <li class="toclevel-1">
  590. <a href="#Haki">Haki</a>
  591. <ol class="m-0">
  592. <li><a href="#Haou_Haki">Haoushoku Haki</a></li>
  593. <li><a href="#Kenbun_Haki">Kenbunshoku Haki</a></li>
  594. <li><a href="#Buso_Haki">Bushoshoku Haki</a></li>
  595. </ol>
  596. </li>
  597. <li class="toclevel-1">
  598. <a href="#Other_Tech">Other Techniques</a>
  599. </li>
  600. <li class="toclevel-1">
  601. <a href="#Abi_Trivia">Trivia</a>
  602. </li>
  603. </ul>
  604. </div>
  605. </div>
  606. </div>
  607.  
  608. <!--- END TOC --->
  609.  
  610. <!--- OVERVIEW --->
  611. <h2 style="border-bottom:1pt solid #CCCCCC; color: #3A3A3A; padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  612. <span class="mw-headline" id="Overview"><i class="fal fa-info-circle fa-fw mx-2"></i>Overview</span>
  613. </h2>
  614. <div class="mb-4" style="font-size: 11pt; color: #3A3A3A;">
  615. <p>
  616. <span><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Praesent placerat elit et sapien varius, ut facilisis mi porta. Mauris ligula tellus, lacinia ac interdum ut, consequat id odio. In in semper elit, sed iaculis ligula. Nulla id dapibus felis. Praesent eget commodo dui. Vivamus nec lobortis odio. Mauris eu euismod odio, quis tincidunt mauris. Nunc in semper ipsum, id feugiat augue. Ut tincidunt, enim non auctor lacinia, lorem ex posuere mi, eget euismod nibh sem vel velit. Pellentesque sed arcu magna.</span>
  617. </p>
  618. <p>
  619. <span>She also owns several cursed tools that she uses to her advantage, often hidden under her uniform or in her wheelchair. She's able to singlehandedly save Yuji and Choso when they were overwhelmed by a large amount of Cursed Spirits closely after the Shibuya Incident. Even if Yuji and Choso leaves her on her own, she can still survive without the help of anyone.</span>
  620. </p>
  621. <p>
  622. <span>Donec et bibendum arcu. Duis in volutpat tellus, eu tincidunt lectus. Proin tempor enim sed porttitor maximus. Praesent sodales in sapien id vestibulum. Proin vitae nibh consequat, hendrerit purus sit amet, ultricies odio. Ut sit amet quam ut eros facilisis tincidunt. Donec a lacinia mauris. Ut vitae placerat risus.</span>
  623. </p>
  624. <p>
  625. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  626. </p>
  627. <p>
  628. <span>Donec et bibendum arcu. Duis in volutpat tellus, eu tincidunt lectus. Proin tempor enim sed porttitor maximus. Praesent sodales in sapien id vestibulum. Proin vitae nibh consequat, hendrerit purus sit amet, ultricies odio. Ut sit amet quam ut eros facilisis tincidunt. Donec a lacinia mauris. Ut vitae placerat risus.</span>
  629. </p>
  630. <p>
  631. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  632. </p>
  633. </div>
  634.  
  635. <!--- END OF OVERVIEW --->
  636.  
  637. <!--- STATS --->
  638. <h2 style="border-bottom:1pt solid #CCCCCC; color: #3A3A3A; padding:5pt 0;text-align:left;font-size:20pt; margin-top: 30px; overflow:hidden;">
  639. <span class="mw-headline" id="Stats"><i class="fal fa-chart-bar fa-fw mx-2"></i>Stats</span>
  640. </h2>
  641. <div class="card mb-md-4" style="background-color: transparent; padding: 0em 5em;">
  642. <h3 style="color: #3A3A3A; padding:5pt 0; text-align:left;font-size:15pt; margin-top: 20px; overflow:hidden;">
  643. <span class="mw-headline" id="Physical_Stats">Physical Stats</span>
  644. </h3>
  645. <div style="font-size: 11pt; color: #3A3A3A;">
  646. <div class="row mb-3">
  647. <div class="col-6 mb-2">
  648. <b>Distraction</b> <span class="pull-right small hidden-sm-down">[ Not Applicable/Failed ]</span>
  649. <br>
  650. <div class="progress" style="height: 12px; background: #c9c9c9;">
  651. <div class="progress-bar" style="background: #FF0000; width: 0%;">
  652. </div>
  653. </div>
  654. </div>
  655. <div class="col-6 mb-2">
  656. <b>Intuition</b> <span class="pull-right small hidden-sm-down">[ Below Average ]</span>
  657. <br>
  658. <div class="progress" style="height: 12px; background: #c9c9c9;">
  659. <div class="progress-bar" style="background: #FF0000; width: 30%;">
  660. </div>
  661. </div>
  662. </div>
  663. <div class="col-6 mb-2">
  664. <b>Brute Strength</b> <span class="pull-right small hidden-sm-down">[ Fair ]</span>
  665. <br>
  666. <div class="progress" style="height: 12px; background: #c9c9c9;">
  667. <div class="progress-bar" style="background: #FF0000; width: 50%;">
  668. </div>
  669. </div>
  670. </div>
  671. <div class="col-6 mb-2">
  672. <b>Speed</b> <span class="pull-right small hidden-sm-down">[ Good ]</span>
  673. <br>
  674. <div class="progress" style="height: 12px; background: #c9c9c9;">
  675. <div class="progress-bar" style="background: #FF0000; width: 60%;">
  676. </div>
  677. </div>
  678. </div>
  679. <div class="col-6 mb-2">
  680. <b>Dexterity</b> <span class="pull-right small hidden-sm-down">[ Very Good ]</span>
  681. <br>
  682. <div class="progress" style="height: 12px; background: #c9c9c9;">
  683. <div class="progress-bar" style="background: #FF0000; width: 80%;">
  684. </div>
  685. </div>
  686. </div>
  687. <div class="col-6 mb-2">
  688. <b>Constitution</b> <span class="pull-right small hidden-sm-down">[ Excellent ]</span>
  689. <br>
  690. <div class="progress" style="height: 12px; background: #c9c9c9;">
  691. <div class="progress-bar" style="background: #FF0000; width: 90%;">
  692. </div>
  693. </div>
  694. </div>
  695. <div class="col-6 mb-2">
  696. <b>Offense</b> <span class="pull-right small hidden-sm-down">[ Elite ]</span>
  697. <br>
  698. <div class="progress" style="height: 12px; background: #c9c9c9;">
  699. <div class="progress-bar" style="background: #FF0000; width: 95%;">
  700. </div>
  701. </div>
  702. </div>
  703. <div class="col-6 mb-2">
  704. <b>Defense</b> <span class="pull-right small hidden-sm-down">[ Master ]</span>
  705. <br>
  706. <div class="progress" style="height: 12px; background: #c9c9c9;">
  707. <div class="progress-bar" style="background: #FF0000; width: 100%;">
  708. </div>
  709. </div>
  710. </div>
  711. <div class="col-6 mb-2">
  712. <b>Weapon</b> <span class="pull-right small hidden-sm-down">[ Elite ]</span>
  713. <br>
  714. <div class="progress" style="height: 12px; background: #c9c9c9;">
  715. <div class="progress-bar" style="background: #FF0000; width: 97%;">
  716. </div>
  717. </div>
  718. </div>
  719. <div class="col-6 mb-2">
  720. <b>Haki</b> <span class="pull-right small hidden-sm-down">[ Elite ]</span>
  721. <br>
  722. <div class="progress" style="height: 12px; background: #c9c9c9;">
  723. <div class="progress-bar" style="background: #FF0000; width: 98%;">
  724. </div>
  725. </div>
  726. </div>
  727. <div class="col-6 mb-2">
  728. <b>Hand-to-Hand</b> <span class="pull-right small hidden-sm-down">[ Very Good ]</span>
  729. <br>
  730. <div class="progress" style="height: 12px; background: #c9c9c9;">
  731. <div class="progress-bar" style="background: #FF0000; width: 80%;">
  732. </div>
  733. </div>
  734. </div>
  735. <div class="col-6 mb-2">
  736. <b>Devil Fruit</b> <span class="pull-right small hidden-sm-down">[ not applicable ]</span>
  737. <br>
  738. <div class="progress" style="height: 12px; background: #c9c9c9;">
  739. <div class="progress-bar" style="background: #FF0000; width: 0%;">
  740. </div>
  741. </div>
  742. </div>
  743. </div>
  744. </div>
  745. </div>
  746.  
  747. <!--- END OF STATS --->
  748.  
  749. <!---PHYSICAL ABILITIES --->
  750. <h2 style="border-bottom:1pt solid #CCCCCC; color: #3A3A3A; padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  751. <span class="mw-headline" id="Physical"><i class="fal fa-bolt fa-fw mx-2"></i>Physical Abilities</span>
  752. </h2>
  753. <div class="mb-4 p-1">
  754. <div style="font-size: 11pt; color: #3A3A3A; margin-bottom: 4em;">
  755. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget est lorem ipsum dolor sit amet consectetur. Ut sem nulla pharetra diam. Congue mauris rhoncus aenean vel elit scelerisque. Sit amet justo donec enim diam vulputate. Nibh tellus molestie nunc non blandit massa enim nec dui. Lectus urna duis convallis convallis. Laoreet sit amet cursus sit amet dictum sit amet. Orci ac auctor augue mauris. Sed elementum tempus egestas sed sed. Felis eget velit aliquet sagittis id consectetur purus ut. Montes nascetur ridiculus mus mauris vitae. Enim sit amet venenatis urna cursus eget. Ultrices dui sapien eget mi proin sed libero. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Volutpat lacus laoreet non curabitur gravida arcu ac. Felis bibendum ut tristique et. Non curabitur gravida arcu ac tortor dignissim.</p>
  756.  
  757. <p>Nisl purus in mollis nunc sed id semper risus in. Eget felis eget nunc lobortis mattis aliquam. Turpis nunc eget lorem dolor sed. Morbi non arcu risus quis varius quam. Fermentum dui faucibus in ornare quam viverra orci sagittis. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Sed vulputate mi sit amet mauris commodo. Donec ac odio tempor orci. Non consectetur a erat nam at. Non arcu risus quis varius quam quisque. Vestibulum mattis ullamcorper velit sed ullamcorper. Vel turpis nunc eget lorem dolor sed viverra. Pharetra sit amet aliquam id diam maecenas ultricies mi. Id semper risus in hendrerit gravida. Mauris vitae ultricies leo integer malesuada nunc vel risus. Diam in arcu cursus euismod quis viverra nibh cras. In est ante in nibh mauris. Volutpat commodo sed egestas egestas fringilla. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor.</p>
  758.  
  759. <p>Vestibulum sed arcu non odio euismod lacinia at quis. Nec sagittis aliquam malesuada bibendum. In nibh mauris cursus mattis molestie a iaculis. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Mattis vulputate enim nulla aliquet porttitor lacus. Accumsan tortor posuere ac ut consequat. Sollicitudin aliquam ultrices sagittis orci a scelerisque. Sit amet porttitor eget dolor morbi non. Elit pellentesque habitant morbi tristique. Mi sit amet mauris commodo quis imperdiet massa tincidunt. At consectetur lorem donec massa sapien faucibus et molestie ac. At tellus at urna condimentum mattis pellentesque id nibh.</p>
  760.  
  761. <p>Ullamcorper a lacus vestibulum sed arcu non odio. Ipsum a arcu cursus vitae congue mauris rhoncus aenean vel. Semper eget duis at tellus. Nunc congue nisi vitae suscipit tellus mauris a diam. Ac felis donec et odio. Arcu dui vivamus arcu felis bibendum ut. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Mi quis hendrerit dolor magna eget est lorem ipsum. Faucibus et molestie ac feugiat sed lectus vestibulum mattis. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Malesuada fames ac turpis egestas maecenas. Sodales neque sodales ut etiam. Gravida neque convallis a cras semper auctor. Amet nisl suscipit adipiscing bibendum est ultricies integer. Quis commodo odio aenean sed adipiscing diam. Facilisis volutpat est velit egestas dui. Viverra maecenas accumsan lacus vel facilisis volutpat. Sagittis vitae et leo duis ut.</p>
  762. </div>
  763. </div>
  764.  
  765. <!--- END OF PHYSICAL --->
  766.  
  767. <!--- SKILL MIMICRY --->
  768.  
  769. <h2 style="border-bottom:1pt solid #CCCCCC; color: #3A3A3A; padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  770. <span class="mw-headline" id="Skill_1"><i class="fal fa-male fa-fw mx-2"></i>Skill 1</span>
  771. </h2>
  772. <div class="mb-4 p-1">
  773. <div style="font-size: 11pt; color: #3A3A3A; margin-bottom: 4em;">
  774. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget est lorem ipsum dolor sit amet consectetur. Ut sem nulla pharetra diam. Congue mauris rhoncus aenean vel elit scelerisque. Sit amet justo donec enim diam vulputate. Nibh tellus molestie nunc non blandit massa enim nec dui. Lectus urna duis convallis convallis. Laoreet sit amet cursus sit amet dictum sit amet. Orci ac auctor augue mauris. Sed elementum tempus egestas sed sed. Felis eget velit aliquet sagittis id consectetur purus ut. Montes nascetur ridiculus mus mauris vitae. Enim sit amet venenatis urna cursus eget. Ultrices dui sapien eget mi proin sed libero. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Volutpat lacus laoreet non curabitur gravida arcu ac. Felis bibendum ut tristique et. Non curabitur gravida arcu ac tortor dignissim.</p>
  775.  
  776. <p>Nisl purus in mollis nunc sed id semper risus in. Eget felis eget nunc lobortis mattis aliquam. Turpis nunc eget lorem dolor sed. Morbi non arcu risus quis varius quam. Fermentum dui faucibus in ornare quam viverra orci sagittis. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Sed vulputate mi sit amet mauris commodo. Donec ac odio tempor orci. Non consectetur a erat nam at. Non arcu risus quis varius quam quisque. Vestibulum mattis ullamcorper velit sed ullamcorper. Vel turpis nunc eget lorem dolor sed viverra. Pharetra sit amet aliquam id diam maecenas ultricies mi. Id semper risus in hendrerit gravida. Mauris vitae ultricies leo integer malesuada nunc vel risus. Diam in arcu cursus euismod quis viverra nibh cras. In est ante in nibh mauris. Volutpat commodo sed egestas egestas fringilla. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor.</p>
  777.  
  778. <div class="float-left ml-sm-2 d-block p-1 mx-2" style="background-color: transparent; border:0px solid #fff; max-width: 300px;"><img src="https://www.metrorollerdoors.com.au/wp-content/uploads/2018/02/unavailable-image.jpg"><br><span style="font-size: small; text-align: center; color: #8A8A8A;">Description</span></div>
  779. <p>
  780. <span>Donec et bibendum arcu. Duis in volutpat tellus, eu tincidunt lectus. Proin tempor enim sed porttitor maximus. Praesent sodales in sapien id vestibulum. Proin vitae nibh consequat, hendrerit purus sit amet, ultricies odio. Ut sit amet quam ut eros facilisis tincidunt. Donec a lacinia mauris. Ut vitae placerat risus.</span>
  781. </p>
  782. <p>
  783. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  784. </p>
  785.  
  786. </div>
  787. </div>
  788. <!--- END OF SKILL MIMICRY --->
  789.  
  790. <!--- SKILL MIMICRY --->
  791.  
  792. <h2 class="mt-3 p-1"style="border-bottom:1pt solid #CCCCCC; color: #3A3A3A; padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  793. <span class="mw-headline" id="Skill_2"><i class="fal fa-male fa-fw mx-2"></i>Skill 2</span>
  794. </h2>
  795. <div class="mb-4 p-1">
  796. <div style="font-size: 11pt; color: #3A3A3A; margin-bottom: 4em;">
  797. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget est lorem ipsum dolor sit amet consectetur. Ut sem nulla pharetra diam. Congue mauris rhoncus aenean vel elit scelerisque. Sit amet justo donec enim diam vulputate. Nibh tellus molestie nunc non blandit massa enim nec dui. Lectus urna duis convallis convallis. Laoreet sit amet cursus sit amet dictum sit amet. Orci ac auctor augue mauris. Sed elementum tempus egestas sed sed. Felis eget velit aliquet sagittis id consectetur purus ut. Montes nascetur ridiculus mus mauris vitae. Enim sit amet venenatis urna cursus eget. Ultrices dui sapien eget mi proin sed libero. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Volutpat lacus laoreet non curabitur gravida arcu ac. Felis bibendum ut tristique et. Non curabitur gravida arcu ac tortor dignissim.</p>
  798.  
  799. <p>Nisl purus in mollis nunc sed id semper risus in. Eget felis eget nunc lobortis mattis aliquam. Turpis nunc eget lorem dolor sed. Morbi non arcu risus quis varius quam. Fermentum dui faucibus in ornare quam viverra orci sagittis. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Sed vulputate mi sit amet mauris commodo. Donec ac odio tempor orci. Non consectetur a erat nam at. Non arcu risus quis varius quam quisque. Vestibulum mattis ullamcorper velit sed ullamcorper. Vel turpis nunc eget lorem dolor sed viverra. Pharetra sit amet aliquam id diam maecenas ultricies mi. Id semper risus in hendrerit gravida. Mauris vitae ultricies leo integer malesuada nunc vel risus. Diam in arcu cursus euismod quis viverra nibh cras. In est ante in nibh mauris. Volutpat commodo sed egestas egestas fringilla. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor.</p>
  800.  
  801. <div class="float-left ml-sm-2 d-block p-1 mx-2" style="background-color: transparent; border:0px solid #fff; max-width: 300px;"><img src="https://www.metrorollerdoors.com.au/wp-content/uploads/2018/02/unavailable-image.jpg"><br><span style="font-size: small; text-align: center; color: #8A8A8A;">Description</span></div>
  802. <p>Donec et bibendum arcu. Duis in volutpat tellus, eu tincidunt lectus. Proin tempor enim sed porttitor maximus. Praesent sodales in sapien id vestibulum. Proin vitae nibh consequat, hendrerit purus sit amet, ultricies odio. Ut sit amet quam ut eros facilisis tincidunt. Donec a lacinia mauris. Ut vitae placerat risus.</p>
  803. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  804. </div>
  805. </div>
  806. <!--- END OF SKILL MIMICRY --->
  807.  
  808.  
  809.  
  810. <!--- WEAPONS --->
  811.  
  812. <h2 style="border-bottom:1pt solid #CCCCCC; color: #3A3A3A; padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  813. <span class="mw-headline" id="Skill_Mimicry"><i class="fal fa-sword fa-fw mx-2"></i>Weapons</span>
  814. </h2>
  815. <h3 style="color: #3A3A3A; padding:5pt 0; text-align:left;font-size:15pt; margin-top: 20px; overflow:hidden;">
  816. <span class="mw-headline" id="weapon_1">Weapon 1</span>
  817. </h3>
  818. <div class="mb-4 p-1">
  819. <div style="font-size: 11pt; color: #3A3A3A; margin-bottom: 4em;">
  820. <div class="float-right ml-sm-2 d-block p-1 mx-2" style="background-color: transparent; border:0px solid #fff; max-width: 300px;"><img src="https://www.metrorollerdoors.com.au/wp-content/uploads/2018/02/unavailable-image.jpg"><br><span style="font-size: small; text-align: center; color: #8A8A8A;">description</span></div>
  821. <p>
  822. <span><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Praesent placerat elit et sapien varius, ut facilisis mi porta. Mauris ligula tellus, lacinia ac interdum ut, consequat id odio. In in semper elit, sed iaculis ligula. Nulla id dapibus felis. Praesent eget commodo dui. Vivamus nec lobortis odio. Mauris eu euismod odio, quis tincidunt mauris. Nunc in semper ipsum, id feugiat augue. Ut tincidunt, enim non auctor lacinia, lorem ex posuere mi, eget euismod nibh sem vel velit. Pellentesque sed arcu magna.</span>
  823. </p>
  824. <p>
  825. <span>Sed non orci vestibulum, dapibus tortor sit amet, tempor lectus. Duis tempus augue nec nibh ultrices dignissim. Aliquam eget urna nec lorem pretium mattis non nec odio. Praesent id auctor nulla. Integer lectus odio, ultrices non mauris nec, cursus lobortis justo. Phasellus quis tincidunt velit, sed placerat ipsum. Aliquam erat volutpat. Cras non orci elit.</span>
  826. </p>
  827. <p>
  828. <span>Donec et bibendum arcu. Duis in volutpat tellus, eu tincidunt lectus. Proin tempor enim sed porttitor maximus. Praesent sodales in sapien id vestibulum. Proin vitae nibh consequat, hendrerit purus sit amet, ultricies odio. Ut sit amet quam ut eros facilisis tincidunt. Donec a lacinia mauris. Ut vitae placerat risus.</span>
  829. </p>
  830. <p>
  831. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  832. </p>
  833. <p>
  834. <span>Donec et bibendum arcu. Duis in volutpat tellus, eu tincidunt lectus. Proin tempor enim sed porttitor maximus. Praesent sodales in sapien id vestibulum. Proin vitae nibh consequat, hendrerit purus sit amet, ultricies odio. Ut sit amet quam ut eros facilisis tincidunt. Donec a lacinia mauris. Ut vitae placerat risus.</span>
  835. </p>
  836. <p>
  837. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  838. </p>
  839. </div></div>
  840.  
  841. <h3 style="color: #3A3A3A; padding:5pt 0; text-align:left;font-size:15pt; margin-top: 20px; overflow:hidden;">
  842. <span class="mw-headline" id="Weapon_2">Weapon 2</span>
  843. </h3>
  844. <div class="mb-4 p-1">
  845. <div style="font-size: 11pt; color: #3A3A3A; margin-bottom: 4em;">
  846. <p>
  847. <span><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Praesent placerat elit et sapien varius, ut facilisis mi porta. Mauris ligula tellus, lacinia ac interdum ut, consequat id odio. In in semper elit, sed iaculis ligula. Nulla id dapibus felis. Praesent eget commodo dui. Vivamus nec lobortis odio. Mauris eu euismod odio, quis tincidunt mauris. Nunc in semper ipsum, id feugiat augue. Ut tincidunt, enim non auctor lacinia, lorem ex posuere mi, eget euismod nibh sem vel velit. Pellentesque sed arcu magna.</span>
  848. </p>
  849. <p>
  850. <span>Sed non orci vestibulum, dapibus tortor sit amet, tempor lectus. Duis tempus augue nec nibh ultrices dignissim. Aliquam eget urna nec lorem pretium mattis non nec odio. Praesent id auctor nulla. Integer lectus odio, ultrices non mauris nec, cursus lobortis justo. Phasellus quis tincidunt velit, sed placerat ipsum. Aliquam erat volutpat. Cras non orci elit.</span>
  851. </p>
  852. <div class="float-left ml-sm-2 d-block p-1 mx-2" style="background-color: transparent; border:0px solid #fff; max-width: 300px;"><img src="https://www.metrorollerdoors.com.au/wp-content/uploads/2018/02/unavailable-image.jpg"><br><span style="font-size: small; text-align: center; color: #8A8A8A;">Description</span></div>
  853. <p>
  854. <span>Donec et bibendum arcu. Duis in volutpat tellus, eu tincidunt lectus. Proin tempor enim sed porttitor maximus. Praesent sodales in sapien id vestibulum. Proin vitae nibh consequat, hendrerit purus sit amet, ultricies odio. Ut sit amet quam ut eros facilisis tincidunt. Donec a lacinia mauris. Ut vitae placerat risus.</span>
  855. </p>
  856. <p>
  857. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  858. </p>
  859. </div></div>
  860. <!--- END OF WEAPONS --->
  861.  
  862. <!--- HAKI --->
  863.  
  864. <h2 style="border-bottom:1pt solid #CCCCCC; color: #3A3A3A; padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  865. <span class="mw-headline" id="Haki"><i class="fal fa-crown fa-fw mx-2"></i>Haki</span>
  866. </h2>
  867. <h3 style="color: #3A3A3A; padding:5pt 0; text-align:left;font-size:15pt; margin-top: 20px; overflow:hidden;">
  868. <span class="mw-headline" id="Haou_Haki">Haoushoku Haki</span>
  869. </h3>
  870. <div class="mb-4 p-1">
  871. <div style="font-size: 11pt; color: #3A3A3A; margin-bottom: 4em;">
  872. <p>
  873. <span><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Praesent placerat elit et sapien varius, ut facilisis mi porta. Mauris ligula tellus, lacinia ac interdum ut, consequat id odio. In in semper elit, sed iaculis ligula. Nulla id dapibus felis. Praesent eget commodo dui. Vivamus nec lobortis odio. Mauris eu euismod odio, quis tincidunt mauris. Nunc in semper ipsum, id feugiat augue. Ut tincidunt, enim non auctor lacinia, lorem ex posuere mi, eget euismod nibh sem vel velit. Pellentesque sed arcu magna.</span>
  874. </p>
  875. <p>
  876. <span>Sed non orci vestibulum, dapibus tortor sit amet, tempor lectus. Duis tempus augue nec nibh ultrices dignissim. Aliquam eget urna nec lorem pretium mattis non nec odio. Praesent id auctor nulla. Integer lectus odio, ultrices non mauris nec, cursus lobortis justo. Phasellus quis tincidunt velit, sed placerat ipsum. Aliquam erat volutpat. Cras non orci elit.</span>
  877. </p>
  878. <div class="float-left ml-sm-2 d-block p-1 mx-2" style="background-color: transparent; border:0px solid #fff; max-width: 300px;"><img src="https://www.metrorollerdoors.com.au/wp-content/uploads/2018/02/unavailable-image.jpg"><br><span style="font-size: small; text-align: center; color: #8A8A8A;">Description</span></div>
  879. <p>
  880. <span>Donec et bibendum arcu. Duis in volutpat tellus, eu tincidunt lectus. Proin tempor enim sed porttitor maximus. Praesent sodales in sapien id vestibulum. Proin vitae nibh consequat, hendrerit purus sit amet, ultricies odio. Ut sit amet quam ut eros facilisis tincidunt. Donec a lacinia mauris. Ut vitae placerat risus.</span>
  881. </p>
  882. <p>
  883. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  884. </p>
  885. </div></div>
  886.  
  887. <h3 style="color: #3A3A3A; padding:5pt 0; text-align:left;font-size:15pt; margin-top: 20px; overflow:hidden;">
  888. <span class="mw-headline" id="Kenbun_Haki">Kenbunshoku Haki</span>
  889. </h3>
  890. <div class="mb-4">
  891. <div style="font-size: 11pt; color: #3A3A3A; margin-bottom: 4em;">
  892. <p>
  893. <span><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Praesent placerat elit et sapien varius, ut facilisis mi porta. Mauris ligula tellus, lacinia ac interdum ut, consequat id odio. In in semper elit, sed iaculis ligula. Nulla id dapibus felis. Praesent eget commodo dui. Vivamus nec lobortis odio. Mauris eu euismod odio, quis tincidunt mauris. Nunc in semper ipsum, id feugiat augue. Ut tincidunt, enim non auctor lacinia, lorem ex posuere mi, eget euismod nibh sem vel velit. Pellentesque sed arcu magna.</span>
  894. </p>
  895. <p>
  896. <span>Sed non orci vestibulum, dapibus tortor sit amet, tempor lectus. Duis tempus augue nec nibh ultrices dignissim. Aliquam eget urna nec lorem pretium mattis non nec odio. Praesent id auctor nulla. Integer lectus odio, ultrices non mauris nec, cursus lobortis justo. Phasellus quis tincidunt velit, sed placerat ipsum. Aliquam erat volutpat. Cras non orci elit.</span>
  897. </p>
  898. <div class="float-left ml-sm-2 d-block p-1 mx-2" style="background-color: transparent; border:0px solid #fff; max-width: 300px;"><img src="https://www.metrorollerdoors.com.au/wp-content/uploads/2018/02/unavailable-image.jpg"><br><span style="font-size: small; text-align: center; color: #8A8A8A;">Description</span></div>
  899. <p>
  900. <span>Donec et bibendum arcu. Duis in volutpat tellus, eu tincidunt lectus. Proin tempor enim sed porttitor maximus. Praesent sodales in sapien id vestibulum. Proin vitae nibh consequat, hendrerit purus sit amet, ultricies odio. Ut sit amet quam ut eros facilisis tincidunt. Donec a lacinia mauris. Ut vitae placerat risus.</span>
  901. </p>
  902. <p>
  903. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  904. </p>
  905. </div></div>
  906. <h3 style="color: #3A3A3A; padding:5pt 0; text-align:left;font-size:15pt; margin-top: 20px; overflow:hidden;">
  907. <span class="mw-headline" id="Buso_Haki">Busoshoku Haki</span>
  908. </h3>
  909. <div class="mb-4">
  910. <div style="font-size: 11pt; color: #3A3A3A; margin-bottom: 4em;">
  911. <p>
  912. <span><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Praesent placerat elit et sapien varius, ut facilisis mi porta. Mauris ligula tellus, lacinia ac interdum ut, consequat id odio. In in semper elit, sed iaculis ligula. Nulla id dapibus felis. Praesent eget commodo dui. Vivamus nec lobortis odio. Mauris eu euismod odio, quis tincidunt mauris. Nunc in semper ipsum, id feugiat augue. Ut tincidunt, enim non auctor lacinia, lorem ex posuere mi, eget euismod nibh sem vel velit. Pellentesque sed arcu magna.</span>
  913. </p>
  914. <p>
  915. <span>Sed non orci vestibulum, dapibus tortor sit amet, tempor lectus. Duis tempus augue nec nibh ultrices dignissim. Aliquam eget urna nec lorem pretium mattis non nec odio. Praesent id auctor nulla. Integer lectus odio, ultrices non mauris nec, cursus lobortis justo. Phasellus quis tincidunt velit, sed placerat ipsum. Aliquam erat volutpat. Cras non orci elit.</span>
  916. </p>
  917. <div class="float-left ml-sm-2 d-block p-1 mx-2" style="background-color: transparent; border:0px solid #fff; max-width: 300px;"><img src="https://www.metrorollerdoors.com.au/wp-content/uploads/2018/02/unavailable-image.jpg"><br><span style="font-size: small; text-align: center; color: #8A8A8A;">Description</span></div>
  918. <p>
  919. <span>Donec et bibendum arcu. Duis in volutpat tellus, eu tincidunt lectus. Proin tempor enim sed porttitor maximus. Praesent sodales in sapien id vestibulum. Proin vitae nibh consequat, hendrerit purus sit amet, ultricies odio. Ut sit amet quam ut eros facilisis tincidunt. Donec a lacinia mauris. Ut vitae placerat risus.</span>
  920. </p>
  921. <p>
  922. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  923. </p>
  924. </div></div>
  925. <!--- END OF HAKI --->
  926.  
  927. <!--- WEAPONS --->
  928.  
  929. <h2 style="border-bottom:1pt solid #CCCCCC; color: #3A3A3A; padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  930. <span class="mw-headline" id="Other_Tech"><i class="fal fa-stars fa-fw mx-2"></i>Other Techniques</span>
  931. </h2>
  932.  
  933. <h3 style="color: #3A3A3A; padding:5pt 0; text-align:left;font-size:15pt; margin-top: 20px; overflow:hidden;">
  934. <span class="mw-headline" id="Other_skills">Other Skills here</span>
  935. </h3>
  936. <div class="float-right ml-sm-2 d-block p-1 mx-2" style="background-color: transparent; border:0px solid #fff; max-width: 300px;"><img src="https://static.wikia.nocookie.net/onepiece/images/1/1d/Luffy_Post-Timeskip_Burning_Will.png"><br><span style="font-size: small; text-align: center; color: #8A8A8A;">Description</span></div>
  937. <div class="mr-3" style="font-size: 11pt; color: #3A3A3A;">
  938. <p>
  939. <span><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Praesent placerat elit et sapien varius, ut facilisis mi porta. Mauris ligula tellus, lacinia ac interdum ut, consequat id odio. In in semper elit, sed iaculis ligula. Nulla id dapibus felis. Praesent eget commodo dui. Vivamus nec lobortis odio. Mauris eu euismod odio, quis tincidunt mauris. Nunc in semper ipsum, id feugiat augue. Ut tincidunt, enim non auctor lacinia, lorem ex posuere mi, eget euismod nibh sem vel velit. Pellentesque sed arcu magna.</span>
  940. </p>
  941. <div class="mb-4" style="padding: 1px; margin-bottom: 5px; color: #3A3A3A; margin-bottom: 4em;">
  942. <ul style="margin: 0; list-style-type:square;">
  943. <li>Add a trivia about your OC here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas egestas fringilla phasellus faucibus scelerisque. Tellus at urna condimentum mattis pellentesque id nibh tortor id. Ipsum dolor sit amet consectetur adipiscing elit duis. Nunc sed id semper risus in hendrerit gravida rutrum quisque. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. At elementum eu facilisis sed odio morbi quis. Nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Blandit volutpat maecenas volutpat blandit aliquam. Congue eu consequat ac felis donec. Enim nec dui nunc mattis. Vitae congue eu consequat ac felis donec et odio pellentesque. Condimentum vitae sapien pellentesque habitant.</li>
  944. <li>Add a trivia about your OC here! A condimentum vitae sapien pellentesque habitant morbi. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Eu ultrices vitae auctor eu augue ut lectus arcu. Eu nisl nunc mi ipsum faucibus vitae. Rhoncus urna neque viverra justo nec ultrices dui sapien. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Elit sed vulputate mi sit amet mauris commodo quis. Laoreet sit amet cursus sit amet. Tincidunt tortor aliquam nulla facilisi. In tellus integer feugiat scelerisque varius morbi enim nunc. Nibh cras pulvinar mattis nunc sed blandit libero volutpat. Eros donec ac odio tempor orci. Auctor elit sed vulputate mi sit amet mauris commodo. Et malesuada fames ac turpis egestas. Mauris rhoncus aenean vel elit scelerisque. Erat velit scelerisque in dictum non consectetur a erat nam. Proin nibh nisl condimentum id venenatis.</li>
  945. <li>Add a trivia about your OC here! </li>
  946. <li>Odio morbi quis commodo odio aenean sed adipiscing diam donec. Sem nulla pharetra diam sit amet nisl. Aliquam id diam maecenas ultricies mi eget mauris. Duis ut diam quam nulla porttitor massa id. Ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum. In metus vulputate eu scelerisque felis imperdiet. Fermentum iaculis eu non diam phasellus vestibulum lorem sed risus. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Orci porta non pulvinar neque laoreet. Malesuada fames ac turpis egestas integer eget aliquet. Sit amet porttitor eget dolor. Auctor augue mauris augue neque gravida in fermentum et sollicitudin. Sed felis eget velit aliquet. Sit amet nisl purus in mollis nunc sed. Iaculis urna id volutpat lacus.</li>
  947. </ul>
  948. </div>
  949. </div>
  950.  
  951. <h3 style="color: #3A3A3A; padding:5pt 0; text-align:left;font-size:15pt; margin-top: 20px; overflow:hidden;">
  952. <span class="mw-headline" id="Team_Combi">Team Combination</span>
  953. </h3>
  954. <div class="mb-4" style="font-size: 11pt; color: #3A3A3A; margin-bottom: 4em;">
  955. <p>
  956. <span><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Praesent placerat elit et sapien varius, ut facilisis mi porta. Mauris ligula tellus, lacinia ac interdum ut, consequat id odio. In in semper elit, sed iaculis ligula. Nulla id dapibus felis. Praesent eget commodo dui. Vivamus nec lobortis odio. Mauris eu euismod odio, quis tincidunt mauris. Nunc in semper ipsum, id feugiat augue. Ut tincidunt, enim non auctor lacinia, lorem ex posuere mi, eget euismod nibh sem vel velit. Pellentesque sed arcu magna.</span>
  957. </p>
  958. <div style="padding: 1px; margin-bottom: 5px; color: #3A3A3A; margin-bottom: 4em;">
  959. <ul style="margin: 0; list-style-type:square;">
  960. <li>Add a trivia about your OC here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas egestas fringilla phasellus faucibus scelerisque. Tellus at urna condimentum mattis pellentesque id nibh tortor id. Ipsum dolor sit amet consectetur adipiscing elit duis. Nunc sed id semper risus in hendrerit gravida rutrum quisque. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. At elementum eu facilisis sed odio morbi quis. Nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Blandit volutpat maecenas volutpat blandit aliquam. Congue eu consequat ac felis donec. Enim nec dui nunc mattis. Vitae congue eu consequat ac felis donec et odio pellentesque. Condimentum vitae sapien pellentesque habitant.</li>
  961. <li>Add a trivia about your OC here! A condimentum vitae sapien pellentesque habitant morbi. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Eu ultrices vitae auctor eu augue ut lectus arcu. Eu nisl nunc mi ipsum faucibus vitae. Rhoncus urna neque viverra justo nec ultrices dui sapien. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Elit sed vulputate mi sit amet mauris commodo quis. Laoreet sit amet cursus sit amet. Tincidunt tortor aliquam nulla facilisi. In tellus integer feugiat scelerisque varius morbi enim nunc. Nibh cras pulvinar mattis nunc sed blandit libero volutpat. Eros donec ac odio tempor orci. Auctor elit sed vulputate mi sit amet mauris commodo. Et malesuada fames ac turpis egestas. Mauris rhoncus aenean vel elit scelerisque. Erat velit scelerisque in dictum non consectetur a erat nam. Proin nibh nisl condimentum id venenatis.</li>
  962. <li>Add a trivia about your OC here! </li>
  963. <li>Odio morbi quis commodo odio aenean sed adipiscing diam donec. Sem nulla pharetra diam sit amet nisl. Aliquam id diam maecenas ultricies mi eget mauris. Duis ut diam quam nulla porttitor massa id. Ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum. In metus vulputate eu scelerisque felis imperdiet. Fermentum iaculis eu non diam phasellus vestibulum lorem sed risus. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Orci porta non pulvinar neque laoreet. Malesuada fames ac turpis egestas integer eget aliquet. Sit amet porttitor eget dolor. Auctor augue mauris augue neque gravida in fermentum et sollicitudin. Sed felis eget velit aliquet. Sit amet nisl purus in mollis nunc sed. Iaculis urna id volutpat lacus.</li>
  964. </ul>
  965. </div>
  966. </div>
  967. <!--- END OF WEAPONS --->
  968.  
  969. <!--- ABILITIES TRIVIA --->
  970.  
  971. <h2 style="border-bottom:1pt solid #CCCCCC; color: #3A3A3A; padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  972. <span class="mw-headline" id="Abi_Trivia"><i class="fal fa-question-circle fa-fw mx-2"></i>Trivia</span>
  973. </h2>
  974. <div class="float-right ml-sm-2 d-block p-1 mx-2" style="background-color: transparent; border:0px solid #fff; max-width: 300px;"><img src="https://static.wikia.nocookie.net/onepiece/images/6/6a/Luffy_Snakeman_Pirate_Warriors_4.png"><br><span style="font-size: small; text-align: center; color: #8A8A8A;">You can add more images!</span></div>
  975. <div class="mb-4" style="font-size: 11pt; color: #3A3A3A;">
  976. <div style="padding: 1px; margin-bottom: 5px; color: #3A3A3A;">
  977. <ul style="margin: 0; list-style-type:square;">
  978. <li>Add a trivia about your OC here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas egestas fringilla phasellus faucibus scelerisque. Tellus at urna condimentum mattis pellentesque id nibh tortor id. Ipsum dolor sit amet consectetur adipiscing elit duis. Nunc sed id semper risus in hendrerit gravida rutrum quisque. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. At elementum eu facilisis sed odio morbi quis. Nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Blandit volutpat maecenas volutpat blandit aliquam. Congue eu consequat ac felis donec. Enim nec dui nunc mattis. Vitae congue eu consequat ac felis donec et odio pellentesque. Condimentum vitae sapien pellentesque habitant.</li>
  979. <li>Add a trivia about your OC here! A condimentum vitae sapien pellentesque habitant morbi. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Eu ultrices vitae auctor eu augue ut lectus arcu. Eu nisl nunc mi ipsum faucibus vitae. Rhoncus urna neque viverra justo nec ultrices dui sapien. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Elit sed vulputate mi sit amet mauris commodo quis. Laoreet sit amet cursus sit amet. Tincidunt tortor aliquam nulla facilisi. In tellus integer feugiat scelerisque varius morbi enim nunc. Nibh cras pulvinar mattis nunc sed blandit libero volutpat. Eros donec ac odio tempor orci. Auctor elit sed vulputate mi sit amet mauris commodo. Et malesuada fames ac turpis egestas. Mauris rhoncus aenean vel elit scelerisque. Erat velit scelerisque in dictum non consectetur a erat nam. Proin nibh nisl condimentum id venenatis.</li>
  980. <li>Add a trivia about your OC here! </li>
  981. <li>Odio morbi quis commodo odio aenean sed adipiscing diam donec. Sem nulla pharetra diam sit amet nisl. Aliquam id diam maecenas ultricies mi eget mauris. Duis ut diam quam nulla porttitor massa id. Ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum. In metus vulputate eu scelerisque felis imperdiet. Fermentum iaculis eu non diam phasellus vestibulum lorem sed risus. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Orci porta non pulvinar neque laoreet. Malesuada fames ac turpis egestas integer eget aliquet. Sit amet porttitor eget dolor. Auctor augue mauris augue neque gravida in fermentum et sollicitudin. Sed felis eget velit aliquet. Sit amet nisl purus in mollis nunc sed. Iaculis urna id volutpat lacus.</li>
  982. </ul>
  983. </div>
  984. </div>
  985.  
  986.  
  987. </div>
  988.  
  989.  
  990. <div class="tab-pane fade" id="History">
  991.  
  992. <!--- TABLE OF CONTENT --->
  993.  
  994. <div class="col" style="max-width: 200pt; background:transparent; border:1pt solid #fff; padding:5pt; text-align:left; margin:1em 0; border-collapse:separate; color:#3a3a3a; border-radius:1.5ex; overflow:hidden;">
  995. <div class="card card-outline-danger acards" style="background:transparent;border:transparent;">
  996. <p style="text-align:left; font-size: 11pt; color: #3A3A3A;">
  997. Contents [<a class="show active" href="#histo_contents" data-toggle="collapse" data-target="#histo_contents" aria-expanded="false" title="show">show</a>]
  998. </p>
  999. <div id="histo_contents" class="collapse show active" style="font-size: 11pt;">
  1000. <ul style="margin: 0; list-style-type:square; color: #3A3A3A;">
  1001. <li class="toclevel-1">
  1002. <a href="#Early_Life">Early Life</a>
  1003. <ol class="m-0">
  1004. <li><a href="#Birth">Birth</a></li>
  1005. <li><a href="#Childhood">Childhood</a></li>
  1006. </ol>
  1007. </li>
  1008. <li class="toclevel-1">
  1009. <a href="#Arc_1">Arc 1</a>
  1010. </li>
  1011. <li class="toclevel-1">
  1012. <a href="#Arc_2">Arc 2</a>
  1013. </li>
  1014. <li class="toclevel-1">
  1015. <a href="#Histo_Trivia">Trivia</a>
  1016. </li>
  1017. </li>
  1018. </ul>
  1019. </div>
  1020. </div>
  1021. </div>
  1022.  
  1023. <!--- END TOC --->
  1024.  
  1025. <!--- EARLY LIFE --->
  1026. <h2 style="border-bottom:1pt solid #CCCCCC; color: #3A3A3A; padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  1027. <span class="mw-headline" id="Early_Life"><i class="fal fa-bookmark fa-fw mx-2"></i>Early Life</span>
  1028. </h2>
  1029. <h3 style="color: #3A3A3A; padding:5pt 0; text-align:left;font-size:15pt; margin-top: 20px; overflow:hidden;">
  1030. <span class="mw-headline" id="Birth">Birth</span></h3>
  1031. <div class="mb-4" style="font-size: 11pt; color: #3A3A3A;">
  1032. <p>
  1033. <span><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Praesent placerat elit et sapien varius, ut facilisis mi porta. Mauris ligula tellus, lacinia ac interdum ut, consequat id odio. In in semper elit, sed iaculis ligula. Nulla id dapibus felis. Praesent eget commodo dui. Vivamus nec lobortis odio. Mauris eu euismod odio, quis tincidunt mauris. Nunc in semper ipsum, id feugiat augue. Ut tincidunt, enim non auctor lacinia, lorem ex posuere mi, eget euismod nibh sem vel velit. Pellentesque sed arcu magna.</span>
  1034. </p>
  1035. <p>
  1036. <span>Sed non orci vestibulum, dapibus tortor sit amet, tempor lectus. Duis tempus augue nec nibh ultrices dignissim. Aliquam eget urna nec lorem pretium mattis non nec odio. Praesent id auctor nulla. Integer lectus odio, ultrices non mauris nec, cursus lobortis justo. Phasellus quis tincidunt velit, sed placerat ipsum. Aliquam erat volutpat. Cras non orci elit.</span>
  1037. </p>
  1038. <div class="float-left ml-sm-2 d-block p-1 mx-2" style="background-color: transparent; border:0px solid #fff; max-width: 300px;"><img src="https://www.metrorollerdoors.com.au/wp-content/uploads/2018/02/unavailable-image.jpg"><br><span style="font-size: small; text-align: center; color: #8A8A8A;">Description</span></div>
  1039. <p>
  1040. <span>Donec et bibendum arcu. Duis in volutpat tellus, eu tincidunt lectus. Proin tempor enim sed porttitor maximus. Praesent sodales in sapien id vestibulum. Proin vitae nibh consequat, hendrerit purus sit amet, ultricies odio. Ut sit amet quam ut eros facilisis tincidunt. Donec a lacinia mauris. Ut vitae placerat risus.</span>
  1041. </p>
  1042. <p>
  1043. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  1044. </p>
  1045. </div>
  1046. <h3 style="color: #3A3A3A; padding:5pt 0; text-align:left;font-size:15pt; margin-top: 20px; overflow:hidden;">
  1047. <span class="mw-headline" id="Childhood">Childhood</span></h3>
  1048. <div style="font-size: 11pt; color: #3A3A3A;">
  1049. <p>
  1050. <span><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Praesent placerat elit et sapien varius, ut facilisis mi porta. Mauris ligula tellus, lacinia ac interdum ut, consequat id odio. In in semper elit, sed iaculis ligula. Nulla id dapibus felis. Praesent eget commodo dui. Vivamus nec lobortis odio. Mauris eu euismod odio, quis tincidunt mauris. Nunc in semper ipsum, id feugiat augue. Ut tincidunt, enim non auctor lacinia, lorem ex posuere mi, eget euismod nibh sem vel velit. Pellentesque sed arcu magna.</span>
  1051. </p>
  1052. <p>
  1053. <span>Sed non orci vestibulum, dapibus tortor sit amet, tempor lectus. Duis tempus augue nec nibh ultrices dignissim. Aliquam eget urna nec lorem pretium mattis non nec odio. Praesent id auctor nulla. Integer lectus odio, ultrices non mauris nec, cursus lobortis justo. Phasellus quis tincidunt velit, sed placerat ipsum. Aliquam erat volutpat. Cras non orci elit.</span>
  1054. </p>
  1055. <div class="float-left ml-sm-2 d-block p-1 mx-2" style="background-color: transparent; border:0px solid #fff; max-width: 300px;"><img src="https://www.metrorollerdoors.com.au/wp-content/uploads/2018/02/unavailable-image.jpg"><br><span style="font-size: small; text-align: center; color: #8A8A8A;">Description</span></div>
  1056. <p>
  1057. <span>Donec et bibendum arcu. Duis in volutpat tellus, eu tincidunt lectus. Proin tempor enim sed porttitor maximus. Praesent sodales in sapien id vestibulum. Proin vitae nibh consequat, hendrerit purus sit amet, ultricies odio. Ut sit amet quam ut eros facilisis tincidunt. Donec a lacinia mauris. Ut vitae placerat risus.</span>
  1058. </p>
  1059. <p>
  1060. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  1061. </p>
  1062. </div>
  1063.  
  1064. <br>
  1065. <!--- END TOC --->
  1066.  
  1067. <!--- ARC 1 --->
  1068. <h2 style="border-bottom:1pt solid #CCCCCC; color: #3A3A3A; padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  1069. <span class="mw-headline" id="Arc 1"><i class="fal fa-bookmark fa-fw mx-2"></i>Arc 1</span>
  1070. </h2>
  1071. <div class="mb-4" style="font-size: 11pt; color: #3A3A3A;">
  1072. <p>
  1073. <span><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Praesent placerat elit et sapien varius, ut facilisis mi porta. Mauris ligula tellus, lacinia ac interdum ut, consequat id odio. In in semper elit, sed iaculis ligula. Nulla id dapibus felis. Praesent eget commodo dui. Vivamus nec lobortis odio. Mauris eu euismod odio, quis tincidunt mauris. Nunc in semper ipsum, id feugiat augue. Ut tincidunt, enim non auctor lacinia, lorem ex posuere mi, eget euismod nibh sem vel velit. Pellentesque sed arcu magna.</span>
  1074. </p>
  1075. <p>
  1076. <span>Sed non orci vestibulum, dapibus tortor sit amet, tempor lectus. Duis tempus augue nec nibh ultrices dignissim. Aliquam eget urna nec lorem pretium mattis non nec odio. Praesent id auctor nulla. Integer lectus odio, ultrices non mauris nec, cursus lobortis justo. Phasellus quis tincidunt velit, sed placerat ipsum. Aliquam erat volutpat. Cras non orci elit.</span>
  1077. </p>
  1078. <div class="float-left ml-sm-2 d-block p-1 mx-2" style="background-color: transparent; border:0px solid #fff; max-width: 300px;"><img src="https://www.metrorollerdoors.com.au/wp-content/uploads/2018/02/unavailable-image.jpg"><br><span style="font-size: small; text-align: center; color: #8A8A8A;">Description</span></div>
  1079. <p>
  1080. <span>Donec et bibendum arcu. Duis in volutpat tellus, eu tincidunt lectus. Proin tempor enim sed porttitor maximus. Praesent sodales in sapien id vestibulum. Proin vitae nibh consequat, hendrerit purus sit amet, ultricies odio. Ut sit amet quam ut eros facilisis tincidunt. Donec a lacinia mauris. Ut vitae placerat risus.</span>
  1081. </p>
  1082. <p>
  1083. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  1084. </p>
  1085. </div>
  1086. <h3 style="color: #3A3A3A; padding:5pt 0; text-align:left;font-size:15pt; margin-top: 20px; overflow:hidden;">
  1087. <span class="mw-headline" id="Childhood">Childhood</span></h3>
  1088. <div class="mb-4" style="font-size: 11pt; color: #3A3A3A;">
  1089. <p>
  1090. <span><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Praesent placerat elit et sapien varius, ut facilisis mi porta. Mauris ligula tellus, lacinia ac interdum ut, consequat id odio. In in semper elit, sed iaculis ligula. Nulla id dapibus felis. Praesent eget commodo dui. Vivamus nec lobortis odio. Mauris eu euismod odio, quis tincidunt mauris. Nunc in semper ipsum, id feugiat augue. Ut tincidunt, enim non auctor lacinia, lorem ex posuere mi, eget euismod nibh sem vel velit. Pellentesque sed arcu magna.</span>
  1091. </p>
  1092. <p>
  1093. <span>Sed non orci vestibulum, dapibus tortor sit amet, tempor lectus. Duis tempus augue nec nibh ultrices dignissim. Aliquam eget urna nec lorem pretium mattis non nec odio. Praesent id auctor nulla. Integer lectus odio, ultrices non mauris nec, cursus lobortis justo. Phasellus quis tincidunt velit, sed placerat ipsum. Aliquam erat volutpat. Cras non orci elit.</span>
  1094. </p>
  1095. <div class="float-left ml-sm-2 d-block p-1 mx-2" style="background-color: transparent; border:0px solid #fff; max-width: 300px;"><img src="https://www.metrorollerdoors.com.au/wp-content/uploads/2018/02/unavailable-image.jpg"><br><span style="font-size: small; text-align: center; color: #8A8A8A;">Description</span></div>
  1096. <p>
  1097. <span>Donec et bibendum arcu. Duis in volutpat tellus, eu tincidunt lectus. Proin tempor enim sed porttitor maximus. Praesent sodales in sapien id vestibulum. Proin vitae nibh consequat, hendrerit purus sit amet, ultricies odio. Ut sit amet quam ut eros facilisis tincidunt. Donec a lacinia mauris. Ut vitae placerat risus.</span>
  1098. </p>
  1099. <p>
  1100. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  1101. </p>
  1102. </div>
  1103.  
  1104. <br>
  1105. <!--- END AEC 1 --->
  1106.  
  1107. <!--- HISTORY TRIVIA --->
  1108.  
  1109. <h2 style="border-bottom:1pt solid #CCCCCC; color: #3A3A3A; padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  1110. <span class="mw-headline" id="Abi_Trivia"><i class="fal fa-question-circle fa-fw mx-2"></i>Trivia</span>
  1111. </h2>
  1112. <div class="float-right ml-sm-2 d-block p-1 mx-2" style="background-color: transparent; border:0px solid #fff; max-width: 300px;"><img src="https://static.wikia.nocookie.net/onepiece/images/7/7a/Luffy_Color_Walk_4.png"><br><span style="font-size: small; text-align: center; color: #8A8A8A;">You can add more images!</span></div>
  1113. <div class="mb-4" style="font-size: 11pt; color: #3A3A3A;">
  1114. <div style="padding: 1px; margin-bottom: 5px; color: #3A3A3A;">
  1115. <ul style="margin: 0; list-style-type:square;">
  1116. <li>Add a trivia about your OC here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas egestas fringilla phasellus faucibus scelerisque. Tellus at urna condimentum mattis pellentesque id nibh tortor id. Ipsum dolor sit amet consectetur adipiscing elit duis. Nunc sed id semper risus in hendrerit gravida rutrum quisque. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. At elementum eu facilisis sed odio morbi quis. Nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Blandit volutpat maecenas volutpat blandit aliquam. Congue eu consequat ac felis donec. Enim nec dui nunc mattis. Vitae congue eu consequat ac felis donec et odio pellentesque. Condimentum vitae sapien pellentesque habitant.</li>
  1117. <li>Add a trivia about your OC here! A condimentum vitae sapien pellentesque habitant morbi. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Eu ultrices vitae auctor eu augue ut lectus arcu. Eu nisl nunc mi ipsum faucibus vitae. Rhoncus urna neque viverra justo nec ultrices dui sapien. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Elit sed vulputate mi sit amet mauris commodo quis. Laoreet sit amet cursus sit amet. Tincidunt tortor aliquam nulla facilisi. In tellus integer feugiat scelerisque varius morbi enim nunc. Nibh cras pulvinar mattis nunc sed blandit libero volutpat. Eros donec ac odio tempor orci. Auctor elit sed vulputate mi sit amet mauris commodo. Et malesuada fames ac turpis egestas. Mauris rhoncus aenean vel elit scelerisque. Erat velit scelerisque in dictum non consectetur a erat nam. Proin nibh nisl condimentum id venenatis.</li>
  1118. <li>Add a trivia about your OC here! </li>
  1119. <li>Odio morbi quis commodo odio aenean sed adipiscing diam donec. Sem nulla pharetra diam sit amet nisl. Aliquam id diam maecenas ultricies mi eget mauris. Duis ut diam quam nulla porttitor massa id. Ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum. In metus vulputate eu scelerisque felis imperdiet. Fermentum iaculis eu non diam phasellus vestibulum lorem sed risus. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Orci porta non pulvinar neque laoreet. Malesuada fames ac turpis egestas integer eget aliquet. Sit amet porttitor eget dolor. Auctor augue mauris augue neque gravida in fermentum et sollicitudin. Sed felis eget velit aliquet. Sit amet nisl purus in mollis nunc sed. Iaculis urna id volutpat lacus.</li>
  1120. </ul>
  1121. </div>
  1122. </div>
  1123.  
  1124. </div>
  1125.  
  1126.  
  1127. <div class="tab-pane fade" id="Relationships">
  1128.  
  1129. <!--- TABLE OF CONTENT --->
  1130.  
  1131. <div class="col" style="max-width: 200pt; background:transparent; border:1pt solid #fff; padding:5pt; text-align:left; margin:1em 0; border-collapse:separate; color:#3a3a3a; border-radius:1.5ex; overflow:hidden;">
  1132. <div class="card card-outline-danger acards" style="background:transparent;border:transparent;">
  1133. <p style="text-align:left; font-size: 11pt; color: #3A3A3A;">
  1134. Contents [<a href="#rela_contents" data-toggle="collapse" data-target="#rela_contents" aria-expanded="false" title="show">show</a>]
  1135. </p>
  1136. <div id="rela_contents" class="collapse show active" style="font-size: 11pt;">
  1137. <ul style="margin: 0; list-style-type:square; color: #3A3A3A;">
  1138. <li class="toclevel-1">
  1139. <a href="#group_a">Group A</a>
  1140. <ol class="m-0">
  1141. <li><a href="#group_a_a">Group A-A</a>
  1142. <ol class="m-0">
  1143. <li><a href="#Chara_1">Person 1</a></li>
  1144. <li><a href="#chara_2">Person 2</a></li>
  1145. </ol>
  1146. </li>
  1147. <li><a href="#group_a_b">Group A-B</a>
  1148. <ol class="m-0">
  1149. <li><a href="#Chara_3">Person 3</a></li>
  1150. <li><a href="#Chara_4">Person 4</a></li>
  1151. </ol>
  1152. </li>
  1153. </ol>
  1154. <li class="toclevel-1">
  1155. <a href="#Rela_Trivia">Trivia</a>
  1156. </li>
  1157. </ul>
  1158. </div>
  1159. </div>
  1160. </div>
  1161.  
  1162. <!--- END TOC --->
  1163.  
  1164.  
  1165.  
  1166. <!--- FAMILIAL --->
  1167. <h2 style="border-bottom:1pt solid #CCCCCC; color: #3A3A3A; padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  1168. <span class="mw-headline" id="group_a"><i class="fal fa-users fa-fw mx-2"></i>Group A</span>
  1169. </h2>
  1170. <h3 style="color: #3A3A3A; padding:5pt 0; text-align:left;font-size:15pt; margin-top: 20px; overflow:hidden;">
  1171. <span class="mw-headline" id="group_a_a">Section 1</span></h3>
  1172. <img src="https://static.wikia.nocookie.net/onepiece/images/3/35/Oda's_Avatar_SBS_Volume_62.png" class="rounded float-md-left mr-md-3 mb-md-0 mb-1 d-block mx-auto" style="max-height:150px;" alt="28690037_uIOQppEUaQT6kep.jpg">
  1173. <h4 id="Chara_1"><a href="#" style="color: #3A3A3A;">Person 1</a></h4>
  1174. <div style="font-size: 11pt; color: #3A3A3A;">
  1175. <div class="d-flex justify-content-between mb-1">
  1176. <span>[ <i>relationship</i> ]</span>
  1177. <span>
  1178. <div class="col-8 mt-2">
  1179. <div class="progress" style="height: 10px; background: #c9c9c9;">
  1180. <div class="progress-bar" style="background: #FF0000; width: 20%;">
  1181. </div>
  1182. </div>
  1183. </div>
  1184. </span>
  1185. </div>
  1186. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget est lorem ipsum dolor sit amet consectetur. Ut sem nulla pharetra diam. Congue mauris rhoncus aenean vel elit scelerisque. Sit amet justo donec enim diam vulputate. Nibh tellus molestie nunc non blandit massa enim nec dui. Lectus urna duis convallis convallis. Laoreet sit amet cursus sit amet dictum sit amet. Orci ac auctor augue mauris. Sed elementum tempus egestas sed sed. Felis eget velit aliquet sagittis id consectetur purus ut. Montes nascetur ridiculus mus mauris vitae. Enim sit amet venenatis urna cursus eget. Ultrices dui sapien eget mi proin sed libero. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Volutpat lacus laoreet non curabitur gravida arcu ac. Felis bibendum ut tristique et. Non curabitur gravida arcu ac tortor dignissim.</p>
  1187. <p>Nisl purus in mollis nunc sed id semper risus in. Eget felis eget nunc lobortis mattis aliquam. Turpis nunc eget lorem dolor sed. Morbi non arcu risus quis varius quam. Fermentum dui faucibus in ornare quam viverra orci sagittis. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Sed vulputate mi sit amet mauris commodo. Donec ac odio tempor orci. Non consectetur a erat nam at. Non arcu risus quis varius quam quisque. Vestibulum mattis ullamcorper velit sed ullamcorper. Vel turpis nunc eget lorem dolor sed viverra. Pharetra sit amet aliquam id diam maecenas ultricies mi. Id semper risus in hendrerit gravida. Mauris vitae ultricies leo integer malesuada nunc vel risus. Diam in arcu cursus euismod quis viverra nibh cras. In est ante in nibh mauris. Volutpat commodo sed egestas egestas fringilla. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor.</p>
  1188. </div>
  1189. <br>
  1190. <img src="https://static.wikia.nocookie.net/onepiece/images/3/35/Oda's_Avatar_SBS_Volume_62.png" class="rounded float-md-left mr-md-3 mb-md-0 mb-1 d-block mx-auto" style="max-height:150px;" alt="28690037_uIOQppEUaQT6kep.jpg">
  1191. <h4 id="Chara_2"><a href="#" style="color: #3A3A3A;">Person 2</a></h4>
  1192. <div style="font-size: 11pt; color: #3A3A3A;">
  1193. <div class="d-flex justify-content-between mb-1">
  1194. <span>[ <i>relationship</i> ]</span>
  1195. <span>
  1196. <div class="col-8 mt-2">
  1197. <div class="progress" style="height: 10px; background: #c9c9c9;">
  1198. <div class="progress-bar" style="background: #FF0000; width: 20%;">
  1199. </div>
  1200. </div>
  1201. </div>
  1202. </span>
  1203. </div>
  1204. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget est lorem ipsum dolor sit amet consectetur. Ut sem nulla pharetra diam. Congue mauris rhoncus aenean vel elit scelerisque. Sit amet justo donec enim diam vulputate. Nibh tellus molestie nunc non blandit massa enim nec dui. Lectus urna duis convallis convallis. Laoreet sit amet cursus sit amet dictum sit amet. Orci ac auctor augue mauris. Sed elementum tempus egestas sed sed. Felis eget velit aliquet sagittis id consectetur purus ut. Montes nascetur ridiculus mus mauris vitae. Enim sit amet venenatis urna cursus eget. Ultrices dui sapien eget mi proin sed libero. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Volutpat lacus laoreet non curabitur gravida arcu ac. Felis bibendum ut tristique et. Non curabitur gravida arcu ac tortor dignissim.</p>
  1205. <p>Nisl purus in mollis nunc sed id semper risus in. Eget felis eget nunc lobortis mattis aliquam. Turpis nunc eget lorem dolor sed. Morbi non arcu risus quis varius quam. Fermentum dui faucibus in ornare quam viverra orci sagittis. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Sed vulputate mi sit amet mauris commodo. Donec ac odio tempor orci. Non consectetur a erat nam at. Non arcu risus quis varius quam quisque. Vestibulum mattis ullamcorper velit sed ullamcorper. Vel turpis nunc eget lorem dolor sed viverra. Pharetra sit amet aliquam id diam maecenas ultricies mi. Id semper risus in hendrerit gravida. Mauris vitae ultricies leo integer malesuada nunc vel risus. Diam in arcu cursus euismod quis viverra nibh cras. In est ante in nibh mauris. Volutpat commodo sed egestas egestas fringilla. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor.</p>
  1206. </div>
  1207.  
  1208. <h3 style="color: #3A3A3A; padding:5pt 0; text-align:left;font-size:15pt; margin-top: 20px; overflow:hidden;">
  1209. <span class="mw-headline" id="group_a_b">Section 2</span></h3>
  1210. <img src="https://static.wikia.nocookie.net/onepiece/images/3/35/Oda's_Avatar_SBS_Volume_62.png" class="rounded float-md-left mr-md-3 mb-md-0 mb-1 d-block mx-auto" style="max-height:150px;" alt="28690037_uIOQppEUaQT6kep.jpg">
  1211. <h4 id="Chara_3"><a href="#" style="color: #3A3A3A;">Person 3</a></h4>
  1212. <div style="font-size: 11pt; color: #3A3A3A;">
  1213. <div class="d-flex justify-content-between mb-1">
  1214. <span>[ <i>relationship</i> ]</span>
  1215. <span>
  1216. <div class="col-8 mt-2">
  1217. <div class="progress" style="height: 10px; background: #c9c9c9;">
  1218. <div class="progress-bar" style="background: #FF0000; width: 20%;">
  1219. </div>
  1220. </div>
  1221. </div>
  1222. </span>
  1223. </div>
  1224. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget est lorem ipsum dolor sit amet consectetur. Ut sem nulla pharetra diam. Congue mauris rhoncus aenean vel elit scelerisque. Sit amet justo donec enim diam vulputate. Nibh tellus molestie nunc non blandit massa enim nec dui. Lectus urna duis convallis convallis. Laoreet sit amet cursus sit amet dictum sit amet. Orci ac auctor augue mauris. Sed elementum tempus egestas sed sed. Felis eget velit aliquet sagittis id consectetur purus ut. Montes nascetur ridiculus mus mauris vitae. Enim sit amet venenatis urna cursus eget. Ultrices dui sapien eget mi proin sed libero. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Volutpat lacus laoreet non curabitur gravida arcu ac. Felis bibendum ut tristique et. Non curabitur gravida arcu ac tortor dignissim.</p>
  1225. <p>Nisl purus in mollis nunc sed id semper risus in. Eget felis eget nunc lobortis mattis aliquam. Turpis nunc eget lorem dolor sed. Morbi non arcu risus quis varius quam. Fermentum dui faucibus in ornare quam viverra orci sagittis. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Sed vulputate mi sit amet mauris commodo. Donec ac odio tempor orci. Non consectetur a erat nam at. Non arcu risus quis varius quam quisque. Vestibulum mattis ullamcorper velit sed ullamcorper. Vel turpis nunc eget lorem dolor sed viverra. Pharetra sit amet aliquam id diam maecenas ultricies mi. Id semper risus in hendrerit gravida. Mauris vitae ultricies leo integer malesuada nunc vel risus. Diam in arcu cursus euismod quis viverra nibh cras. In est ante in nibh mauris. Volutpat commodo sed egestas egestas fringilla. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor.</p>
  1226. </div>
  1227. <br>
  1228. <img src="https://static.wikia.nocookie.net/onepiece/images/3/35/Oda's_Avatar_SBS_Volume_62.png" class="rounded float-md-left mr-md-3 mb-md-0 mb-1 d-block mx-auto" style="max-height:150px;" alt="28690037_uIOQppEUaQT6kep.jpg">
  1229. <h4 id="Chara_4"><a href="#" style="color: #3A3A3A;">Person 4</a></h4>
  1230. <div style="font-size: 11pt; color: #3A3A3A;">
  1231. <div class="d-flex justify-content-between mb-1">
  1232. <span>[ <i>relationship</i> ]</span>
  1233. <span>
  1234. <div class="col-8 mt-2">
  1235. <div class="progress" style="height: 10px; background: #c9c9c9;">
  1236. <div class="progress-bar" style="background: #FF0000; width: 20%;">
  1237. </div>
  1238. </div>
  1239. </div>
  1240. </span>
  1241. </div>
  1242. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget est lorem ipsum dolor sit amet consectetur. Ut sem nulla pharetra diam. Congue mauris rhoncus aenean vel elit scelerisque. Sit amet justo donec enim diam vulputate. Nibh tellus molestie nunc non blandit massa enim nec dui. Lectus urna duis convallis convallis. Laoreet sit amet cursus sit amet dictum sit amet. Orci ac auctor augue mauris. Sed elementum tempus egestas sed sed. Felis eget velit aliquet sagittis id consectetur purus ut. Montes nascetur ridiculus mus mauris vitae. Enim sit amet venenatis urna cursus eget. Ultrices dui sapien eget mi proin sed libero. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Volutpat lacus laoreet non curabitur gravida arcu ac. Felis bibendum ut tristique et. Non curabitur gravida arcu ac tortor dignissim.</p>
  1243. <p>Nisl purus in mollis nunc sed id semper risus in. Eget felis eget nunc lobortis mattis aliquam. Turpis nunc eget lorem dolor sed. Morbi non arcu risus quis varius quam. Fermentum dui faucibus in ornare quam viverra orci sagittis. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Sed vulputate mi sit amet mauris commodo. Donec ac odio tempor orci. Non consectetur a erat nam at. Non arcu risus quis varius quam quisque. Vestibulum mattis ullamcorper velit sed ullamcorper. Vel turpis nunc eget lorem dolor sed viverra. Pharetra sit amet aliquam id diam maecenas ultricies mi. Id semper risus in hendrerit gravida. Mauris vitae ultricies leo integer malesuada nunc vel risus. Diam in arcu cursus euismod quis viverra nibh cras. In est ante in nibh mauris. Volutpat commodo sed egestas egestas fringilla. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor.</p>
  1244. </div>
  1245. <br>
  1246.  
  1247.  
  1248. <!--- GENERAL RELATIONSHIP TRIVIA --->
  1249.  
  1250. <h2 style="border-bottom:1pt solid #CCCCCC; color: #3A3A3A; padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  1251. <span class="mw-headline" id="Rela_Trivia"><i class="fal fa-question-circle fa-fw mx-2"></i>Trivia</span>
  1252. </h2>
  1253. <div class="float-right ml-sm-2 d-block p-1 mx-2" style="background-color: transparent; border:0px solid #fff; max-width: 100%;"><img src="https://static.wikia.nocookie.net/onepiece/images/3/37/Luffy_Non-no_Magazine_Cover.png"><br><span style="font-size: small; text-align: center; color: #8A8A8A;">You can add more images!</span></div>
  1254. <div style="font-size: 11pt; padding: 1px; margin-bottom: 5px; color: #3A3A3A;">
  1255. <ul style="margin: 0; list-style-type:square;">
  1256. <li>Add a trivia about your OC here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas egestas fringilla phasellus faucibus scelerisque. Tellus at urna condimentum mattis pellentesque id nibh tortor id. Ipsum dolor sit amet consectetur adipiscing elit duis. Nunc sed id semper risus in hendrerit gravida rutrum quisque. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. At elementum eu facilisis sed odio morbi quis. Nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Blandit volutpat maecenas volutpat blandit aliquam. Congue eu consequat ac felis donec. Enim nec dui nunc mattis. Vitae congue eu consequat ac felis donec et odio pellentesque. Condimentum vitae sapien pellentesque habitant.</li>
  1257. <li>Add a trivia about your OC here! A condimentum vitae sapien pellentesque habitant morbi. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Eu ultrices vitae auctor eu augue ut lectus arcu. Eu nisl nunc mi ipsum faucibus vitae. Rhoncus urna neque viverra justo nec ultrices dui sapien. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Elit sed vulputate mi sit amet mauris commodo quis. Laoreet sit amet cursus sit amet. Tincidunt tortor aliquam nulla facilisi. In tellus integer feugiat scelerisque varius morbi enim nunc. Nibh cras pulvinar mattis nunc sed blandit libero volutpat. Eros donec ac odio tempor orci. Auctor elit sed vulputate mi sit amet mauris commodo. Et malesuada fames ac turpis egestas. Mauris rhoncus aenean vel elit scelerisque. Erat velit scelerisque in dictum non consectetur a erat nam. Proin nibh nisl condimentum id venenatis.</li>
  1258. <li>Add a trivia about your OC here! Odio morbi quis commodo odio aenean sed adipiscing diam donec. Sem nulla pharetra diam sit amet nisl. Aliquam id diam maecenas ultricies mi eget mauris. Duis ut diam quam nulla porttitor massa id. Ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum. In metus vulputate eu scelerisque felis imperdiet. Fermentum iaculis eu non diam phasellus vestibulum lorem sed risus. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Orci porta non pulvinar neque laoreet. Malesuada fames ac turpis egestas integer eget aliquet. Sit amet porttitor eget dolor. Auctor augue mauris augue neque gravida in fermentum et sollicitudin. Sed felis eget velit aliquet. Sit amet nisl purus in mollis nunc sed. Iaculis urna id volutpat lacus.</li>
  1259. </ul>
  1260. </div>
  1261.  
  1262. <!--- END OF TRIVIA --->
  1263.  
  1264.  
  1265. </div>
  1266.  
  1267.  
  1268. <div class="tab-pane fade" id="Misc">
  1269.  
  1270. <!--- TABLE OF CONTENT --->
  1271.  
  1272. <div class="col" style="max-width: 200pt; background:transparent; border:1pt solid #fff; padding:5pt; text-align:left; margin:1em 0; border-collapse:separate; color:#3a3a3a; border-radius:1.5ex; overflow:hidden;">
  1273. <div class="card card-outline-danger acards" style="background:transparent;border:transparent;">
  1274. <p style="text-align:left; font-size: 11pt; color: #3A3A3A;">
  1275. Contents [<a href="#misc_contents" data-toggle="collapse" data-target="#misc_contents" aria-expanded="false" title="show">show</a>]
  1276. </p>
  1277. <div id="misc_contents" class="collapse show active" style="font-size: 11pt;">
  1278. <ul style="margin: 0; list-style-type:square; color: #3A3A3A;">
  1279. <li class="toclevel-1">
  1280. <li class="toclevel-1">
  1281. <a href="#early_concept">Early Designs and Concepts</a>
  1282. </li>
  1283. <li class="toclevel-1">
  1284. <a href="#content">content</a>
  1285. </li>
  1286. <li class="toclevel-1">
  1287. <a href="#misc_Trivia">Trivia</a>
  1288. </li>
  1289. </ul>
  1290. </div>
  1291. </div>
  1292. </div>
  1293.  
  1294. <!--- END TOC --->
  1295.  
  1296. <!--- MISC CONTENT --->
  1297.  
  1298. <h2 style="border-bottom:1pt solid #CCCCCC; color: #3A3A3A; padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  1299. <span class="mw-headline" id="content1"><i class="fal fa-users fa-fw mx-2"></i>content</span>
  1300. </h2>
  1301.  
  1302. <!--- END OF CONTENT --->
  1303. <p>You can use the Miscellanious Section for anything you want! Trivia, Early concept design, headcanons etc.</p>
  1304. <!--- MISC CONTENT --->
  1305.  
  1306. <h2 style="border-bottom:1pt solid #CCCCCC; color: #3A3A3A; padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  1307. <span class="mw-headline" id="content2"><i class="fal fa-users fa-fw mx-2"></i>content 2</span>
  1308. </h2>
  1309.  
  1310. <!--- END OF CONTENT --->
  1311.  
  1312. <!--- MISC CONTENT --->
  1313.  
  1314. <h2 style="border-bottom:1pt solid #CCCCCC; color: #3A3A3A; padding:5pt 0;text-align:left;font-size:20pt;margin-top: 30px;overflow:hidden;">
  1315. <span class="mw-headline" id="content3"><i class="fal fa-users fa-fw mx-2"></i>content 3</span>
  1316. </h2>
  1317.  
  1318. <!--- END OF CONTENT --->
  1319.  
  1320. </div>
  1321.  
  1322. </div>
  1323. </tbody>
  1324. </div>
  1325. </table>
  1326. </div>
  1327. <div style="border-collapse: collapse; margin: auto; width: 200px;">
  1328. <div class="card card-inverse text-muted text-center" style="z-index: 2">
  1329. <div class="card-block p-2">
  1330. <small>Code edited by <a href="https://toyhou.se/shannta" class="text-reset"><i class="far fa-seedling fa-fw mr-1"></i>Shannta</a></small>
  1331. </div>
  1332. </div>
  1333. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!