API tools faq
paste
lowkeywicked

Freebie - Muted

lowkeywicked
Jul 3rd, 2020 (edited)
9,943
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.14 KB | None | 0 0
raw download clone embed print report
  1. <div class="container px-0 pt-4" style="max-width:885px; font-size: 10pt;">
  2. <div class="card bg-faded p-md-3 p-2 mb-2" style="border-radius: 1em;">
  3. <div class="row no-gutters">
  4. <div class="col-md-4 mb-md-0 mb-3 pr-md-2">
  5. <!--------- SIDE STATS -------------------------------------------------------->
  6. <div class="card rounded-0 modal-open h-100" style="border-radius: 1em;">
  7. <!------ focal image -- will scale with screen -- focus in top center of image------->
  8. <div style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/23471745_uDJmehms0JPTUHv.png);
  9. background-size: cover; background-position: center 0; background-repeat: no-repeat; min-height: 280px;" class="mb-3"></div>
  10. <div class="mt-auto w-100">
  11. <!---- stats section --- you can chang the font awesome icons to do different stats --->
  12. <div class="px-3 d-flex align-items-center mb-3">
  13. <div class="bg-faded p-1 rounded">
  14. <i class="fal fa-user fa-fw" />
  15. </div><div class="pl-2 text-muted text-muted">
  16. name here
  17. </div>
  18. </div>
  19.  
  20. <div class="px-3 d-flex align-items-center mb-3">
  21. <div class="bg-faded p-1 rounded">
  22. <i class="fal fa-calendar-alt fa-fw" />
  23. </div><div class="pl-2 text-muted">
  24. age here
  25. </div>
  26. </div>
  27.  
  28. <div class="px-3 d-flex align-items-center mb-3">
  29. <div class="bg-faded p-1 rounded">
  30. <i class="fal fa-venus-mars fa-fw" />
  31. </div><div class="pl-2 text-muted">
  32. gender here
  33. </div>
  34. </div>
  35.  
  36. <div class="px-3 d-flex align-items-center mb-3">
  37. <div class="bg-faded p-1 rounded">
  38. <i class="fal fa-dna fa-fw" />
  39. </div><div class="pl-2 text-muted">
  40. race/species here
  41. </div>
  42. </div>
  43.  
  44. <div class="px-3 d-flex align-items-center mb-3">
  45. <div class="bg-faded p-1 rounded">
  46. <i class="fal fa-ruler fa-fw" />
  47. </div><div class="pl-2 text-muted">
  48. height here
  49. </div>
  50. </div>
  51.  
  52. <div class="px-3 d-flex align-items-center mb-3">
  53. <div class="bg-faded p-1 rounded">
  54. <i class="fal fa-balance-scale fa-fw" />
  55. </div><div class="pl-2 text-muted">
  56. MBTI here
  57. </div>
  58. </div>
  59.  
  60. </div>
  61. </div>
  62. </div>
  63. <!--------- CONTENT AREA -------------------------------------------------------->
  64. <div class="col-md-8 pl-md-2">
  65. <div class="card pt-3 px-2 pb-1" style="border-radius: 1em; height: 565px; overflow: auto;">
  66. <!--- header block ---------------->
  67. <div class="bg-faded px-2 py-1 mb-2" style="font-size: 1.5em; font-weight: 300; letter-spacing: 1px; border-radius: 0.5em;"><div class="justify-content-between">
  68. <div>About</div>
  69. <div><i class="fal fa-bookmark fa-fw" /></div>
  70. </div></div>
  71. <!--- content block ---------------->
  72. <div class="text-muted px-2 mb-3">
  73. <p>Cupcake ipsum dolor sit amet. Toffee chocolate cake caramels brownie dessert pudding cake. Dragée sesame snaps pie cupcake macaroon croissant icing. Pudding candy candy apple pie cake wafer macaroon cotton candy pie. Lemon drops caramels brownie chocolate bonbon jelly beans topping caramels halvah. Tootsie roll wafer sweet oat cake tootsie roll chocolate cake cheesecake tootsie roll. Cotton candy gummies carrot cake. Marzipan gummi bears brownie. Liquorice cake lemon drops jelly dragée bonbon jelly-o chocolate cake pastry. Marshmallow chupa chups wafer bonbon marshmallow. Icing carrot cake tart sesame snaps. Donut powder donut cotton candy sweet oat cake chocolate bar. Soufflé brownie pastry. Jelly brownie sweet.</p>
  74. </div>
  75.  
  76. <div><div class="row no-gutters">
  77. <div class="col-md-6 pr-md-1">
  78. <!--- header block ---------------->
  79. <div class="bg-faded px-2 py-1 mb-2" style="font-size: 1.5em; font-weight: 300; letter-spacing: 1px; border-radius: 0.5em;"><div class="justify-content-between">
  80. <div>Traits</div>
  81. <div><i class="fal fa-heartbeat fa-fw" /></div>
  82. </div></div>
  83. <ul class="mb-3 pl-4 text-muted">
  84. <li class="mb-1">personality traits</li>
  85. <li class="mb-1">two</li>
  86. <li class="mb-1">three</li>
  87. <li class="mb-1">four</li>
  88. </ul>
  89. </div>
  90. <div class="col-md-6 pl-md-1"><div>
  91. <!--- header block ---------------->
  92. <div class="bg-faded px-2 py-1 mb-2" style="font-size: 1.5em; font-weight: 300; letter-spacing: 1px; border-radius: 0.5em;"><div class="justify-content-between">
  93. <div>Likes</div>
  94. <div><i class="fal fa-plus-circle fa-fw" /></div>
  95. </div></div>
  96. <ul class="mb-3 pl-4 text-muted">
  97. <li class="mb-1">things they like</li>
  98. <li class="mb-1">two</li>
  99. <li class="mb-1">three</li>
  100. <li class="mb-1">four</li>
  101. </ul>
  102. </div>
  103. </div></div>
  104.  
  105. <!--- header block ---------------->
  106. <div class="bg-faded px-2 py-1 mb-2" style="font-size: 1.5em; font-weight: 300; letter-spacing: 1px; border-radius: 0.5em;"><div class="justify-content-between">
  107. <div>Background</div>
  108. <div><i class="fal fa-books fa-fw" /></div>
  109. </div></div>
  110. <!--- content block ---------------->
  111. <div class="text-muted px-2 mb-3">
  112. <p>Cupcake ipsum dolor sit amet. Toffee chocolate cake caramels brownie dessert pudding cake. Dragée sesame snaps pie cupcake macaroon croissant icing. Pudding candy candy apple pie cake wafer macaroon cotton candy pie. Lemon drops caramels brownie chocolate bonbon jelly beans topping caramels halvah. Tootsie roll wafer sweet oat cake tootsie roll chocolate cake cheesecake tootsie roll. Cotton candy gummies carrot cake. Marzipan gummi bears brownie. Liquorice cake lemon drops jelly dragée bonbon jelly-o chocolate cake pastry. Marshmallow chupa chups wafer bonbon marshmallow. Icing carrot cake tart sesame snaps. Donut powder donut cotton candy sweet oat cake chocolate bar. Soufflé brownie pastry. Jelly brownie sweet.</p>
  113.  
  114. <p>Cupcake ipsum dolor sit amet. Toffee chocolate cake caramels brownie dessert pudding cake. Dragée sesame snaps pie cupcake macaroon croissant icing. Pudding candy candy apple pie cake wafer macaroon cotton candy pie. Lemon drops caramels brownie chocolate bonbon jelly beans topping caramels halvah. Tootsie roll wafer sweet oat cake tootsie roll chocolate cake cheesecake tootsie roll. Cotton candy gummies carrot cake. Marzipan gummi bears brownie. Liquorice cake lemon drops jelly dragée bonbon jelly-o chocolate cake pastry. Marshmallow chupa chups wafer bonbon marshmallow. Icing carrot cake tart sesame snaps. Donut powder donut cotton candy sweet oat cake chocolate bar. Soufflé brownie pastry. Jelly brownie sweet.</p>
  115. </div>
  116.  
  117. <!--- header block ---------------->
  118. <div class="bg-faded px-2 py-1 mb-2" style="font-size: 1.5em; font-weight: 300; letter-spacing: 1px; border-radius: 0.5em;"><div class="justify-content-between">
  119. <div>Trivia</div>
  120. <div><i class="fal fa-list-alt fa-fw" /></div>
  121. </div></div>
  122. <!--- content block ---------------->
  123. <div class="text-muted px-2 mb-3">
  124. <ul class="pl-4 mb-0 text-muted">
  125. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
  126. <li class="mb-2">Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra</li>
  127. <li class="mb-2">Donec non dui id augue pellentesque aliquam et eget felis</li>
  128. <li class="mb-2">Aliquam erat volutpat. Nulla nulla augue, vehicula id volutpat nec, auctor et ipsum</li>
  129. <li class="mb-2">Pretium non libero eu ultricies</li>
  130. </ul>
  131. </div>
  132.  
  133. <!--- header block ---------------->
  134. <div class="bg-faded px-2 py-1 mb-2" style="font-size: 1.5em; font-weight: 300; letter-spacing: 1px; border-radius: 0.5em;"><div class="justify-content-between">
  135. <div>Related</div>
  136. <div><i class="fal fa-users fa-fw" /></div>
  137. </div></div>
  138. <!--- content block ---------------->
  139. <div class="px-2 text-muted">
  140. <div class="row no-gutters">
  141. <!--- character section ---------->
  142. <div class="col-12 mb-3">
  143. <a href="CHARACTER_LINK" target="_BLANK">
  144. <!--- character image -------->
  145. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/23471735_uVZLl4qpjPREyqr.png"
  146. style="max-height: 150px; border-radius: 0.5em;" class="float-md-right ml-md-2 d-block mx-auto mb-2" />
  147. </a>
  148. <div class="text-md-left text-center">
  149. <p style="font-size: 1.15em; letter-spacing: 1px;" class="mb-2">
  150. Character Name
  151. </p><p>
  152. <!-- change the font awesome icon to fit their realtionship ---->
  153. <i class="fas fa-heart fa-fw" /> <i style="letter-spacing: 1px;">relationship</i> <br />
  154.  
  155. Cupcake ipsum dolor sit amet. Toffee chocolate cake caramels brownie dessert pudding cake. Dragée sesame snaps pie cupcake macaroon croissant icing. Pudding candy candy apple pie cake wafer macaroon cotton candy pie.</p>
  156. </div>
  157. </div>
  158.  
  159. <!--- character section ---------->
  160. <div class="col-12 mb-3">
  161. <a href="CHARACTER_LINK" target="_BLANK">
  162. <!--- character image -------->
  163. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/23471735_uVZLl4qpjPREyqr.png"
  164. style="max-height: 150px; border-radius: 0.5em;" class="float-md-right ml-md-2 d-block mx-auto mb-2" />
  165. </a>
  166. <div class="text-md-left text-center">
  167. <p style="font-size: 1.15em; letter-spacing: 1px;" class="mb-2">
  168. Character Name
  169. </p><p>
  170. <!-- change the font awesome icon to fit their realtionship ---->
  171. <i class="fas fa-skull fa-fw" /> <i style="letter-spacing: 1px;">relationship</i> <br />
  172.  
  173. Cupcake ipsum dolor sit amet. Toffee chocolate cake caramels brownie dessert pudding cake. Dragée sesame snaps pie cupcake macaroon croissant icing. Pudding candy candy apple pie cake wafer macaroon cotton candy pie.</p>
  174. </div>
  175. </div>
  176.  
  177. <!--- character section ---------->
  178. <div class="col-12 mb-3">
  179. <a href="CHARACTER_LINK" target="_BLANK">
  180. <!--- character image -------->
  181. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/23471735_uVZLl4qpjPREyqr.png"
  182. style="max-height: 150px; border-radius: 0.5em;" class="float-md-right ml-md-2 d-block mx-auto mb-2" />
  183. </a>
  184. <div class="text-md-left text-center">
  185. <p style="font-size: 1.15em; letter-spacing: 1px;" class="mb-2">
  186. Character Name
  187. </p><p>
  188. <!-- change the font awesome icon to fit their realtionship ---->
  189. <i class="fas fa-question fa-fw" /> <i style="letter-spacing: 1px;">relationship</i> <br />
  190.  
  191. Cupcake ipsum dolor sit amet. Toffee chocolate cake caramels brownie dessert pudding cake. Dragée sesame snaps pie cupcake macaroon croissant icing. Pudding candy candy apple pie cake wafer macaroon cotton candy pie.</p>
  192. </div>
  193. </div>
  194. </div>
  195. </div>
  196.  
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201. </div>
  202. <p class="small text-right text-right">HTML by @Pinky</p>
  203. </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!