API tools faq
paste
lowkeywicked

Freebie - Boggle

lowkeywicked
Dec 6th, 2020 (edited)
19,479
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.17 KB | None | 1 0
raw download clone embed print report
  1. <div class="container p-0" style="font-size: 10.5pt;">
  2. <div class="card rounded-0 bg-faded p-lg-3 p-2">
  3. <div class="row no-gutters justify-content-center">
  4. <div class="col mb-lg-0 mb-3" style="max-width: 280px;">
  5. <!--------- SIDE STATS -------------------------------------------------------->
  6. <div class="card rounded-0 border-0 modal-open h-100">
  7. <!------ focal image -- should be at least 280 x 280 -- will scale with screen -- focus in top center of image------->
  8. <div style="background-image: url('IMG_URL');
  9. background-size: cover; background-position: center 0; background-repeat: no-repeat; min-height: 280px;" class="mb-3"></div>
  10. <div class="mt-auto w-100">
  11. <!---- stats section --- you can change the font awesome icons to do different stats --->
  12. <div class="px-3 d-flex align-items-center mb-3">
  13. <div class="bg-faded p-1 rounded">
  14. <i class="fal fa-user fa-fw text-muted" />
  15. </div><div class="pl-2">
  16. name here
  17. </div>
  18. </div>
  19.  
  20. <div class="px-3 d-flex align-items-center mb-3">
  21. <div class="bg-faded p-1">
  22. <i class="fal fa-calendar-alt fa-fw text-muted" />
  23. </div><div class="pl-2">
  24. age here
  25. </div>
  26. </div>
  27.  
  28. <div class="px-3 d-flex align-items-center mb-3">
  29. <div class="bg-faded p-1">
  30. <i class="fal fa-venus-mars fa-fw text-muted" />
  31. </div><div class="pl-2">
  32. gender here
  33. </div>
  34. </div>
  35.  
  36. <div class="px-3 d-flex align-items-center mb-3">
  37. <div class="bg-faded p-1">
  38. <i class="fal fa-dna fa-fw text-muted" />
  39. </div><div class="pl-2">
  40. race/species here
  41. </div>
  42. </div>
  43.  
  44. <div class="px-3 d-flex align-items-center mb-3">
  45. <div class="bg-faded p-1">
  46. <i class="fal fa-ruler fa-fw text-muted" />
  47. </div><div class="pl-2">
  48. height here
  49. </div>
  50. </div>
  51.  
  52. <div class="px-3 d-flex align-items-center mb-3">
  53. <div class="bg-faded p-1">
  54. <i class="fal fa-cog fa-fw text-muted" />
  55. </div><div class="pl-2">
  56. role/occupation here
  57. </div>
  58. </div>
  59.  
  60. </div>
  61. </div>
  62. </div>
  63. <!--------- CONTENT AREA -------------------------------------------------------->
  64. <div class="col-lg pl-lg-4">
  65. <div class="card border-0 rounded-0 modal-open">
  66. <div class="card-header border-0 px-0 pt-0">
  67. <!--------------------------- NAVIGATION BUTTONS -------------------------------------->
  68. <ul class="nav nav-tabs card-header-tabs nav-justified text-uppercase mx-0" style="letter-spacing:1px;">
  69. <li class="nav-item"><a class="nav-link active border-0" style="border-radius: 0px;" data-toggle="tab" href="#ONE">
  70. <i class="fal fa-info-circle fa-fw" /></a></li>
  71.  
  72. <li class="nav-item"><a class="nav-link border-0" style="border-radius: 0px;" data-toggle="tab" href="#TWO">
  73. <i class="fal fa-list-alt fa-fw" /></a></li>
  74.  
  75. <li class="nav-item"><a class="nav-link border-0" style="border-radius: 0px;" data-toggle="tab" href="#THREE">
  76. <i class="fal fa-balance-scale fa-fw" /></a></li>
  77.  
  78. <li class="nav-item"><a class="nav-link border-0" style="border-radius: 0px;" data-toggle="tab" href="#FOUR">
  79. <i class="fal fa-image fa-fw" /></a></li>
  80.  
  81. <li class="nav-item"><a class="nav-link border-0" style="border-radius: 0px;" data-toggle="tab" href="#FIVE">
  82. <i class="fal fa-books fa-fw" /></a></li>
  83.  
  84. <li class="nav-item"><a class="nav-link border-0" style="border-radius: 0px;" data-toggle="tab" href="#SIX">
  85. <i class="fal fa-link fa-fw" /></a></li>
  86. </ul>
  87. </div>
  88.  
  89. <div class="tab-content">
  90. <!--------------------------- SECTION ONE --- ABOUT ----------------------------------->
  91. <div class="tab-pane active show px-4 pt-4 pb-1" style="height: 540px; overflow:auto;" id="ONE">
  92. <h1 class="text-uppercase" style="letter-spacing:1px; font-weight: 300;">Title Here</h1>
  93. <hr class="mt-0">
  94. <!-- optional focal image -->
  95. <img src="IMG_URL"
  96. class="float-right ml-3 mb-1 hidden-sm-down" style="max-height: 425px;">
  97.  
  98. <!------ quote here ------------------>
  99. <p class="text-center mb-4" style="letter-spacing:2px; font-weight: 300;"><i>
  100. "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  101. </i></p>
  102.  
  103. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis. Aliquam erat volutpat. Nulla nulla augue, vehicula id volutpat nec, auctor et ipsum. Phasellus pretium non libero eu ultricies. Proin et est vitae metus interdum ullamcorper vel sit amet augue. Integer et diam eu massa faucibus molestie non vitae metus. Donec cursus lectus eros, in vestibulum sapien porta et. </p>
  104.  
  105. <p>Aliquam erat volutpat. Nulla nulla augue, vehicula id volutpat nec, auctor et ipsum. Phasellus pretium non libero eu ultricies. Proin et est vitae metus interdum ullamcorper vel sit amet augue. Integer et diam eu massa faucibus molestie non vitae metus. Donec cursus lectus eros, in vestibulum sapien porta et. Aliquam ac est lorem. Etiam pulvinar laoreet augue, et faucibus ligula ornare quis. Pellentesque sed leo tincidunt, consectetur dui in, tincidunt nunc.</p>
  106.  
  107. </div>
  108. <!--------------------------- SECTION TWO -- DETAILS ------------------------------------>
  109. <div class="tab-pane px-4 pt-4 pb-1" style="height:540px; overflow:auto;" id="TWO">
  110. <h1 class="text-uppercase" style="letter-spacing:1px; font-weight: 300;">Details</h1>
  111. <hr class="mt-0">
  112.  
  113. <!------ trivia facs here ---------------------->
  114. <div class="row">
  115. <div class="col-md-6 mb-1">
  116. <div class="d-flex justify-content-between">
  117. <span class="text-muted text-uppercase" style="letter-spacing:1px;">d.o.b.</span>
  118. <span>content</span>
  119. </div>
  120. <hr class="my-2">
  121. </div>
  122.  
  123. <div class="col-md-6 mb-1">
  124. <div class="d-flex justify-content-between">
  125. <span class="text-muted text-uppercase" style="letter-spacing:1px;">sign</span>
  126. <span>content</span>
  127. </div>
  128. <hr class="my-2">
  129. </div>
  130.  
  131.  
  132. <div class="col-md-6 mb-1">
  133. <div class="d-flex justify-content-between">
  134. <span class="text-muted text-uppercase" style="letter-spacing:1px;">S.O.</span>
  135. <span>sexual orientation</span>
  136. </div>
  137. <hr class="my-2">
  138. </div>
  139.  
  140. <div class="col-md-6 mb-1">
  141. <div class="d-flex justify-content-between">
  142. <span class="text-muted text-uppercase" style="letter-spacing:1px;">demeanor</span>
  143. <span>content</span>
  144. </div>
  145. <hr class="my-2">
  146. </div>
  147.  
  148. <div class="col-md-6 mb-1">
  149. <div class="d-flex justify-content-between">
  150. <span class="text-muted text-uppercase" style="letter-spacing:1px;">element</span>
  151. <span>content</span>
  152. </div>
  153. <hr class="my-2">
  154. </div>
  155.  
  156. <div class="col-md-6 mb-1">
  157. <div class="d-flex justify-content-between">
  158. <span class="text-muted text-uppercase" style="letter-spacing:1px;">alignment</span>
  159. <span>content</span>
  160. </div>
  161. <hr class="my-2">
  162. </div>
  163.  
  164. <div class="col-md-6 mb-1">
  165. <div class="d-flex justify-content-between">
  166. <span class="text-muted text-uppercase" style="letter-spacing:1px;">charisma</span>
  167. <span>
  168. <i class="fas fa-square fa-fw" />
  169. <i class="fas fa-square fa-fw" />
  170. <i class="fas fa-square fa-fw" />
  171. <i class="fal fa-square fa-fw" />
  172. <i class="fal fa-square fa-fw" />
  173. </span>
  174. </div>
  175. <hr class="my-2">
  176. </div>
  177.  
  178. <div class="col-md-6 mb-1">
  179. <div class="d-flex justify-content-between">
  180. <span class="text-muted text-uppercase" style="letter-spacing:1px;">kindness</span>
  181. <span>
  182. <i class="fas fa-square fa-fw" />
  183. <i class="fas fa-square fa-fw" />
  184. <i class="fas fa-square fa-fw" />
  185. <i class="fal fa-square fa-fw" />
  186. <i class="fal fa-square fa-fw" />
  187. </span>
  188. </div>
  189. <hr class="my-2">
  190. </div>
  191.  
  192. <div class="col-md-6 mb-1">
  193. <div class="d-flex justify-content-between">
  194. <span class="text-muted text-uppercase" style="letter-spacing:1px;">patience</span>
  195. <span>
  196. <i class="fas fa-square fa-fw" />
  197. <i class="fas fa-square fa-fw" />
  198. <i class="fas fa-square fa-fw" />
  199. <i class="fal fa-square fa-fw" />
  200. <i class="fal fa-square fa-fw" />
  201. </span>
  202. </div>
  203. <hr class="my-2">
  204. </div>
  205.  
  206. <div class="col-md-6 mb-1">
  207. <div class="d-flex justify-content-between">
  208. <span class="text-muted text-uppercase" style="letter-spacing:1px;">courage</span>
  209. <span>
  210. <i class="fas fa-square fa-fw" />
  211. <i class="fas fa-square fa-fw" />
  212. <i class="fas fa-square fa-fw" />
  213. <i class="fal fa-square fa-fw" />
  214. <i class="fal fa-square fa-fw" />
  215. </span>
  216. </div>
  217. <hr class="my-2">
  218. </div>
  219.  
  220. <div class="col-md-6 mb-1">
  221. <div class="d-flex justify-content-between">
  222. <span class="text-muted text-uppercase" style="letter-spacing:1px;">intellect</span>
  223. <span>
  224. <i class="fas fa-square fa-fw" />
  225. <i class="fas fa-square fa-fw" />
  226. <i class="fas fa-square fa-fw" />
  227. <i class="fal fa-square fa-fw" />
  228. <i class="fal fa-square fa-fw" />
  229. </span>
  230. </div>
  231. <hr class="my-2">
  232. </div>
  233.  
  234. <div class="col-md-6 mb-1">
  235. <div class="d-flex justify-content-between">
  236. <span class="text-muted text-uppercase" style="letter-spacing:1px;">integrity</span>
  237. <span>
  238. <i class="fas fa-square fa-fw" />
  239. <i class="fas fa-square fa-fw" />
  240. <i class="fas fa-square fa-fw" />
  241. <i class="fal fa-square fa-fw" />
  242. <i class="fal fa-square fa-fw" />
  243. </span>
  244. </div>
  245. <hr class="my-2">
  246. </div>
  247.  
  248. <div class="col-md-6 mb-1">
  249. <div class="d-flex justify-content-between">
  250. <span class="text-muted text-uppercase" style="letter-spacing:1px;">humour</span>
  251. <span>
  252. <i class="fas fa-square fa-fw" />
  253. <i class="fas fa-square fa-fw" />
  254. <i class="fas fa-square fa-fw" />
  255. <i class="fal fa-square fa-fw" />
  256. <i class="fal fa-square fa-fw" />
  257. </span>
  258. </div>
  259. <hr class="my-2">
  260. </div>
  261.  
  262. <div class="col-md-6 mb-1">
  263. <div class="d-flex justify-content-between">
  264. <span class="text-muted text-uppercase" style="letter-spacing:1px;">luck</span>
  265. <span>
  266. <i class="fas fa-square fa-fw" />
  267. <i class="fas fa-square fa-fw" />
  268. <i class="fas fa-square fa-fw" />
  269. <i class="fal fa-square fa-fw" />
  270. <i class="fal fa-square fa-fw" />
  271. </span>
  272. </div>
  273. <hr class="my-2">
  274. </div>
  275. </div>
  276.  
  277. <div class="row">
  278. <!---------------------- LIKES & DISLIKES ------------------------------------------------->
  279. <div class="col-sm-6">
  280. <p class="text-muted text-uppercase" style="letter-spacing:1px;">Likes</p>
  281. <ul class="mb-0">
  282. <li class="mb-2">content</li>
  283. <li class="mb-2">content</li>
  284. <li class="mb-2">content</li>
  285. <li class="mb-2">content</li>
  286. </ul>
  287. </div>
  288.  
  289. <div class="col-sm-6">
  290. <p class="text-muted text-uppercase" style="letter-spacing:1px;">Dislikes</p>
  291. <ul class="mb-0">
  292. <li class="mb-2">content</li>
  293. <li class="mb-2">content</li>
  294. <li class="mb-2">content</li>
  295. <li class="mb-2">content</li>
  296. </ul>
  297. </div>
  298. </div>
  299.  
  300. </div>
  301. <!--------------------------- SECTION THREE -- PERSONALITY ------------------------------------>
  302. <div class="tab-pane px-4 pt-4 pb-1" style="height:540px; overflow:auto;" id="THREE">
  303. <h1 class="text-uppercase" style="letter-spacing:1px; font-weight: 300;">Personality</h1>
  304. <hr class="mt-0">
  305. <div class="row no-gutters">
  306. <div class="col-lg-6 pr-md-2 mb-3">
  307. <p class="text-muted text-uppercase mb-1" style="letter-spacing:1px;">Trait Name</p>
  308. <p>List a personality trait & give a small description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis.</p>
  309. </div>
  310. <div class="col-lg-6 pl-md-2 mb-3">
  311. <p class="text-muted text-uppercase mb-1" style="letter-spacing:1px;">Trait Name</p>
  312. <p>List a personality trait & give a small description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis.</p>
  313. </div>
  314. <div class="col-lg-6 pr-md-2 mb-3">
  315. <p class="text-muted text-uppercase mb-1" style="letter-spacing:1px;">Trait Name</p>
  316. <p>List a personality trait & give a small description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis.</p>
  317. </div>
  318. <div class="col-lg-6 pl-md-2 mb-3">
  319. <p class="text-muted text-uppercase mb-1" style="letter-spacing:1px;">Trait Name</p>
  320. <p>List a personality trait & give a small description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis.</p>
  321. </div>
  322. <div class="col-lg-6 pr-md-2 mb-3">
  323. <p class="text-muted text-uppercase mb-1" style="letter-spacing:1px;">Trait Name</p>
  324. <p>List a personality trait & give a small description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis.</p>
  325. </div>
  326. <div class="col-lg-6 pl-md-2 mb-3">
  327. <p class="text-muted text-uppercase mb-1" style="letter-spacing:1px;">Trait Name</p>
  328. <p>List a personality trait & give a small description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis.</p>
  329. </div>
  330. </div>
  331.  
  332.  
  333. </div>
  334. <!--------------------------- SECTION FOUR -- MOODBOARD ------------------------------------>
  335. <div class="tab-pane px-4 pt-4 pb-1" style="height:540px; overflow:auto;" id="FOUR">
  336. <h1 class="text-uppercase" style="font-weight:300; letter-spacing:1px;">Aesthetic</h1>
  337. <hr class="mt-0 ">
  338. <!-- moodboard -- can use any size images, just make sure they are all the same size -->
  339. <div class="row no-gutters px-lg-5">
  340. <div class="col-md-4 col-6 text-center px-1 mb-2">
  341. <img src="IMG_URL">
  342. </div>
  343. <div class="col-md-4 col-6 text-center px-1 mb-2">
  344. <img src="IMG_URL">
  345. </div>
  346. <div class="col-md-4 col-6 text-center px-1 mb-2">
  347. <img src="IMG_URL">
  348. </div>
  349. <div class="col-md-4 col-6 text-center px-1 mb-md-0 mb-2">
  350. <img src="IMG_URL">
  351. </div>
  352. <div class="col-md-4 col-6 text-center px-1 mb-md-0 mb-2">
  353. <img src="IMG_URL">
  354. </div>
  355. <div class="col-md-4 col-6 text-center px-1 mb-md-0 mb-2">
  356. <img src="IMG_URL">
  357. </div>
  358. </div>
  359. </div>
  360.  
  361. <!--------------------------- SECTION FIVE -- STORY ------------------------------------>
  362. <div class="tab-pane px-4 pt-4 pb-1" style="height:540px; overflow:auto;" id="FIVE">
  363. <h1 class="text-uppercase" style="font-weight:300; letter-spacing:1px;">Summary</h1>
  364. <hr class="mt-0 ">
  365. <!-- optional focal image -------------->
  366. <img src="IMG_URL"
  367. class="float-right ml-3 mb-1 hidden-sm-down" style="max-height: 350px;">
  368.  
  369. <p class="text-muted text-uppercase mb-1" style="letter-spacing:1px;">Subheader</p>
  370. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis. Aliquam erat volutpat. Nulla nulla augue, vehicula id volutpat nec, auctor et ipsum. Phasellus pretium non libero eu ultricies. Proin et est vitae metus interdum ullamcorper vel sit amet augue. Integer et diam eu massa faucibus molestie non vitae metus. Donec cursus lectus eros, in vestibulum sapien porta et. Aliquam ac est lorem. Etiam pulvinar laoreet augue, et faucibus ligula ornare quis. Pellentesque sed leo tincidunt, consectetur dui in, tincidunt nunc.</p>
  371.  
  372. <p class="text-muted text-uppercase mb-1" style="letter-spacing:1px;">Subheader</p>
  373. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis. Aliquam erat volutpat. Nulla nulla augue, vehicula id volutpat nec, auctor et ipsum. Phasellus pretium non libero eu ultricies. Proin et est vitae metus interdum ullamcorper vel sit amet augue. Integer et diam eu massa faucibus molestie non vitae metus. Donec cursus lectus eros, in vestibulum sapien porta et. Aliquam ac est lorem. Etiam pulvinar laoreet augue, et faucibus ligula ornare quis. Pellentesque sed leo tincidunt, consectetur dui in, tincidunt nunc.</p>
  374.  
  375. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis. Aliquam erat volutpat. Nulla nulla augue, vehicula id volutpat nec, auctor et ipsum. Phasellus pretium non libero eu ultricies. Proin et est vitae metus interdum ullamcorper vel sit amet augue. Integer et diam eu massa faucibus molestie non vitae metus. Donec cursus lectus eros, in vestibulum sapien porta et. Aliquam ac est lorem. Etiam pulvinar laoreet augue, et faucibus ligula ornare quis. Pellentesque sed leo tincidunt, consectetur dui in, tincidunt nunc.</p>
  376.  
  377. <p class="text-muted text-uppercase mb-1" style="letter-spacing:1px;">Subheader</p>
  378. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis. Aliquam erat volutpat. Nulla nulla augue, vehicula id volutpat nec, auctor et ipsum. Phasellus pretium non libero eu ultricies. Proin et est vitae metus interdum ullamcorper vel sit amet augue. Integer et diam eu massa faucibus molestie non vitae metus. Donec cursus lectus eros, in vestibulum sapien porta et. Aliquam ac est lorem. Etiam pulvinar laoreet augue, et faucibus ligula ornare quis. Pellentesque sed leo tincidunt, consectetur dui in, tincidunt nunc.</p>
  379. </div>
  380.  
  381. <!--------------------------- SECTION SIX -- LINKS ------------------------------------>
  382. <div class="tab-pane card-block pb-1" style="height:540px; overflow:auto;" id="SIX">
  383. <div class="row">
  384. <!--------------------------- CHARACTER LINK -------------------------------------->
  385. <div class="col-12 mb-3">
  386. <img src="IMG_URL" style="max-height:150px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
  387.  
  388. <h2 class="my-2 text-sm-left text-center" style="font-weight:300;">
  389. <a href="CHAR_LINK">Character</a></h2>
  390.  
  391. <p class="mb-2">[ <i style="letter-spacing:1px;">relationship</i> ]
  392. <span class="pull-right">
  393. <i class="fas fa-heart fa-fw" />
  394. <i class="fas fa-heart fa-fw" />
  395. <i class="fas fa-heart fa-fw" />
  396. <i class="fas fa-heart fa-fw" />
  397. <i class="fas fa-heart fa-fw" /></span></p>
  398. <hr class="mt-0 mb-2 hidden-md-up">
  399. <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>
  400. </div>
  401.  
  402. <!--------------------------- CHARACTER LINK -------------------------------------->
  403. <div class="col-12 mb-3">
  404. <img src="IMG_URL" style="max-height:150px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
  405.  
  406. <h2 class="my-2 text-sm-left text-center" style="font-weight:300;">
  407. <a href="CHAR_LINK">Character</a></h2>
  408.  
  409. <p class="mb-2">[ <i style="letter-spacing:1px;">relationship</i> ]
  410. <span class="pull-right">
  411. <i class="fas fa-heart fa-fw" />
  412. <i class="fas fa-heart fa-fw" />
  413. <i class="fas fa-heart fa-fw" />
  414. <i class="fas fa-heart fa-fw" />
  415. <i class="fas fa-heart fa-fw" /></span></p>
  416. <hr class="mt-0 mb-2 hidden-md-up">
  417. <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>
  418. </div>
  419.  
  420. <!--------------------------- CHARACTER LINK -------------------------------------->
  421. <div class="col-12 mb-3">
  422. <img src="IMG_URL" style="max-height:150px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
  423.  
  424. <h2 class="my-2 text-sm-left text-center" style="font-weight:300;">
  425. <a href="CHAR_LINK">Character</a></h2>
  426.  
  427. <p class="mb-2">[ <i style="letter-spacing:1px;">relationship</i> ]
  428. <span class="pull-right">
  429. <i class="fas fa-heart fa-fw" />
  430. <i class="fas fa-heart fa-fw" />
  431. <i class="fas fa-heart fa-fw" />
  432. <i class="fas fa-heart fa-fw" />
  433. <i class="fas fa-heart fa-fw" /></span></p>
  434. <hr class="mt-0 mb-2 hidden-md-up">
  435. <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>
  436. </div>
  437.  
  438. </div>
  439. </div>
  440. </div>
  441. </div>
  442. </div>
  443. </div>
  444. </div>
  445. <p class="small text-right">HTML by @Pinky</p>
  446. </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!