API tools faq
paste
lowkeywicked

Freebie - Char Directory 01

lowkeywicked
May 2nd, 2020 (edited)
1,399
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.57 KB | None | 0 0
raw download clone embed print report
  1. <div class="mx-auto card border-0 d-block px-3 pt-3" style="border-radius: 1em; max-width: 950px;">
  2. <div class="px-2 pt-3 pb-2 bg-faded" style="border-radius: .5em;">
  3. <ul class="nav nav-pills row no-gutters text-center" style="letter-spacing: 1px;">
  4. <!----------------- NAVIGATION BUTTONS ----- YOU CAN CHANGE THE TEXT ---- DO NOT ADD MORE ------------------------------------->
  5. <li class="nav-item col mx-1 mb-2"><a class="btn btn-secondary nav-link active" data-toggle="tab" href="#ONE">
  6. Story 1
  7. </a></li>
  8. <li class="nav-item col mx-1 mb-2"><a class="btn btn-secondary nav-link" data-toggle="tab" href="#TWO">
  9. Story 2
  10. </a></li>
  11. <li class="nav-item col mx-1 mb-2"><a class="btn btn-secondary nav-link" data-toggle="tab" href="#THREE">
  12. Story 3
  13. </a></li>
  14. <li class="nav-item col mx-1 mb-2"><a class="btn btn-secondary nav-link" data-toggle="tab" href="#FOUR">
  15. Story With a long name
  16. </a></li>
  17. </ul>
  18. </div>
  19.  
  20. <div class="mx-1 py-3 text-center">
  21. <div class="tab-content">
  22. <!-------- tab one -------------------->
  23. <div class="tab-pane fade in active show" data-toggle="tab" id="ONE">
  24. <p class="mb-2"><a href="FOLDER_LINK" style="font-size: 2em; font-weight: 300; letter-spacing: 2px; text-decoration:none;">
  25. Folder Name
  26. </a></p>
  27. <p class="text-muted" style="font-style:italic; letter-spacing:1px;">
  28. Write a small story summary here... just a few sentences.
  29. </p>
  30.  
  31. <hr class="w-75">
  32. <div class="row justify-content-center">
  33. <!------- character block ------------->
  34. <div class="col-md-4 col-6 mb-4">
  35. <div class="bg-faded px-2 py-3 h-100" style="border-radius: .5em;">
  36. <img src="IMG URL" class="d-block mx-auto mb-3" style="border-radius: .5em; max-height: 200px;">
  37.  
  38. <a href="CHARACTER_LINK" target="_BLANK" class="btn btn-outline-secondary mb-3" style="letter-spacing:1px;">
  39. Character Name
  40. </a>
  41.  
  42. <p class="small" style="letter-spacing: .75px;">
  43. Write a sentence about the character here.
  44. </p>
  45. </div>
  46. </div>
  47. <!------- character block ------------->
  48. <div class="col-md-4 col-6 mb-4">
  49. <div class="bg-faded px-2 py-3 h-100" style="border-radius: .5em;">
  50. <img src="IMG URL" class="d-block mx-auto mb-3" style="border-radius: .5em; max-height: 200px;">
  51.  
  52. <a href="CHARACTER_LINK" target="_BLANK" class="btn btn-outline-secondary mb-3" style="letter-spacing:1px;">
  53. Character Name
  54. </a>
  55.  
  56. <p class="small" style="letter-spacing: .75px;">
  57. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  58. </p>
  59. </div>
  60. </div>
  61. <!------- character block ------------->
  62. <div class="col-md-4 col-6 mb-4">
  63. <div class="bg-faded px-2 py-3 h-100" style="border-radius: .5em;">
  64. <img src="IMG URL" class="d-block mx-auto mb-3" style="border-radius: .5em; max-height: 200px;">
  65.  
  66. <a href="CHARACTER_LINK" target="_BLANK" class="btn btn-outline-secondary mb-3" style="letter-spacing:1px;">
  67. Character Name
  68. </a>
  69.  
  70. <p class="small" style="letter-spacing: .75px;">
  71. Morbi varius libero non sem dapibus, eget viverra nisl sagittis.
  72. </p>
  73. </div>
  74. </div>
  75. <!------- character block ------------->
  76. <div class="col-md-4 col-6 mb-4">
  77. <div class="bg-faded px-2 py-3 h-100" style="border-radius: .5em;">
  78. <img src="IMG URL" class="d-block mx-auto mb-3" style="border-radius: .5em; max-height: 200px;">
  79.  
  80. <a href="CHARACTER_LINK" target="_BLANK" class="btn btn-outline-secondary mb-3" style="letter-spacing:1px;">
  81. Character Name
  82. </a>
  83.  
  84. <p class="small" style="letter-spacing: .75px;">
  85. Ut interdum mi non sagittis euismod.
  86. </p>
  87. </div>
  88. </div>
  89. <!------- character block ------------->
  90. <div class="col-md-4 col-6 mb-4">
  91. <div class="bg-faded px-2 py-3 h-100" style="border-radius: .5em;">
  92. <img src="IMG URL" class="d-block mx-auto mb-3" style="border-radius: .5em; max-height: 200px;">
  93.  
  94. <a href="CHARACTER_LINK" target="_BLANK" class="btn btn-outline-secondary mb-3" style="letter-spacing:1px;">
  95. Character Name
  96. </a>
  97.  
  98. <p class="small" style="letter-spacing: .75px;">
  99. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus.
  100. </p>
  101. </div>
  102. </div>
  103.  
  104. </div>
  105. </div><!-- end tab -------->
  106.  
  107. <!-------- tab two -------------------->
  108. <div class="tab-pane fade" data-toggle="tab" id="TWO">
  109. <p class="mb-2"><a href="FOLDER_LINK" style="font-size: 2em; font-weight: 300; letter-spacing: 2px; text-decoration:none;">
  110. Folder Name
  111. </a></p>
  112. <p class="text-muted" style="font-style:italic; letter-spacing:1px;">
  113. Write a small story summary here... just a few sentences.
  114. </p>
  115.  
  116. <hr class="w-75">
  117. <div class="row justify-content-center">
  118. <!------- character block ------------->
  119. <div class="col-md-4 col-6 mb-4">
  120. <div class="bg-faded px-2 py-3 h-100" style="border-radius: .5em;">
  121. <img src="IMG URL" class="d-block mx-auto mb-3" style="border-radius: .5em; max-height: 200px;">
  122.  
  123. <a href="CHARACTER_LINK" target="_BLANK" class="btn btn-outline-secondary mb-3" style="letter-spacing:1px;">
  124. Character Name
  125. </a>
  126.  
  127. <p class="small" style="letter-spacing: .75px;">
  128. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  129. </p>
  130. </div>
  131. </div>
  132. <!------- character block ------------->
  133. <div class="col-md-4 col-6 mb-4">
  134. <div class="bg-faded px-2 py-3 h-100" style="border-radius: .5em;">
  135. <img src="IMG URL" class="d-block mx-auto mb-3" style="border-radius: .5em; max-height: 200px;">
  136.  
  137. <a href="CHARACTER_LINK" target="_BLANK" class="btn btn-outline-secondary mb-3" style="letter-spacing:1px;">
  138. Character Name
  139. </a>
  140.  
  141. <p class="small" style="letter-spacing: .75px;">
  142. Morbi varius libero non sem dapibus, eget viverra nisl sagittis.
  143. </p>
  144. </div>
  145. </div>
  146. <!------- character block ------------->
  147. <div class="col-md-4 col-6 mb-4">
  148. <div class="bg-faded px-2 py-3 h-100" style="border-radius: .5em;">
  149. <img src="IMG URL" class="d-block mx-auto mb-3" style="border-radius: .5em; max-height: 200px;">
  150.  
  151. <a href="CHARACTER_LINK" target="_BLANK" class="btn btn-outline-secondary mb-3" style="letter-spacing:1px;">
  152. Character Name
  153. </a>
  154.  
  155. <p class="small" style="letter-spacing: .75px;">
  156. Ut interdum mi non sagittis euismod.
  157. </p>
  158. </div>
  159. </div>
  160.  
  161. </div>
  162. </div> <!-- end tab ---->
  163.  
  164. <!-------- tab three -------------------->
  165. <div class="tab-pane fade" data-toggle="tab" id="THREE">
  166. <p class="mb-2"><a href="FOLDER_LINK" style="font-size: 2em; font-weight: 300; letter-spacing: 2px; text-decoration:none;">
  167. Folder Name
  168. </a></p>
  169. <p class="text-muted" style="font-style:italic; letter-spacing:1px;">
  170. Write a small story summary here... just a few sentences.
  171. </p>
  172.  
  173. <hr class="w-75">
  174. <div class="row justify-content-center">
  175. <!------- character block ------------->
  176. <div class="col-md-4 col-6 mb-4">
  177. <div class="bg-faded px-2 py-3 h-100" style="border-radius: .5em;">
  178. <img src="IMG URL" class="d-block mx-auto mb-3" style="border-radius: .5em; max-height: 200px;">
  179.  
  180. <a href="CHARACTER_LINK" target="_BLANK" class="btn btn-outline-secondary mb-3" style="letter-spacing:1px;">
  181. Character Name
  182. </a>
  183.  
  184. <p class="small" style="letter-spacing: .75px;">
  185. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  186. </p>
  187. </div>
  188. </div>
  189. <!------- character block ------------->
  190. <div class="col-md-4 col-6 mb-4">
  191. <div class="bg-faded px-2 py-3 h-100" style="border-radius: .5em;">
  192. <img src="IMG URL" class="d-block mx-auto mb-3" style="border-radius: .5em; max-height: 200px;">
  193.  
  194. <a href="CHARACTER_LINK" target="_BLANK" class="btn btn-outline-secondary mb-3" style="letter-spacing:1px;">
  195. Character Name
  196. </a>
  197.  
  198. <p class="small" style="letter-spacing: .75px;">
  199. Morbi varius libero non sem dapibus, eget viverra nisl sagittis.
  200. </p>
  201. </div>
  202. </div>
  203. <!------- character block ------------->
  204. <div class="col-md-4 col-6 mb-4">
  205. <div class="bg-faded px-2 py-3 h-100" style="border-radius: .5em;">
  206. <img src="IMG URL" class="d-block mx-auto mb-3" style="border-radius: .5em; max-height: 200px;">
  207.  
  208. <a href="CHARACTER_LINK" target="_BLANK" class="btn btn-outline-secondary mb-3" style="letter-spacing:1px;">
  209. Character Name
  210. </a>
  211.  
  212. <p class="small" style="letter-spacing: .75px;">
  213. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus.
  214. </p>
  215. </div>
  216. </div>
  217. <!------- character block ------------->
  218. <div class="col-md-4 col-6 mb-4">
  219. <div class="bg-faded px-2 py-3 h-100" style="border-radius: .5em;">
  220. <img src="IMG URL" class="d-block mx-auto mb-3" style="border-radius: .5em; max-height: 200px;">
  221.  
  222. <a href="CHARACTER_LINK" target="_BLANK" class="btn btn-outline-secondary mb-3" style="letter-spacing:1px;">
  223. Character Name
  224. </a>
  225.  
  226. <p class="small" style="letter-spacing: .75px;">
  227. Ut interdum mi non sagittis euismod.
  228. </p>
  229. </div>
  230. </div>
  231.  
  232. </div>
  233. </div> <!-- end tab ------->
  234.  
  235. <!-------- tab four -------------------->
  236. <div class="tab-pane fade" data-toggle="tab" id="FOUR">
  237. <p class="mb-2"><a href="FOLDER_LINK" style="font-size: 2em; font-weight: 300; letter-spacing: 2px; text-decoration:none;">
  238. Folder Name
  239. </a></p>
  240. <p class="text-muted" style="font-style:italic; letter-spacing:1px;">
  241. Write a small story summary here... just a few sentences.
  242. </p>
  243.  
  244. <hr class="w-75">
  245. <div class="row justify-content-center">
  246. <!------- character block ------------->
  247. <div class="col-md-4 col-6 mb-4">
  248. <div class="bg-faded px-2 py-3 h-100" style="border-radius: .5em;">
  249. <img src="IMG URL" class="d-block mx-auto mb-3" style="border-radius: .5em; max-height: 200px;">
  250.  
  251. <a href="CHARACTER_LINK" target="_BLANK" class="btn btn-outline-secondary mb-3" style="letter-spacing:1px;">
  252. Character Name
  253. </a>
  254.  
  255. <p class="small" style="letter-spacing: .75px;">
  256. Write a sentence about the character here.
  257. </p>
  258. </div>
  259. </div>
  260. <!------- character block ------------->
  261. <div class="col-md-4 col-6 mb-4">
  262. <div class="bg-faded px-2 py-3 h-100" style="border-radius: .5em;">
  263. <img src="IMG URL" class="d-block mx-auto mb-3" style="border-radius: .5em; max-height: 200px;">
  264.  
  265. <a href="CHARACTER_LINK" target="_BLANK" class="btn btn-outline-secondary mb-3" style="letter-spacing:1px;">
  266. Character Name
  267. </a>
  268.  
  269. <p class="small" style="letter-spacing: .75px;">
  270. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  271. </p>
  272. </div>
  273. </div>
  274. <!------- character block ------------->
  275. <div class="col-md-4 col-6 mb-4">
  276. <div class="bg-faded px-2 py-3 h-100" style="border-radius: .5em;">
  277. <img src="IMG URL" class="d-block mx-auto mb-3" style="border-radius: .5em; max-height: 200px;">
  278.  
  279. <a href="CHARACTER_LINK" target="_BLANK" class="btn btn-outline-secondary mb-3" style="letter-spacing:1px;">
  280. Character Name
  281. </a>
  282.  
  283. <p class="small" style="letter-spacing: .75px;">
  284. Morbi varius libero non sem dapibus, eget viverra nisl sagittis.
  285. </p>
  286. </div>
  287. </div>
  288. <!------- character block ------------->
  289. <div class="col-md-4 col-6 mb-4">
  290. <div class="bg-faded px-2 py-3 h-100" style="border-radius: .5em;">
  291. <img src="IMG URL" class="d-block mx-auto mb-3" style="border-radius: .5em; max-height: 200px;">
  292.  
  293. <a href="CHARACTER_LINK" target="_BLANK" class="btn btn-outline-secondary mb-3" style="letter-spacing:1px;">
  294. Character Name
  295. </a>
  296.  
  297. <p class="small" style="letter-spacing: .75px;">
  298. Ut interdum mi non sagittis euismod.
  299. </p>
  300. </div>
  301. </div>
  302. <!------- character block ------------->
  303. <div class="col-md-4 col-6 mb-4">
  304. <div class="bg-faded px-2 py-3 h-100" style="border-radius: .5em;">
  305. <img src="IMG URL" class="d-block mx-auto mb-3" style="border-radius: .5em; max-height: 200px;">
  306.  
  307. <a href="CHARACTER_LINK" target="_BLANK" class="btn btn-outline-secondary mb-3" style="letter-spacing:1px;">
  308. Character Name
  309. </a>
  310.  
  311. <p class="small" style="letter-spacing: .75px;">
  312. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus.
  313. </p>
  314. </div>
  315. </div>
  316.  
  317. </div>
  318. </div> <!-- end tab ------->
  319. </div>
  320.  
  321. <hr class="w-75 mt-0">
  322. <p class="small text-muted" style="letter-spacing: 1px;">HTML by @Pinky</p>
  323. </div>
  324. </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!