API tools faq
paste
Advertisement
Guest User

Trainer Theme

a guest
Oct 2nd, 2020
3,179
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 70.04 KB | None | 0 0
raw download clone embed print report
  1. <div class="py-3 px-0 mx-0 mb-2 card border-0" style="margin-top: -60px;">
  2. <div class="container mx-3" style="letter-spacing: .45px;">
  3. <div class="bg-faded m-3 p-3 d-block" style="border-radius: 1em;">
  4. <div class="row no-gutters">
  5. <!--------- LEFT SIDE ------------->
  6. <div class="col-md-4">
  7. <div class="container">
  8. <div class="card d-block border-0 p-3" style="border-radius: 1em; overflow:auto; height:645px;">
  9. <!---- ICON ---->
  10. <img src="https://cdn.discordapp.com/attachments/747182460244197427/757580952569380864/unknown.png"
  11. style="max-height: 200px;" class="d-block mx-auto mt-0 mb-1 p-2 card rounded-circle border-0">
  12.  
  13. <!--- sidebar info --->
  14. <div class="justify-content-between">
  15. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Name</b></div>
  16. <div>Name</div>
  17. </div>
  18. <hr class="my-2">
  19. <div class="justify-content-between">
  20. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Age</b></div>
  21. <div>Age</div>
  22. </div>
  23. <hr class="my-2">
  24. <div class="justify-content-between">
  25. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Gender</b></div>
  26. <div>(And pronouns)</div>
  27. </div>
  28. <hr class="my-2">
  29. <div class="justify-content-between">
  30. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Orientation</b></div>
  31. <div>Orientation</div>
  32. </div>
  33. <hr class="my-2">
  34. <div class="justify-content-between">
  35. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Ethnicity</b></div>
  36. <div>or region</div>
  37. </div>
  38. <hr class="my-2">
  39. <div class="justify-content-between">
  40. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Height</b></div>
  41. <div>height</div>
  42. </div>
  43. <hr class="my-2">
  44. <div class="justify-content-between">
  45. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Build</b></div>
  46. <div>or weight</div>
  47. </div>
  48. <hr class="my-2">
  49. <div class="justify-content-between">
  50. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Game</b></div>
  51. <div>Or region</div>
  52. </div>
  53. <hr class="my-2">
  54. <div class="justify-content-between">
  55. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Trainer Class</b></div>
  56. <div>Or occupation</div>
  57. </div>
  58. <hr class="my-2">
  59. <div class="justify-content-between">
  60. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Preferred Type</b></div>
  61. <div>type</div>
  62. </div>
  63. <hr class="my-2">
  64. <div class="justify-content-between">
  65. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Theme</b></div>
  66. <div><a href="LINK" target="_BLANK">
  67. <i class="fas fa-list-music" /> <i class="fas fa-music" /> <i class="fas fa-music-alt" /></a></div>
  68. </div>
  69.  
  70. </div><!--- end of left text box --->
  71.  
  72. </div><!--- end of left container --->
  73. </div><!--- end of left column --->
  74.  
  75. <!----------- RIGHT SIDE ------------>
  76. <div class="col-md-8">
  77. <div class="container">
  78. <!----- navigation ---->
  79. <nav>
  80. <div class="nav nav-tabs hidden-sm-down border-0 align-items-center ml-4" id="nav-tab" role="tablist">
  81. <a class="nav-item nav-link active border-0" id="nav-one-tab" data-toggle="tab" href="#nav-one" role="tab" aria-controls="nav-one" aria-selected="true"><i class="fas fa-address-card fa-2x px-2" /></a>
  82.  
  83. <a class="nav-item nav-link border-0" id="nav-two-tab" data-toggle="tab" href="#nav-two" role="tab" aria-controls="nav-two" aria-selected="false"><i class="fas fa-clock fa-2x px-3" /></a>
  84.  
  85. <a class="nav-item nav-link border-0" id="nav-three-tab" data-toggle="tab" href="#nav-three" role="tab" aria-controls="nav-three" aria-selected="false"><i class="fas fa-user-circle fa-2x px-3" /></a>
  86.  
  87. <a class="nav-item nav-link border-0" id="nav-four-tab" data-toggle="tab" href="#nav-four" role="tab" aria-controls="nav-four" aria-selected="false"><i class="fad fa-backpack fa-2x px-3" /></a>
  88.  
  89. <a class="nav-item nav-link border-0" id="nav-five-tab" data-toggle="tab" href="#nav-five" role="tab" aria-controls="nav-five" aria-selected="false"><i class="fas fa-crosshairs fa-2x px-3" /></a>
  90.  
  91. <a class="nav-item nav-link border-0" id="nav-six-tab" data-toggle="tab" href="#nav-six" role="tab" aria-controls="nav-six" aria-selected="false"><i class="fas fa-address-book fa-2x px-3" /></a>
  92.  
  93. <a class="nav-item nav-link border-0" id="nav-seven-tab" data-toggle="tab" href="#nav-seven" role="tab" aria-controls="nav-seven" aria-selected="false"><i class="fas fa-award fa-2x px-3" /></a>
  94. </div>
  95. </nav>
  96.  
  97. <!--- Mobile Navigation --->
  98.  
  99. <ul class="nav flex-column hidden-md-up nav-pills">
  100. <li class="nav-item">
  101. <a class="nav-item nav-link active" id="nav-one-tab" data-toggle="tab" href="#nav-one" role="tab" aria-controls="nav-one" aria-selected="true">In-Game Summary</a>
  102. </li>
  103. <li class="nav-item">
  104. <a class="nav-item nav-link" id="nav-two-tab" data-toggle="tab" href="#nav-two" role="tab" aria-controls="nav-two" aria-selected="false">Personality and History</a>
  105. </li>
  106. <li class="nav-item">
  107. <a class="nav-item nav-link" id="nav-three-tab" data-toggle="tab" href="#nav-three" role="tab" aria-controls="nav-three" aria-selected="false">Physical Description</a>
  108. </li>
  109. <li class="nav-item">
  110. <a class="nav-item nav-link" id="nav-four-tab" data-toggle="tab" href="#nav-four" role="tab" aria-controls="nav-four" aria-selected="false">Inventory and Stats</a>
  111. </li>
  112. <li class="nav-item">
  113. <a class="nav-item nav-link" id="nav-five-tab" data-toggle="tab" href="#nav-five" role="tab" aria-controls="nav-five" aria-selected="false">Team</a>
  114. </li>
  115. <li class="nav-item">
  116. <a class="nav-item nav-link" id="nav-six-tab" data-toggle="tab" href="#nav-six" role="tab" aria-controls="nav-six" aria-selected="false">Relationships</a>
  117. </li>
  118. <li class="nav-item">
  119. <a class="nav-item nav-link" id="nav-seven-tab" data-toggle="tab" href="#nav-seven" role="tab" aria-controls="nav-seven" aria-selected="false">Miscellaneous</a>
  120. </li>
  121. </ul>
  122. <!----- end of navigation ----->
  123.  
  124. <!---- TAB INFO ---->
  125. <div class="card d-block border-0 p-3 mb-3 my-0 mx-0" style="border-radius: 1em; overflow:auto; height:500px;">
  126. <div class="tab-content" id="nav-tabContent">
  127.  
  128.  
  129. <!--- TAB ONE: SUMMARY --->
  130. <div class="tab-pane fade show active" id="nav-one" role="tabpanel" aria-labelledby="nav-one-tab">
  131. <!---- TEAM MEMBERS ----------->
  132. <div class="row no-gutters mb-2 mt-1">
  133. <!--- POKEMON --->
  134. <div class="col-2 mx-auto">
  135. <a href="link">
  136. <img src="https://www.smogon.com/forums/attachments/181_2-png.275718/" class="d-block mb-1 mx-auto" style="height: 50px;"><!--- credit: https://www.smogon.com/forums/threads/x-y-sprite-project.3486712/ --->
  137. </a>
  138. </div>
  139.  
  140. <!--- POKEMON --->
  141. <div class="col-2 mx-auto">
  142. <a href="link">
  143. <img src="https://img.pokemondb.net/sprites/ruby-sapphire/normal/flygon.png" class="d-block mb-1 mx-auto" style="height: 50px;">
  144. </a>
  145. </div>
  146.  
  147. <!--- POKEMON --->
  148. <div class="col-2 mx-0">
  149. <a href="link">
  150. <img src="https://img.pokemondb.net/sprites/platinum/normal/blaziken.png" class="d-block mb-1 mx-auto" style="height: 50px;">
  151. </a>
  152. </div>
  153.  
  154. <!--- POKEMON --->
  155. <div class="col-2 mx-0">
  156. <a href="link">
  157. <img src="https://img.pokemondb.net/sprites/firered-leafgreen/normal/lapras.png" class="d-block mb-1 mx-auto" style="height: 50px;">
  158. </a>
  159. </div>
  160.  
  161. <!--- POKEMON --->
  162. <div class="col-2 mx-0">
  163. <a href="link">
  164. <img src="https://img.pokemondb.net/sprites/ruby-sapphire/normal/gyarados.png" class="d-block mb-1 mx-auto" style="height: 50px;">
  165. </a>
  166. </div>
  167.  
  168. <!--- POKEMON --->
  169. <div class="col-2 mx-0">
  170. <a href="link">
  171. <img src="https://img.pokemondb.net/sprites/emerald/normal/blissey.png" class="d-block mb-1 mx-auto" style="height: 50px;">
  172. </a>
  173. </div>
  174.  
  175. </div><!---- end of team members ----->
  176. <hr class="mb-3 mt-0 mx-auto" width="85%" align="center">
  177.  
  178. <h2 class="text-center my-3"><i class="text-muted">
  179. "This is a quote."
  180. </i></h2>
  181.  
  182. <!--- trainer info---->
  183. <div class="card mx-5 px-3">
  184. <div class=" card-block d-block">
  185. <div class="justify-content-between">
  186. <div class="pr-1"><b>Hometown:</b></div>
  187. <div>hometown</div>
  188. </div>
  189. <hr class="my-2">
  190. <div class="justify-content-between">
  191. <div class="pr-1"><b>Pokedex:</b></div>
  192. <div>color or ##</div>
  193. </div>
  194. <hr class="my-2">
  195. <div class="justify-content-between">
  196. <div class="pr-1"><b>Nature:</b></div>
  197. <div>nature</div>
  198. </div>
  199. <hr class="my-2">
  200. <div class="justify-content-between">
  201. <div class="pr-1"><b>Starter:</b></div>
  202. <div>starter</div>
  203. </div>
  204. </div><!--- end card block--->
  205. </div><!--- end trainer info--->
  206.  
  207. <!--- summary blurb--->
  208. <div class="mt-3 px-3">
  209. <div class="w-100 my-auto text-justify">
  210. <p>character summary will be here. should ideally be kept short, only including things a stranger would need to know to interact with them. However, this box will scroll if you fill it up.</p>
  211. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh quis magna placerat porttitor. Morbi ac enim at eros scelerisque pretium. Nam elit enim, fermentum et nunc ut, laoreet sollicitudin nibh.</p>
  212. </div><!--- end spacing--->
  213. </div><!--- end summary blurb--->
  214.  
  215. </div><!--end tab 1-->
  216.  
  217.  
  218. <!---- TAB TWO: PERSONALITY + HISTORY ------>
  219. <div class="tab-pane fade" id="nav-two" role="tabpanel" aria-labelledby="nav-two-tab">
  220. <h1 style="text-align:center;">Personality and History</h1>
  221. <hr class="mb-3 mt-0 mx-auto" width="85%" align="center">
  222. <div class="w-100 my-auto text-justify">
  223. <!------------------- POSI/NEUT/NEGI TRAITS ---------------------------------------->
  224. <div class="row no-gutters">
  225. <div class="col-md-4 pl-md-1 mb-2">
  226. <div class="card card-block pb-1 d-block h-100" style="padding-top:8px;">
  227. <p class="text-uppercase text-center mb-1" style="letter-spacing:1px;"><b><i class="fa fa-plus-circle" aria-hidden="true"></i> Positive</b></p>
  228. <hr class="mt-0 mb-1">
  229. <p>posi trait<br>
  230. posi trait<br>
  231. posi trait</p>
  232. </div>
  233. </div>
  234.  
  235. <div class="col-md-4 pl-md-1 mb-2">
  236. <div class="card card-block pb-1 d-block h-100" style="padding-top:8px;">
  237. <p class="text-uppercase text-center mb-1" style="letter-spacing:1px;"><b><i class="fa fa-pause-circle" aria-hidden="true"></i> Neutral</b></p>
  238. <hr class="mt-0 mb-1">
  239. <p>neut trait<br>
  240. neut trait<br>
  241. neut trait</p>
  242. </div>
  243. </div>
  244.  
  245. <div class="col-md-4 pl-md-1 mb-2">
  246. <div class="card card-block pb-1 d-block h-100" style="padding-top:8px;">
  247. <p class="text-uppercase text-center mb-1" style="letter-spacing:1px;"><b><i class="fa fa-minus-circle" aria-hidden="true"></i> Negative</b></p>
  248. <hr class="mt-0 mb-1">
  249. <p>nega trait<br>
  250. nega trait<br>
  251. nega trait</p>
  252. </div>
  253. </div>
  254. </div>
  255. <!---end of traits--->
  256.  
  257. <!--- personality blurb--->
  258. <div class="mt-2 px-3">
  259. <p>Personality stuff will be here. If you add more lines to one of the above boxes, it'll look best if you do the same with the others.</p>
  260. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh quis magna placerat porttitor. Morbi ac enim at eros scelerisque pretium. Nam elit enim, fermentum et nunc ut, laoreet sollicitudin nibh. Nunc at sodales turpis. Quisque vulputate vel nisi eu condimentum. Sed ultrices velit a ante tristique aliquet. Maecenas nec volutpat leo, ac cursus dui. Sed malesuada ipsum sit amet odio tincidunt, vel congue enim sagittis. Cras venenatis ut tellus nec consectetur. Pellentesque pretium ex sit amet magna ultrices commodo.</p>
  261. </div><!--- end personality blurb--->
  262.  
  263. <!---- history stuff ---->
  264. <div class="px-3 mt-3">
  265. <h2>Early Life</h2>
  266. <hr class="mt-0 ">
  267. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh quis magna placerat porttitor. Morbi ac enim at eros scelerisque pretium. Nam elit enim, fermentum et nunc ut, laoreet sollicitudin nibh. Nunc at sodales turpis. Quisque vulputate vel nisi eu condimentum. Sed ultrices velit a ante tristique aliquet. Maecenas nec volutpat leo, ac cursus dui. Sed malesuada ipsum sit amet odio tincidunt, vel congue enim sagittis. Cras venenatis ut tellus nec consectetur. Pellentesque pretium ex sit amet magna ultrices commodo.</p>
  268.  
  269. <h2 class="mt-3">Adolescence</h2>
  270. <hr class="mt-0 ">
  271. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh quis magna placerat porttitor. Morbi ac enim at eros scelerisque pretium. Nam elit enim, fermentum et nunc ut, laoreet sollicitudin nibh. Nunc at sodales turpis. Quisque vulputate vel nisi eu condimentum. Sed ultrices velit a ante tristique aliquet. Maecenas nec volutpat leo, ac cursus dui. Sed malesuada ipsum sit amet odio tincidunt, vel congue enim sagittis. Cras venenatis ut tellus nec consectetur. Pellentesque pretium ex sit amet magna ultrices commodo.</p>
  272.  
  273. <h2 class="mt-3">Adulthood</h2>
  274. <hr class="mt-0 ">
  275. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh quis magna placerat porttitor. Morbi ac enim at eros scelerisque pretium. Nam elit enim, fermentum et nunc ut, laoreet sollicitudin nibh. Nunc at sodales turpis. Quisque vulputate vel nisi eu condimentum. Sed ultrices velit a ante tristique aliquet. Maecenas nec volutpat leo, ac cursus dui. Sed malesuada ipsum sit amet odio tincidunt, vel congue enim sagittis. Cras venenatis ut tellus nec consectetur. Pellentesque pretium ex sit amet magna ultrices commodo.</p>
  276. </div><!--- end padding--->
  277.  
  278. </div><!--- end of spacing --->
  279. </div><!--- end tab 2 ------>
  280.  
  281.  
  282. <!---- TAB THREE: PHYSICAL DESCRIPTION ------>
  283. <div class="tab-pane fade" id="nav-three" role="tabpanel" aria-labelledby="nav-three-tab">
  284. <h1 style="text-align:center;">Physical Description</h1>
  285. <hr class="mb-3 mt-0 mx-auto" width="85%" align="center">
  286. <div class="w-100 my-auto text-justify">
  287.  
  288. <!--- start copy here for new row of boxes--->
  289. <div class="row no-gutters">
  290. <!------------------- PHYSICAL STUFF ---------------------------------------->
  291. <div class="col-md-6 pr-md-1 mb-2">
  292. <div class="card card-block pb-1 d-block h-100" style="padding-top:8px;">
  293. <p class="text-uppercase text-center mb-1" style="letter-spacing:1px;"><b><i class="fa fa-heartbeat" aria-hidden="true"></i> Measurements</b></p>
  294. <hr class="mt-0 mb-2">
  295. <div class="justify-content-between">
  296. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Height</b></div>
  297. <div>info</div>
  298. </div>
  299. <div class="justify-content-between">
  300. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Weight</b></div>
  301. <div>info</div>
  302. </div>
  303. <div class="justify-content-between">
  304. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Build</b></div>
  305. <div>info</div>
  306. </div>
  307. <div class="justify-content-between">
  308. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Race</b></div>
  309. <div>info</div>
  310. </div>
  311. </div>
  312. </div>
  313.  
  314. <div class="col-md-6 pl-md-1 mb-2">
  315. <div class="card card-block pb-1 d-block h-100" style="padding-top:8px;">
  316. <p class="text-uppercase text-center mb-1" style="letter-spacing:1px;"><b><i class="fa fa-book-heart" aria-hidden="true"></i> Attributes</b></p>
  317. <hr class="mt-0 mb-2">
  318. <div class="justify-content-between">
  319. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Position</b></div>
  320. <div>leader/teammate/etc</div>
  321. </div>
  322. <div class="justify-content-between">
  323. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Occupation</b></div>
  324. <div>info</div>
  325. </div>
  326. <div class="justify-content-between">
  327. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Style</b></div>
  328. <div>info</div>
  329. </div>
  330. <div class="justify-content-between">
  331. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Presentation</b></div>
  332. <div>masc/fem/other</div>
  333. </div>
  334. </div>
  335. </div>
  336. </div>
  337. <!--- end copy here for new row of boxes--->
  338.  
  339. <!--notable scars --->
  340.  
  341. <div class="card card-block pb-1 d-block h-100 px-3" style="padding-top:8px;">
  342. <p class="text-uppercase text-center mb-1" style="letter-spacing:1px;"><b><i class="fas fa-claw-marks" aria-hidden="true"></i> Notable Scars</b></p>
  343. <hr class="mt-0 mb-1">
  344. <p><ul class="mb-0 px-3 list-unstyled pl-2">
  345. <li class="mb-2"><i class="fas fa-tint fa-fw text-muted" /> info.</li>
  346. <li class="mb-2"><i class="fas fa-tint fa-fw text-muted" /> info.</li>
  347. <li class="mb-2"><i class="fas fa-tint fa-fw text-muted" /> info.</li>
  348. </ul></p>
  349. </div><!--- end notable scars --->
  350.  
  351. <div class="px-3 mt-3">
  352. <div class="w-100 my-auto text-justify">
  353. <p>Use this box to describe your character's physical appearance. Feel free to expand on anything listed above.</p>
  354.  
  355. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh quis magna placerat porttitor. Morbi ac enim at eros scelerisque pretium. Nam elit enim, fermentum et nunc ut, laoreet sollicitudin nibh. Nunc at sodales turpis. Quisque vulputate vel nisi eu condimentum. Sed ultrices velit a ante tristique aliquet. Maecenas nec volutpat leo, ac cursus dui. Sed malesuada ipsum sit amet odio tincidunt, vel congue enim sagittis. Cras venenatis ut tellus nec consectetur. Pellentesque pretium ex sit amet magna ultrices commodo.</p>
  356. </div>
  357. </div><!-- end of phys desc section --->
  358.  
  359. <p class="mt-3"><h1>Design Notes</h1>
  360. <hr class="mt-0 ">
  361. <p><ul class="mb-0 px-3 list-unstyled pl-2">
  362. <li class="mb-2"><i class="fas fa-paint-brush fa-fw text-muted" /> info.</li>
  363. <li class="mb-2"><i class="fas fa-paint-brush fa-fw text-muted" /> info.</li>
  364. <li class="mb-2"><i class="fas fa-paint-brush fa-fw text-muted" /> info.</li>
  365. </ul></p>
  366. </p>
  367.  
  368. </div><!--- end of spacing --->
  369. </div><!--- end tab 3 ------>
  370.  
  371.  
  372. <!------- TAB FOUR: INVENTORY ---------->
  373. <div class="tab-pane fade" id="nav-four" role="tabpanel" aria-labelledby="nav-four-tab">
  374. <h1 style="text-align:center;">Inventory</h1>
  375. <hr class="mb-3 mt-0 mx-auto" width="85%" align="center">
  376.  
  377. <!------------------- ITEM ---------------------------------------->
  378. <div class="card px-2 pt-2 bg-faded mb-4">
  379. <div class="row no-gutters justify-content-center">
  380. <div class=" card-block d-block h-100">
  381. <p class="text-uppercase mb-1" style="letter-spacing:1px;">
  382. <b>Item Title</b>
  383. <span class="pull-right small">[ item explanation ]</span>
  384. <hr class="mt-0">
  385. <p>item description text here </p>
  386. </div>
  387. </div></p>
  388. </div><!--- end of item--->
  389.  
  390. <!------------------- ITEM ---------------------------------------->
  391. <div class="card px-2 pt-2 bg-faded mb-4">
  392. <div class="row no-gutters justify-content-center">
  393. <div class=" card-block d-block h-100">
  394. <p class="text-uppercase mb-1" style="letter-spacing:1px;">
  395. <b>Item Title</b>
  396. <span class="pull-right small">[ item explanation ]</span>
  397. <hr class="mt-0">
  398. <p>item description text here </p>
  399. </div>
  400. </div></p>
  401. </div><!--- end of item--->
  402.  
  403. <!--- Stats--->
  404. <h2 class="mt-4 pl-3">RPG Stats</h2>
  405. <hr class="mt-0 ">
  406. <!---- stat bar -- change % to change fullness ---------------->
  407. <div class="row">
  408. <div class="col-6 mb-3">
  409. <div class="justify-content-between">
  410. <div class="pr-3"><b>Strength</b></div>
  411. <div class="pr-1">20 / 20</div></div>
  412. <div class="progress">
  413. <div class="progress-bar" style="width:100%">
  414. </div>
  415. </div>
  416. </div>
  417.  
  418. <div class="col-6 mb-3">
  419. <div class="justify-content-between">
  420. <div class="pr-3"><b>Constitution</b></div>
  421. <div class="pr-1">18 / 20</div></div>
  422. <div class="progress">
  423. <div class="progress-bar" style="width:90%">
  424. </div>
  425. </div>
  426. </div>
  427.  
  428. <div class="col-6 mb-3">
  429. <div class="justify-content-between">
  430. <div class="pr-3"><b>Dexterity</b></div>
  431. <div class="pr-1">16 / 20</div></div>
  432. <div class="progress">
  433. <div class="progress-bar" style="width:80%">
  434. </div>
  435. </div>
  436. </div>
  437.  
  438. <div class="col-6 mb-3">
  439. <div class="justify-content-between">
  440. <div class="pr-3"><b>Intelligence</b></div>
  441. <div class="pr-1">14 / 20</div></div>
  442. <div class="progress">
  443. <div class="progress-bar" style="width:70%">
  444. </div>
  445. </div>
  446. </div>
  447.  
  448. <div class="col-6 mb-3">
  449. <div class="justify-content-between">
  450. <div class="pr-3"><b>Wisdom</b></div>
  451. <div class="pr-1">12 / 20</div></div>
  452. <div class="progress">
  453. <div class="progress-bar" style="width:60%">
  454. </div>
  455. </div>
  456. </div>
  457.  
  458. <div class="col-6 mb-3">
  459. <div class="justify-content-between">
  460. <div class="pr-3"><b>Charisma</b></div>
  461. <div class="pr-1">10 / 20</div></div>
  462. <div class="progress">
  463. <div class="progress-bar" style="width:50%">
  464. </div>
  465. </div>
  466. </div>
  467.  
  468. <div class="col-6 mb-1">
  469. <div class="justify-content-between">
  470. <div class="pr-3"><b>Health Points</b></div>
  471. <div class="pr-1">08 / 20</div></div>
  472. <div class="progress">
  473. <div class="progress-bar" style="width:40%">
  474. </div>
  475. </div>
  476. </div>
  477.  
  478. <div class="col-6 mb-1">
  479. <div class="justify-content-between">
  480. <div class="pr-3"><b>Mana Points</b></div>
  481. <div class="pr-1">06 / 20</div></div>
  482. <div class="progress">
  483. <div class="progress-bar" style="width:30%;">
  484. </div>
  485. </div>
  486. </div>
  487. </div><!--- end percent bars--->
  488.  
  489. </div><!--- end of tab 4--->
  490.  
  491. <!---- TAB FIVE: POKEMON TEAM ------>
  492. <div class="tab-pane fade" id="nav-five" role="tabpanel" aria-labelledby="nav-five-tab">
  493. <h1 style="text-align:center;">Team</h1>
  494. <hr class="mb-3 mt-0 mx-auto" width="85%" align="center">
  495. <div class="w-100 my-auto text-justify">
  496.  
  497. <!---- TEAMMATE 1 --->
  498. <div class="row no-gutters align-items-center">
  499. <div class="col-4">
  500.  
  501. <!-------- pokemon sprite ----------->
  502. <img src="https://www.pokencyclopedia.info/sprites/3ds/ani_6/3ani__181-mega__xy.gif" class="d-block mb-1 mx-auto" style="max-height: 250px;">
  503. <!--- pokeball & level ---->
  504. <div class="row no-gutters">
  505. <div class="col-6">
  506. <img src="https://cdn.bulbagarden.net/upload/f/f9/Bag_Moon_Ball_Sprite.png" class="d-block mb-1 mr-2" style="max-height: 50px; float:right;">
  507. </div>
  508. <div class="col-6">
  509. <p>Lv. 50</p>
  510. </div>
  511. </div>
  512.  
  513. <!--- nature --->
  514. <p class="text-center mt-1 mb-3 px-1"><i class="text-muted">
  515. <b>Nature</b> nature. Characteristic.</i>
  516. </p>
  517.  
  518. <!------- RELATIONSHIP STRENGTH -- FAS FOR FULL AND FAL FOR EMPTY -->
  519. <div class="mx-auto mb-2">
  520. <center>
  521. <!--- rating --->
  522. <i class="fas fa-heart fa-fw" />
  523. <i class="fas fa-heart fa-fw" />
  524. <i class="fas fa-heart fa-fw" />
  525. <i class="fas fa-heart fa-fw" />
  526. <i class="fas fa-heart fa-fw" />
  527. </center>
  528. </div><!--- end of relationship strength --->
  529.  
  530. <!---- held item ---->
  531. <img src="https://www.pokencyclopedia.info/sprites/items/items_dream-world/i_dream_dragon-fang.png" class="d-block mb-1 mt-3 mx-auto" style="max-height: 30px;">
  532. <p class="text-muted text-center mt-1">
  533. Held Item
  534. </p>
  535. </div><!--- end of left side --->
  536.  
  537. <div class="col-8"><!--- right side--->
  538.  
  539. <!--- character name --->
  540. <center><h2 class="mt-2"><a href="#LINK">
  541. Name
  542. </a></h2></center>
  543.  
  544. <!--- pokedex info---->
  545. <div class="card mx-1 px-2">
  546. <div class=" card-block d-block">
  547. <div class="justify-content-between">
  548. <div class="pr-1"><b>Pokedex:</b></div>
  549. <div>#181. Ampharos</div>
  550. </div>
  551. <hr class="my-2">
  552. <div class="justify-content-between">
  553. <div class="pr-1"><b>Level Met:</b></div>
  554. <div>##</div>
  555. </div>
  556. <hr class="my-2">
  557. <div class="justify-content-between">
  558. <div class="pr-1"><b>Moves:</b></div>
  559. <div>Move 1, Move 2, Move 3, Move 4</div>
  560. </div>
  561. </div><!--- end card block--->
  562. </div><!--- end pokedex info--->
  563.  
  564. <div class="mt-3 mx-2">
  565. <p>Write about your pokemon here! Try to keep it brief, or it might look a little awkward.</p>
  566.  
  567. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin.</p>
  568. </div><!--- end blurb spacing-->
  569. </div><!--- end of right side--->
  570. </div><!-- end of teammate 1 -->
  571.  
  572. <hr>
  573.  
  574. <!---- TEAMMATE 2 --->
  575. <div class="row no-gutters align-items-center">
  576. <div class="col-4">
  577.  
  578. <!-------- pokemon sprite ----------->
  579. <img src="https://www.pokencyclopedia.info/sprites/3ds/ani_6/3ani__330__xy.gif" class="d-block mb-1 mx-auto" style="max-height: 250px;">
  580. <!--- pokeball & level ---->
  581. <div class="row no-gutters">
  582. <div class="col-6">
  583. <img src="https://cdn.bulbagarden.net/upload/f/f9/Bag_Moon_Ball_Sprite.png" class="d-block mb-1 mr-2" style="max-height: 50px; float:right;">
  584. </div>
  585. <div class="col-6">
  586. <p>Lv. 50</p>
  587. </div>
  588. </div>
  589.  
  590. <!--- nature --->
  591. <p class="text-center mt-1 mb-3 px-1"><i class="text-muted">
  592. <b>Nature</b> nature. Characteristic.</i>
  593. </p>
  594.  
  595. <!------- RELATIONSHIP STRENGTH -- FAS FOR FULL AND FAL FOR EMPTY -->
  596. <div class="mx-auto mb-2">
  597. <center>
  598. <!--- rating --->
  599. <i class="fas fa-heart fa-fw" />
  600. <i class="fas fa-heart fa-fw" />
  601. <i class="fas fa-heart fa-fw" />
  602. <i class="fas fa-heart fa-fw" />
  603. <i class="fas fa-heart fa-fw" />
  604. </center>
  605. </div><!--- end of relationship strength --->
  606.  
  607. <!---- held item ---->
  608. <img src="https://www.pokencyclopedia.info/sprites/items/items_dream-world/i_dream_dragon-fang.png" class="d-block mb-1 mt-3 mx-auto" style="max-height: 30px;">
  609. <p class="text-muted text-center mt-1">
  610. Held Item
  611. </p>
  612. </div><!--- end of left side --->
  613.  
  614. <div class="col-8"><!--- right side--->
  615.  
  616. <!--- character name --->
  617. <center><h2 class="mt-2"><a href="#LINK">
  618. Name
  619. </a></h2></center>
  620.  
  621. <!--- pokedex info---->
  622. <div class="card mx-1 px-2">
  623. <div class=" card-block d-block">
  624. <div class="justify-content-between">
  625. <div class="pr-1"><b>Pokedex:</b></div>
  626. <div>#330. Flygon</div>
  627. </div>
  628. <hr class="my-2">
  629. <div class="justify-content-between">
  630. <div class="pr-1"><b>Level Met:</b></div>
  631. <div>##</div>
  632. </div>
  633. <hr class="my-2">
  634. <div class="justify-content-between">
  635. <div class="pr-1"><b>Moves:</b></div>
  636. <div>Move 1, Move 2, Move 3, Move 4</div>
  637. </div>
  638. </div><!--- end card block--->
  639. </div><!--- end pokedex info--->
  640.  
  641. <div class="mt-3 mx-2">
  642. <p>Write about your pokemon here! Try to keep it brief, or it might look a little awkward.</p>
  643.  
  644. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin.</p>
  645. </div><!--- end blurb spacing-->
  646. </div><!--- end of right side--->
  647. </div><!-- end of teammate 2 -->
  648.  
  649. <hr>
  650.  
  651. <!---- TEAMMATE 3 --->
  652. <div class="row no-gutters align-items-center">
  653. <div class="col-4">
  654.  
  655. <!-------- pokemon sprite ----------->
  656. <img src="https://www.pokencyclopedia.info/sprites/3ds/ani_6/3ani__257_f_xy.gif" class="d-block mb-1 mx-auto" style="max-height: 250px;">
  657. <!--- pokeball & level ---->
  658. <div class="row no-gutters">
  659. <div class="col-6">
  660. <img src="https://cdn.bulbagarden.net/upload/f/f9/Bag_Moon_Ball_Sprite.png" class="d-block mb-1 mr-2" style="max-height: 50px; float:right;">
  661. </div>
  662. <div class="col-6">
  663. <p>Lv. 50</p>
  664. </div>
  665. </div>
  666.  
  667. <!--- nature --->
  668. <p class="text-center mt-1 mb-3 px-1"><i class="text-muted">
  669. <b>Nature</b> nature. Characteristic.</i>
  670. </p>
  671.  
  672. <!------- RELATIONSHIP STRENGTH -- FAS FOR FULL AND FAL FOR EMPTY -->
  673. <div class="mx-auto mb-2">
  674. <center>
  675. <!--- rating --->
  676. <i class="fas fa-heart fa-fw" />
  677. <i class="fas fa-heart fa-fw" />
  678. <i class="fas fa-heart fa-fw" />
  679. <i class="fas fa-heart fa-fw" />
  680. <i class="fas fa-heart fa-fw" />
  681. </center>
  682. </div><!--- end of relationship strength --->
  683.  
  684. <!---- held item ---->
  685. <img src="https://www.pokencyclopedia.info/sprites/items/items_dream-world/i_dream_dragon-fang.png" class="d-block mb-1 mt-3 mx-auto" style="max-height: 30px;">
  686. <p class="text-muted text-center mt-1">
  687. Held Item
  688. </p>
  689. </div><!--- end of left side --->
  690.  
  691. <div class="col-8"><!--- right side--->
  692.  
  693. <!--- character name --->
  694. <center><h2 class="mt-2"><a href="#LINK">
  695. Name
  696. </a></h2></center>
  697.  
  698. <!--- pokedex info---->
  699. <div class="card mx-1 px-2">
  700. <div class=" card-block d-block">
  701. <div class="justify-content-between">
  702. <div class="pr-1"><b>Pokedex:</b></div>
  703. <div>#257. Blaziken</div>
  704. </div>
  705. <hr class="my-2">
  706. <div class="justify-content-between">
  707. <div class="pr-1"><b>Level Met:</b></div>
  708. <div>##</div>
  709. </div>
  710. <hr class="my-2">
  711. <div class="justify-content-between">
  712. <div class="pr-1"><b>Moves:</b></div>
  713. <div>Move 1, Move 2, Move 3, Move 4</div>
  714. </div>
  715. </div><!--- end card block--->
  716. </div><!--- end pokedex info--->
  717.  
  718. <div class="mt-3 mx-2">
  719. <p>Write about your pokemon here! Try to keep it brief, or it might look a little awkward.</p>
  720.  
  721. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin.</p>
  722. </div><!--- end blurb spacing-->
  723. </div><!--- end of right side--->
  724. </div><!-- end of teammate 3 -->
  725.  
  726. <hr>
  727.  
  728. <!---- TEAMMATE 4 --->
  729. <div class="row no-gutters align-items-center">
  730. <div class="col-4">
  731.  
  732. <!-------- pokemon sprite ----------->
  733. <img src="https://www.pokencyclopedia.info/sprites/3ds/ani_6/3ani__131__xy.gif" class="d-block mb-1 mx-auto" style="max-height: 250px;">
  734. <!--- pokeball & level ---->
  735. <div class="row no-gutters">
  736. <div class="col-6">
  737. <img src="https://cdn.bulbagarden.net/upload/f/f9/Bag_Moon_Ball_Sprite.png" class="d-block mb-1 mr-2" style="max-height: 50px; float:right;">
  738. </div>
  739. <div class="col-6">
  740. <p>Lv. 50</p>
  741. </div>
  742. </div>
  743.  
  744. <!--- nature --->
  745. <p class="text-center mt-1 mb-3 px-1"><i class="text-muted">
  746. <b>Nature</b> nature. Characteristic.</i>
  747. </p>
  748.  
  749. <!------- RELATIONSHIP STRENGTH -- FAS FOR FULL AND FAL FOR EMPTY -->
  750. <div class="mx-auto mb-2">
  751. <center>
  752. <!--- rating --->
  753. <i class="fas fa-heart fa-fw" />
  754. <i class="fas fa-heart fa-fw" />
  755. <i class="fas fa-heart fa-fw" />
  756. <i class="fas fa-heart fa-fw" />
  757. <i class="fas fa-heart fa-fw" />
  758. </center>
  759. </div><!--- end of relationship strength --->
  760.  
  761. <!---- held item ---->
  762. <img src="https://www.pokencyclopedia.info/sprites/items/items_dream-world/i_dream_dragon-fang.png" class="d-block mb-1 mt-3 mx-auto" style="max-height: 30px;">
  763. <p class="text-muted text-center mt-1">
  764. Held Item
  765. </p>
  766. </div><!--- end of left side --->
  767.  
  768. <div class="col-8"><!--- right side--->
  769.  
  770. <!--- character name --->
  771. <center><h2 class="mt-2"><a href="#LINK">
  772. Name
  773. </a></h2></center>
  774.  
  775. <!--- pokedex info---->
  776. <div class="card mx-1 px-2">
  777. <div class=" card-block d-block">
  778. <div class="justify-content-between">
  779. <div class="pr-1"><b>Pokedex:</b></div>
  780. <div>#131. Lapras</div>
  781. </div>
  782. <hr class="my-2">
  783. <div class="justify-content-between">
  784. <div class="pr-1"><b>Level Met:</b></div>
  785. <div>##</div>
  786. </div>
  787. <hr class="my-2">
  788. <div class="justify-content-between">
  789. <div class="pr-1"><b>Moves:</b></div>
  790. <div>Move 1, Move 2, Move 3, Move 4</div>
  791. </div>
  792. </div><!--- end card block--->
  793. </div><!--- end pokedex info--->
  794.  
  795. <div class="mt-3 mx-2">
  796. <p>Write about your pokemon here! Try to keep it brief, or it might look a little awkward.</p>
  797.  
  798. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin.</p>
  799. </div><!--- end blurb spacing-->
  800. </div><!--- end of right side--->
  801. </div><!-- end of teammate 4 -->
  802.  
  803. <hr>
  804.  
  805. <!---- TEAMMATE 5 --->
  806. <div class="row no-gutters align-items-center">
  807. <div class="col-4">
  808.  
  809. <!-------- pokemon sprite ----------->
  810. <img src="https://www.pokencyclopedia.info/sprites/3ds/ani_6/3ani__130_m_xy.gif" class="d-block mb-1 mx-auto" style="max-height: 250px;">
  811. <!--- pokeball & level ---->
  812. <div class="row no-gutters">
  813. <div class="col-6">
  814. <img src="https://cdn.bulbagarden.net/upload/f/f9/Bag_Moon_Ball_Sprite.png" class="d-block mb-1 mr-2" style="max-height: 50px; float:right;">
  815. </div>
  816. <div class="col-6">
  817. <p>Lv. 50</p>
  818. </div>
  819. </div>
  820.  
  821. <!--- nature --->
  822. <p class="text-center mt-1 mb-3 px-1"><i class="text-muted">
  823. <b>Nature</b> nature. Characteristic.</i>
  824. </p>
  825.  
  826. <!------- RELATIONSHIP STRENGTH -- FAS FOR FULL AND FAL FOR EMPTY -->
  827. <div class="mx-auto mb-2">
  828. <center>
  829. <!--- rating --->
  830. <i class="fas fa-heart fa-fw" />
  831. <i class="fas fa-heart fa-fw" />
  832. <i class="fas fa-heart fa-fw" />
  833. <i class="fas fa-heart fa-fw" />
  834. <i class="fas fa-heart fa-fw" />
  835. </center>
  836. </div><!--- end of relationship strength --->
  837.  
  838. <!---- held item ---->
  839. <img src="https://www.pokencyclopedia.info/sprites/items/items_dream-world/i_dream_dragon-fang.png" class="d-block mb-1 mt-3 mx-auto" style="max-height: 30px;">
  840. <p class="text-muted text-center mt-1">
  841. Held Item
  842. </p>
  843. </div><!--- end of left side --->
  844.  
  845. <div class="col-8"><!--- right side--->
  846.  
  847. <!--- character name --->
  848. <center><h2 class="mt-2"><a href="#LINK">
  849. Name
  850. </a></h2></center>
  851.  
  852. <!--- pokedex info---->
  853. <div class="card mx-1 px-2">
  854. <div class=" card-block d-block">
  855. <div class="justify-content-between">
  856. <div class="pr-1"><b>Pokedex:</b></div>
  857. <div>#130. Gyarados</div>
  858. </div>
  859. <hr class="my-2">
  860. <div class="justify-content-between">
  861. <div class="pr-1"><b>Level Met:</b></div>
  862. <div>##</div>
  863. </div>
  864. <hr class="my-2">
  865. <div class="justify-content-between">
  866. <div class="pr-1"><b>Moves:</b></div>
  867. <div>Move 1, Move 2, Move 3, Move 4</div>
  868. </div>
  869. </div><!--- end card block--->
  870. </div><!--- end pokedex info--->
  871.  
  872. <div class="mt-3 mx-2">
  873. <p>Write about your pokemon here! Try to keep it brief, or it might look a little awkward.</p>
  874.  
  875. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin.</p>
  876. </div><!--- end blurb spacing-->
  877. </div><!--- end of right side--->
  878. </div><!-- end of teammate 5 -->
  879.  
  880. <hr>
  881.  
  882. <!---- TEAMMATE 6 --->
  883. <div class="row no-gutters align-items-center">
  884. <div class="col-4">
  885.  
  886. <!-------- pokemon sprite ----------->
  887. <img src="https://www.pokencyclopedia.info/sprites/3ds/ani_6/3ani__242__xy.gif" class="d-block mb-1 mx-auto" style="max-height: 250px;">
  888. <!--- pokeball & level ---->
  889. <div class="row no-gutters">
  890. <div class="col-6">
  891. <img src="https://cdn.bulbagarden.net/upload/f/f9/Bag_Moon_Ball_Sprite.png" class="d-block mb-1 mr-2" style="max-height: 50px; float:right;">
  892. </div>
  893. <div class="col-6">
  894. <p>Lv. 50</p>
  895. </div>
  896. </div>
  897.  
  898. <!--- nature --->
  899. <p class="text-center mt-1 mb-3 px-1"><i class="text-muted">
  900. <b>Nature</b> nature. Characteristic.</i>
  901. </p>
  902.  
  903. <!------- RELATIONSHIP STRENGTH -- FAS FOR FULL AND FAL FOR EMPTY -->
  904. <div class="mx-auto mb-2">
  905. <center>
  906. <!--- rating --->
  907. <i class="fas fa-heart fa-fw" />
  908. <i class="fas fa-heart fa-fw" />
  909. <i class="fas fa-heart fa-fw" />
  910. <i class="fas fa-heart fa-fw" />
  911. <i class="fas fa-heart fa-fw" />
  912. </center>
  913. </div><!--- end of relationship strength --->
  914.  
  915. <!---- held item ---->
  916. <img src="https://www.pokencyclopedia.info/sprites/items/items_dream-world/i_dream_dragon-fang.png" class="d-block mb-1 mt-3 mx-auto" style="max-height: 30px;">
  917. <p class="text-muted text-center mt-1">
  918. Held Item
  919. </p>
  920. </div><!--- end of left side --->
  921.  
  922. <div class="col-8"><!--- right side--->
  923.  
  924. <!--- character name --->
  925. <center><h2 class="mt-2"><a href="#LINK">
  926. Name
  927. </a></h2></center>
  928.  
  929. <!--- pokedex info---->
  930. <div class="card mx-1 px-2">
  931. <div class=" card-block d-block">
  932. <div class="justify-content-between">
  933. <div class="pr-1"><b>Pokedex:</b></div>
  934. <div>#242. Blissey</div>
  935. </div>
  936. <hr class="my-2">
  937. <div class="justify-content-between">
  938. <div class="pr-1"><b>Level Met:</b></div>
  939. <div>##</div>
  940. </div>
  941. <hr class="my-2">
  942. <div class="justify-content-between">
  943. <div class="pr-1"><b>Moves:</b></div>
  944. <div>Move 1, Move 2, Move 3, Move 4</div>
  945. </div>
  946. </div><!--- end card block--->
  947. </div><!--- end pokedex info--->
  948.  
  949. <div class="mt-3 mx-2">
  950. <p>Write about your pokemon here! Try to keep it brief, or it might look a little awkward.</p>
  951.  
  952. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin.</p>
  953. </div><!--- end blurb spacing-->
  954. </div><!--- end of right side--->
  955. </div><!-- end of teammate 6 -->
  956.  
  957. </div><!--- end spacing --->
  958. </div><!--- end tab 5--->
  959.  
  960. <!------- TAB SIX: RELATIONSHIPS ---------->
  961. <div class="tab-pane fade" id="nav-six" role="tabpanel" aria-labelledby="nav-six-tab">
  962. <h1 style="text-align:center;">Relationships</h1>
  963. <hr class="mb-3 mt-0 mx-auto" width="85%" align="center">
  964. <div class="w-100 my-auto text-justify">
  965. <!----------------- POSITIVE RELATIONSHIPS ----------------->
  966.  
  967. <h2 class="float-right mr-3 mt-3">Friends</h2>
  968. <hr class="mt-0 ">
  969.  
  970. <!---- CHARACTER --->
  971. <div class="row">
  972. <div class="col-4">
  973. <!--- character name --->
  974. <center><h2><a href="#LINK">Name</a></h2></center>
  975. <!-------- avatar image ----------->
  976. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/24909341_vxJlernLjIuEEVG.png" class="mr-sm-2 d-block rounded-circle img-thumbnail mb-1 mx-auto" style="height: 150px;">
  977.  
  978. <!------- CHARACTER RELATIONSHIP ---------->
  979. <center>
  980. <div style="letter-spacing: 1px;">[ <i>relationship</i> ]</div>
  981. </center>
  982. </div><!--- end of left side --->
  983.  
  984. <div class="col-8"><!--- right side--->
  985. <!------- RELATIONSHIP STRENGTH -- FAS FOR FULL AND FAL FOR EMPTY -->
  986. <div class="mx-auto mb-2">
  987. <center>
  988. <!--- rating --->
  989. <i class="fas fa-heart fa-fw" />
  990. <i class="fas fa-heart fa-fw" />
  991. <i class="fas fa-heart fa-fw" />
  992. <i class="fas fa-heart fa-fw" />
  993. <i class="fas fa-heart fa-fw" />
  994. </center>
  995. </div><!--- end of relationship strength --->
  996.  
  997. <p class="mt-3">Write about your character's relationships here! Try to keep it somewhat brief, or it might look a little awkward.</p>
  998.  
  999. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin.</p>
  1000. </div><!--- end of right side--->
  1001. </div><!-- end of character 1-->
  1002.  
  1003. <hr>
  1004.  
  1005.  
  1006. <!---- CHARACTER --->
  1007. <div class="row">
  1008. <div class="col-4">
  1009. <!--- character name --->
  1010. <center><h2><a href="#LINK">Name</a></h2></center>
  1011. <!-------- avatar image ----------->
  1012. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/24909341_vxJlernLjIuEEVG.png" class="mr-sm-2 d-block rounded-circle img-thumbnail mb-1 mx-auto" style="height: 150px;">
  1013.  
  1014. <!------- CHARACTER RELATIONSHIP ---------->
  1015. <center>
  1016. <div style="letter-spacing: 1px;">[ <i>relationship</i> ]</div>
  1017. </center>
  1018. </div><!--- end of left side --->
  1019.  
  1020. <div class="col-8"><!--- right side--->
  1021. <!------- RELATIONSHIP STRENGTH -- FAS FOR FULL AND FAL FOR EMPTY -->
  1022. <div class="mx-auto mb-2">
  1023. <center>
  1024. <!--- rating --->
  1025. <i class="fas fa-heart fa-fw" />
  1026. <i class="fas fa-heart fa-fw" />
  1027. <i class="fas fa-heart fa-fw" />
  1028. <i class="fas fa-heart fa-fw" />
  1029. <i class="fas fa-heart fa-fw" />
  1030. </center>
  1031. </div><!--- end of relationship strength --->
  1032.  
  1033. <p class="mt-3">Write about your character's relationships here! Try to keep it somewhat brief, or it might look a little awkward.</p>
  1034.  
  1035. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin.</p>
  1036. </div><!--- end of right side--->
  1037. </div><!-- end of character 1-->
  1038.  
  1039. <hr>
  1040.  
  1041. <!-------------------------- NEUTRAL RELATIONSHIPS --->
  1042.  
  1043. <h2 class="float-right mr-3 mt-3">Acquaintances</h2>
  1044. <hr class="mt-0 ">
  1045.  
  1046. <!---- CHARACTER --->
  1047. <div class="row">
  1048. <div class="col-4">
  1049. <!--- character name --->
  1050. <center><h2><a href="#LINK">Name</a></h2></center>
  1051. <!-------- avatar image ----------->
  1052. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/24909341_vxJlernLjIuEEVG.png" class="mr-sm-2 d-block rounded-circle img-thumbnail mb-1 mx-auto" style="height: 150px;">
  1053.  
  1054. <!------- CHARACTER RELATIONSHIP ---------->
  1055. <center>
  1056. <div style="letter-spacing: 1px;">[ <i>relationship</i> ]</div>
  1057. </center>
  1058. </div><!--- end of left side --->
  1059.  
  1060. <div class="col-8"><!--- right side--->
  1061. <!------- RELATIONSHIP STRENGTH -- FAS FOR FULL AND FAL FOR EMPTY -->
  1062. <div class="mx-auto mb-2">
  1063. <center>
  1064. <!--- rating --->
  1065. <i class="fas fa-heart fa-fw" />
  1066. <i class="fas fa-heart fa-fw" />
  1067. <i class="fas fa-heart fa-fw" />
  1068. <i class="fas fa-heart fa-fw" />
  1069. <i class="fas fa-heart fa-fw" />
  1070. </center>
  1071. </div><!--- end of relationship strength --->
  1072.  
  1073. <p class="mt-3">Write about your character's relationships here! Try to keep it somewhat brief, or it might look a little awkward.</p>
  1074.  
  1075. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin.</p>
  1076. </div><!--- end of right side--->
  1077. </div><!-- end of character -->
  1078.  
  1079. <hr>
  1080.  
  1081. <!---- CHARACTER --->
  1082. <div class="row">
  1083. <div class="col-4">
  1084. <!--- character name --->
  1085. <center><h2><a href="#LINK">Name</a></h2></center>
  1086. <!-------- avatar image ----------->
  1087. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/24909341_vxJlernLjIuEEVG.png" class="mr-sm-2 d-block rounded-circle img-thumbnail mb-1 mx-auto" style="height: 150px;">
  1088.  
  1089. <!------- CHARACTER RELATIONSHIP ---------->
  1090. <center>
  1091. <div style="letter-spacing: 1px;">[ <i>relationship</i> ]</div>
  1092. </center>
  1093. </div><!--- end of left side --->
  1094.  
  1095. <div class="col-8"><!--- right side--->
  1096. <!------- RELATIONSHIP STRENGTH -- FAS FOR FULL AND FAL FOR EMPTY -->
  1097. <div class="mx-auto mb-2">
  1098. <center>
  1099. <!--- rating --->
  1100. <i class="fas fa-heart fa-fw" />
  1101. <i class="fas fa-heart fa-fw" />
  1102. <i class="fas fa-heart fa-fw" />
  1103. <i class="fas fa-heart fa-fw" />
  1104. <i class="fas fa-heart fa-fw" />
  1105. </center>
  1106. </div><!--- end of relationship strength --->
  1107.  
  1108. <p class="mt-3">Write about your character's relationships here! Try to keep it somewhat brief, or it might look a little awkward.</p>
  1109.  
  1110. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin.</p>
  1111. </div><!--- end of right side--->
  1112. </div><!-- end of character -->
  1113.  
  1114. <hr>
  1115.  
  1116. <!-------------------------- NEGATIVE RELATIONSHIPS --->
  1117.  
  1118. <h2 class="float-right mr-3 mt-3">Enemies</h2>
  1119. <hr class="mt-0 ">
  1120.  
  1121. <!---- CHARACTER --->
  1122. <div class="row">
  1123. <div class="col-4">
  1124. <!--- character name --->
  1125. <center><h2><a href="#LINK">Name</a></h2></center>
  1126. <!-------- avatar image ----------->
  1127. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/24909341_vxJlernLjIuEEVG.png" class="mr-sm-2 d-block rounded-circle img-thumbnail mb-1 mx-auto" style="height: 150px;">
  1128.  
  1129. <!------- CHARACTER RELATIONSHIP ---------->
  1130. <center>
  1131. <div style="letter-spacing: 1px;">[ <i>relationship</i> ]</div>
  1132. </center>
  1133. </div><!--- end of left side --->
  1134.  
  1135. <div class="col-8"><!--- right side--->
  1136. <!------- RELATIONSHIP STRENGTH -- FAS FOR FULL AND FAL FOR EMPTY -->
  1137. <div class="mx-auto mb-2">
  1138. <center>
  1139. <!--- rating --->
  1140. <i class="fas fa-heart fa-fw" />
  1141. <i class="fas fa-heart fa-fw" />
  1142. <i class="fas fa-heart fa-fw" />
  1143. <i class="fas fa-heart fa-fw" />
  1144. <i class="fas fa-heart fa-fw" />
  1145. </center>
  1146. </div><!--- end of relationship strength --->
  1147.  
  1148. <p class="mt-3">Write about your character's relationships here! Try to keep it somewhat brief, or it might look a little awkward.</p>
  1149.  
  1150. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin.</p>
  1151. </div><!--- end of right side--->
  1152. </div><!-- end of character -->
  1153.  
  1154. <hr>
  1155.  
  1156. <!---- CHARACTER --->
  1157. <div class="row">
  1158. <div class="col-4">
  1159. <!--- character name --->
  1160. <center><h2><a href="#LINK">Name</a></h2></center>
  1161. <!-------- avatar image ----------->
  1162. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/24909341_vxJlernLjIuEEVG.png" class="mr-sm-2 d-block rounded-circle img-thumbnail mb-1 mx-auto" style="height: 150px;">
  1163.  
  1164. <!------- CHARACTER RELATIONSHIP ---------->
  1165. <center>
  1166. <div style="letter-spacing: 1px;">[ <i>relationship</i> ]</div>
  1167. </center>
  1168. </div><!--- end of left side --->
  1169.  
  1170. <div class="col-8"><!--- right side--->
  1171. <!------- RELATIONSHIP STRENGTH -- FAS FOR FULL AND FAL FOR EMPTY -->
  1172. <div class="mx-auto mb-2">
  1173. <center>
  1174. <!--- rating --->
  1175. <i class="fas fa-heart fa-fw" />
  1176. <i class="fas fa-heart fa-fw" />
  1177. <i class="fas fa-heart fa-fw" />
  1178. <i class="fas fa-heart fa-fw" />
  1179. <i class="fas fa-heart fa-fw" />
  1180. </center>
  1181. </div><!--- end of relationship strength --->
  1182.  
  1183. <p class="mt-3">Write about your character's relationships here! Try to keep it somewhat brief, or it might look a little awkward.</p>
  1184.  
  1185. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin.</p>
  1186. </div><!--- end of right side--->
  1187. </div><!-- end of character -->
  1188.  
  1189. <hr>
  1190.  
  1191. <!---MUST PASTE NEW RELATIONSHIPS BEFORE THE LAST TWO DIVS--->
  1192.  
  1193. </div><!-- end tab-->
  1194. </div><!-- end tab 6-->
  1195.  
  1196. <!------- TAB SEVEN: MISC ---------->
  1197. <div class="tab-pane fade" id="nav-seven" role="tabpanel" aria-labelledby="nav-seven-tab">
  1198. <h1 style="text-align:center;">Miscellaneous</h1>
  1199. <hr class="mb-3 mt-0 mx-auto" width="85%" align="center">
  1200. <div class="w-100 my-auto text-justify">
  1201.  
  1202. <!-- COLOR SWATCHES - CHANGE HEX CODES TO MATCH YOUR PALETTE - REMOVING/ADDING COLORS IS FINE - CHANGE TITLE TO CHANGE HOVER -->
  1203. <div class="row no-gutters modal-open m-3" style="height:40px; border-radius: .6em;">
  1204. <div style="background-color: #a6ff13;" title="#a6ff13" class="col h-100"></div>
  1205. <div style="background-color: #2a2421;" title="#2a2421" class="col h-100"></div>
  1206. <div style="background-color: #3b4e23;" title="#3b4e23" class="col h-100"></div>
  1207. <div style="background-color: #3c9217;" title="#3c9217" class="col h-100"></div>
  1208. <div style="background-color: #8fc543;" title="#8fc543" class="col h-100"></div>
  1209. </div>
  1210.  
  1211. <div class="row no-gutters">
  1212. <!------------------- PHYSICAL & MENTAL ATTRIBUTES ---------------------------------------->
  1213. <div class="col-md-6 pr-md-1 mb-2">
  1214. <div class="card card-block pb-1 d-block h-100" style="padding-top:8px;">
  1215. <p class="text-uppercase text-center mb-1" style="letter-spacing:1px;"><b><i class="fa fa-first-aid" aria-hidden="true"></i> Physical Attributes</b></p>
  1216. <hr class="mt-0 mb-2">
  1217. <div class="justify-content-between">
  1218. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Horoscope</b></div>
  1219. <div>like the normal one</div>
  1220. </div>
  1221. <div class="justify-content-between">
  1222. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Alignment</b></div>
  1223. <div>info</div>
  1224. </div>
  1225. <div class="justify-content-between">
  1226. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Demeanor</b></div>
  1227. <div>info</div>
  1228. </div>
  1229. <div class="justify-content-between">
  1230. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Voice</b></div>
  1231. <div><a href="#link" target="_BLANK"><i class="fas fa-microphone-stand text-muted" /></a></div>
  1232. </div>
  1233. </div>
  1234. </div>
  1235.  
  1236. <div class="col-md-6 pl-md-1 mb-2">
  1237. <div class="card card-block pb-1 d-block h-100" style="padding-top:8px;">
  1238. <p class="text-uppercase text-center mb-1" style="letter-spacing:1px;"><b><i class="fa fa-book" aria-hidden="true"></i>
  1239. Mental Attributes</b></p>
  1240. <hr class="mt-0 mb-2">
  1241. <div class="justify-content-between">
  1242. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>MBTI</b></div>
  1243. <div>info</div>
  1244. </div>
  1245. <div class="justify-content-between">
  1246. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Enneagram</b></div>
  1247. <div>info</div>
  1248. </div>
  1249. <div class="justify-content-between">
  1250. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Bloodtype</b></div>
  1251. <div>info</div>
  1252. </div>
  1253. <div class="justify-content-between">
  1254. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Temperament</b></div>
  1255. <div>info</div>
  1256. </div>
  1257. </div>
  1258. </div>
  1259. </div>
  1260.  
  1261. <!--- start copy here for new row of boxes--->
  1262. <div class="row no-gutters">
  1263. <!------------------- LIKES & DISLIKES ---------------------------------------->
  1264. <div class="col-md-6 pr-md-1 mb-2">
  1265. <div class="card card-block pb-1 d-block h-100" style="padding-top:8px;">
  1266. <p class="text-uppercase text-center mb-1" style="letter-spacing:1px;"><b><i class="fa fa-check-circle" aria-hidden="true"></i> Favorite</b></p>
  1267. <hr class="mt-0 mb-2">
  1268. <div class="justify-content-between">
  1269. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Flavor</b></div>
  1270. <div>info</div>
  1271. </div>
  1272. <div class="justify-content-between">
  1273. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Genre</b></div>
  1274. <div>info</div>
  1275. </div>
  1276. <div class="justify-content-between">
  1277. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Activity</b></div>
  1278. <div>info</div>
  1279. </div>
  1280. <div class="justify-content-between">
  1281. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Color</b></div>
  1282. <div>info</div>
  1283. </div>
  1284. </div>
  1285. </div>
  1286.  
  1287. <div class="col-md-6 pl-md-1 mb-2">
  1288. <div class="card card-block pb-1 d-block h-100" style="padding-top:8px;">
  1289. <p class="text-uppercase text-center mb-1" style="letter-spacing:1px;"><b><i class="fa fa-times-circle" aria-hidden="true"></i> Disliked</b></p>
  1290. <hr class="mt-0 mb-2">
  1291. <div class="justify-content-between">
  1292. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Flavor</b></div>
  1293. <div>info</div>
  1294. </div>
  1295. <div class="justify-content-between">
  1296. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Genre</b></div>
  1297. <div>info</div>
  1298. </div>
  1299. <div class="justify-content-between">
  1300. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Activity</b></div>
  1301. <div>info</div>
  1302. </div>
  1303. <div class="justify-content-between">
  1304. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Color</b></div>
  1305. <div>info</div>
  1306. </div>
  1307. </div>
  1308. </div>
  1309. </div>
  1310. <!--- end copy here for new row of boxes--->
  1311.  
  1312. <p class="mt-3"><h1>Trivia</h1>
  1313. <hr class="mt-0 ">
  1314. <p><ul class="mb-0 px-3 list-unstyled pl-2">
  1315. <li class="mb-2"><i class="fas fa-asterisk fa-fw text-muted" /> info.</li>
  1316. <li class="mb-2"><i class="fas fa-asterisk fa-fw text-muted" /> info.</li>
  1317. <li class="mb-2"><i class="fas fa-asterisk fa-fw text-muted" /> info.</li>
  1318. <li class="mb-2"><i class="fas fa-asterisk fa-fw text-muted" /> info.</li>
  1319. <li class="mb-2"><i class="fas fa-asterisk fa-fw text-muted" /> info.</li>
  1320. <li class="mb-2"><i class="fas fa-asterisk fa-fw text-muted" /> info.</li>
  1321. </ul></p>
  1322. </p>
  1323.  
  1324. </div><!--- end tab -->
  1325. </div><!-- end tab 6-->
  1326.  
  1327. </div><!--- end of tab content --->
  1328. </div><!--- end of right text box --->
  1329.  
  1330. <!---- BADGES ----------->
  1331. <div class="card d-block border-0 py-2 mx-1 mt-4" style="border-radius: 1em;">
  1332. <div class="row no-gutters align-items-center">
  1333.  
  1334. <!--- BADGE --->
  1335. <div class="col-1 mt-2 mr-2 ml-5">
  1336. <img src="https://cdn.bulbagarden.net/upload/7/74/Trio_Badge.png" class="d-block mb-1 mx-auto" style="height: 50px;">
  1337. </div>
  1338.  
  1339. <!--- BADGE --->
  1340. <div class="col-1 mt-2 mx-2">
  1341. <img src="https://cdn.bulbagarden.net/upload/thumb/8/85/Basic_Badge.png/100px-Basic_Badge.png" class="d-block mb-1 mx-auto" style="height: 50px;">
  1342. </div>
  1343.  
  1344. <!--- BADGE --->
  1345. <div class="col-1 mt-2 mx-2">
  1346. <img src="https://cdn.bulbagarden.net/upload/thumb/8/8a/Insect_Badge.png/100px-Insect_Badge.png" class="d-block mb-1 mx-auto" style="height: 50px;">
  1347. </div>
  1348.  
  1349. <!--- BADGE --->
  1350. <div class="col-1 mt-2 mx-2">
  1351. <img src="https://cdn.bulbagarden.net/upload/thumb/5/5b/Bolt_Badge.png/100px-Bolt_Badge.png" class="d-block mb-1 mx-auto" style="height: 50px;">
  1352. </div>
  1353.  
  1354. <!--- BADGE --->
  1355. <div class="col-1 mt-2 mx-2">
  1356. <img src="https://cdn.bulbagarden.net/upload/thumb/2/29/Quake_Badge.png/100px-Quake_Badge.png" class="d-block mb-1 mx-auto" style="height: 50px;">
  1357. </div>
  1358.  
  1359. <!--- BADGE --->
  1360. <div class="col-1 mt-2 mx-2">
  1361. <img src="https://cdn.bulbagarden.net/upload/thumb/9/9c/Jet_Badge.png/100px-Jet_Badge.png" class="d-block mb-1 mx-auto" style="height: 50px;">
  1362. </div>
  1363.  
  1364. <!--- BADGE --->
  1365. <div class="col-1 mt-2 mx-2">
  1366. <img src="https://cdn.bulbagarden.net/upload/thumb/a/ac/Freeze_Badge.png/100px-Freeze_Badge.png" class="d-block mb-1 mx-auto" style="height: 50px;">
  1367. </div>
  1368.  
  1369. <!--- BADGE --->
  1370. <div class="col-1 mt-2 ml-2 mr-5">
  1371. <img src="https://cdn.bulbagarden.net/upload/thumb/c/c0/Legend_Badge.png/100px-Legend_Badge.png" class="d-block mb-1 mx-auto" style="height: 50px;">
  1372. </div>
  1373.  
  1374. </div><!--- end of badge container --->
  1375. </div><!---- end of badges ----->
  1376. </div><!--- end of right container --->
  1377. </div><!--- end of right column --->
  1378. </div><!--- end of column spacing stuff --->
  1379. </div><!--- end of visible card--->
  1380. <p class="mt-0 mr-4 small text-right">template by @shroomish</p>
  1381. </div><!---end of container--->
  1382. </div><!---end of card--->
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!