API tools faq
paste
lowkeywicked

Freebie Chunky

lowkeywicked
Oct 17th, 2019 (edited)
28,337
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.01 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid px-0" style="max-width: 1100px; letter-spacing: .45px;">
  2. <div class="row">
  3.  
  4. <div class="col-md-4 pr-lg-0 mb-3">
  5. <div class="bg-faded h-100">
  6. <div class="card-block pb-1">
  7.  
  8. <!----------- avatar -- use a 250 x 250 image -------------------------->
  9. <img src="IMG_URL" style="max-height: 250px; max-width: 250px;" class="rounded-circle card p-2 d-block mx-auto mb-3">
  10.  
  11. <!-------- stats --------------------------------------->
  12. <div class="row no-gutters">
  13. <div class="col-6 text-right text-muted text-uppercase pr-1" style="letter-spacing: 1px;">
  14. Name <i class="fal fa-angle-double-right fa-fw"></i></div>
  15. <div class="col-6 mb-2">
  16. content</div>
  17.  
  18. <div class="col-6 text-right text-muted text-uppercase pr-1" style="letter-spacing: 1px;">
  19. Age <i class="fal fa-angle-double-right fa-fw"></i></div>
  20. <div class="col-6 mb-2">
  21. content</div>
  22.  
  23. <div class="col-6 text-right text-muted text-uppercase pr-1" style="letter-spacing: 1px;">
  24. Gender <i class="fal fa-angle-double-right fa-fw"></i></div>
  25. <div class="col-6 mb-2">
  26. content</div>
  27.  
  28. <div class="col-6 text-right text-muted text-uppercase pr-1" style="letter-spacing: 1px;">
  29. Race <i class="fal fa-angle-double-right fa-fw"></i></div>
  30. <div class="col-6 mb-2">
  31. (or species)</div>
  32.  
  33. <div class="col-6 text-right text-muted text-uppercase pr-1" style="letter-spacing: 1px;">
  34. Role <i class="fal fa-angle-double-right fa-fw"></i></div>
  35. <div class="col-6 mb-2">
  36. content</div>
  37.  
  38. <div class="col-6 text-right text-muted text-uppercase pr-1" style="letter-spacing: 1px;">
  39. MBTI <i class="fal fa-angle-double-right fa-fw"></i></div>
  40. <div class="col-6 mb-2">
  41. content</div>
  42.  
  43. <div class="col-6 text-right text-muted text-uppercase pr-1" style="letter-spacing: 1px;">
  44. Theme <i class="fal fa-angle-double-right fa-fw"></i></div>
  45. <div class="col-6 mb-2">
  46. <a href="SONG LINK" target="_BLANK">link a song</a></div>
  47.  
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52.  
  53. <div class="col-md-8 mb-3">
  54. <!---- intro box -------------------------->
  55. <div class="bg-faded card-block pb-1 mb-3" style="font-size: 10.5pt; height: 325px; overflow:auto;">
  56. <h1 class="text-muted text-uppercase" style="font-weight: 300; letter-spacing: 1px;">About
  57. <i class="fal fa-angle-double-right fa-fw"/></h1>
  58. <p class="text-center text-uppercase small mb-0" style="letter-spacing:1px;">
  59. Adjective &#8226 Adjective &#8226 Adjective &#8226 Adjective
  60. </p>
  61. <hr class="w-50 mx-auto">
  62. <p>Write a small intro for your character here. Think like the summary on a back of a book - 1 to 2 paragraphs to give you a quick glimpse of the character. You'll fill out more details later in the template.</p>
  63.  
  64. <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. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. </p>
  65. </div>
  66. <div class="row no-gutters">
  67. <!---- likes & dislikes -------------------------->
  68. <div class="col-md-6 pr-md-2 mb-md-0 mb-3">
  69. <div class="bg-faded card-block h-100 pb-0 mb-3" style="font-size: 10.5pt;">
  70. <p class="text-muted text-uppercase" style="letter-spacing: 1px;">Likes
  71. <i class="fal fa-angle-double-right fa-fw" /></p>
  72. <ul class="mb-0">
  73. <li class="mb-2">content</li>
  74. <li class="mb-2">content</li>
  75. <li class="mb-2">content</li>
  76. <li class="mb-2">content</li>
  77. </ul>
  78. </div>
  79. </div>
  80. <div class="col-md-6 pl-md-2">
  81. <div class="bg-faded card-block h-100 pb-0 mb-3" style="font-size: 10.5pt;">
  82. <p class="text-muted text-uppercase" style="letter-spacing: 1px;">Dislikes
  83. <i class="fal fa-angle-double-right fa-fw" /></p>
  84. <ul class="mb-0">
  85. <li class="mb-2">content</li>
  86. <li class="mb-2">content</li>
  87. <li class="mb-2">content</li>
  88. <li class="mb-2">content</li>
  89. </ul>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94.  
  95. <div class="col-12 mb-3">
  96. <!---- quote box -------------------------->
  97. <div class="card-block bg-faded text-center">
  98. <i style="font-weight: 300; font-size: 1.2em; letter-spacing: 1px;">"write a quote here...."</i>
  99. </div>
  100. </div>
  101.  
  102. <div class="col-md-7 mb-3">
  103. <!---- summary box -------------------------->
  104. <div class="card-block bg-faded pb-1" style="height: 480px; overflow:auto; font-size: 10.5pt;">
  105. <h1 class="text-muted text-uppercase" style="font-weight: 300; letter-spacing: 1px;">Summary
  106. <i class="fal fa-angle-double-right fa-fw"/></h1>
  107. <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. </p>
  108. <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. 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.</p>
  109.  
  110. </div>
  111.  
  112. </div>
  113. <div class="col-md-5 pl-md-0 mb-3">
  114. <div class="bg-faded h-100 modal-open">
  115. <!------ FOCAL IMAGE --- will scale & crop with screen -- focus in top & center of image ----------->
  116. <div style="background-image: url(IMG_URL);
  117. background-size: cover; background-position: top center; min-height: 400px;" class="h-100"></div>
  118. </div>
  119. </div>
  120.  
  121. <div class="col-12 mb-3">
  122. <div class="p-3 bg-faded text-center">
  123. <!---- palette -- replace hex # to change colors -------------------------->
  124. <div class="row no-gutters bg-faded modal-open" style="height:30px;">
  125. <div style="background-color: #000;" class="col h-100">
  126. </div>
  127. <div style="background-color: #222;" class="col h-100">
  128. </div>
  129. <div style="background-color: #444;" class="col h-100">
  130. </div>
  131. <div style="background-color: #666;" class="col h-100">
  132. </div>
  133. <div style="background-color: #888;" class="col h-100">
  134. </div>
  135. <div style="background-color: #fff;" class="col h-100">
  136. </div>
  137. </div>
  138. </div>
  139. </div>
  140.  
  141. <div class="col-md-4 pr-md-2 mb-3">
  142. <!---- design notes -------------------------->
  143. <div class="card-block bg-faded pb-1" style="height: 350px; overflow:auto; font-size: 10.5pt;">
  144. <h1 class="text-muted text-uppercase" style="font-weight: 300; letter-spacing: 1px;">Design
  145. <i class="fal fa-angle-double-right fa-fw"/></h1>
  146.  
  147. <p class="mb-2">&#8226 Design notes here</p>
  148. <p class="mb-2">&#8226 Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  149. <p class="mb-2">&#8226 Suspendisse a felis molestie, porttitor est eget, euismod mauris.</p>
  150. <p class="mb-2">&#8226 liquam magna libero, dictum sit amet scelerisque ac</p>
  151. <p class="mb-2">&#8226 Nulla et consectetur diam.</p>
  152. </div>
  153. </div>
  154.  
  155. <div class="col-md-4 px-md-2 mb-3">
  156. <div class="bg-faded h-100 modal-open">
  157. <!------ FOCAL IMAGE --- will scale & crop with screen -- focus in top & center of image ----------->
  158. <div style="background-image: url(IMG URL);
  159. background-size: cover; background-position: top center; min-height: 350px;" class="h-100"></div>
  160. </div>
  161. </div>
  162.  
  163. <div class="col-md-4 pl-md-2 mb-3">
  164. <!---- trivia box -------------------------->
  165. <div class="card-block bg-faded pb-1" style="height: 350px; overflow:auto; font-size: 10.5pt;">
  166. <h1 class="text-muted text-uppercase" style="font-weight: 300; letter-spacing: 1px;">Trivia
  167. <i class="fal fa-angle-double-right fa-fw"/></h1>
  168. <p class="mb-2">&#8226 Trivia facts here</p>
  169. <p class="mb-2">&#8226 Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  170. <p class="mb-2">&#8226 Suspendisse sit amet massa blandit</p>
  171. <p class="mb-2">&#8226 Integer fermentum est vitae dui pretium fermentum.</p>
  172. <p class="mb-2">&#8226 Fusce quis velit vel sem pellentesque iaculis congue non lorem.</p>
  173. <p class="mb-2">&#8226 Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus.</p>
  174. </div>
  175. </div>
  176.  
  177. <div class="col-12 mb-3">
  178. <!---- relationships box -------------------------->
  179. <div class="card-block pb-2 bg-faded" style="font-size: 10.5pt;">
  180. <h1 class="text-muted text-uppercase" style="font-weight: 300; letter-spacing: 1px;">Links
  181. <i class="fal fa-angle-double-right fa-fw"/></h1>
  182. <div class="row no-gutters">
  183. <!---------------------- CHARACTER LEFT BLOCK ------------------------------------------>
  184. <div class="col-lg-6 pr-md-1 mb-2">
  185.  
  186. <!-------- avatar image ----------->
  187. <img src="IMG_URL"
  188. class="rounded float-sm-left mr-sm-2 d-block mx-auto mb-1 img-thumbnail" style="height: 150px;">
  189.  
  190. <!------- character name & link ---------->
  191. <h2 style="font-weight: 300; letter-spacing:1px;"><a href="LINK_HERE">Name</a></h2>
  192.  
  193. <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.</p>
  194. </div>
  195.  
  196. <!---------------------- CHARACTER RIGHT BLOCK ------------------------------------------>
  197. <div class="col-lg-6 pl-md-1 mb-2">
  198. <!-------- avatar image ----------->
  199. <img src="IMG_URL"
  200. class="rounded float-sm-left mr-sm-2 d-block mx-auto mb-1 img-thumbnail" style="height: 150px;">
  201.  
  202. <!------- character name & link ---------->
  203. <h2 style="font-weight: 300; letter-spacing:1px;"><a href="LINK_HERE">Name</a></h2>
  204.  
  205. <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.</p>
  206. </div>
  207.  
  208. <!---------------------- CHARACTER LEFT BLOCK ------------------------------------------>
  209. <div class="col-lg-6 pr-md-1 mb-2">
  210.  
  211. <!-------- avatar image ----------->
  212. <img src="IMG_URL"
  213. class="rounded float-sm-left mr-sm-2 d-block mx-auto mb-1 img-thumbnail" style="height: 150px;">
  214.  
  215. <!------- character name & link ---------->
  216. <h2 style="font-weight: 300; letter-spacing:1px;"><a href="LINK_HERE">Name</a></h2>
  217. <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.</p>
  218. </div>
  219.  
  220. <!---------------------- CHARACTER RIGHT BLOCK ------------------------------------------>
  221. <div class="col-lg-6 pl-md-1 mb-2">
  222. <!-------- avatar image ----------->
  223. <img src="IMG_URL"
  224. class="rounded float-sm-left mr-sm-2 d-block mx-auto mb-1 img-thumbnail" style="height: 150px;">
  225.  
  226. <!------- character name & link ---------->
  227. <h2 style="font-weight: 300; letter-spacing:1px;"><a href="LINK_HERE">Name</a></h2>
  228.  
  229. <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.</p>
  230. </div>
  231.  
  232. </div>
  233. </div>
  234. </div>
  235.  
  236. </div>
  237. <p class="text-right small">HTML by @Pinky</p>
  238. </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!