API tools faq
paste
lowkeywicked

Freebie Grid

lowkeywicked
Nov 9th, 2019 (edited)
1,993
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.04 KB | None | 0 0
raw download clone embed print report
  1. <!------- Make sure WYSIWYG is turned OFF in your display settings, and “code editor” is turned on ------>
  2. <div class="container-fluid px-md-4 px-3 py-4 bg-faded" style="max-width: 1200px;">
  3. <!-------------------------- START ROW ------------------------------------------->
  4. <div class="row">
  5. <!------------------- BASICS SECTION --------------------->
  6. <div class="col-lg-4 mb-4">
  7. <div class="card rounded-0 border-0 h-100">
  8. <div class="p-2 bg-primary text-uppercase display-4 text-white d-flex justify-content-between">
  9. <span>Basics</span> <i class="fal fa-info-circle fa-fw" />
  10. </div>
  11. <div class="card-block pt-3 pb-0">
  12. <div class="row">
  13. <div class="col-12 mb-3">
  14. <span style="letter-spacing:1px;">Name:</span>
  15. <span class="pull-right">content</span>
  16. <hr class="mt-2 mb-0">
  17. </div>
  18.  
  19. <div class="col-12 mb-3">
  20. <span style="letter-spacing:1px;">Age:</span>
  21. <span class="pull-right">content</span>
  22. <hr class="mt-2 mb-0">
  23. </div>
  24.  
  25. <div class="col-12 mb-3">
  26. <span style="letter-spacing:1px;">Gender:</span>
  27. <span class="pull-right">content</span>
  28. <hr class="mt-2 mb-0">
  29. </div>
  30.  
  31. <div class="col-12 mb-3">
  32. <span style="letter-spacing:1px;">MBTI</span>
  33. <span class="pull-right">content</span>
  34. <hr class="mt-2 mb-0">
  35. </div>
  36.  
  37. <div class="col-12 mb-3">
  38. <span style="letter-spacing:1px;">Race:</span>
  39. <span class="pull-right">content</span>
  40. <hr class="mt-2 mb-0">
  41. </div>
  42.  
  43. <div class="col-12 mb-3">
  44. <span style="letter-spacing:1px;">Role:</span>
  45. <span class="pull-right">content</span>
  46. <hr class="mt-2 mb-0">
  47. </div>
  48.  
  49. <div class="col-12 mb-3">
  50. <span style="letter-spacing:1px;">Theme:</span>
  51. <span class="pull-right"><a href="https://www.youtube.com/watch?v=XDMGmtpvBjs" target="_BLANK">song here</a></span>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. </div>
  57.  
  58. <div class="col-lg-4 mb-4">
  59. <!---------- FOCAL IMAGE -- SET TO SCALE & CROP WITH SCREEN SIZE ---------------------------------------------------------->
  60. <div style="background-image:url(IMG_URL);
  61. background-size:cover;background-position:center 0;background-repeat:no-repeat;min-height:375px;" class="card rounded-0 border-0 h-100" ></div>
  62. </div>
  63.  
  64. <!------------------- FACTS SECTION --------------------->
  65. <div class="col-lg-4 mb-4">
  66. <div class="card rounded-0 border-0 h-100">
  67. <div class="p-2 bg-primary text-uppercase display-4 text-white d-flex justify-content-between">
  68. <span>Facts</span> <i class="fal fa-exclamation-circle fa-fw" />
  69. </div>
  70. <div class="card-block rounded-bottom pt-3 pb-0">
  71. <div class="row">
  72. <div class="col-12 mb-3">
  73. <span style="letter-spacing:1px;">D.o.B.</span>
  74. <span class="pull-right">content</span>
  75. <hr class="mt-2 mb-0">
  76. </div>
  77.  
  78. <div class="col-12 mb-3">
  79. <span style="letter-spacing:1px;">Orientation:</span>
  80. <span class="pull-right">content</span>
  81. <hr class="mt-2 mb-0">
  82. </div>
  83.  
  84. <div class="col-12 mb-3">
  85. <span style="letter-spacing:1px;">Flower:</span>
  86. <span class="pull-right">content</span>
  87. <hr class="mt-2 mb-0">
  88. </div>
  89.  
  90. <div class="col-12 mb-3">
  91. <span style="letter-spacing:1px;">Element:</span>
  92. <span class="pull-right">content</span>
  93. <hr class="mt-2 mb-0">
  94. </div>
  95.  
  96. <div class="col-12 mb-3">
  97. <span style="letter-spacing:1px;">Alignment:</span>
  98. <span class="pull-right">content</span>
  99. <hr class="mt-2 mb-0">
  100. </div>
  101.  
  102. <div class="col-12 mb-3">
  103. <span style="letter-spacing:1px;">Owner:</span>
  104. <span class="pull-right">@ your username</span>
  105. <hr class="mt-2 mb-0">
  106. </div>
  107.  
  108. <div class="col-12 mb-3">
  109. <span style="letter-spacing:1px;">Designer:</span>
  110. <span class="pull-right"><a href="/LINK" target="_BLANK">designer link</a></span>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117.  
  118. <!-------------------------- START ROW ------------------------------------------->
  119. <div class="row">
  120. <!------------------- CHARACTER STATS -- CHANGE % TO CHANGE WIDTH --------------------->
  121. <div class="col-md-6 mb-4">
  122. <div class="card border-0 rounded-0 h-100">
  123. <div class="p-2 bg-primary text-uppercase display-4 text-white d-flex justify-content-between">
  124. <span>Character</span> <i class="fal fa-balance-scale fa-fw" />
  125. </div>
  126. <div class="card-block d-flex pb-0">
  127. <div class="row my-auto">
  128. <div class="col-12 mb-3">
  129. <p style="letter-spacing:1px;">Charisma</p>
  130. <div class="progress d-block">
  131. <div class="progress-bar progress-bar-striped" style="width:50%">
  132. </div>
  133. </div>
  134. </div>
  135.  
  136. <div class="col-12 mb-3">
  137. <p style="letter-spacing:1px;">Empathy</p>
  138. <div class="progress d-block">
  139. <div class="progress-bar progress-bar-striped" style="width:50%">
  140. </div>
  141. </div>
  142. </div>
  143.  
  144. <div class="col-12 mb-3">
  145. <p style="letter-spacing:1px;">Intelligence</p>
  146. <div class="progress d-block">
  147. <div class="progress-bar progress-bar-striped" style="width:50%">
  148. </div>
  149. </div>
  150. </div>
  151.  
  152. <div class="col-12 mb-3">
  153. <p style="letter-spacing:1px;">Courage</p>
  154. <div class="progress d-block">
  155. <div class="progress-bar progress-bar-striped" style="width:50%">
  156. </div>
  157. </div>
  158. </div>
  159.  
  160. <div class="col-12 mb-3">
  161. <p style="letter-spacing:1px;">Integrity</p>
  162. <div class="progress d-block">
  163. <div class="progress-bar progress-bar-striped" style="width:50%">
  164. </div>
  165. </div>
  166. </div>
  167.  
  168. <div class="col-12 mb-3">
  169. <p style="letter-spacing:1px;">Confidence</p>
  170. <div class="progress d-block">
  171. <div class="progress-bar progress-bar-striped" style="width:50%">
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. </div>
  177. </div>
  178. </div>
  179.  
  180. <!------------------- LIKES & DISLIKES SECTION --------------------->
  181. <div class="col-md-6 mb-4">
  182. <div class="card rounded-0 border-0 mb-4">
  183. <div class="p-2 bg-primary text-uppercase display-4 text-white d-flex justify-content-between">
  184. <span>Likes</span> <i class="fal fa-heart fa-fw" />
  185. </div>
  186. <div class="card-block rounded-bottom pt-3 pb-1" style="min-height: 140px;">
  187. <ul class="mb-0">
  188. <li class="mb-2">content</li>
  189. <li class="mb-2">content</li>
  190. <li class="mb-2">content</li>
  191. <li class="mb-2">content</li>
  192. </ul>
  193. </div>
  194. </div>
  195.  
  196. <div class="card rounded-0 border-0">
  197. <div class="p-2 bg-primary text-uppercase display-4 text-white d-flex justify-content-between">
  198. <span>Dislikes</span> <i class="fal fa-times fa-fw" />
  199. </div>
  200. <div class="card-block rounded-bottom pt-3 pb-1" style="min-height: 140px;">
  201. <ul class="mb-0">
  202. <li class="mb-2">content</li>
  203. <li class="mb-2">content</li>
  204. <li class="mb-2">content</li>
  205. <li class="mb-2">content</li>
  206. </ul>
  207. </div>
  208. </div>
  209. </div>
  210.  
  211. </div>
  212.  
  213. <!-------------------------- START ROW ------------------------------------------->
  214. <div class="row">
  215. <!------------------- QUOTE SECTION --------------------->
  216. <div class="col-12 pb-4">
  217. <div class="card-block text-center">
  218. <h2 class="display-4">
  219. <i class="fas fa-quote-left text-primary pull-left mr-2" />
  220. Write some sort of quote or subtitle here....
  221. <i class="fas fa-quote-right text-primary pull-right ml-2" />
  222. </h2>
  223. </div>
  224. </div>
  225. </div>
  226.  
  227. <!-------------------------- START ROW ------------------------------------------->
  228. <div class="row">
  229. <div class="col-lg-6 mb-4">
  230. <!-------------------------- HISTORY BLOCK -------------------------------------------------->
  231. <div class="card border-0 rounded-0">
  232. <div class="p-2 bg-primary text-uppercase display-4 text-white d-flex justify-content-between">
  233. <span>History</span> <i class="fal fa-book fa-fw" />
  234. </div>
  235. <div class="card-block" style="height: 300px; overflow:auto; padding-bottom:5px;">
  236. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare interdum massa, dignissim commodo ipsum dapibus et. Nullam venenatis nunc a tortor consequat, sed efficitur risus bibendum. Integer rhoncus cursus interdum. Duis tincidunt urna at elit mattis condimentum. Vivamus nec interdum tortor, eget fermentum diam. Nunc aliquam pulvinar quam vitae ullamcorper. Aliquam eu arcu at justo rutrum accumsan. Nullam eget felis sit amet eros convallis tincidunt dapibus non orci. Duis quis velit venenatis odio malesuada gravida non nec tellus. Nulla eget turpis quis nulla suscipit malesuada.</p>
  237. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare interdum massa, dignissim commodo ipsum dapibus et. Nullam venenatis nunc a tortor consequat, sed efficitur risus bibendum. Integer rhoncus cursus interdum. Duis tincidunt urna at elit mattis condimentum. Vivamus nec interdum tortor, eget fermentum diam. Nunc aliquam pulvinar quam vitae ullamcorper. Aliquam eu arcu at justo rutrum accumsan. Nullam eget felis sit amet eros convallis tincidunt dapibus non orci. Duis quis velit venenatis odio malesuada gravida non nec tellus. Nulla eget turpis quis nulla suscipit malesuada.</p>
  238. </div>
  239. </div>
  240. </div>
  241. <div class="col-lg-6 mb-4">
  242. <!-------------------------- EXTRA BLOCK -------------------------------------------------->
  243. <div class="card border-0 rounded-0">
  244. <div class="p-2 bg-primary text-uppercase display-4 text-white d-flex justify-content-between">
  245. <span>About</span> <i class="fal fa-thumbtack fa-fw" />
  246. </div>
  247. <div class="card-block" style="height: 300px; overflow:auto; padding-bottom:5px;">
  248. <p>An open box for whatever you want... currently story, trivia facts, abilities, etc you choose. Here's a list.</p>
  249. <ul class="mb-0">
  250. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  251. <li class="mb-2">Nulla ornare interdum massa, dignissim commodo ipsum dapibus et.</li>
  252. <li class="mb-2">Nullam venenatis nunc a tortor consequat, sed efficitur risus bibendum.</li>
  253. <li class="mb-2">Integer rhoncus cursus interdum.</li>
  254. </ul>
  255. </div>
  256. </div>
  257. </div>
  258. </div>
  259.  
  260. <!-------------------------- START ROW ------------------------------------------->
  261. <div class="row">
  262. <div class="col-12 mb-4">
  263. <div class="card rounded-0 border-0">
  264. <div class="p-2 bg-primary text-uppercase display-4 text-white d-flex justify-content-between">
  265. <span>Links</span> <i class="fal fa-users fa-fw" />
  266. </div>
  267. <div class="card-block pb-1">
  268. <div class="row">
  269. <!-------------------------------- CHARACTER LINK ------------------------------------------------------>
  270. <div class="col-md-4 mb-3">
  271. <img src="IMG_URL" class="rounded d-block mx-auto mb-2" style="max-height: 200px;">
  272. <p class="text-center"><a href="LINK_HERE" style="letter-spacing:1px;" class="display-4">
  273. Character Name</a>
  274. <br>[ relationship ]</p>
  275. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare interdum massa, dignissim commodo ipsum dapibus et. Nullam venenatis nunc a tortor consequat, sed efficitur risus bibendum. Integer rhoncus cursus interdum. Duis tincidunt urna at elit mattis condimentum. </p>
  276. </div>
  277. <!-------------------------------- CHARACTER LINK ------------------------------------------------------>
  278. <div class="col-md-4 mb-3">
  279. <img src="IMG_URL" class="rounded d-block mx-auto mb-2" style="max-height: 200px;">
  280. <p class="text-center"><a href="LINK_HERE" style="letter-spacing:1px;" class="display-4">
  281. Character Name</a>
  282. <br>[ relationship ]</p>
  283. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare interdum massa, dignissim commodo ipsum dapibus et. Nullam venenatis nunc a tortor consequat, sed efficitur risus bibendum. Integer rhoncus cursus interdum. Duis tincidunt urna at elit mattis condimentum. </p>
  284. </div>
  285. <!-------------------------------- CHARACTER LINK ------------------------------------------------------>
  286. <div class="col-md-4 mb-3">
  287. <img src="IMG_URL" class="rounded d-block mx-auto mb-2" style="max-height: 200px;">
  288. <p class="text-center"><a href="LINK_HERE" style="letter-spacing:1px;" class="display-4">
  289. Character Name</a>
  290. <br>[ relationship ]</p>
  291. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare interdum massa, dignissim commodo ipsum dapibus et. Nullam venenatis nunc a tortor consequat, sed efficitur risus bibendum. Integer rhoncus cursus interdum. Duis tincidunt urna at elit mattis condimentum. </p>
  292. </div>
  293. </div>
  294. </div>
  295. </div>
  296. </div>
  297. </div>
  298. <p class="text-right small">HTML by @Pinky</p>
  299. </div>
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!