API tools faq
paste
Advertisement
Delaii

EDITED CODE

Delaii
May 18th, 2019
122
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.68 KB | None | 0 0
raw download clone embed print report
  1. <div class="container px-0">
  2. <div class="row">
  3. <!--------------------------- LEFT COLUMN ------------------------------------------------------>
  4. <div class="col-lg-4 col-md-5 pr-md-1 mb-4">
  5. <div class="bg-faded py-2 h-100">
  6. <!----------------- USE A SQUARE AVATAR -------------------------->
  7. <img src="IMG%20URL" class="bg-primary p-2 d-block mx-auto mt-4 fr-fic fr-dib" style="max-height: 200px;" width="14">
  8. <div class="card-block">
  9. <div class="row">
  10. <!--------------------------- BASIC STATS --------------------------------->
  11. <div class="col-12 mb-3"><span class="text-uppercase">Name</span>
  12. <span class="pull-right">content</span>
  13. <hr class="mt-2 mb-0">
  14. </div>
  15. <div class="col-12 mb-3"><span class="text-uppercase">Age</span>
  16. <span class="pull-right">content</span>
  17. <hr class="mt-2 mb-0">
  18. </div>
  19. <div class="col-12 mb-3"><span class="text-uppercase">Gender</span>
  20. <span class="pull-right">content</span>
  21. <hr class="mt-2 mb-0">
  22. </div>
  23. <div class="col-12 mb-3"><span class="text-uppercase">Height</span>
  24. <span class="pull-right">content</span>
  25. <hr class="mt-2 mb-0">
  26. </div>
  27. <div class="col-12 mb-3"><span class="text-uppercase">Build</span>
  28. <span class="pull-right">content</span>
  29. <hr class="mt-2 mb-0">
  30. </div>
  31. <div class="col-12 mb-3"><span class="text-uppercase">Race</span>
  32. <span class="pull-right">content</span>
  33. <hr class="mt-2 mb-0">
  34. </div>
  35. <div class="col-12"><span class="text-uppercase">Role</span>
  36. <span class="pull-right">content</span></div>
  37. </div>
  38. </div>
  39.  
  40. <h1 class="bg-primary text-white text-uppercase p-2 mr-4" style="letter-spacing: 1px; margin-left:-10px;">Character</h1>
  41. <div class="card-block">
  42. <!------------------------ STATS -- USE PRIMARY FOR COLOR -- MUTED FOR FADED ------------------->
  43. <div class="row">
  44. <div class="col-12 mb-4"><span class="text-uppercase">Charisma</span>
  45. <span class="pull-right"><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-muted mx-1"></i><i class="fas fa-star text-muted mx-1"></i></span></div>
  46. <div class="col-12 mb-4"><span class="text-uppercase">Kindness</span>
  47. <span class="pull-right"><i class="fas fa-star text-muted mx-1"></i><i class="fas fa-star text-muted mx-1"></i><i class="fas fa-star text-muted mx-1"></i><i class="fas fa-star text-muted mx-1"></i><i class="fas fa-star text-muted mx-1"></i></span></div>
  48. <div class="col-12 mb-4"><span class="text-uppercase">Temper</span>
  49. <span class="pull-right"><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-primary mx-1"></i></span></div>
  50. <div class="col-12 mb-4"><span class="text-uppercase">Integrity</span>
  51. <span class="pull-right"><i class="fas fa-star text-muted mx-1"></i><i class="fas fa-star text-muted mx-1"></i><i class="fas fa-star text-muted mx-1"></i><i class="fas fa-star text-muted mx-1"></i><i class="fas fa-star text-muted mx-1"></i></span></div>
  52. <div class="col-12 mb-4"><span class="text-uppercase">Confidence</span>
  53. <span class="pull-right"><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-primary mx-1"></i></span></div>
  54. <div class="col-12 mb-4"><span class="text-uppercase">Intellect</span>
  55. <span class="pull-right"><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-muted mx-1"></i><i class="fas fa-star text-muted mx-1"></i></span></div>
  56. <div class="col-12 mb-4"><span class="text-uppercase">Humour</span>
  57. <span class="pull-right"><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-primary mx-1"></i><i class="fas fa-star text-muted mx-1"></i></span></div>
  58. </div>
  59. </div>
  60. <!---------------------------- NOTE SECTION ------------------------------------------------------>
  61.  
  62. <h1 class="bg-primary text-white text-uppercase p-2 mr-4" style="letter-spacing: 1px; margin-left:-10px;">Notes</h1>
  63. <div class="card-block">
  64.  
  65. <ul class="mb-0">
  66. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  67. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  68. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  69. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  70. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  71. </ul>
  72. </div>
  73. </div>
  74. </div>
  75. <!--------------------------- RIGHT COLUMN ------------------------------------------------------>
  76. <div class="col-lg-8 col-md-7 pl-md-0 pl-4">
  77. <!------------------------ CHARACTER NAME ---------------------------------------------->
  78.  
  79. <h1 class="text-uppercase ml-2 mb-2" style="font-weight:800; letter-spacing:1px; font-family:helvetica; font-size: 3em;">Name</h1>
  80. <!------------------------ ABOUT SECTION ---------------------------------------------->
  81.  
  82. <h1 class="bg-primary text-white text-uppercase p-2 mr-4" style="letter-spacing: 1px; margin-left:-15px;">About</h1>
  83. <div class="pl-md-4 pt-2 pb-4">
  84. <!-------------------- CONTENT BLOCK -------------------------------->
  85. <div class="card card-outline-secondary card-block rounded-0 pt-2" style="height: 280px; overflow:auto; padding-bottom:5px; font-size: .95em;">
  86.  
  87. <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. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper.</p>
  88.  
  89. <p>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. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper. In gravida libero consectetur, lobortis nisl sit amet, pellentesque ligula. Suspendisse tincidunt feugiat posuere.</p>
  90. </div>
  91. </div>
  92. <!------------------------ PREFS SECTION ---------------------------------------------->
  93.  
  94. <h1 class="bg-primary text-white text-uppercase p-2 mr-4" style="letter-spacing: 1px; margin-left:-15px;">Preferences</h1>
  95. <div class="pl-md-4 pt-2 pb-4">
  96. <!-------------------- CONTENT BLOCK -------------------------------->
  97. <div class="card card-outline-secondary card-block pt-2 pb-1 rounded-0">
  98. <div class="row">
  99. <div class="col-sm-6 mb-2">
  100.  
  101. <p class="text-uppercase">Likes</p>
  102.  
  103. <ul class="mb-0">
  104. <li class="mb-2">content</li>
  105. <li class="mb-2">content</li>
  106. <li class="mb-2">content</li>
  107. <li>content</li>
  108. </ul>
  109. </div>
  110. <div class="col-sm-6 mb-2">
  111.  
  112. <p class="text-uppercase">Dislikes</p>
  113.  
  114. <ul class="mb-0">
  115. <li class="mb-2">content</li>
  116. <li class="mb-2">content</li>
  117. <li class="mb-2">content</li>
  118. <li>content</li>
  119. </ul>
  120. </div>
  121. </div>
  122. </div>
  123. </div>
  124. <!------------------------ BACKGROUND SECTION ---------------------------------------------->
  125.  
  126. <h1 class="bg-primary text-white text-uppercase p-2 mr-4" style="letter-spacing: 1px; margin-left:-15px;">Background</h1>
  127. <div class="pl-md-4 pt-2 pb-4">
  128. <!-------------------- CONTENT BLOCK -------------------------------->
  129. <div class="card card-outline-secondary card-block rounded-0 pt-2" style="height: 350px; overflow:auto; padding-bottom:5px; font-size: .95em;">
  130.  
  131. <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. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper. In gravida libero consectetur, lobortis nisl sit amet, pellentesque ligula. Suspendisse tincidunt feugiat posuere.</p>
  132.  
  133. <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. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper. In gravida libero consectetur, lobortis nisl sit amet, pellentesque ligula. Suspendisse tincidunt feugiat posuere.</p>
  134.  
  135. <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. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper. In gravida libero consectetur, lobortis nisl sit amet, pellentesque ligula. Suspendisse tincidunt feugiat posuere.</p>
  136. </div>
  137. </div>
  138. <!------------------------ LINKS SECTION ---------------------------------------------->
  139.  
  140. <h1 class="bg-primary text-white text-uppercase p-2 mr-4" style="letter-spacing: 1px; margin-left:-15px;">Links</h1>
  141. <div class="pl-md-4 pt-2 pb-4">
  142. <!-------------------- CONTENT BLOCK -------------------------------->
  143. <div class="card card-outline-secondary card-block rounded-0 pt-2" style="height: 250px; overflow:auto; padding-bottom:5px; font-size: .95em;">
  144. <div class="row">
  145. <!-------------------------- CHARACTER -------------------------------------------->
  146. <div class="col-lg-6 mb-3">
  147.  
  148. <p class="mb-0"><span class="text-uppercase">Name</span>
  149. <span class="pull-right"><em>relationship</em></span></p>
  150. <hr class="mt-0">
  151. <a href="CHARACTER%20LINK"><img src="IMG%20URL" class="float-right ml-sm-1 rounded-circle fr-fir fr-dib" style="max-height: 100px; max-width: 100px;" width="16" height="16"></a>
  152.  
  153. <p style="font-size: .92em;">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>
  154. </div>
  155. <!-------------------------- CHARACTER -------------------------------------------->
  156. <div class="col-lg-6 mb-3">
  157.  
  158. <p class="mb-0"><span class="text-uppercase">Name</span>
  159. <span class="pull-right"><em>relationship</em></span></p>
  160. <hr class="mt-0">
  161. <a href="CHARACTER%20LINK"><img src="IMG%20URL" class="float-right ml-sm-1 rounded-circle fr-fir fr-dib" style="max-height: 100px; max-width: 100px;" width="16" height="16"></a>
  162.  
  163. <p style="font-size: .92em;">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>
  164. </div>
  165. <!-------------------------- CHARACTER -------------------------------------------->
  166. <div class="col-lg-6 mb-3">
  167.  
  168. <p class="mb-0"><span class="text-uppercase">Name</span>
  169. <span class="pull-right"><em>relationship</em></span></p>
  170. <hr class="mt-0">
  171. <a href="CHARACTER%20LINK"><img src="IMG%20URL" class="float-right ml-sm-1 rounded-circle fr-fir fr-dib" style="max-height: 100px; max-width: 100px;" width="16" height="16"></a>
  172.  
  173. <p style="font-size: .92em;">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>
  174. </div>
  175. <!-------------------------- CHARACTER -------------------------------------------->
  176. <div class="col-lg-6 mb-3">
  177.  
  178. <p class="mb-0"><span class="text-uppercase">Name</span>
  179. <span class="pull-right"><em>relationship</em></span></p>
  180. <hr class="mt-0">
  181. <a href="CHARACTER%20LINK"><img src="IMG%20URL" class="float-right ml-sm-1 rounded-circle fr-fir fr-dib" style="max-height: 100px; max-width: 100px;" width="16" height="16"></a>
  182.  
  183. <p style="font-size: .92em;">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>
  184. </div>
  185. </div>
  186. </div>
  187. </div>
  188. </div>
  189. </div>
  190. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!