API tools faq
paste
Advertisement
Guest User

Thorn Format WIP

a guest
Sep 15th, 2019
81
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 59.64 KB | None | 0 0
raw download clone embed print report
  1. <div class="container">
  2. <ul class="nav nav-pills justify-content-center rounded mb-3" role="tablist" style="font size:+2">
  3. <li class="nav-item mx-2">
  4. <a class="nav-link active btn btn-outline-primary" data-toggle="pill" href="#pills-profile" role="tab">Profile</a>
  5. </li>
  6. <li class="nav-item mx-2">
  7. <a class="nav-link btn btn-outline-primary" data-toggle="pill" href="#pills-details" role="tab">Details</a>
  8. </li>
  9. <li class="nav-item mx-2">
  10. <a class="nav-link btn btn-outline-primary" data-toggle="pill" href="#pills-story" role="tab">Story</a>
  11. </li>
  12. <li class="nav-item mx-2">
  13. <a class="nav-link btn btn-outline-primary" data-toggle="pill" href="#pills-relationships" role="tab">Relationships</a>
  14. </li>
  15. <li class="nav-item mx-2">
  16. <a class="nav-link btn btn-outline-primary" data-toggle="pill" href="#pills-gallery" role="tab">Gallery</a>
  17. </li>
  18. </ul><!--Nav Pills End-->
  19. <div class="tab-content card rounded" style="height:500px;">
  20. <!----------[ PROFILE PILL TAB ]---------->
  21. <div class="tab-pane fade show active" id="pills-profile" role="tabpanel">
  22. <nav>
  23. <div class="nav nav-tabs bg-faded" role="tablist">
  24. <a class="nav-item nav-link active border-left-0 border-top-0" data-toggle="tab" href="#nav-profile" role="tab">Profile</a>
  25. <a class="nav-item nav-link border-top-0" data-toggle="tab" href="#nav-personality" role="tab">Personality</a>
  26. <a class="nav-item nav-link border-top-0" data-toggle="tab" href="#nav-aesthetic" role="tab">Aesthetic/Playlist</a>
  27. </div>
  28. <div class="tab-content">
  29. <!----------[ PROFILE TAB ]---------->
  30. <div class="tab-pane fade show active p-3" id="nav-profile" role="tabpanel" style="height:450px; overflow:auto;">
  31. <table class="table-striped float-right ml-2">
  32. <tr>
  33. <td class="font-weight-bold text-uppercase">Name</td>
  34. <td>Bill (I guess?)</td>
  35. </tr>
  36. <tr>
  37. <td class="font-weight-bold text-uppercase">Nickname</td>
  38. <td>Thorn</td>
  39. </tr>
  40. <tr>
  41. <td class="font-weight-bold text-uppercase">Species</td>
  42. <td>Canine</td>
  43. </tr>
  44. <tr>
  45. <td class="font-weight-bold text-uppercase">Gender</td>
  46. <td>Female (Cis)</td>
  47. </tr>
  48. <tr>
  49. <td class="font-weight-bold text-uppercase">Age</td>
  50. <td>14</td>
  51. </tr>
  52. <tr>
  53. <td class="font-weight-bold text-uppercase">Place of Birth</td>
  54. <td>Nashville</td>
  55. </tr>
  56. <tr>
  57. <td class="font-weight-bold text-uppercase">D.o.B.</td>
  58. <td>4/19</td>
  59. </tr>
  60. <tr>
  61. <td class="font-weight-bold text-uppercase">Blood Type</td>
  62. <td>-</td>
  63. </tr>
  64. <tr>
  65. <td class="font-weight-bold text-uppercase">MBTI</td>
  66. <td>-</td>
  67. </tr>
  68. <tr>
  69. <td class="font-weight-bold text-uppercase">Residence</td>
  70. <td>Small town in TN</td>
  71. </tr>
  72. <tr>
  73. <td class="font-weight-bold text-uppercase">Occupation</td>
  74. <td>Struggling</td>
  75. </tr>
  76. <tr>
  77. <td class="font-weight-bold text-uppercase">Sexual Orientation</td>
  78. <td>Bisexual as far as she knows</td>
  79. </tr>
  80. <tr>
  81. <td class="font-weight-bold text-uppercase">Social Status</td>
  82. <td>Not a public figure</td>
  83. </tr>
  84. <tr>
  85. <td class="font-weight-bold text-uppercase">Relationship Status</td>
  86. <td>Single, reserved, not looking</td>
  87. </tr>
  88. <tr>
  89. <td class="font-weight-bold text-uppercase">Voice</td>
  90. <td><a href="#">Unknown</a></td>
  91. </tr>
  92. </table>
  93. <p> ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie enim a </p>
  94. <p>Phasellus ultrices massa et est ultricies aliquet. Vivamus gravida scelerisque faucibus. Sed eget hendrerit nibh, sed interdum ligula. </p>
  95.  
  96. <p>Etiam et eros faucibus, eleifend justo in, venenatis ipsum. Mauris molestie, libero vitae pharetra maximus, lorem neque iaculis orci, in vulputate est metus ut est. Phasellus cursus rhoncus lacus nec ornare. Donec congue lorem odio, sed tincidunt erat sodales eget. Curabitur tempor non nisi quis dapibus. Donec a nunc nibh. Donec consequat tempus lectus, non convallis risus condimentum nec. Donec laoreet, nisl et sagittis tincidunt, neque enim posuere turpis, non laoreet tellus lacus eget ligula. In justo erat, semper sed est eu, dignissim hendrerit augue. Nam et euismod nibh. Quisque augue massa, pharetra at nulla in, pretium tincidunt dui. Ut diam libero, consequat ac accumsan hendrerit, molestie non urna. Aliquam laoreet eros et nunc convallis, vel malesuada dolor feugiat. Aenean vestibulum in nibh nec iaculis. Donec quis rutrum lectus. Aliquam sed sollicitudin felis. </p>
  97.  
  98. </div><!--Profile Tab End-->
  99. <!----------[ PERSONALITY TAB ]---------->
  100. <div class="tab-pane fade p-3" id="nav-personality" role="tabpanel" style="height:450px; overflow:auto;">
  101. <p>U</p>
  102. <p>Etiam quis hendrerit dolor, in scelerisque nisi. Cras in nibh at urna condimentum consectetur. Vivamus nec lacus quis justo tristique facilisis. Aenean ac ornare mauris. In tempus tellus sit amet nunc pharetra vestibulum. Donec vel sodales eros, sed porttitor diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce convallis commodo felis feugiat volutpat. </p>
  103. <p>Suspendisse fringilla ex sed facilisis efficitur. Vestibulum cursus ligula sit amet pretium molestie. Donec elementum, est sed condimentum vehicula, ex enim tristique felis, in scelerisque lorem lacus eleifend mi. Sed tempus euismod diam in fermentum. Donec id orci vel justo tempor accumsan. Maecenas efficitur dui ac neque dapibus, eget blandit neque egestas. Suspendisse augue risus, porta vel ex ac, tincidunt vulputate nunc. Duis vestibulum est lectus, vel vulputate erat condimentum et. Praesent nec condimentum dui. Donec ac aliquet lacus, at mattis est. Praesent tellus ligula, viverra quis odio a, rhoncus feugiat elit. Suspendisse sollicitudin dictum sem quis rutrum. </p>
  104. <p>Maecenas sit amet lectus odio. Nullam non sapien sed nunc tincidunt elementum in a nunc. Quisque justo erat, venenatis a ligula nec, ultricies efficitur odio. In hac habitasse platea dictumst. Pellentesque ac sodales ante. Cras ac ante sit amet justo hendrerit feugiat in nec augue. Sed vel sapien vitae lectus dapibus scelerisque vel at diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec leo pellentesque, semper augue in, accumsan ante. Vestibulum ut aliquet felis. Curabitur ultricies sit amet lacus eget rhoncus. </p>
  105. <p>Nam eros sem, facilisis nec viverra id, eleifend nec lorem. Nulla dictum nibh sit amet nulla vestibulum gravida. Suspendisse potenti. Vestibulum eget sem commodo nunc tincidunt euismod. Curabitur pharetra vulputate eleifend. Fusce sed lobortis erat. Suspendisse sodales vehicula enim, quis eleifend augue rhoncus nec. Duis quam metus, consectetur at eleifend quis, faucibus venenatis nunc. </p>
  106. </div><!--Personality Tab End-->
  107. <!----------[ AESTHETIC TAB ]---------->
  108. <div class="tab-pane fade p-3" id="nav-aesthetic" role="tabpanel" style="height:450px; overflow:auto;">
  109. <p class="text-center">
  110. <img class="img-thumbnail d-inline-block m-1" style="height:150px; width:120px;" src="https://66.media.tumblr.com/f6ad3a1f76c21fad8896085e8505db1b/tumblr_oqgocx1OIp1suya58o9_250.jpg">
  111. <img class="img-thumbnail d-inline-block m-1" style="height:150px; width:120px;" src="https://images.pexels.com/photos/804049/pexels-photo-804049.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
  112. <img class="img-thumbnail d-inline-block m-1" style="height:150px; width:120px;" src="https://images.pexels.com/photos/1684963/pexels-photo-1684963.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
  113. <img class="img-thumbnail d-inline-block m-1" style="height:150px; width:120px;" src="https://images.pexels.com/photos/235177/pexels-photo-235177.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
  114.  
  115. </p>
  116. <h4 class="text-primary text-uppercase font-weight-bold mt-2" style="letter-spacing:2px;">Playlist</h4><hr class="bg-primary">
  117. <!----------[ PLAYLIST ]---------->
  118. <table class="table-hover table-striped table-dark mx-auto" style="width:70%;">
  119. <tr>
  120. </tr>
  121. <tr>
  122. <td>▶ <a href="#"fff>Song 2 by Artist</a></td>
  123. </tr>
  124. <tr>
  125. <td>▶ <a href="#">Song 3 by Artist</a></td>
  126. </tr>
  127. <tr>
  128. <td>▶ <a href="#">Song 4 by Artist</a></td>
  129. </tr>
  130. <tr>
  131. <td>▶ <a href="#">Song 5 by Artist</a></td>
  132. </tr>
  133. <tr>
  134. <td>▶ <a href="#">Song 6 by Artist</a></td>
  135. </tr>
  136. <tr>
  137. <td>▶ <a href="#">Song 7 by Artist</a></td>
  138. </tr>
  139. </table>
  140. </div><!--Aesthetic Tab End-->
  141. </div><!--Tab Content End-->
  142. </nav><!--Nav Tabs End-->
  143. </div><!--Profile Pill Tab End-->
  144. <!----------[ DETAILS PILL TAB ]---------->
  145. <div class="tab-pane fade" id="pills-details" role="tabpanel">
  146. <nav>
  147. <div class="nav nav-tabs bg-faded" role="tablist">
  148. <a class="nav-item nav-link active border-left-0 border-top-0" data-toggle="tab" href="#nav-characterdetails" role="tab">Character Details</a>
  149. <a class="nav-item nav-link border-top-0" data-toggle="tab" href="#nav-stats" role="tab">Stats/Abilities</a>
  150. <a class="nav-item nav-link border-top-0" data-toggle="tab" href="#nav-designdetails" role="tab">Design Details</a>
  151. </div>
  152. <div class="tab-content">
  153. <!----------[ CHARACTER DETAILS TAB ]---------->
  154. <div class="tab-pane fade show active p-3" id="nav-characterdetails" role="tabpanel" style="height:450px; overflow:auto;">
  155. <div class="row mx-auto" style="width:95%;">
  156. <!----------[ APPEARANCE ]---------->
  157. <div class="col-sm-4">
  158. <h4 class="text-primary text-uppercase text-center font-weight-bold" style="letter-spacing:2px;">Appearance</h4><hr class="bg-primary">
  159. <table class="border-0 m-0 p-0">
  160. <tr>
  161. <td class="font-weight-bold">Body Build</td>
  162. <td>Lean, small</td>
  163. </tr>
  164. <tr>
  165. <td class="font-weight-bold">Height</td>
  166. <td>Short</td>
  167. </tr>
  168. <tr>
  169. <td class="font-weight-bold">Weight</td>
  170. <td>Pretty light</td>
  171. </tr>
  172. <tr>
  173. <td class="font-weight-bold">Fur color</td>
  174. <td>Chocolate brown, white</td>
  175. </tr>
  176. <tr>
  177. <td class="font-weight-bold">Hair Style</td>
  178. <td>Curly bangs covering eye</td>
  179. </tr>
  180. <tr>
  181. <td class="font-weight-bold">Hair Colour</td>
  182. <td>Chocolate brown</td>
  183. </tr>
  184. <tr>
  185. <td class="font-weight-bold">Eye Shape</td>
  186. <td>Round</td>
  187. </tr>
  188. <tr>
  189. <td class="font-weight-bold">Eye Colour</td>
  190. <td>Cyan</td>
  191. </tr>
  192. <tr>
  193. <td class="font-weight-bold">Distinguishing Features</td>
  194. <td>She's pretty basic- maybe her scar.</td>
  195. </tr>
  196. <tr>
  197. <td class="font-weight-bold">Preferred Clothing</td>
  198. <td>Bandanas, occassional collar</td>
  199. </tr>
  200. <tr>
  201. <td class="font-weight-bold">Accessories</td>
  202. <td>Bandanas ^</td>
  203. </tr>
  204. </table>
  205. </div><!--Col End-->
  206. <!----------[ HEALTH ]---------->
  207. <div class="col-sm-4">
  208. <h4 class="text-primary text-uppercase text-center font-weight-bold" style="letter-spacing:2px;">Health</h4><hr class="bg-primary">
  209. <table class="border-0 m-0 p-0">
  210. <tr>
  211. <td class="font-weight-bold">General Health</td>
  212. <td>Unknown possible health issues due to addiction</td>
  213. </tr>
  214. <tr>
  215. <td class="font-weight-bold">Posture</td>
  216. <td>She normally keeps a confident one, but it is very expressive and can show her mood.</td>
  217. </tr>
  218. <tr>
  219. <td class="font-weight-bold">Smokes?</td>
  220. <td>No.</td>
  221. </tr>
  222. <tr>
  223. <td class="font-weight-bold">Drugs?</td>
  224. <td>"If you count a computer, sure! I'm a junkie!"</td>
  225. </tr>
  226. <tr>
  227. <td class="font-weight-bold">Physical Illnesses, Disabilities, Etc.</td>
  228. <td>N/A<br>
  229. <br>
  230. </td>
  231. </tr>
  232. <tr>
  233. <tr>
  234. <td class="font-weight-bold">Mental Illnesses, Disabilities, Etc.</td>
  235. <td>N/A<br>
  236. </tr>
  237. </table>
  238. </div><!--Col End-->
  239. <!----------[ CONVERSATION ]---------->
  240. <div class="col-sm-4">
  241. <h4 class="text-primary text-uppercase text-center font-weight-bold" style="letter-spacing:2px;">Conversation</h4><hr class="bg-primary">
  242. <table class="border-0 m-0 p-0">
  243. <tr>
  244. <td class="font-weight-bold">Way of Speaking</td>
  245. <td>Depends on the person. See personality.</td>
  246. </tr>
  247. <tr>
  248. <td class="font-weight-bold">Common Conversation Starter</td>
  249. <td>To friends: "How's life been treating you today?" To other people: "Ah. Well, I guess I'm here to talk."</td>
  250. </tr>
  251. <tr>
  252. <td class="font-weight-bold">Swears?</td>
  253. <td>Curses, dang, shoot, and uses insults like cretin, dupe, dullard, retard, heel, and boor</td>
  254. </tr>
  255. <tr>
  256. <td class="font-weight-bold">Quirks?</td>
  257. <td>Talks to herself, worries about hair, squeals when excited and throws paws in air, turns sadness into anger</td>
  258. </tr>
  259. </table>
  260. </div><!--Col End-->
  261. </div><!--Row End-->
  262. <div class="row mx-auto mt-3" style="width:95%;">
  263. <!----------[ LIKES ]---------->
  264. <div class="col-sm-6">
  265. <h4 class="text-primary text-uppercase text-center font-weight-bold" style="letter-spacing:2px;">Likes</h4><hr class="bg-primary">
  266. <ul class="list-unstyled">
  267. <li>Rock music</li>
  268. <li>Dark humor</li>
  269. <li>Icees, pasta, anything grilled (except burgers)</li>
  270. <li>Gore/scary movies</li>
  271. <li>Her computer/phone</li>
  272. </ul>
  273. </div><!--Col End-->
  274. <!----------[ DISLIKES ]---------->
  275. <div class="col-sm-6">
  276. <h4 class="text-primary text-uppercase text-center font-weight-bold" style="letter-spacing:2px;">Dislikes</h4><hr class="bg-primary">
  277. <ul class="list-unstyled">
  278. <li>Realization of her addiction</li>
  279. <li>Cell towers and chemtrails</li>
  280. <li>Sensitive people</li>
  281. <li>Homophobes/transphobes</li>
  282. <li>Being alone, someone touching her wrist, forgetting</li>
  283. </ul>
  284. </div><!--Col End-->
  285. </div><!--Row End-->
  286. <div class="row mx-auto mt-3" style="width:95%;">
  287. <!----------[ STRENGTHS ]---------->
  288. <div class="col-sm-6">
  289. <h4 class="text-primary text-uppercase text-center font-weight-bold" style="letter-spacing:2px;">Strengths</h4><hr class="bg-primary">
  290. <ul class="list-unstyled">
  291. <li><b>"My smarts!":</b> She considers her intelligence a strong point. She uses it to taunt people she doesn't like.</li>
  292. <li><b>Speed:</b> Her speed. Since she's small, she can dart pretty quickly.</li>
  293. <li><b>Her quips:</b> Not really helpful, but she likes her quick thinking. <li>
  294. <li><b>Staying calm/being the leader:</b> Unlike her normal behavior, in a dangerous situation, Thorn can be calm and make a plan easily. </li>
  295.  
  296. </ul>
  297. </div><!--Col End-->
  298. <!----------[ WEAKNESSES ]---------->
  299. <div class="col-sm-6">
  300. <h4 class="text-primary text-uppercase text-center font-weight-bold" style="letter-spacing:2px;">Weaknesses</h4><hr class="bg-primary">
  301. <ul class="list-unstyled">
  302. <li><b>Wrist Touch:</b> She can't even do it herself. It makes her weak and kinda bewildered.</li>
  303. <li><b>Nostalgia:</b> Strong enough nostalgia can make her have a breakdown.</li>
  304. <li><b>Tall things:</b> Do I have to explain this one?</li>
  305. <li><b>Smarter people:</b> When she meets someone her age that's smarter than her, she can be a bit intimidated.</li>
  306. <li><b>Forgetting:</b> This can make her question existence, alright?</li>
  307.  
  308.  
  309. </ul>
  310. </div><!--Col End-->
  311. </div><!--Row End-->
  312. <div class="row mx-auto mt-3" style="width:95%;">
  313. <!----------[ HOBBIES ]---------->
  314. <div class="col-sm-6">
  315. <h4 class="text-primary text-uppercase text-center font-weight-bold" style="letter-spacing:2px;">Hobbies</h4><hr class="bg-primary">
  316. <ul class="list-unstyled">
  317. <li>Writing</li>
  318. <li>Drawing</li>
  319. <li>Staying on a device constantly</li>
  320. </ul>
  321. </div><!--Col End-->
  322. <!----------[ HABITS ]---------->
  323. <div class="col-sm-6">
  324. <h4 class="text-primary text-uppercase text-center font-weight-bold" style="letter-spacing:2px;">Habits</h4><hr class="bg-primary">
  325. <ul class="list-unstyled">
  326. <li>Her addiction</li>
  327. <li>Biting/ripping her lip</li>
  328. <li>"Tch."</li>
  329. <li>Not being able to hold her tongue</li>
  330. <li>"Michael Myers head tilt and crack:" she constantly tries to pop\snap her neck, she feels refreshed if she can</li>
  331.  
  332. </ul>
  333. </table>
  334. </div><!--Col End-->
  335. </div><!--Row End-->
  336. <div class="row mx-auto mt-3" style="width:95%;">
  337. <!----------[ SECRETS ]---------->
  338. <div class="col-sm-6">
  339. <h4 class="text-primary text-uppercase text-center font-weight-bold" style="letter-spacing:2px;">Secrets</h4><hr class="bg-primary">
  340. <ul class="list-unstyled">
  341. <li>She wants to find love someday.</li>
  342. <li>Fears dying a virgin!</li>
  343. <li>Likes getting angry in a way</li>
  344. <li>Envies optimists</li>
  345. <li>Can wish for people dying</li>
  346. </ul>
  347. </div><!--Col End-->
  348. <!----------[ FEARS ]---------->
  349. <div class="col-sm-6">
  350. <h4 class="text-primary text-uppercase text-center font-weight-bold" style="letter-spacing:2px;">Fears</h4><hr class="bg-primary">
  351. <ul class="list-unstyled">
  352. <li><b>Propane trucks/gas stations:</b> When seeing a propane/gas truck next to her while riding in a car, she freaks out a bit. Same with stopping at gas stations.</li>
  353. <li><b>Forgetting everything:</b> As much as she avoids her past, she'd hate to forget good memories.</li>
  354. </ul>
  355. </div><!--Col End-->
  356. </div><!--Row End-->
  357. <div class="row mx-auto mt-3" style="width:95%;">
  358. <!----------[ DREAMS/GOALS ]---------->
  359. <div class="col-sm-6">
  360. <h4 class="text-primary text-uppercase text-center font-weight-bold" style="letter-spacing:2px;">Dreams/Goals</h4><hr class="bg-primary">
  361. <ul class="list-unstyled">
  362. <li><b>Start school:</b> "Summers are apparently painful now for me."</li>
  363. <li><b>Write more:</b> Sure, she considers herself a good writer, but she doesn't write enough. </li>
  364. <li><b>Change her addiction:</b> She really wants to save herself.</li>
  365. </ul>
  366. </div><!--Col End-->
  367. <!----------[ FAVOURITES ]---------->
  368. <div class="col-sm-6">
  369. <h4 class="text-primary text-uppercase text-center font-weight-bold" style="letter-spacing:2px;">Favourites</h4><hr class="bg-primary">
  370. <table class="border-0 m-0 p-0">
  371. <tr>
  372. <td class="font-weight-bold">Food</td>
  373. <td>-</td>
  374. </tr>
  375. <tr>
  376. <td class="font-weight-bold">Colour</td>
  377. <td>Blue, navy</td>
  378. </tr>
  379. <tr>
  380. <td class="font-weight-bold">Drink</td>
  381. <td>Pepsi, grape soda, juice</td>
  382. </tr>
  383. <tr>
  384. <td class="font-weight-bold">Number</td>
  385. <td>2</td>
  386. </tr>
  387. <tr>
  388. <td class="font-weight-bold">Holiday</td>
  389. <td>Her birthday ("I'm so selfish! Ahaha!")</td>
  390. </tr>
  391. <tr>
  392. <td class="font-weight-bold">Season</td>
  393. <td>Fall, winter</td>
  394. </tr>
  395. <tr>
  396. <td class="font-weight-bold">Time of Day</td>
  397. <td>Night</td>
  398. </tr>
  399. <tr>
  400. <td class="font-weight-bold">Genre</td>
  401. <td>Rock for music, horror for movies and books</td>
  402. </tr>
  403. </table>
  404. </div><!--Col End-->
  405. </div><!--Row End-->
  406. </div><!--Character Details Tab End-->
  407. <!----------[ STATS/ABILITIES TAB ]---------->
  408. <div class="tab-pane fade p-3" id="nav-stats" role="tabpanel" style="height:450px; overflow:auto;">
  409. <!----------[ ATTRIBUTES ]---------->
  410. <div class="container">
  411. <div class="row">
  412. <!----------[ STRENGTH ]---------->
  413. <div class="col-lg-4">
  414. <h3 class="text-center text-uppercase font-weight-bold" style="letter-spacing:2px;">Strength</h3>
  415. <div class="progress">
  416. <div class="progress-bar" role="progressbar" style="width:40%"></div>
  417. </div><!--Bar End-->
  418. </div><!--Col End-->
  419. <!----------[ CONSTITUTION ]---------->
  420. <div class="col-lg-4">
  421. <h3 class="text-center text-uppercase font-weight-bold" style="letter-spacing:2px;">Stamina</h3>
  422. <div class="progress">
  423. <div class="progress-bar" role="progressbar" style="width:50%"></div>
  424. </div><!--Bar End-->
  425. </div><!--Col End-->
  426. <!----------[ DEXTERITY ]---------->
  427. <div class="col-lg-4">
  428. <h3 class="text-center text-uppercase font-weight-bold" style="letter-spacing:2px;">Intelligence</h3>
  429. <div class="progress">
  430. <div class="progress-bar" role="progressbar" style="width:80%"></div>
  431. </div><!--Bar End-->
  432. </div><!--Col End-->
  433. </div><!--Row End-->
  434. <div class="row" style="margin-top:20px;">
  435. <!----------[ INTELLIGENCE ]---------->
  436. <div class="col-lg-4">
  437. <h3 class="text-center text-uppercase font-weight-bold" style="letter-spacing:2px;">Quick Thinking</h3>
  438. <div class="progress">
  439. <div class="progress-bar" role="progressbar" style="width:60%"></div>
  440. </div><!--Bar End-->
  441. </div><!--Col End-->
  442. <!----------[ WISDOM ]---------->
  443. <div class="col-lg-4">
  444. <h3 class="text-center text-uppercase font-weight-bold" style="letter-spacing:2px;">Wisdom</h3>
  445. <div class="progress">
  446. <div class="progress-bar" role="progressbar" style="width:70%"></div>
  447. </div><!--Bar End-->
  448. </div><!--Col End-->
  449. <!----------[ CHARISMA ]---------->
  450. <div class="col-lg-4">
  451. <h3 class="text-center text-uppercase font-weight-bold" style="letter-spacing:2px;">Optimism</h3>
  452. <div class="progress">
  453. <div class="progress-bar" role="progressbar" style="width:30%"></div>
  454. </div><!--Bar End-->
  455. </div><!--Col End-->
  456. </div><!--Row End-->
  457. <div class="row" style="margin-top:20px;">
  458. <!----------[ WILLPOWER ]---------->
  459. <div class="col-lg-4">
  460. <h3 class="text-center text-uppercase font-weight-bold" style="letter-spacing:2px;">Willpower</h3>
  461. <div class="progress">
  462. <div class="progress-bar" role="progressbar" style="width:50%"></div>
  463. </div><!--Bar End-->
  464. </div><!--Col End-->
  465. <!----------[ PERCEPTION ]---------->
  466. <div class="col-lg-4">
  467. <h3 class="text-center text-uppercase font-weight-bold" style="letter-spacing:2px;">Perception</h3>
  468. <div class="progress">
  469. <div class="progress-bar" role="progressbar" style="width:60%"></div>
  470. </div><!--Bar End-->
  471. </div><!--Col End-->
  472. <!----------[ LUCK ]---------->
  473. <div class="col-lg-4">
  474. <h3 class="text-center text-uppercase font-weight-bold" style="letter-spacing:2px;">Luck</h3>
  475. <div class="progress">
  476. <div class="progress-bar" role="progressbar" style="width:60%"></div>
  477. </div><!--Bar End-->
  478. </div><!--Col End-->
  479. </div><!--Row End-->
  480. </div><!--Attributes End-->
  481. <!----------[ SKILLS ]---------->
  482. <h4 class="text-primary text-uppercase font-weight-bold mt-3" style="letter-spacing:2px;">Skill 1</h4><hr class="bg-primary">
  483. <p>Vivamus augue justo, finibus vel varius sed, pulvinar in augue. Praesent rutrum odio fringilla, facilisis velit a, molestie purus. Integer iaculis sem eget ultrices fermentum. Nam quis cursus felis. Sed porta dapibus consequat. Nulla varius, metus et vestibulum aliquet, nulla nibh condimentum tellus, a accumsan ipsum nulla vel lacus. Suspendisse elementum nisl in aliquam bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper at mi at laoreet. Integer imperdiet justo et aliquet pellentesque. </p>
  484. <h4 class="text-primary text-uppercase font-weight-bold" style="letter-spacing:2px;">Skill 2</h4><hr class="bg-primary">
  485. <p>Pellentesque ac semper sapien. Ut semper dictum lobortis. Phasellus non euismod libero. In ut ornare ligula. Etiam rutrum dolor non mauris hendrerit ultricies. Nulla facilisi. Praesent sollicitudin, libero a vulputate dapibus, tellus risus pulvinar libero, sit amet sagittis sem justo consectetur lacus. Vivamus convallis augue non nisl feugiat convallis.</p>
  486. <p>Phasellus mauris elit, hendrerit et mattis eget, egestas vel eros. Fusce velit ex, ultricies in pulvinar gravida, maximus non libero. Aliquam ornare, sapien lobortis rhoncus facilisis, ante quam euismod sapien, nec aliquet ipsum magna sit amet nisl. Integer facilisis volutpat nibh at faucibus. Aenean dapibus viverra elit eu elementum. Maecenas tincidunt lorem consectetur arcu elementum, non sollicitudin tortor vehicula. Nunc molestie finibus mi, ac pretium elit venenatis sed. </p>
  487. <h4 class="text-primary text-uppercase font-weight-bold" style="letter-spacing:2px;">Skill 3</h4><hr class="bg-primary">
  488. <p>Sed laoreet ultricies mi, at pulvinar ex facilisis ac. Suspendisse potenti. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed nulla nisl. Quisque tincidunt vitae justo eget faucibus. Aenean vitae justo nisi. Mauris ornare hendrerit nibh ac blandit. Suspendisse potenti. Duis justo ex, iaculis vel vestibulum eu, fermentum sed magna. Vestibulum felis quam, cursus nec enim non, dictum fermentum sem. Donec eleifend venenatis metus at scelerisque. In tristique dignissim lacus at dictum. Fusce mollis id ex nec elementum. Phasellus finibus gravida mi, ut finibus sapien ultrices vel. Duis consequat nisi id dolor interdum venenatis. </p>
  489. </div><!--Stats/Abilities Tab End-->
  490. <!----------[ DESIGN DETAILS TAB ]---------->
  491. <div class="tab-pane fade p-3" id="nav-designdetails" role="tabpanel" style="height:450px; overflow:auto;">
  492. <p>List important design details here that you'd like artists to keep in mind when drawing your character.</p>
  493. <h4 class="text-primary text-uppercase font-weight-bold" style="letter-spacing:2px;">Detail 1</h4>
  494. <ul>
  495. <li>Cras bibendum elementum dolor, id convallis nunc bibendum a.</li>
  496. <li>Pellentesque aliquet, diam eget condimentum blandit, justo augue molestie libero, quis pellentesque mi urna a lorem.</li>
  497. <li>Sed elit sapien, efficitur ac porta sed, accumsan in libero. Nulla viverra erat magna, eget congue dui tincidunt sed.</li>
  498. </ul>
  499. <h4 class="text-primary text-uppercase font-weight-bold" style="letter-spacing:2px;">Detail 2</h4>
  500. <ul>
  501. <li>Vestibulum id faucibus odio, eu varius felis. Integer felis metus, vestibulum sit amet efficitur non, congue at nulla. Mauris maximus arcu mi, eget porta eros lacinia ut.</li>
  502. <li>Proin feugiat massa tortor, quis venenatis eros volutpat vel.</li>
  503. </ul>
  504. <h4 class="text-primary text-uppercase font-weight-bold" style="letter-spacing:2px;">Detail 3</h4>
  505. <ul>
  506. <li>Nunc malesuada mattis tortor et vehicula.</li>
  507. <li>Morbi mollis molestie tellus ut commodo.</li>
  508. <li>Morbi erat lectus, finibus sit amet lobortis eget, lacinia nec libero.</li>
  509. <li>Phasellus consectetur lacus eget libero vulputate, non ultricies purus dignissim.</li>
  510. <li>Nullam at tellus congue elit semper faucibus vel in arcu.</li>
  511. </ul>
  512. </div><!--Design Details Tab End-->
  513. </div><!--Tab Content End-->
  514. </nav><!--Nav Tabs End-->
  515. </div><!--Details Pill Tab End-->
  516. <!----------[ STORY PILL TAB ]---------->
  517. <div class="tab-pane fade" id="pills-story" role="tabpanel">
  518. <nav>
  519. <div class="nav nav-tabs bg-faded" role="tablist">
  520. <a class="nav-item nav-link active border-left-0 border-top-0" data-toggle="tab" href="#nav-childhood" role="tab">Childhood</a>
  521. <a class="nav-item nav-link border-top-0" data-toggle="tab" href="#nav-teen" role="tab">Teenage Years</a>
  522. <a class="nav-item nav-link border-top-0" data-toggle="tab" href="#nav-adult" role="tab">Adulthood</a>
  523. </div>
  524. <div class="tab-content">
  525. <!----------[ CHILDHOOD TAB ]---------->
  526. <div class="tab-pane fade show active p-3" id="nav-childhood" role="tabpanel" style="height:450px; overflow:auto;">
  527. <h4 class="text-primary text-uppercase font-weight-bold" style="letter-spacing:2px;">Header 1</h4><hr class="bg-primary">
  528. <h3 class="text-center font-italic">"Quote"</h3>
  529. <p>Nulla magna sem, accumsan at auctor eu, consequat nec enim. Nunc feugiat purus eu purus bibendum sollicitudin. Ut porttitor magna ac lectus commodo faucibus. Ut rhoncus ex et augue vestibulum aliquam. Donec dapibus lacus in orci facilisis eleifend et sed urna. Vivamus eleifend iaculis turpis vel condimentum. Vestibulum laoreet mauris vel felis sagittis, eu rhoncus velit vestibulum. Etiam mattis felis massa, sit amet rhoncus erat laoreet ac. Integer condimentum dolor eget nisl placerat dictum.</p>
  530. <p>Nullam et ipsum lacinia est gravida luctus. Nullam ac tellus at enim accumsan vehicula eu quis tortor. Duis nec magna vitae nibh egestas accumsan a eget mauris. Fusce et iaculis lacus. Maecenas volutpat ullamcorper ultrices. Fusce a tempor purus, non mattis enim. Proin scelerisque commodo mauris, nec porttitor sem sollicitudin nec. Vivamus interdum, lectus vitae euismod sodales, nisi mauris fermentum orci, nec sollicitudin ante nibh ac arcu. Sed porta, leo dapibus dictum laoreet, turpis lectus fringilla purus, nec laoreet velit sapien sit amet nulla. Praesent malesuada justo vitae tellus placerat, quis commodo eros bibendum. </p>
  531. <h4 class="text-primary text-uppercase font-weight-bold" style="letter-spacing:2px;">Header 2</h4><hr class="bg-primary">
  532. <h3 class="text-center font-italic">"Quote"</h3>
  533. <p>Quisque dictum dapibus lobortis. Phasellus ut auctor nibh. Proin bibendum eros felis, eget accumsan metus hendrerit eu. Fusce eleifend fringilla tempus. In bibendum mi metus, id finibus enim pharetra eget. Nulla at tristique risus, tincidunt posuere magna. Donec quis purus eu urna semper efficitur.</p>
  534. </div><!--Childhood Tab End-->
  535. <!----------[ TEENAGE YEARS TAB ]---------->
  536. <div class="tab-pane fade p-3" id="nav-teen" role="tabpanel" style="height:450px; overflow:auto;">
  537. <h4 class="text-primary text-uppercase font-weight-bold" style="letter-spacing:2px;">Header 1</h4><hr class="bg-primary">
  538. <h3 class="text-center font-italic">"Quote"</h3>
  539. <p>Duis sapien ligula, porttitor non fermentum eu, hendrerit nec dolor. Vestibulum eget finibus turpis. Morbi auctor, mauris ut malesuada venenatis, erat risus pellentesque quam, non vehicula nunc lacus sed mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque non erat cursus, commodo risus at, ullamcorper libero. Cras quis tincidunt quam, non laoreet augue. Cras eget arcu a tellus pretium suscipit ac iaculis dui. Vestibulum tincidunt turpis quam, a laoreet dolor tristique non. In metus mauris, molestie at tristique sit amet, accumsan in lectus. Vestibulum in erat odio. Aenean vel dui eu lacus blandit accumsan.</p>
  540. <h4 class="text-primary text-uppercase font-weight-bold" style="letter-spacing:2px;">Header 2</h4><hr class="bg-primary">
  541. <h3 class="text-center font-italic">"Quote"</h3>
  542. <p>Duis ac condimentum neque, et vehicula ipsum. Quisque rhoncus pellentesque est. Curabitur vel erat nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ac tempus nisi, et malesuada magna. Nam quam leo, pulvinar et dolor ac, iaculis ultrices erat. Nulla aliquam aliquam tellus, vitae porttitor mauris commodo a. Duis ut suscipit sem. Maecenas porttitor eu mi eget iaculis. Phasellus id elit pretium augue rhoncus iaculis eu dignissim metus. Etiam laoreet urna at ex dapibus aliquam vel eu sem. Vivamus interdum placerat turpis, vitae rutrum justo convallis eget. Nullam ac sagittis mi. Vivamus magna sem, venenatis quis eros vitae, volutpat sagittis ante. </p>
  543. <h4 class="text-primary text-uppercase font-weight-bold" style="letter-spacing:2px;">Header 3</h4><hr class="bg-primary">
  544. <h3 class="text-center font-italic">"Quote"</h3>
  545. <p>Cras a neque non lectus porta porttitor. Aenean blandit sem eget egestas vehicula. Ut sodales sodales leo, quis maximus odio varius sit amet. In at maximus nisl. Nullam a cursus sem. Mauris malesuada leo non tortor tincidunt rutrum. Etiam ut posuere lorem. Quisque quis magna ligula. Proin molestie quis enim id condimentum. Duis vel vehicula nunc. Vivamus nec dui elit. Praesent sed eleifend nibh. In id vulputate tortor. </p>
  546. <p>Aenean vitae mi quam. Cras et mattis turpis. Praesent condimentum fringilla mauris quis sollicitudin. Vestibulum ultrices imperdiet dolor, ac sollicitudin libero pretium at. Integer quis est in ante dictum imperdiet id at nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas eu venenatis mauris. Mauris eu mauris finibus turpis porttitor porttitor at ac leo. Mauris tempor nulla ac bibendum sodales. Vivamus fermentum posuere lectus non pharetra. Nunc efficitur non enim ut convallis. Nam ut laoreet metus, sed pellentesque quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin viverra tristique enim, eget vestibulum diam laoreet a. Nullam bibendum sollicitudin luctus. Nulla ut suscipit lorem. </p>
  547. </div><!--Teenage Years Tab End-->
  548. <!----------[ ADULTHOOD TAB ]---------->
  549. <div class="tab-pane fade p-3" id="nav-adult" role="tabpanel" style="height:450px; overflow:auto;">
  550. <h4 class="text-primary text-uppercase font-weight-bold" style="letter-spacing:2px;">Header 1</h4><hr class="bg-primary">
  551. <h3 class="text-center font-italic">"Quote"</h3>
  552. <p>Sed ut semper orci, non dignissim turpis. Duis nec tristique mauris. Sed sagittis eros quis mi rhoncus sodales. Nunc molestie, ligula ut rutrum imperdiet, arcu purus vestibulum ligula, sed faucibus eros purus non sapien. Curabitur viverra nisl odio, tempus interdum erat porta in. Curabitur efficitur metus in justo gravida pretium. Vivamus purus lacus, pharetra nec blandit sed, ultricies at est. Sed sodales, nisl eu tincidunt sollicitudin, ipsum nisi tincidunt libero, eget aliquet massa ligula vel massa. Nam erat lorem, pharetra eu nulla ac, interdum feugiat libero. Sed eget lorem turpis. Phasellus nec felis lobortis, dictum eros ut, blandit libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Vestibulum sit amet sagittis risus. </p>
  553. <p>Aliquam erat volutpat. Nulla tempor arcu at nibh gravida blandit. Donec lobortis lacus tortor. Aliquam erat volutpat. Etiam sagittis turpis sit amet lorem laoreet vehicula. Nulla maximus nibh ipsum, sit amet consectetur nulla blandit ut. Aenean porta nec augue id tempor. Praesent ultricies ultricies posuere. Donec id blandit urna. Cras in lectus et lectus accumsan blandit. Nunc dui ante, posuere iaculis ligula at, consequat condimentum neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed a rutrum est, eleifend imperdiet sem. Sed scelerisque rutrum arcu egestas egestas. </p>
  554. <p>Fusce eget metus iaculis, malesuada purus id, placerat nunc. Phasellus interdum accumsan libero id feugiat. Suspendisse commodo sed orci id dapibus. Etiam tortor nulla, pretium eu neque id, lobortis varius tellus. Ut malesuada mauris blandit eleifend facilisis. Vestibulum varius placerat malesuada. Nullam enim tellus, dapibus eget facilisis ac, molestie at felis. Sed gravida lobortis sem, non finibus nisl varius eu. Proin nec sapien quis libero eleifend dictum. Duis tincidunt nec magna at blandit. Nunc congue dictum quam, sed suscipit justo lobortis vel. Integer iaculis pharetra quam, eget posuere dui consequat eu. Morbi tincidunt vitae diam eu mattis. Curabitur accumsan velit porta, consequat justo a, varius felis. Morbi facilisis mattis pretium. Proin sed interdum elit, in malesuada est. </p>
  555. </div><!--Adulthood Tab End-->
  556. </div><!--Tab Content End-->
  557. </nav><!--Nav Tabs End-->
  558. </div><!--Story Pill Tab End-->
  559. <!----------[ RELATIONSHIPS PILL TAB ]---------->
  560. <div class="tab-pane fade" id="pills-relationships" role="tabpanel">
  561. <nav>
  562. <div class="nav nav-tabs bg-faded" role="tablist">
  563. <a class="nav-item nav-link active border-left-0 border-top-0" data-toggle="tab" href="#nav-family" role="tab">Family</a>
  564. <a class="nav-item nav-link border-top-0" data-toggle="tab" href="#nav-friends" role="tab">Friends</a>
  565. <a class="nav-item nav-link border-top-0" data-toggle="tab" href="#nav-coworkers" role="tab">Co-Workers</a>
  566. <a class="nav-item nav-link border-top-0" data-toggle="tab" href="#nav-lovers" role="tab">Love Interests</a>
  567. </div>
  568. <div class="tab-content">
  569. <!----------[ FAMILY TAB ]---------->
  570. <div class="tab-pane fade show active p-3" id="nav-family" role="tabpanel" style="height:450px; overflow:auto;">
  571. <!----------[ FAMILY RELATIONSHIP 1 ]---------->
  572. <div class="media">
  573. <img class="img-thumbnail rounded d-inline-block mr-2" style="width:100px; height:100px;" src="https://cdn.discordapp.com/attachments/498852129893646337/549320185153060895/unknown.png">
  574. <div class="media-body">
  575. <p class="text-uppercase font-weight-bold" style="letter-spacing:2px; font-size:18px">
  576. <a href="#">Name</a><br>
  577. <small>Relationship<br>
  578. <small class="font-italic">"Quote"</small></small>
  579. </p>
  580. </div><!--Media Body End-->
  581. </div><!--Media End-->
  582. <!----------[ PLAYLIST ]---------->
  583. <table class="table-hover table-striped table-dark float-right ml-4" style="width:25%;">
  584. <tr>
  585. <td>▶ <a href="#">Song 1 by Artist</a></td>
  586. </tr>
  587. <tr>
  588. <td>▶ <a href="#">Song 2 by Artist</a></td>
  589. </tr>
  590. <tr>
  591. <td>▶ <a href="#">Song 3 by Artist</a></td>
  592. </tr>
  593. <tr>
  594. <td>▶ <a href="#">Song 4 by Artist</a></td>
  595. </tr>
  596. <tr>
  597. <td>▶ <a href="#">Song 5 by Artist</a></td>
  598. </tr>
  599. </table>
  600. <p>Donec justo lacus, condimentum vitae mauris eget, rutrum placerat risus. Cras tristique velit lacus, sit amet auctor mi pulvinar vel. Sed imperdiet pretium dolor sit amet malesuada. Fusce venenatis erat sed risus porta, mattis dictum dui vestibulum. Nam a fermentum eros. Curabitur risus tortor, egestas eget tortor at, dignissim porta lorem. Maecenas mattis nunc ut tempor semper. Donec fermentum est ut risus consectetur porta. Proin aliquam dolor ut placerat aliquet. Nullam tellus turpis, gravida vitae vulputate ut, suscipit ut lorem. Sed sed odio quam. </p>
  601. <p>Sed fermentum at erat quis semper. Cras eleifend, lectus vel venenatis placerat, magna neque vehicula leo, sollicitudin volutpat dolor nunc sed sem. Nulla nec dui sapien. Morbi in diam interdum, maximus nisl a, euismod orci. Phasellus quis elit at lacus pellentesque porta nec nec erat. Curabitur laoreet odio vel volutpat blandit. Nulla pharetra lorem vel ultricies efficitur. Ut non nunc et odio convallis bibendum. Aenean feugiat bibendum mauris. Aliquam ut porta arcu. </p>
  602. <p>Curabitur sapien risus, posuere ut ornare eu, aliquet quis urna. Nam tincidunt nulla bibendum pretium volutpat. Aliquam varius euismod condimentum. Integer lobortis metus eu metus gravida venenatis. Phasellus nulla velit, mollis non leo ut, scelerisque ultricies magna. Ut vitae cursus dolor. Nulla et interdum lorem. </p>
  603. <hr class="bg-primary">
  604. <!----------[ FAMILY RELATIONSHIP 2 ]---------->
  605. <div class="media">
  606. <img class="img-thumbnail rounded d-inline-block mr-2" style="width:100px; height:100px;" src="https://cdn.discordapp.com/attachments/498852129893646337/549320185153060895/unknown.png">
  607. <div class="media-body">
  608. <p class="text-uppercase font-weight-bold" style="letter-spacing:2px; font-size:18px">
  609. <a href="#">Name</a><br>
  610. <small>Relationship<br>
  611. <small class="font-italic">"Quote"</small></small>
  612. </p>
  613. </div><!--Media Body End-->
  614. </div><!--Media End-->
  615. <!----------[ PLAYLIST ]---------->
  616. <table class="table-hover table-striped table-dark float-right ml-4" style="width:25%;">
  617. <tr>
  618. <td>▶ <a href="#">Song 1 by Artist</a></td>
  619. </tr>
  620. <tr>
  621. <td>▶ <a href="#">Song 2 by Artist</a></td>
  622. </tr>
  623. <tr>
  624. <td>▶ <a href="#">Song 3 by Artist</a></td>
  625. </tr>
  626. <tr>
  627. <td>▶ <a href="#">Song 4 by Artist</a></td>
  628. </tr>
  629. <tr>
  630. <td>▶ <a href="#">Song 5 by Artist</a></td>
  631. </tr>
  632. </table>
  633. <p>Praesent sit amet elementum purus. Sed interdum nunc at fringilla pellentesque. Vestibulum iaculis consectetur felis, sit amet malesuada lorem vulputate ut. Curabitur massa purus, convallis sit amet vestibulum vitae, aliquet et leo. In sed lacinia eros, sed dapibus nunc. Curabitur tellus massa, blandit eu tellus convallis, finibus elementum lorem. Quisque ut rhoncus ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vestibulum ultricies maximus. Donec laoreet lorem vitae tellus eleifend interdum. Aliquam metus tellus, iaculis id turpis vitae, interdum sollicitudin leo. Ut ante tellus, viverra quis tincidunt nec, feugiat non mi. Pellentesque volutpat lacus in feugiat lacinia. Fusce ut accumsan odio, et consectetur lorem. </p>
  634. <p>Nunc congue ipsum neque, sit amet posuere neque auctor sit amet. Ut placerat leo nec augue aliquam, in feugiat purus scelerisque. Etiam tempor eros et nibh scelerisque dictum id id felis. Curabitur consequat ligula leo, quis vehicula urna malesuada a. Cras vel porta velit. Aliquam feugiat leo orci, a pellentesque quam sodales sed. Proin non libero non mi dignissim sodales eu varius diam. </p>
  635. </div><!--Family Tab End-->
  636. <!----------[ FRIENDS TAB ]---------->
  637. <div class="tab-pane fade p-3" id="nav-friends" role="tabpanel" style="height:450px; overflow:auto;">
  638. <!----------[ FRIEND RELATIONSHIP 1 ]---------->
  639. <div class="media">
  640. <img class="img-thumbnail rounded d-inline-block mr-2" style="width:100px; height:100px;" src="https://cdn.discordapp.com/attachments/498852129893646337/549320185153060895/unknown.png">
  641. <div class="media-body">
  642. <p class="text-uppercase font-weight-bold" style="letter-spacing:2px; font-size:18px">
  643. <a href="#">Name</a><br>
  644. <small>Relationship<br>
  645. <small class="font-italic">"Quote"</small></small>
  646. </p>
  647. </div><!--Media Body End-->
  648. </div><!--Media End-->
  649. <!----------[ PLAYLIST ]---------->
  650. <table class="table-hover table-striped table-dark float-right ml-4" style="width:25%;">
  651. <tr>
  652. <td>▶ <a href="#">Song 1 by Artist</a></td>
  653. </tr>
  654. <tr>
  655. <td>▶ <a href="#">Song 2 by Artist</a></td>
  656. </tr>
  657. <tr>
  658. <td>▶ <a href="#">Song 3 by Artist</a></td>
  659. </tr>
  660. <tr>
  661. <td>▶ <a href="#">Song 4 by Artist</a></td>
  662. </tr>
  663. <tr>
  664. <td>▶ <a href="#">Song 5 by Artist</a></td>
  665. </tr>
  666. </table>
  667. <p>Praesent suscipit est quam, nec iaculis quam lacinia nec. Duis vestibulum leo nisl, eget lacinia velit pretium sit amet. Nunc vitae lectus at nunc volutpat ullamcorper. Maecenas scelerisque mattis dictum. Vestibulum massa lacus, finibus nec consequat a, auctor nec dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin suscipit eu dolor eget posuere. </p>
  668. <hr class="bg-primary">
  669. <!----------[ FRIEND RELATIONSHIP 2 ]---------->
  670. <div class="media">
  671. <img class="img-thumbnail rounded d-inline-block mr-2" style="width:100px; height:100px;" src="https://cdn.discordapp.com/attachments/498852129893646337/549320185153060895/unknown.png">
  672. <div class="media-body">
  673. <p class="text-uppercase font-weight-bold" style="letter-spacing:2px; font-size:18px">
  674. <a href="#">Name</a><br>
  675. <small>Relationship<br>
  676. <small class="font-italic">"Quote"</small></small>
  677. </p>
  678. </div><!--Media Body End-->
  679. </div><!--Media End-->
  680. <!----------[ PLAYLIST ]---------->
  681. <table class="table-hover table-striped table-dark float-right ml-4" style="width:25%;">
  682. <tr>
  683. <td>▶ <a href="#">Song 1 by Artist</a></td>
  684. </tr>
  685. <tr>
  686. <td>▶ <a href="#">Song 2 by Artist</a></td>
  687. </tr>
  688. <tr>
  689. <td>▶ <a href="#">Song 3 by Artist</a></td>
  690. </tr>
  691. <tr>
  692. <td>▶ <a href="#">Song 4 by Artist</a></td>
  693. </tr>
  694. <tr>
  695. <td>▶ <a href="#">Song 5 by Artist</a></td>
  696. </tr>
  697. </table>
  698. <p>Curabitur in lacinia erat. Pellentesque hendrerit commodo tortor, et congue nisi. Donec lacus velit, volutpat a ante nec, bibendum ullamcorper nunc. Fusce et nulla quam. Donec commodo euismod odio sit amet dictum. Pellentesque ut arcu diam. Donec consequat libero non nunc finibus laoreet. Nunc hendrerit, orci eget pellentesque placerat, libero enim viverra diam, vel fermentum velit nunc vitae neque. Morbi massa nisi, rhoncus sed congue sit amet, cursus at ex. Morbi quis eros eget quam aliquam maximus. Proin non massa odio. </p>
  699. <p>Vestibulum tempor est dui, quis varius lectus finibus non. Suspendisse consequat eu risus id condimentum. Ut bibendum diam convallis lacus feugiat viverra. Nulla tellus leo, facilisis sed elit vitae, fringilla vulputate neque. Phasellus et dolor neque. Maecenas nec ultricies massa. Nullam a velit odio. </p>
  700. <!----------[ FRIEND RELATIONSHIP 3 ]---------->
  701. <div class="media">
  702. <img class="img-thumbnail rounded d-inline-block mr-2" style="width:100px; height:100px;" src="https://cdn.discordapp.com/attachments/498852129893646337/549320185153060895/unknown.png">
  703. <div class="media-body">
  704. <p class="text-uppercase font-weight-bold" style="letter-spacing:2px; font-size:18px">
  705. <a href="#">Name</a><br>
  706. <small>Relationship<br>
  707. <small class="font-italic">"Quote"</small></small>
  708. </p>
  709. </div><!--Media Body End-->
  710. </div><!--Media End-->
  711. <!----------[ PLAYLIST ]---------->
  712. <table class="table-hover table-striped table-dark float-right ml-4" style="width:25%;">
  713. <tr>
  714. <td>▶ <a href="#">Song 1 by Artist</a></td>
  715. </tr>
  716. <tr>
  717. <td>▶ <a href="#">Song 2 by Artist</a></td>
  718. </tr>
  719. <tr>
  720. <td>▶ <a href="#">Song 3 by Artist</a></td>
  721. </tr>
  722. <tr>
  723. <td>▶ <a href="#">Song 4 by Artist</a></td>
  724. </tr>
  725. <tr>
  726. <td>▶ <a href="#">Song 5 by Artist</a></td>
  727. </tr>
  728. </table>
  729. <p>Aliquam risus massa, molestie id risus at, elementum imperdiet tortor. Sed non dapibus leo. Nullam eu condimentum augue, ac scelerisque ipsum. Vestibulum aliquet, diam ac rhoncus viverra, quam dolor tincidunt augue, sit amet pellentesque sem libero eget ipsum. Cras nec nisi non leo consectetur ultricies. Integer sem sem, vestibulum vel pretium vitae, malesuada non nulla. Nullam hendrerit feugiat mi sed commodo. Integer dui sapien, lobortis sit amet vulputate nec, hendrerit nec tortor. Phasellus posuere, arcu quis rutrum tristique, enim ex mattis risus, nec tincidunt nisl sem nec augue. Sed vel dignissim velit. Nulla facilisi. Cras fermentum, sapien quis fermentum venenatis, erat arcu suscipit lorem, sit amet tristique libero dolor ac elit. Mauris neque mi, laoreet a justo ac, convallis semper ligula. </p>
  730. <p>Quisque tempor, leo et dignissim aliquet, massa augue facilisis tortor, nec feugiat quam nulla at elit. Phasellus nulla nulla, porttitor at aliquet ac, eleifend ut neque. Duis mollis id libero a eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam urna est, suscipit vel odio ac, facilisis pharetra odio. Duis dapibus in erat sit amet rhoncus. Praesent pretium leo a pretium molestie. Nam egestas ligula ac ligula egestas, eget varius felis iaculis. In eu tempor erat. </p>
  731. </div><!--Friends Tab End-->
  732. <!----------[ CO-WORKERS TAB ]---------->
  733. <div class="tab-pane fade p-3" id="nav-coworkers" role="tabpanel" style="height:450px; overflow:auto;">
  734. <!----------[ COWORKER RELATIONSHIP 1 ]---------->
  735. <div class="media">
  736. <img class="img-thumbnail rounded d-inline-block mr-2" style="width:100px; height:100px;" src="https://cdn.discordapp.com/attachments/498852129893646337/549320185153060895/unknown.png">
  737. <div class="media-body">
  738. <p class="text-uppercase font-weight-bold" style="letter-spacing:2px; font-size:18px">
  739. <a href="#">Name</a><br>
  740. <small>Relationship<br>
  741. <small class="font-italic">"Quote"</small></small>
  742. </p>
  743. </div><!--Media Body End-->
  744. </div><!--Media End-->
  745. <!----------[ PLAYLIST ]---------->
  746. <table class="table-hover table-striped table-dark float-right ml-4" style="width:25%;">
  747. <tr>
  748. <td>▶ <a href="#">Song 1 by Artist</a></td>
  749. </tr>
  750. <tr>
  751. <td>▶ <a href="#">Song 2 by Artist</a></td>
  752. </tr>
  753. <tr>
  754. <td>▶ <a href="#">Song 3 by Artist</a></td>
  755. </tr>
  756. <tr>
  757. <td>▶ <a href="#">Song 4 by Artist</a></td>
  758. </tr>
  759. <tr>
  760. <td>▶ <a href="#">Song 5 by Artist</a></td>
  761. </tr>
  762. </table>
  763. <p>Phasellus semper interdum nibh id auctor. Vestibulum nisi elit, cursus eget nisl ac, porta sagittis dui. Morbi scelerisque elit sapien, non sagittis mi iaculis ut. Etiam in vehicula sapien. Ut massa risus, pharetra quis tincidunt nec, blandit at felis. Curabitur fermentum sodales mi eu sagittis. Nullam quis varius leo. Aliquam vehicula consectetur sem. Nulla purus tellus, dignissim ut nulla quis, tincidunt tempus felis. Aliquam venenatis arcu et leo tincidunt imperdiet. Vestibulum enim neque, egestas a pulvinar sit amet, egestas a erat. </p>
  764. </div><!--Co-Workers Tab End-->
  765. <!----------[ LOVE INTERESTS TAB ]---------->
  766. <div class="tab-pane fade p-3" id="nav-lovers" role="tabpanel" style="height:450px; overflow:auto;">
  767. <!----------[ LOVE RELATIONSHIP 1 ]---------->
  768. <div class="media">
  769. <img class="img-thumbnail rounded d-inline-block mr-2" style="width:100px; height:100px;" src="https://cdn.discordapp.com/attachments/498852129893646337/549320185153060895/unknown.png">
  770. <div class="media-body">
  771. <p class="text-uppercase font-weight-bold" style="letter-spacing:2px; font-size:18px">
  772. <a href="#">Name</a><br>
  773. <small>Relationship<br>
  774. <small class="font-italic">"Quote"</small></small>
  775. </p>
  776. </div><!--Media Body End-->
  777. </div><!--Media End-->
  778. <!----------[ PLAYLIST ]---------->
  779. <table class="table-hover table-striped table-dark float-right ml-4" style="width:25%;">
  780. <tr>
  781. <td>▶ <a href="#">Song 1 by Artist</a></td>
  782. </tr>
  783. <tr>
  784. <td>▶ <a href="#">Song 2 by Artist</a></td>
  785. </tr>
  786. <tr>
  787. <td>▶ <a href="#">Song 3 by Artist</a></td>
  788. </tr>
  789. <tr>
  790. <td>▶ <a href="#">Song 4 by Artist</a></td>
  791. </tr>
  792. <tr>
  793. <td>▶ <a href="#">Song 5 by Artist</a></td>
  794. </tr>
  795. </table>
  796. <p>Donec semper egestas rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis tincidunt ligula ac vehicula molestie. Suspendisse placerat vel risus semper faucibus. Phasellus elit tortor, tristique eu velit dapibus, euismod feugiat turpis. In pharetra euismod erat id porta. Duis at commodo orci. Aliquam porttitor metus sed euismod euismod. Vestibulum dignissim neque et neque convallis, quis porta dui placerat. Curabitur maximus faucibus interdum. Pellentesque mi enim, porta vel est a, molestie facilisis diam. Quisque quis varius sem. Nunc nisi erat, suscipit ut ullamcorper vel, pretium at lorem. Sed leo massa, scelerisque et condimentum quis, bibendum ut ex. Morbi imperdiet elit nec sem imperdiet mattis. Phasellus eget nunc at odio pellentesque faucibus ultrices lacinia mauris. </p>
  797. <p>Etiam est orci, venenatis a tristique ornare, vehicula a lectus. Aenean varius suscipit dolor a pellentesque. Ut aliquet ante at erat sollicitudin, et mollis eros semper. Vivamus posuere gravida augue at lobortis. Cras porttitor, leo a rutrum feugiat, mauris ligula suscipit massa, sed elementum nisl quam dapibus lorem. Cras magna neque, condimentum ut mi eget, tempor facilisis nisi. In porttitor eros neque, sed imperdiet ex accumsan sed. Nunc non neque quam. Sed sit amet felis luctus, posuere odio sit amet, hendrerit elit. Sed nec libero quam. Duis posuere et nisl vel dignissim. Sed sed mauris vel ex interdum tristique. Curabitur tellus lacus, dignissim sit amet tempus nec, consectetur gravida lacus. Morbi gravida quis nisl et vehicula. </p>
  798. </div><!--Love Interests Tab End-->
  799. </div><!--Tab Content End-->
  800. </nav><!--Nav Tabs End-->
  801. </div><!--Relationships Pill Tab End-->
  802. <!----------[ GALLERY PILL TAB ]---------->
  803. <div class="tab-pane fade" id="pills-gallery" role="tabpanel">
  804. <nav>
  805. <div class="nav nav-tabs bg-faded" role="tablist">
  806. <a class="nav-item nav-link active border-left-0 border-top-0" data-toggle="tab" href="#nav-gallery" role="tab">Gallery</a>
  807. <a class="nav-item nav-link border-top-0" data-toggle="tab" href="#nav-refs" role="tab">References</a>
  808. </div>
  809. <div class="tab-content">
  810. <!----------[ GALLERY TAB ]---------->
  811. <div class="tab-pane fade show active p-3" id="nav-gallery" role="tabpanel" style="height:450px; overflow:auto;">
  812. <h5 class="text-center font-italic">See main gallery <a href="#">here</a>.</h5>
  813. <p class="text-center">
  814. <img class="rounded d-inline-block m-1" style="height:300px;" src="https://cdn.discordapp.com/attachments/565605870705180703/565605923050225675/unknown.png">
  815. <img class="rounded d-inline-block m-1" style="height:300px;" src="https://cdn.discordapp.com/attachments/565605870705180703/565606032559308801/unknown.png">
  816. <img class="rounded d-inline-block m-1" style="height:300px;" src="https://cdn.discordapp.com/attachments/565605870705180703/565606174590894086/unknown.png">
  817. <img class="rounded d-inline-block m-1" style="height:300px;" src="https://cdn.discordapp.com/attachments/565605870705180703/565606394103857162/unknown.png">
  818. </p>
  819. </div><!--Character Details Tab End-->
  820. <!----------[ REFERENCES TAB ]---------->
  821. <div class="tab-pane fade p-3" id="nav-refs" role="tabpanel" style="height:450px; overflow:auto;">
  822. <p class="text-center">
  823. <img class="rounded d-inline-block m-1" style="height:300px;" src="https://cdn.discordapp.com/attachments/565605870705180703/565607177121824827/unknown.png">
  824. <img class="rounded d-inline-block m-1" style="height:300px;" src="https://cdn.discordapp.com/attachments/565605870705180703/565607282814091276/unknown.png">
  825. </p>
  826. </div><!--Stats/Abilities Tab End-->
  827. </div><!--Gallery Pill Tab End-->
  828. </div><!--Pills Tab End-->
  829. </div><!--Container End-->
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!