API tools faq
paste
lowkeywicked

Freebie - Grid

lowkeywicked
Mar 7th, 2021 (edited)
10,496
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.06 KB | None | 1 0
raw download clone embed print report
  1. <!-- content container ------------------>
  2. <div class="container p-3 card bg-faded my-4" style="max-width: 1000px; font-size: 9.5pt; letter-spacing: .25px; border-radius: 1em; box-shadow: 0 0 1em rgba(0,0,0,.25);">
  3. <div class="row no-gutters justify-content-center">
  4. <div class="col-md-4 mb-3" style="max-width: 350px;">
  5. <div class="card p-2 h-100" style="border-radius: 1em;">
  6. <!-- top focal image -- use a 350 x 350 image -------------------------->
  7. <div style="background-image: url('IMG_URL');
  8. background-size: cover; background-position: top center; border-radius: 1em; min-height: 320px;" class="h-100"></div>
  9. </div>
  10. </div>
  11. <div class="col-md-8 pl-md-3 mb-3">
  12. <!-- basic stats box ----------------------------------------------->
  13. <div class="card d-block h-100" style="border-radius: 1em;">
  14. <div class="justify-content-between text-uppercase text-muted pt-3 px-3 pb-1" style="font-size: 24px; letter-spacing: .5px; line-height: 1;">
  15. <span>Basics</span>
  16. <i class="far fa-list"></i>
  17. </div>
  18. <div class="py-3 px-3">
  19. <div class="row no-gutters">
  20. <div class="col-md-6 pr-md-2">
  21. <div class="justify-content-between">
  22. <span style="font-weight: 600;">Name</span>
  23. <span>Content</span>
  24. </div>
  25. <hr class="my-2 faded">
  26. </div>
  27.  
  28. <div class="col-md-6 pl-md-2">
  29. <div class="justify-content-between">
  30. <span style="font-weight: 600;">Called</span>
  31. <span>nickname</span>
  32. </div>
  33. <hr class="my-2 faded">
  34. </div>
  35.  
  36. <div class="col-md-6 pr-md-2">
  37. <div class="justify-content-between">
  38. <span style="font-weight: 600;">Age</span>
  39. <span>Content</span>
  40. </div>
  41. <hr class="my-2 faded">
  42. </div>
  43.  
  44. <div class="col-md-6 pl-md-2">
  45. <div class="justify-content-between">
  46. <span style="font-weight: 600;">D.o.B.</span>
  47. <span>Content</span>
  48. </div>
  49. <hr class="my-2 faded">
  50. </div>
  51.  
  52. <div class="col-md-6 pr-md-2">
  53. <div class="justify-content-between">
  54. <span style="font-weight: 600;">Gender</span>
  55. <span>Content</span>
  56. </div>
  57. <hr class="my-2 faded">
  58. </div>
  59.  
  60. <div class="col-md-6 pl-md-2">
  61. <div class="justify-content-between">
  62. <span style="font-weight: 600;">Pronouns</span>
  63. <span>content</span>
  64. </div>
  65. <hr class="my-2 faded">
  66. </div>
  67.  
  68. <div class="col-md-6 pr-md-2">
  69. <div class="justify-content-between">
  70. <span style="font-weight: 600;">Height</span>
  71. <span>Content</span>
  72. </div>
  73. <hr class="my-2 faded">
  74. </div>
  75.  
  76. <div class="col-md-6 pl-md-2">
  77. <div class="justify-content-between">
  78. <span style="font-weight: 600;">Build</span>
  79. <span>content</span>
  80. </div>
  81. <hr class="my-2 faded">
  82. </div>
  83.  
  84. <div class="col-md-6 pr-md-2">
  85. <div class="justify-content-between">
  86. <span style="font-weight: 600;">Race</span>
  87. <span>or species</span>
  88. </div>
  89. <hr class="my-2 faded">
  90. </div>
  91.  
  92. <div class="col-md-6 pl-md-2">
  93. <div class="justify-content-between">
  94. <span style="font-weight: 600;">Role</span>
  95. <span>what they do</span>
  96. </div>
  97. <hr class="my-2 faded">
  98. </div>
  99.  
  100. <div class="col-md-6 pr-md-2">
  101. <div class="justify-content-between">
  102. <span style="font-weight: 600;">Demeanor</span>
  103. <span>Content</span>
  104. </div>
  105. <hr class="my-2 faded">
  106. </div>
  107.  
  108. <div class="col-md-6 pl-md-2">
  109. <div class="justify-content-between">
  110. <span style="font-weight: 600;">Aesthetic</span>
  111. <span>content</span>
  112. </div>
  113. <hr class="my-2 faded">
  114. </div>
  115.  
  116. <div class="col-md-6 pr-md-2">
  117. <div class="justify-content-between">
  118. <span style="font-weight: 600;">Flower</span>
  119. <span>content</span>
  120. </div>
  121. <hr class="my-2 faded">
  122. </div>
  123.  
  124. <div class="col-md-6 pl-md-2">
  125. <div class="justify-content-between">
  126. <span style="font-weight: 600;">Element</span>
  127. <span>Content</span>
  128. </div>
  129. <hr class="my-2 faded">
  130. </div>
  131.  
  132. <div class="col-md-6 pr-md-2">
  133. <div class="justify-content-between">
  134. <span style="font-weight: 600;">Theme</span>
  135. <!-- THEME SONG -- link a youtube vid -->
  136. <span><a href="YT_LINK" target="_BLANK"><i class="fas fa-music-alt fa-fw"/><i class="fas fa-music fa-fw"/><i class="fas fa-music-alt fa-fw"/></a></span>
  137. </div>
  138. <hr class="my-2 faded hidden-md-up">
  139. </div>
  140.  
  141.  
  142. <div class="col-md-6 pl-md-2">
  143. <div class="justify-content-between">
  144. <span style="font-weight: 600;">HTML</span>
  145. <!-- HTML Credit --- leave this --->
  146. <span>@Pinky</span>
  147. </div>
  148. </div>
  149.  
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154.  
  155. <div class="col-md-8 mb-3">
  156. <div class="card d-block" style="border-radius: 1em;">
  157. <div class="justify-content-between text-uppercase text-muted pt-3 px-3 pb-1" style="font-size: 24px; letter-spacing: .5px; line-height: 1;">
  158. <span>About</span>
  159. <i class="far fa-info-circle"></i>
  160. </div>
  161.  
  162. <div class="pt-3 pb-1 px-3 overflow-auto" style="height: 270px;">
  163. <p class="text-center" style="letter-spacing: .5px; font-weight: 600; font-variant: small-caps;">
  164. adjecitve &bull; adjective &bull; adjective &bull; adjective</p>
  165. <p>Write a small intro for your character here! Just a paragraph or two. This box will scroll.</p>
  166.  
  167. </div>
  168. </div>
  169. </div>
  170. <div class="col-md-4 pl-md-3 mb-3">
  171. <!-- personality stats box ----------------------------------------------->
  172. <div class="card d-block" style="border-radius: 1em;">
  173. <div class="justify-content-between text-uppercase text-muted pt-3 px-3 pb-1" style="font-size: 24px; letter-spacing: .5px; line-height: 1;">
  174. <span>Stats</span>
  175. <i class="far fa-stars"></i>
  176. </div>
  177. <!-- stat stars -- add the class "faded" to make the star fade -- remove to fill it in --->
  178. <div class="pt-3 px-3 overflow-auto" style="height: 270px;">
  179. <div class="justify-content-between">
  180. <span style="font-weight: 600;">Kindness</span>
  181. <span><i class="fas fa-star fa-fw text-primary" />
  182. <i class="fas fa-star fa-fw text-primary" />
  183. <i class="fas fa-star fa-fw text-primary" />
  184. <i class="fas fa-star fa-fw text-primary faded" />
  185. <i class="fas fa-star fa-fw text-primary faded" /></span>
  186. </div>
  187. <hr class="my-2 faded">
  188.  
  189. <div class="justify-content-between">
  190. <span style="font-weight: 600;">Humour</span>
  191. <span><i class="fas fa-star fa-fw text-primary" />
  192. <i class="fas fa-star fa-fw text-primary" />
  193. <i class="fas fa-star fa-fw text-primary" />
  194. <i class="fas fa-star fa-fw text-primary faded" />
  195. <i class="fas fa-star fa-fw text-primary faded" /></span>
  196. </div>
  197. <hr class="my-2 faded">
  198.  
  199. <div class="justify-content-between">
  200. <span style="font-weight: 600;">Temper</span>
  201. <span><i class="fas fa-star fa-fw text-primary" />
  202. <i class="fas fa-star fa-fw text-primary" />
  203. <i class="fas fa-star fa-fw text-primary" />
  204. <i class="fas fa-star fa-fw text-primary faded" />
  205. <i class="fas fa-star fa-fw text-primary faded" /></span>
  206. </div>
  207. <hr class="my-2 faded">
  208.  
  209. <div class="justify-content-between">
  210. <span style="font-weight: 600;">Integrity</span>
  211. <span><i class="fas fa-star fa-fw text-primary" />
  212. <i class="fas fa-star fa-fw text-primary" />
  213. <i class="fas fa-star fa-fw text-primary" />
  214. <i class="fas fa-star fa-fw text-primary faded" />
  215. <i class="fas fa-star fa-fw text-primary faded" /></span>
  216. </div>
  217. <hr class="my-2 faded">
  218.  
  219. <div class="justify-content-between">
  220. <span style="font-weight: 600;">Courage</span>
  221. <span><i class="fas fa-star fa-fw text-primary" />
  222. <i class="fas fa-star fa-fw text-primary" />
  223. <i class="fas fa-star fa-fw text-primary" />
  224. <i class="fas fa-star fa-fw text-primary faded" />
  225. <i class="fas fa-star fa-fw text-primary faded" /></span>
  226. </div>
  227. <hr class="my-2 faded">
  228.  
  229. <div class="justify-content-between">
  230. <span style="font-weight: 600;">Intellect</span>
  231. <span><i class="fas fa-star fa-fw text-primary" />
  232. <i class="fas fa-star fa-fw text-primary" />
  233. <i class="fas fa-star fa-fw text-primary" />
  234. <i class="fas fa-star fa-fw text-primary faded" />
  235. <i class="fas fa-star fa-fw text-primary faded" /></span>
  236. </div>
  237. <hr class="my-2 faded">
  238.  
  239. <div class="justify-content-between">
  240. <span style="font-weight: 600;">Luck</span>
  241. <span><i class="fas fa-star fa-fw text-primary" />
  242. <i class="fas fa-star fa-fw text-primary" />
  243. <i class="fas fa-star fa-fw text-primary" />
  244. <i class="fas fa-star fa-fw text-primary faded" />
  245. <i class="fas fa-star fa-fw text-primary faded" /></span>
  246. </div>
  247. </div>
  248. </div>
  249. </div>
  250. <div class="col-12 mb-3">
  251. <!-- story box ----------------------------------------------->
  252. <div class="card d-block" style="border-radius: 1em;">
  253. <div class="justify-content-between text-uppercase text-muted pt-3 px-3 pb-1" style="font-size: 24px; letter-spacing: .5px; line-height: 1;">
  254. <span>Story</span>
  255. <i class="far fa-books"></i>
  256. </div>
  257. <div class="p-3">
  258. <!-- OPTIONAL FOCAL IMAGE -- just erase if you dont wanna use --->
  259. <img src="IMG_URL"
  260. class="float-right ml-3 hidden-sm-down" style="max-height: 350px;">
  261. <p>Gingerbread jujubes sweet roll. Muffin cheesecake lollipop macaroon gingerbread marshmallow lollipop. Marshmallow pie jujubes sweet cake. Jelly beans marzipan tootsie roll danish chocolate cake cake. Jelly oat cake muffin jujubes. Gingerbread cake caramels marzipan. Icing apple pie lemon drops sweet roll lemon drops cotton candy. Chupa chups muffin cupcake croissant cookie pastry jujubes bear claw. Icing jelly jujubes. Carrot cake jelly tiramisu bonbon marzipan marshmallow tart gummi bears. Soufflé lollipop biscuit cupcake jelly beans chocolate cake chupa chups cake candy canes. Icing icing sweet roll sesame snaps cake topping cupcake. Marzipan pie halvah. Cotton candy marshmallow pastry cake soufflé carrot cake chocolate.</p>
  262.  
  263. <p class="text-uppercase text-muted mb-1" style="font-size: 16px; letter-spacing: .5px;">
  264. <i class="fas fa-bookmark fa-fw" /> Subheader</p>
  265. <p>Gingerbread jujubes sweet roll. Muffin cheesecake lollipop macaroon gingerbread marshmallow lollipop. Marshmallow pie jujubes sweet cake. Jelly beans marzipan tootsie roll danish chocolate cake cake. Jelly oat cake muffin jujubes. Gingerbread cake caramels marzipan. Icing apple pie lemon drops sweet roll lemon drops cotton candy. Chupa chups muffin cupcake croissant cookie pastry jujubes bear claw. Icing jelly jujubes. Carrot cake jelly tiramisu bonbon marzipan marshmallow tart gummi bears. Soufflé lollipop biscuit cupcake jelly beans chocolate cake chupa chups cake candy canes. Icing icing sweet roll sesame snaps cake topping cupcake. Marzipan pie halvah. Cotton candy marshmallow pastry cake soufflé carrot cake chocolate.</p>
  266.  
  267. <p>Gingerbread jujubes sweet roll. Muffin cheesecake lollipop macaroon gingerbread marshmallow lollipop. Marshmallow pie jujubes sweet cake. Jelly beans marzipan tootsie roll danish chocolate cake cake. Jelly oat cake muffin jujubes. Gingerbread cake caramels marzipan. Icing apple pie lemon drops sweet roll lemon drops cotton candy. Chupa chups muffin cupcake croissant cookie pastry jujubes bear claw. Icing jelly jujubes. Carrot cake jelly tiramisu bonbon marzipan marshmallow tart gummi bears. Soufflé lollipop biscuit cupcake jelly beans chocolate cake chupa chups cake candy canes. Icing icing sweet roll sesame snaps cake topping cupcake. Marzipan pie halvah. Cotton candy marshmallow pastry cake soufflé carrot cake chocolate.</p>
  268.  
  269. <p class="text-uppercase text-muted mb-1" style="font-size: 16px; letter-spacing: .5px;">
  270. <i class="fas fa-bookmark fa-fw" /> Subheader</p>
  271. <p>Gingerbread jujubes sweet roll. Muffin cheesecake lollipop macaroon gingerbread marshmallow lollipop. Marshmallow pie jujubes sweet cake. Jelly beans marzipan tootsie roll danish chocolate cake cake. Jelly oat cake muffin jujubes. Gingerbread cake caramels marzipan. Icing apple pie lemon drops sweet roll lemon drops cotton candy. Chupa chups muffin cupcake croissant cookie pastry jujubes bear claw. Icing jelly jujubes. Carrot cake jelly tiramisu bonbon marzipan marshmallow tart gummi bears. Soufflé lollipop biscuit cupcake jelly beans chocolate cake chupa chups cake candy canes. Icing icing sweet roll sesame snaps cake topping cupcake. Marzipan pie halvah. Cotton candy marshmallow pastry cake soufflé carrot cake chocolate.</p>
  272. </div>
  273. </div>
  274. </div>
  275.  
  276. <div class="col-md-5 pr-md-3 mb-md-0 mb-3">
  277. <!-- trivia box ----------------------------------------------->
  278. <div class="card d-block" style="border-radius: 1em;">
  279. <div class="justify-content-between text-uppercase text-muted pt-3 px-3 pb-1" style="font-size: 24px; letter-spacing: .5px; line-height: 1;">
  280. <span>Trivia</span>
  281. <i class="far fa-question"></i>
  282. </div>
  283.  
  284. <div class="pt-3 pb-1 px-3 overflow-auto" style="height: 320px;">
  285. <ul class="mb-0 pl-4">
  286. <li class="mb-2">Content</li>
  287. <li class="mb-2">Content</li>
  288. <li class="mb-2">Content</li>
  289. <li class="mb-2">Content</li>
  290. <li class="mb-2">Content</li>
  291. </ul>
  292. </div>
  293. </div>
  294. </div>
  295. <div class="col-md-7">
  296. <!-- relationships box ----------------------------------------------->
  297. <div class="card d-block" style="border-radius: 1em;">
  298. <div class="justify-content-between text-uppercase text-muted pt-3 px-3 pb-1" style="font-size: 24px; letter-spacing: .5px; line-height: 1;">
  299. <span>Links</span>
  300. <i class="far fa-users"></i>
  301. </div>
  302. <div class="pt-3 px-3 overflow-auto" style="height: 320px;">
  303. <div class="row no-gutters">
  304. <!--------------------------- CHARACTER LINK -------------------------------------->
  305. <div class="col-12 mb-3">
  306. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/23471735_uVZLl4qpjPREyqr.png"
  307. style="max-height:50px;" class="rounded-circle float-left mr-2" />
  308.  
  309. <p><a href="CHAR_LINK" class="text-uppercase" style="letter-spacing: .5px;">Character Name</a> &bull;
  310. <i class="text-muted" style="letter-spacing: 1px;">relationship</i>
  311. <br>Content </p>
  312. </div>
  313. <!--------------------------- CHARACTER LINK -------------------------------------->
  314. <div class="col-12 mb-3">
  315. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/23471735_uVZLl4qpjPREyqr.png"
  316. style="max-height:50px;" class="rounded-circle float-left mr-2" />
  317.  
  318. <p><a href="CHAR_LINK" class="text-uppercase" style="letter-spacing: .5px;">Character Name</a> &bull;
  319. <i class="text-muted" style="letter-spacing: 1px;">relationship</i>
  320. <br>Content </p>
  321. </div>
  322. <!--------------------------- CHARACTER LINK -------------------------------------->
  323. <div class="col-12 mb-3">
  324. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/23471735_uVZLl4qpjPREyqr.png"
  325. style="max-height:50px;" class="rounded-circle float-left mr-2" />
  326.  
  327. <p><a href="CHAR_LINK" class="text-uppercase" style="letter-spacing: .5px;">Character Name</a> &bull;
  328. <i class="text-muted" style="letter-spacing: 1px;">relationship</i>
  329. <br>Content </p>
  330. </div>
  331. </div>
  332. </div>
  333. </div>
  334. </div>
  335. </div>
  336. </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!