API tools faq
paste
lowkeywicked

Advent - Triad

lowkeywicked
Dec 14th, 2021 (edited)
14,149
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.54 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid card border-0 pt-5 pb-4" style="margin-top: -58px;"><div class="container p-0" style="max-width: 750px;">
  2. <div class="row no-gutters">
  3. <div class="col-md-6 pr-md-4 mb-4">
  4. <div class="p-md-2 p-4 d-flex h-100" style="background: #bc8da2;"><div class="w-100 my-auto">
  5. <h1 class="text-uppercase text-white text-center mb-0" style="font-size: 2em; letter-spacing: 2px;">
  6. <!-- CHARACTER NAME OR TITLE ------------------->
  7. Title here
  8. </h1>
  9. <!-- FOCAL IMAGE -- USE A 250 X 250 IMAGE -- LARGE IMAGES WILL RESIZE -->
  10. <img src="IMG_URL"
  11. class="d-block mx-auto my-2" style="border: 10px double #fff; max-height: 270px;">
  12.  
  13. <p class="text-white text-uppercase text-center small mb-0" style="letter-spacing: 1px;">
  14. <!-- FOCAL ADJECTIVES ------------------->
  15. adjective &bull;
  16. adjective &bull;
  17. adjective
  18. </p>
  19. </div></div>
  20. </div>
  21. <div class="col-md-6 mb-4">
  22. <div class="bg-faded p-4" style="border: 4px solid #bc8da2;">
  23. <!-- BASIC STATS ------------------------------->
  24. <div class="justify-content-between mb-4" style="line-height: 1;">
  25. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  26. Name</span>
  27. <span>content</span>
  28. </div>
  29. <div class="justify-content-between mb-4" style="line-height: 1;">
  30. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  31. Called</span>
  32. <span>content</span>
  33. </div>
  34. <div class="justify-content-between mb-4" style="line-height: 1;">
  35. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  36. Gender</span>
  37. <span>content</span>
  38. </div>
  39. <div class="justify-content-between mb-4" style="line-height: 1;">
  40. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  41. Age</span>
  42. <span>content</span>
  43. </div>
  44. <div class="justify-content-between mb-4" style="line-height: 1;">
  45. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  46. Height</span>
  47. <span>content</span>
  48. </div>
  49. <div class="justify-content-between mb-4" style="line-height: 1;">
  50. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  51. Race</span>
  52. <span>or species</span>
  53. </div>
  54. <div class="justify-content-between mb-4" style="line-height: 1;">
  55. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  56. Role</span>
  57. <span>what they do</span>
  58. </div>
  59. <div class="justify-content-between mb-4" style="line-height: 1;">
  60. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  61. Demeanor</span>
  62. <span>content</span>
  63. </div>
  64. <div class="justify-content-between" style="line-height: 1;">
  65. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  66. HTML</span>
  67. <span>@Pinky</span>
  68. </div>
  69. </div>
  70. </div>
  71. <div class="col-md-12"><div style="background: #background: #bc8da2; padding: 4px;">
  72. <div class="py-2 px-4" style="background: #bc8da2; color: #fff; border-radius: 16px 16px 0px 0px;">
  73. <ul class="nav text-center row no-gutters justify-content-center" style="font-size: 1.5em;">
  74. <!----------------- NAVIGATION BUTTONS ----- YOU CAN CHANGE THE SYMBOLS ----------------------------------->
  75. <li class="nav-item col pr-md-0 pr-2">
  76. <a class="nav-link active px-1 py-0 text-white tooltipster" data-toggle="tab" title="Intro" href="#ONE">
  77. <i class="fas fa-star fa-fw" /></a>
  78. </li>
  79.  
  80. <li class="nav-item col px-1">
  81. <a class="nav-link px-1 py-0 text-white tooltipster" data-toggle="tab" title="Character" href="#TWO">
  82. <i class="fas fa-heartbeat fa-fw" /></a>
  83. </li>
  84.  
  85. <li class="nav-item col px-1">
  86. <a class="nav-link px-1 py-0 text-white tooltipster" data-toggle="tab" title="Story" href="#THREE">
  87. <i class="fas fa-books fa-fw" /></a>
  88. </li>
  89.  
  90. <li class="nav-item col px-1">
  91. <a class="nav-link px-1 py-0 text-white tooltipster" data-toggle="tab" title="Trivia" href="#FOUR">
  92. <i class="fas fa-list fa-fw" /></a>
  93. </li>
  94.  
  95. <li class="nav-item col pl-2">
  96. <a class="nav-link px-1 py-0 text-white tooltipster" data-toggle="tab" title="Links" href="#FIVE">
  97. <i class="fas fa-link fa-fw" /></a>
  98. </li>
  99. </ul>
  100.  
  101. </div>
  102. <div class="tab-content bg-faded">
  103. <!-- TAB ONE ---------------------------------------------------------------------------------->
  104. <div class="tab-pane active show pt-3 pb-1 px-4" style="height: 370px; overflow:auto;" id="ONE">
  105. <!-- OPTIONAL FOCAL IMAGE -- just earse if yo don't wanna use -------------------->
  106. <img src="IMG_URL" class="float-right ml-2 mt-n2 rounded hidden-sm-down"
  107. style="max-height: 350px;">
  108.  
  109. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere.</p>
  110.  
  111. </div>
  112. <!-- TAB TWO ---------------------------------------------------------------------------------->
  113. <div class="tab-pane py-md-2 py-3 px-4" style="height: 370px; overflow:auto;" id="TWO"><div class="d-md-flex w-100 h-100">
  114. <!-- PERSONALITY SECTION ---- add class 'faded' to fade out a circle -->
  115. <div class="row no-gutters w-100 my-auto">
  116. <div class="col-md-6 pr-md-3 mb-4">
  117. <div class="justify-content-between" style="line-height: 1;">
  118. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  119. Charisma</span>
  120. <span>
  121. <i class="fas fa-circle fa-fw" />
  122. <i class="fas fa-circle fa-fw" />
  123. <i class="fas fa-circle fa-fw" />
  124. <i class="fas fa-circle fa-fw faded" />
  125. <i class="fas fa-circle fa-fw faded" />
  126. </span>
  127. </div>
  128. </div>
  129. <div class="col-md-6 pl-md-3 mb-4">
  130. <div class="justify-content-between" style="line-height: 1;">
  131. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  132. Kindness</span>
  133. <span>
  134. <i class="fas fa-circle fa-fw" />
  135. <i class="fas fa-circle fa-fw" />
  136. <i class="fas fa-circle fa-fw" />
  137. <i class="fas fa-circle fa-fw faded" />
  138. <i class="fas fa-circle fa-fw faded" />
  139. </span>
  140. </div>
  141. </div>
  142. <div class="col-md-6 pr-md-3 mb-4">
  143. <div class="justify-content-between" style="line-height: 1;">
  144. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  145. Patience</span>
  146. <span>
  147. <i class="fas fa-circle fa-fw" />
  148. <i class="fas fa-circle fa-fw" />
  149. <i class="fas fa-circle fa-fw" />
  150. <i class="fas fa-circle fa-fw faded" />
  151. <i class="fas fa-circle fa-fw faded" />
  152. </span>
  153. </div>
  154. </div>
  155. <div class="col-md-6 pl-md-3 mb-4">
  156. <div class="justify-content-between" style="line-height: 1;">
  157. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  158. Temper</span>
  159. <span>
  160. <i class="fas fa-circle fa-fw" />
  161. <i class="fas fa-circle fa-fw" />
  162. <i class="fas fa-circle fa-fw" />
  163. <i class="fas fa-circle fa-fw faded" />
  164. <i class="fas fa-circle fa-fw faded" />
  165. </span>
  166. </div>
  167. </div>
  168. <div class="col-md-6 pr-md-3 mb-4">
  169. <div class="justify-content-between" style="line-height: 1;">
  170. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  171. Integrity</span>
  172. <span>
  173. <i class="fas fa-circle fa-fw" />
  174. <i class="fas fa-circle fa-fw" />
  175. <i class="fas fa-circle fa-fw" />
  176. <i class="fas fa-circle fa-fw faded" />
  177. <i class="fas fa-circle fa-fw faded" />
  178. </span>
  179. </div>
  180. </div>
  181. <div class="col-md-6 pl-md-3 mb-4">
  182. <div class="justify-content-between" style="line-height: 1;">
  183. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  184. Courage</span>
  185. <span>
  186. <i class="fas fa-circle fa-fw" />
  187. <i class="fas fa-circle fa-fw" />
  188. <i class="fas fa-circle fa-fw" />
  189. <i class="fas fa-circle fa-fw faded" />
  190. <i class="fas fa-circle fa-fw faded" />
  191. </span>
  192. </div>
  193. </div>
  194. <div class="col-md-6 pr-md-3 mb-4">
  195. <div class="justify-content-between" style="line-height: 1;">
  196. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  197. Intellect</span>
  198. <span>
  199. <i class="fas fa-circle fa-fw" />
  200. <i class="fas fa-circle fa-fw" />
  201. <i class="fas fa-circle fa-fw" />
  202. <i class="fas fa-circle fa-fw faded" />
  203. <i class="fas fa-circle fa-fw faded" />
  204. </span>
  205. </div>
  206. </div>
  207. <div class="col-md-6 pl-md-3 mb-4">
  208. <div class="justify-content-between" style="line-height: 1;">
  209. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  210. Confidence</span>
  211. <span>
  212. <i class="fas fa-circle fa-fw" />
  213. <i class="fas fa-circle fa-fw" />
  214. <i class="fas fa-circle fa-fw" />
  215. <i class="fas fa-circle fa-fw faded" />
  216. <i class="fas fa-circle fa-fw faded" />
  217. </span>
  218. </div>
  219. </div>
  220. <div class="col-md-6 pr-md-3 mb-4">
  221. <div class="justify-content-between" style="line-height: 1;">
  222. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  223. Maturity</span>
  224. <span>
  225. <i class="fas fa-circle fa-fw" />
  226. <i class="fas fa-circle fa-fw" />
  227. <i class="fas fa-circle fa-fw" />
  228. <i class="fas fa-circle fa-fw faded" />
  229. <i class="fas fa-circle fa-fw faded" />
  230. </span>
  231. </div>
  232. </div>
  233. <div class="col-md-6 pl-md-3 mb-4">
  234. <div class="justify-content-between" style="line-height: 1;">
  235. <span class="text-uppercase text-muted" style="letter-spacing: 1px;">
  236. Humour</span>
  237. <span>
  238. <i class="fas fa-circle fa-fw" />
  239. <i class="fas fa-circle fa-fw" />
  240. <i class="fas fa-circle fa-fw" />
  241. <i class="fas fa-circle fa-fw faded" />
  242. <i class="fas fa-circle fa-fw faded" />
  243. </span>
  244. </div>
  245. </div>
  246. <!-- LIKES & DISLIKES LISTS --------------->
  247. <div class="col-md-6 pr-md-3 mb-md-0 mb-3">
  248. <p class="text-uppercase text-muted mb-1" style="letter-spacing: 1px;">
  249. Likes</p>
  250. <ul class="mb-n1">
  251. <li class="mb-1">Content</li>
  252. <li class="mb-1">Content</li>
  253. <li class="mb-1">Content</li>
  254. <li class="mb-1">Content</li>
  255. </ul>
  256. </div>
  257. <div class="col-md-6 pl-md-3 mb-md-0 mb-3">
  258. <p class="text-uppercase text-muted mb-1" style="letter-spacing: 1px;">
  259. Dislikes</p>
  260. <ul class="mb-n1">
  261. <li class="mb-1">Content</li>
  262. <li class="mb-1">Content</li>
  263. <li class="mb-1">Content</li>
  264. <li class="mb-1">Content</li>
  265. </ul>
  266. </div>
  267. </div>
  268. </div></div>
  269. <!-- TAB THREE ---------------------------------------------------------------------------------->
  270. <div class="tab-pane py-3 px-4" style="height: 370px; overflow:auto;" id="THREE">
  271. <!-- OPTIONAL FOCAL IMAGE -- just earse if yo don't wanna use -------------------->
  272. <img src="IMG_URL" class="float-right ml-2 rounded hidden-sm-down"
  273. style="max-height: 300px;">
  274.  
  275. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget. Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae mollis felis odio vel nulla. Etiam sed libero laoreet ipsum lacinia sagittis eu non lectus. Fusce sit amet lectus nec massa auctor aliquam et molestie metus. Sed at est in ante egestas iaculis. Nullam varius gravida ligula nec malesuada.</p>
  276.  
  277. <p class="text-uppercase text-muted mb-1" style="font-size: 1.5em; letter-spacing: 1px;">
  278. <i class="fas fa-bookmark fa-fw" /> Subheader</p>
  279. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget. Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae mollis felis odio vel nulla. Etiam sed libero laoreet ipsum lacinia sagittis eu non lectus. Fusce sit amet lectus nec massa auctor aliquam et molestie metus. Sed at est in ante egestas iaculis. Nullam varius gravida ligula nec malesuada.</p>
  280.  
  281. <p class="text-uppercase text-muted mb-1" style="font-size: 1.5em; letter-spacing: 1px;">
  282. <i class="fas fa-bookmark fa-fw" /> Subheader</p>
  283. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget. Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae mollis felis odio vel nulla. Etiam sed libero laoreet ipsum lacinia sagittis eu non lectus. Fusce sit amet lectus nec massa auctor aliquam et molestie metus. Sed at est in ante egestas iaculis. Nullam varius gravida ligula nec malesuada.</p>
  284.  
  285. </div>
  286. <!-- TAB FOUR ---------------------------------------------------------------------------------->
  287. <div class="tab-pane pt-3 pb-2 px-4" style="height: 370px; overflow:auto;" id="FOUR">
  288. <!-- OPTIONAL FOCAL IMAGE -- just earse if yo don't wanna use -------------------->
  289. <img src="IMG_URL" class="float-right ml-2 rounded hidden-sm-down"
  290. style="max-height: 320px;">
  291. <!-- TRIVIA LIST ----------------->
  292. <ul class="pl-4">
  293. <li class="mb-2">
  294. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris.
  295. </li>
  296. <li class="mb-2">
  297. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem.
  298. </li>
  299. <li class="mb-2">
  300. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit.
  301. </li>
  302. <li class="mb-2">
  303. In vitae nisi eu mi suscipit semper in eget justo.
  304. </li>
  305. <li class="mb-2">
  306. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget.
  307. </li>
  308. </ul>
  309. </div>
  310. <!-- TAB FIVE ---------------------------------------------------------------------------------->
  311. <div class="tab-pane pt-3 px-4" style="height: 370px; overflow:auto;" id="FIVE">
  312. <!-- RELATIONSHIPS SECTION -- hearts represent affection -- add class 'faded' to fade out a heart -->
  313. <div class="row no-gutters">
  314. <!--------------------------------------------->
  315. <div class="col-md-4 pr-md-2 text-center mb-3">
  316. <!-- CHARACTER AVATAR------------------------>
  317. <img src="IMG_URL" class="img-thumbnail rounded-0 d-block mx-auto mb-2"
  318. style="max-height: 150px;">
  319. <!-- LINK TO CHARACTER ----------------------->
  320. <p class="mb-0"><a href="CHARACTER_LINK" target="_BLANK" style="font-size: 1.25em; letter-spacing:1px;">
  321. Character Name</a><p class="small mb-2">
  322. <i class="fas fa-heart fa-fw" />
  323. <i class="fas fa-heart fa-fw" />
  324. <i class="fas fa-heart fa-fw" />
  325. <i class="fas fa-heart fa-fw faded" />
  326. <i class="fas fa-heart fa-fw faded" />
  327. </p>
  328.  
  329. <p class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. </p>
  330. </div>
  331. <!--------------------------------------------->
  332. <div class="col-md-4 px-md-1 text-center mb-3">
  333. <!-- CHARACTER AVATAR------------------------>
  334. <img src="IMG_URL" class="img-thumbnail rounded-0 d-block mx-auto mb-2"
  335. style="max-height: 150px;">
  336. <!-- LINK TO CHARACTER ----------------------->
  337. <p class="mb-0"><a href="CHARACTER_LINK" target="_BLANK" style="font-size: 1.25em; letter-spacing:1px;">
  338. Character Name</a><p class="small mb-2">
  339. <i class="fas fa-heart fa-fw" />
  340. <i class="fas fa-heart fa-fw" />
  341. <i class="fas fa-heart fa-fw" />
  342. <i class="fas fa-heart fa-fw faded" />
  343. <i class="fas fa-heart fa-fw faded" />
  344. </p>
  345.  
  346. <p class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. </p>
  347. </div>
  348. <!--------------------------------------------->
  349. <div class="col-md-4 pl-md-2 text-center mb-3">
  350. <!-- CHARACTER AVATAR------------------------>
  351. <img src="IMG_URL" class="img-thumbnail rounded-0 d-block mx-auto mb-2"
  352. style="max-height: 150px;">
  353. <!-- LINK TO CHARACTER ----------------------->
  354. <p class="mb-0"><a href="CHARACTER_LINK" target="_BLANK" style="font-size: 1.25em; letter-spacing:1px;">
  355. Character Name</a><p class="small mb-2">
  356. <i class="fas fa-heart fa-fw" />
  357. <i class="fas fa-heart fa-fw" />
  358. <i class="fas fa-heart fa-fw" />
  359. <i class="fas fa-heart fa-fw faded" />
  360. <i class="fas fa-heart fa-fw faded" />
  361. </p>
  362.  
  363. <p class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. </p>
  364. </div>
  365. </div>
  366.  
  367. </div>
  368.  
  369. </div></div></div>
  370. </div>
  371. </div></div>
Add Comment
Please, Sign In to add comment
Public Pastes
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!