API tools faq
paste
lowkeywicked

Freebie - Frequent

lowkeywicked
Feb 19th, 2025 (edited)
1,279
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.99 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. ---- default focal color is #f58c9f
  3. ---- use find & replace to quickly swap out color
  4. ---->
  5.  
  6. <!-- content container -- controls max width --------------------------------------------->
  7. <div class="container-fluid py-md-4 px-0" style="font-size: 14px; letter-spacing: .24px; max-width: 1200px;">
  8.  
  9. <!-- SET BACKGROUND IMAGE HERE -- by default it is set for a pattern, you can edit for a single image --->
  10. <div style="background-image: url('IMG_URL');
  11. background-repeat: repeat; background-position:fixed;border-radius: 1em;" class="p-md-5 p-3">
  12.  
  13. <div class="row no-gutters card flex-row border-0 px-3 py-lg-2 py-3 justify-content-lg-between justify-content-center align-items-center mb-3"
  14. style="background:#f58c9f; color: #fff; border-radius: 1em;">
  15. <!-- NAME & ADJECTIVES ------------------------->
  16. <div style="font-size: 30px; font-weight: 500; letter-spacing: 3px;" class="col-lg-auto text-center text-uppercase">
  17. Character Name
  18. </div><div style="opacity: .8; letter-spacing: .75px;" class="col-lg-auto text-center">
  19. adjective . adjective . adjective
  20. </div>
  21. </div>
  22. <div class="row no-gutters justify-content-center">
  23. <!-- STATS BLOCK --------------------------------------------------->
  24. <div class="col-lg-4 order-lg-2 pl-lg-3 mb-lg-0 mb-3">
  25. <div class="card d-block border-0 px-4 pt-3 pb-lg-0 pb-3 h-100" style="border-radius: 1em;">
  26. <!---------------- USE A 300 x 300 AVATAR IMAGE ----------------------------------------->
  27. <div class="d-block mx-auto mb-3" style="border-radius: 1em; background-size: cover; background-position:center; background-repeat:no-repeat;
  28. background-image: url('IMG_URL');
  29. max-width: 300px; min-height: 300px;"></div>
  30. <!-- BASIC SIDE STATS ---------------------------------------->
  31. <div class="justify-content-between">
  32. <div class="pr-1 text-uppercase text-muted" style="letter-spacing: .75px;">Called</div>
  33. <div>content</div>
  34. </div>
  35. <hr class="my-2">
  36. <div class="justify-content-between">
  37. <div class="pr-1 text-uppercase text-muted" style="letter-spacing: .75px;">Gender</div>
  38. <div>conent</div>
  39. </div>
  40. <hr class="my-2">
  41. <div class="justify-content-between">
  42. <div class="pr-1 text-uppercase text-muted" style="letter-spacing: .75px;">Age</div>
  43. <div>content</div>
  44. </div>
  45. <hr class="my-2">
  46. <div class="justify-content-between">
  47. <div class="pr-1 text-uppercase text-muted" style="letter-spacing: .75px;">Race</div>
  48. <div>or species</div>
  49. </div>
  50. <hr class="my-2">
  51. <div class="justify-content-between">
  52. <div class="pr-1 text-uppercase text-muted" style="letter-spacing: .75px;">Role</div>
  53. <div>what they do</div>
  54. </div>
  55. <hr class="my-2">
  56. <div class="justify-content-between">
  57. <div class="pr-1 text-uppercase text-muted" style="letter-spacing: .75px;">HTML</div>
  58. <div><a href="/Pinky" style="color: #f58c9f;"><i class="fas fa-heart fa-fw" /> Pinky</a></div>
  59. </div>
  60. </div>
  61. </div>
  62. <!-- CONTENT BLOCK -------------------------------------------------->
  63. <div class="col-lg-8 order-lg-1"><div class="card border-0" style="border-radius: 1em;">
  64. <div class="px-2 py-3 order-lg-2">
  65. <!-- NAV ------------------------------------------------------>
  66. <ul class="nav text-center row no-gutters justify-content-around mx-n1">
  67. <!----------------- NAVIGATION BUTTONS ----- YOU CAN CHANGE THE SYMBOLS ----------------------------------->
  68. <li class="nav-item col-auto px-1">
  69. <a class="nav-link active px-1 py-0" style="color: #f58c9f; border-radius: 1em;" data-toggle="tab" title="Basics" href="#ONE">
  70. <i class="far fa-info-circle fa-fw fa-2x" /></a>
  71. </li>
  72.  
  73. <li class="nav-item col-auto px-1">
  74. <a class="nav-link px-1 py-0" style="color: #f58c9f;" data-toggle="tab" title="Notes" href="#TWO">
  75. <i class="far fa-heart fa-fw fa-2x" /></a>
  76. </li>
  77.  
  78. <li class="nav-item col-auto px-1">
  79. <a class="nav-link px-1 py-0" style="color: #f58c9f;" data-toggle="tab" title="Skills" href="#THREE">
  80. <i class="far fa-chart-bar fa-fw fa-2x" /></a>
  81. </li>
  82.  
  83. <li class="nav-item col-auto px-1">
  84. <a class="nav-link px-1 py-0" style="color: #f58c9f;" data-toggle="tab" title="Story" href="#FOUR">
  85. <i class="far fa-books fa-fw fa-2x" /></a>
  86. </li>
  87.  
  88. <li class="nav-item col-auto px-1">
  89. <a class="nav-link px-1 py-0" style="color: #f58c9f;" data-toggle="tab" title="Links" href="#FIVE">
  90. <i class="far fa-link fa-fw fa-2x" /></a>
  91. </li>
  92.  
  93. <li class="nav-item col-lg-auto px-1 hidden-md-down"><div class="d-flex justify-content-center align-items-center h-100" style="position: relative; color: #f58c9f;">
  94. <i class="far fa-play-circle fa-fw fa-2x"></i><div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .0001; overflow: hidden;">
  95. <!---- MUSIC PLAYER ---- replace "ID_HERE" with a YT song ID
  96. ------ the ID is the numbers/symbols at the end of the url (ex: EbB4PP4HknU) ------->
  97. <iframe src="https://www.youtube.com/embed/ID_HERE?controls=0" frameborder="0" style="position: absolute; top: -100px; left: -300px;" width="700" height="500"></iframe></div>
  98. </div>
  99. </li>
  100. </ul>
  101. </div>
  102. <div class="tab-content order-lg-1">
  103. <!------------------ TAB ONE ----------- CHARACTER ---------------------------->
  104. <div class="tab-pane active show" id="ONE">
  105. <!-- content block -------------------->
  106. <div class="px-4 pt-3 pb-md-1 pb-3" style="height: 500px; overflow:auto;">
  107. <!-- slider stats -- change width % to move the bar -- the HIGHER the % the more RIGHT the bar will go -->
  108. <div class="row">
  109. <div class="col-lg-6 mb-3">
  110. <div class="justify-content-between">
  111. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Friendly</span>
  112. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Reserved</span>
  113. </div>
  114. <div class="progress rounded-0">
  115. <div class="progress-bar" style="height: 8px; background: transparent; width: 50%;"></div>
  116. <div class="p-1 ml-n1" style="background: #f58c9f;"></div>
  117. </div>
  118. </div>
  119.  
  120. <div class="col-lg-6 mb-3">
  121. <div class="justify-content-between">
  122. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Polite</span>
  123. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Blunt</span>
  124. </div>
  125. <div class="progress rounded-0">
  126. <div class="progress-bar" style="height: 8px; background: transparent; width: 50%;"></div>
  127. <div class="p-1 ml-n1" style="background: #f58c9f;"></div>
  128. </div>
  129. </div>
  130.  
  131. <div class="col-lg-6 mb-3">
  132. <div class="justify-content-between">
  133. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Clever</span>
  134. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Foolish</span>
  135. </div>
  136. <div class="progress rounded-0">
  137. <div class="progress-bar" style="height: 8px; background: transparent; width: 50%;"></div>
  138. <div class="p-1 ml-n1" style="background: #f58c9f;"></div>
  139. </div>
  140. </div>
  141.  
  142. <div class="col-lg-6 mb-3">
  143. <div class="justify-content-between">
  144. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Sensitive</span>
  145. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Tough</span>
  146. </div>
  147. <div class="progress rounded-0">
  148. <div class="progress-bar" style="height: 8px; background: transparent; width: 50%;"></div>
  149. <div class="p-1 ml-n1" style="background: #f58c9f;"></div>
  150. </div>
  151. </div>
  152.  
  153. <div class="col-lg-6 mb-3">
  154. <div class="justify-content-between">
  155. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Brave</span>
  156. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Timid</span>
  157. </div>
  158. <div class="progress rounded-0">
  159. <div class="progress-bar" style="height: 8px; background: transparent; width: 50%;"></div>
  160. <div class="p-1 ml-n1" style="background: #f58c9f;"></div>
  161. </div>
  162. </div>
  163.  
  164. <div class="col-lg-6 mb-3">
  165. <div class="justify-content-between">
  166. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Careful</span>
  167. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Reckless</span>
  168. </div>
  169. <div class="progress rounded-0">
  170. <div class="progress-bar" style="height: 8px; background: transparent; width: 50%;"></div>
  171. <div class="p-1 ml-n1" style="background: #f58c9f;"></div>
  172. </div>
  173. </div>
  174.  
  175. <div class="col-lg-6 mb-3">
  176. <div class="justify-content-between">
  177. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Diligent</span>
  178. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Lazy</span>
  179. </div>
  180. <div class="progress rounded-0">
  181. <div class="progress-bar" style="height: 8px; background: transparent; width: 50%;"></div>
  182. <div class="p-1 ml-n1" style="background: #f58c9f;"></div>
  183. </div>
  184. </div>
  185.  
  186. <div class="col-lg-6 mb-3">
  187. <div class="justify-content-between">
  188. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Humorous</span>
  189. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Serious</span>
  190. </div>
  191. <div class="progress rounded-0">
  192. <div class="progress-bar" style="height: 8px; background: transparent; width: 50%;"></div>
  193. <div class="p-1 ml-n1" style="background: #f58c9f;"></div>
  194. </div>
  195. </div>
  196. </div>
  197. <hr class="w-50 my-3">
  198. <!--- write a small character summary here ---------------->
  199. <p>Describe your character here. 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>
  200. </div>
  201. </div>
  202. <!------------------ TAB TWO ----------- TRIVIA ---------------------------->
  203. <div class="tab-pane" id="TWO">
  204. <div class="px-4 pt-3 pb-md-1 pb-3" style="height: 500px; overflow:auto;">
  205. <div class="row no-gutters">
  206. <div class="col-lg-6 mb-2">
  207. <p class="mb-0 text-uppercase text-muted" style="letter-spacing: 1px;">Likes</p>
  208. <ul class="mb-0">
  209. <li class="mb-1">content</li>
  210. <li class="mb-1">content</li>
  211. <li class="mb-1">content</li>
  212. <li class="mb-1">content</li>
  213. </ul>
  214. </div>
  215. <div class="col-lg-6 mb-2">
  216. <p class="mb-0 text-uppercase text-muted" style="letter-spacing: 1px;">Dislikes</p>
  217. <ul class="mb-0">
  218. <li class="mb-1">content</li>
  219. <li class="mb-1">content</li>
  220. <li class="mb-1">content</li>
  221. <li class="mb-1">content</li>
  222. </ul>
  223. </div>
  224. <div class="col-12">
  225. <!------------ OPTIONAL FOCAL IMAGE ---- just erase if you dont wanna use this --->
  226. <img src="IMG_URL'"
  227. class="rounded float-right mt-lg-n1 hidden-sm-down ml-2" style="max-height: 340px;">
  228.  
  229. <p class="mb-0 text-uppercase text-muted" style="letter-spacing: 1px;">Trivia</p>
  230. <ul class="mb-0">
  231. <li class="mb-2">
  232. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris.
  233. </li>
  234. <li class="mb-2">
  235. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem.
  236. </li>
  237. <li class="mb-2">
  238. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit.
  239. </li>
  240. <li class="mb-2">
  241. In vitae nisi eu mi suscipit semper in eget justo.
  242. </li>
  243. <li class="mb-2">
  244. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget.
  245. </li>
  246. </ul>
  247. </div>
  248. </div>
  249. </div>
  250. </div>
  251. <!------------------ TAB THREE ----------- SKILLS ---------------------------->
  252. <div class="tab-pane" id="THREE">
  253. <!-- content block -------------------->
  254. <div class="px-4 pt-3 pb-md-1 pb-3" style="height: 500px; overflow:auto;">
  255. <div class="row">
  256. <div class="col-lg-6 mb-3">
  257. <div class="justify-content-between">
  258. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Attack</span>
  259. <span class="faded">50%</span> <!-- display percentage -->
  260. </div>
  261. <div class="progress rounded-0">
  262. <!-- bar percentage & background color ------------------>
  263. <div style="width: 50%; background-color: #f58c9f; height: 8px;" class="progress-bar"></div>
  264. </div>
  265. </div>
  266. <div class="col-lg-6 mb-3">
  267. <div class="justify-content-between">
  268. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Defense</span>
  269. <span class="faded">50%</span> <!-- display percentage -->
  270. </div>
  271. <div class="progress rounded-0">
  272. <!-- bar percentage & background color ------------------>
  273. <div style="width: 50%; background-color: #f58c9f; height: 8px;" class="progress-bar"></div>
  274. </div>
  275. </div>
  276. <div class="col-lg-6 mb-3">
  277. <div class="justify-content-between">
  278. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Magic</span>
  279. <span class="faded">50%</span> <!-- display percentage -->
  280. </div>
  281. <div class="progress rounded-0">
  282. <!-- bar percentage & background color ------------------>
  283. <div style="width: 50%; background-color: #f58c9f; height: 8px;" class="progress-bar"></div>
  284. </div>
  285. </div>
  286. <div class="col-lg-6 mb-3">
  287. <div class="justify-content-between">
  288. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Resistance</span>
  289. <span class="faded">50%</span> <!-- display percentage -->
  290. </div>
  291. <div class="progress rounded-0">
  292. <!-- bar percentage & background color ------------------>
  293. <div style="width: 50%; background-color: #f58c9f; height: 8px;" class="progress-bar"></div>
  294. </div>
  295. </div>
  296. <div class="col-lg-6 mb-3">
  297. <div class="justify-content-between">
  298. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Agility</span>
  299. <span class="faded">50%</span> <!-- display percentage -->
  300. </div>
  301. <div class="progress rounded-0">
  302. <!-- bar percentage & background color ------------------>
  303. <div style="width: 50%; background-color: #f58c9f; height: 8px;" class="progress-bar"></div>
  304. </div>
  305. </div>
  306. <div class="col-lg-6 mb-3">
  307. <div class="justify-content-between">
  308. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Stamina</span>
  309. <span class="faded">50%</span> <!-- display percentage -->
  310. </div>
  311. <div class="progress rounded-0">
  312. <!-- bar percentage & background color ------------------>
  313. <div style="width: 50%; background-color: #f58c9f; height: 8px;" class="progress-bar"></div>
  314. </div>
  315. </div>
  316. <div class="col-lg-6 mb-3">
  317. <div class="justify-content-between">
  318. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Strategy</span>
  319. <span class="faded">50%</span> <!-- display percentage -->
  320. </div>
  321. <div class="progress rounded-0">
  322. <!-- bar percentage & background color ------------------>
  323. <div style="width: 50%; background-color: #f58c9f; height: 8px;" class="progress-bar"></div>
  324. </div>
  325. </div>
  326. <div class="col-lg-6 mb-3">
  327. <div class="justify-content-between">
  328. <span class="text-uppercase text-muted" style="letter-spacing: .75px;">Luck</span>
  329. <span class="faded">50%</span> <!-- display percentage -->
  330. </div>
  331. <div class="progress rounded-0">
  332. <!-- bar percentage & background color ------------------>
  333. <div style="width: 50%; background-color: #f58c9f; height: 8px;" class="progress-bar"></div>
  334. </div>
  335. </div>
  336. </div>
  337. <hr class="w-50 my-3">
  338. <p class="text-uppercase text-muted mb-0" style="letter-spacing:1px;">Skill Name</h4>
  339. <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.</p>
  340.  
  341. <p class="text-uppercase text-muted mb-0" style="letter-spacing:1px;">Skill Name</h4>
  342. <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.</p>
  343.  
  344. <p class="text-uppercase text-muted mb-0" style="letter-spacing:1px;">Skill Name</h4>
  345. <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.</p>
  346. </div>
  347. </div>
  348. <!------------------ TAB FOUR ----------- SUMMARY ---------------------------->
  349. <div class="tab-pane" id="FOUR">
  350. <!-- content block -------------------->
  351. <div class="px-4 pt-3 pb-md-1 pb-3" style="height: 500px; overflow:auto;">
  352.  
  353. <!------------ OPTIONAL FOCAL IMAGE ---- just erase if you dont wanna use this --->
  354. <img src="IMG_URL'"
  355. class="rounded float-right mt-lg-n1 hidden-sm-down ml-2" style="max-height: 320px;">
  356.  
  357. <h4 class="text-uppercase text-muted" style="letter-spacing:1px;">Subheader</h4>
  358. <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>
  359.  
  360. <h4 class="text-uppercase text-muted" style="letter-spacing:1px;">Subheader</h4>
  361. <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>
  362.  
  363. <h4 class="text-uppercase text-muted" style="letter-spacing:1px;">Subheader</h4>
  364. <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>
  365. </div>
  366. </div>
  367. <!------------------ TAB FIVE ----------- LINKS ---------------------------->
  368. <div class="tab-pane" id="FIVE">
  369. <div class="px-4 pt-4" style="height: 500px; overflow:auto;">
  370. <div class="row mb-n3">
  371.  
  372. <div class="col-12 mb-3">
  373. <!-- avatar image --------------->
  374. <img src="IMG_URL'"
  375. style="max-height:100px; border-radius: 1em;" class="float-sm-left mr-sm-2 mb-sm-0 mb-3 d-block mx-auto" />
  376.  
  377. <h4 class="text-sm-left text-center">
  378. <!-- character link --------------->
  379. <a href="CHAR_LINK" class="text-uppercase" style="letter-spacing: 1px; color: #f58c9f;">
  380. Character
  381. </a></h4>
  382. <div class="justify-content-between align-items-center mb-2" style="line-height: 1;">
  383. <!-- relationship -- hearts represent affection -- use fas for fill in, fal for open --------------->
  384. <span class="text-uppercase text-muted" style="font-style:italic; letter-spacing: .75px;">
  385. relationship</span><span>
  386. <i class="fas fa-heart fa-fw" />
  387. <i class="fas fa-heart fa-fw" />
  388. <i class="fas fa-heart fa-fw" />
  389. <i class="fas fa-heart fa-fw faded" />
  390. <i class="fas fa-heart fa-fw faded" /></span>
  391. </div>
  392. <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. In feugiat posuere nulla, eget lobortis ante. </p>
  393. </div>
  394.  
  395. <div class="col-12 mb-3">
  396. <!-- avatar image --------------->
  397. <img src="IMG_URL'"
  398. style="max-height:100px; border-radius: 1em;" class="float-sm-left mr-sm-2 mb-sm-0 mb-3 d-block mx-auto" />
  399.  
  400. <h4 class="text-sm-left text-center">
  401. <!-- character link --------------->
  402. <a href="CHAR_LINK" class="text-uppercase" style="letter-spacing: 1px; color: #f58c9f;">
  403. Character
  404. </a></h4>
  405. <div class="justify-content-between align-items-center mb-2" style="line-height: 1;">
  406. <!-- relationship -- hearts represent affection -- use fas for fill in, fal for open --------------->
  407. <span class="text-uppercase text-muted" style="font-style:italic; letter-spacing: .75px;">
  408. relationship</span><span>
  409. <i class="fas fa-heart fa-fw" />
  410. <i class="fas fa-heart fa-fw" />
  411. <i class="fas fa-heart fa-fw" />
  412. <i class="fas fa-heart fa-fw faded" />
  413. <i class="fas fa-heart fa-fw faded" /></span>
  414. </div>
  415. <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. In feugiat posuere nulla, eget lobortis ante. </p>
  416. </div>
  417.  
  418. <div class="col-12 mb-3">
  419. <!-- avatar image --------------->
  420. <img src="IMG_URL'"
  421. style="max-height:100px; border-radius: 1em;" class="float-sm-left mr-sm-2 mb-sm-0 mb-3 d-block mx-auto" />
  422.  
  423. <h4 class="text-sm-left text-center">
  424. <!-- character link --------------->
  425. <a href="CHAR_LINK" class="text-uppercase" style="letter-spacing: 1px; color: #f58c9f;">
  426. Character
  427. </a></h4>
  428. <div class="justify-content-between align-items-center mb-2" style="line-height: 1;">
  429. <!-- relationship -- hearts represent affection -- use fas for fill in, fal for open --------------->
  430. <span class="text-uppercase text-muted" style="font-style:italic; letter-spacing: .75px;">
  431. relationship</span><span>
  432. <i class="fas fa-heart fa-fw" />
  433. <i class="fas fa-heart fa-fw" />
  434. <i class="fas fa-heart fa-fw" />
  435. <i class="fas fa-heart fa-fw faded" />
  436. <i class="fas fa-heart fa-fw faded" /></span>
  437. </div>
  438. <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. In feugiat posuere nulla, eget lobortis ante. </p>
  439. </div>
  440.  
  441. </div>
  442. </div>
  443. </div>
  444. </div><!-- end tab content container -->
  445. </div></div>
  446. </div>
  447. </div></div>
  448.  
Advertisement
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!