API tools faq
paste
Advertisement
Guest User

TH

a guest
Nov 16th, 2019
298
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.95 KB | None | 0 0
raw download clone embed print report
  1. <!----
  2.  
  3. Quick View by technibabble
  4.  
  5. ---->
  6.  
  7. <div class="container-fluid">
  8. <div class="row">
  9. <!---- RIGHT COLUMN ---->
  10. <div class="col-md-4 col-lg-3 flex-md-last">
  11. <!-- NAV -->
  12. <div class="card rounded-0 mb-3">
  13. <div class="card-block">
  14. <ul class="nav nav-pills flex-column">
  15. <li class="nav-item">
  16. <a href="#basic" data-toggle="tab" class="nav-link active d-flex justify-content-between">Basics<i class="fal fa-sliders-h fa-fw my-auto"></i></a>
  17. </li>
  18. <li class="nav-item">
  19. <a href="#info" data-toggle="tab" class="nav-link d-flex justify-content-between">Info<i class="fal fa-address-card fa-fw my-auto"></i></a>
  20. </li>
  21. <li class="nav-item">
  22. <a href="#friends" data-toggle="tab" class="nav-link d-flex justify-content-between">Relations<i class="fal fa-heartbeat fa-fw my-auto"></i></a>
  23. </li>
  24. </ul>
  25. </div>
  26. </div>
  27. <!-- SIDE PICTURE - hidden on small screens -->
  28. <img class="img-thumbnail rounded-0 mb-3 d-none d-md-block" src="https://cdn.discordapp.com/attachments/430144495573663766/635676606484185098/na.png" />
  29. </div>
  30. <!---- LEFT COLUMN ---->
  31. <div class="col-md-8 col-lg-9">
  32. <div class="tab-content">
  33. <!---- BASIC ---->
  34. <div class="tab-pane fade in active show" id="basic">
  35. <div class="card rounded-0 mb-3">
  36. <div class="card-block">
  37. <!-- ESSENTIALS -->
  38. <div class="row col-xl-10 mx-xl-auto mb-3">
  39. <div class="col-lg">
  40. <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Name</span> text</div>
  41. <hr class="my-1" />
  42. <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Alias</span> text</div>
  43. <hr class="my-1" />
  44. <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Gender</span> text</div>
  45. <hr class="my-1" />
  46. <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Birthday</span> text</div>
  47. <hr class="my-1" />
  48. <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Death</span> text</div>
  49. <hr class="d-lg-none my-1" />
  50. </div>
  51. <div class="col-lg">
  52. <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Height</span> text</div>
  53. <hr class="my-1" />
  54. <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">HC voice</span> <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" id="" style="color:#ff0000;">N/A</a></div>
  55. <hr class="my-1" />
  56. <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Sexuality</span> text</div>
  57. <hr class="my-1" />
  58. <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Occupation</span> text</div>
  59. <hr class="my-1" />
  60. <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Theme</span> <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" id="" style="color:#ff0000;">N/A</a></div>
  61. </div>
  62. </div>
  63. <!-- SNIPPET -->
  64. <div class="text-justify">
  65. <p>text</p>
  66. </div>
  67. </div>
  68. </div>
  69. <!--- PALETTE --->
  70. <div class="row">
  71. <div class="col-4 col-sm-2 col-md-4 col-lg-2">
  72. <div class="card rounded-0 mb-3 tooltipster" title="text" style="height:3rem; background-color:#ff0000;"></div>
  73. </div>
  74. <div class="col-4 col-sm-2 col-md-4 col-lg-2">
  75. <div class="card rounded-0 mb-3 tooltipster" title="eyes" style="height:3rem; background-color:#ff0000;"></div>
  76. </div>
  77. <div class="col-4 col-sm-2 col-md-4 col-lg-2">
  78. <div class="card rounded-0 mb-3 tooltipster" title="hair" style="height:3rem; background-color:#ff0000;"></div>
  79. </div>
  80. <div class="col-4 col-sm-2 col-md-4 col-lg-2">
  81. <div class="card rounded-0 mb-3 tooltipster" title="skin" style="height:3rem; background-color:#ff0000;"></div>
  82. </div>
  83. <div class="col-4 col-sm-2 col-md-4 col-lg-2">
  84. <div class="card rounded-0 mb-3 tooltipster" title="text" style="height:3rem; background-color:#ff0000;"></div>
  85. </div>
  86. <div class="col-4 col-sm-2 col-md-4 col-lg-2">
  87. <div class="card rounded-0 mb-3 tooltipster" title="text" style="height:3rem; background-color:#ff0000;"></div>
  88. </div>
  89. </div>
  90. <!--- STATS - change "width:1%" to however full you want the bar --->
  91. <div class="card rounded-0 mb-3">
  92. <div class="card-block">
  93. <div class="row">
  94. <div class="col-lg">
  95. <!-- STRENGTH -->
  96. <p class="text-uppercase mb-0">STRENGTH</p>
  97. <div class="progress my-2 rounded-0"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  98. style="width:50%;height:16px"></div>
  99. </div>
  100. <!-- ENERGY -->
  101. <p class="text-uppercase mb-0">ENERGY</p>
  102. <div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  103. style="width:50%;height:16px"></div>
  104. </div>
  105. <!-- DEXTERITY -->
  106. <p class="text-uppercase mb-0">DEXTERITY / AGILITY</p>
  107. <div class="progress my-2 rounded-0"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  108. style="width:50%;height:16px"></div>
  109. </div>
  110. <!-- CONCENTRATION -->
  111. <p class="text-uppercase mb-0">CONCENTRATION</p>
  112. <div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  113. style="width:50%;height:16px"></div>
  114. </div>
  115. <!-- AFFECTION -->
  116. <p class="text-uppercase mb-0">AFFECTION (ROMANCE / ATTACHMENT)</p>
  117. <div class="progress my-2 rounded-0"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  118. style="width:50%;height:16px"></div>
  119. </div>
  120. </div>
  121. <div class="col-lg">
  122. <!-- EMPATHY -->
  123. <p class="text-uppercase mb-0">EMPATHY</p>
  124. <div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  125. style="width:50%;height:16px"></div>
  126. </div>
  127. <!-- INTELLIGENCE -->
  128. <p class="text-uppercase mb-0">INTELLIGENCE</p>
  129. <div class="progress my-2 rounded-0"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  130. style="width:50%;height:16px"></div>
  131. </div>
  132. <!-- INTUITION -->
  133. <p class="text-uppercase mb-0">INTUITION</p>
  134. <div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  135. style="width:50%;height:16px"></div>
  136. </div>
  137. <!-- CHARISMA -->
  138. <p class="text-uppercase mb-0">CHARISMA</p>
  139. <div class="progress my-2 rounded-0"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  140. style="width:50%;height:16px"></div>
  141. </div>
  142. <!-- LIBIDO -->
  143. <p class="text-uppercase mb-0">LIBIDO</p>
  144. <div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  145. style="width:50%;height:16px"></div>
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. <!--- INFO --->
  153. <div class="tab-pane fade" id="info">
  154. <!-- ABOUT -->
  155. <div class="card rounded-0 mb-3">
  156. <div class="card-block text-justify">
  157. <h3 class="text-muted text-uppercase d-flex justify-content-between mb-3">About <i class="fal fa-star fa-fw"></i></h3>
  158. <p dir="ltr"><strong><span style="background-color: initial; font-size: 18px;">Trivia:</span></strong></p><ul style="list-style-type: circle;"><li>text</li></ul><p dir="ltr"><strong><span style="font-size: 18px;">Story:</span></strong></p>text</p>
  159. </div>
  160. </div>
  161. <!-- APPEARANCE -->
  162. <div class="card rounded-0 mb-3">
  163. <div class="card-block text-justify">
  164. <h3 class="text-muted text-uppercase d-flex justify-content-between mb-3">Appearance <i class="fal fa-user-circle fa-fw"></i></h3>
  165. <div class="text-center">
  166. <!-- IMAGE -->
  167. <img src="https://cdn.discordapp.com/attachments/430144495573663766/635676606484185098/na.png" class="mb-3" />
  168. </div>
  169. <p>text</p>
  170. </div>
  171. </div>
  172. </div>
  173. <!--- FRIENDS --->
  174. <div class="tab-pane fade" id="friends">
  175. <!-- LEFT-ALIGNED -->
  176. <div class="card rounded-0 mb-3">
  177. <div class="card-block text-justify">
  178. <div class="float-left mr-3">
  179. <a href="https://toyhou.se/4735954.noire"><img class="rounded-0 img-thumbnail tooltipster" style="width:125px;" src="https://cdn.discordapp.com/attachments/430144495573663766/635676606484185098/na.png" title="name" /></a>
  180. </div>
  181. <p><strong><span style="font-size: 20px;">Name</span></strong></p><p><span style="font-size: 14px;">text</p>
  182. </div>
  183. </div>
  184. <!-- LEFT-ALIGNED -->
  185. <div class="card rounded-0 mb-3">
  186. <div class="card-block text-justify">
  187. <div class="float-left mr-3">
  188. <a href="https://toyhou.se/4608288.roy"><img class="rounded-0 img-thumbnail tooltipster" style="width:125px;" src="https://cdn.discordapp.com/attachments/430144495573663766/635676606484185098/na.png" title="name" /></a>
  189. </div>
  190. <p><strong><span style="font-size: 20px;">Name</span></strong></p><p><span style="font-size: 14px;">text</p>
  191. </div>
  192. </div>
  193. <!-- LEFT-ALIGNED -->
  194. <div class="card rounded-0 mb-3">
  195. <div class="card-block text-justify">
  196. <div class="float-left mr-3">
  197. <a href="https://toyhou.se/4608288.roy"><img class="rounded-0 img-thumbnail tooltipster" style="width:125px;" src="https://cdn.discordapp.com/attachments/430144495573663766/635676606484185098/na.png" title="name" /></a>
  198. </div>
  199. <p><strong><span style="font-size: 20px;">Name</span></strong></p><p><span style="font-size: 14px;">text</p>
  200. </div>
  201. </div>
  202. <!-- LEFT-ALIGNED -->
  203. <div class="card rounded-0 mb-3">
  204. <div class="card-block text-justify">
  205. <div class="float-left mr-3">
  206. <a href="https://toyhou.se/4920052.anton"><img class="rounded-0 img-thumbnail tooltipster" style="width:125px;" src="https://cdn.discordapp.com/attachments/430144495573663766/635676606484185098/na.png" title="name" /></a>
  207. </div>
  208. <p><strong><span style="font-size: 20px;">Name</span></strong></p><p><span style="font-size: 14px;">text</p>
  209. </div>
  210. </div>
  211. <!-- END -->
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217.  
  218. <!---- CREDIT - DO NOT REMOVE ---->
  219. <div class="float-right"><a href="/technibabble" title="code|techni" data-placement="left" class="btn btn-outline-primary d-inline-flex p-2 rounded-circle tooltipster"><i class="fal fa-code m-auto" /></a></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!