API tools faq
paste
MCDogWarrior

Partners in crime [Custom]

MCDogWarrior
Sep 6th, 2021 (edited)
149
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.70 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid" style="max-width:1100px;">
  2. <!--Background image-->
  3. <div class="card rounded-0 border-0 p-1" style="background-image:url( IMG LINK ); background-size:cover; background-position: center;">
  4. <div class="row no-gutters">
  5. <div class="col-4 p-1">
  6. <!--Main box, character 1-->
  7. <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#81AADC; border-top-left-radius:15px;">
  8. <!--Character 1 image-->
  9. <a class="card rounded-0 border-0 p-2" style="background-image:url( IMG LINK ); background-size:cover; background-position: center; border-top-left-radius:15px; height:150px" href=" LINK ">
  10. </a>
  11. <!--Name box-->
  12. <div class="card bg-faded rounded-0 ml-1 mr-1 my-1" style="background-color:#6079C5; border:5px solid #425AA4">
  13. <p style="font-size: 45px; text-align: center; letter-spacing: 2px;" class="mb-1"><strong>NAME</strong></p>
  14. </div>
  15. <!--Age-->
  16. <div class="card bg-faded rounded-0 border-0 p-1 mt-1 mr-2 ml-2" style="background-color:#425AA4;">
  17. <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Age</strong></span> <i>info</i></div>
  18. </div>
  19. <!--Gender-->
  20. <div class="card bg-faded rounded-0 border-0 p-1 my-1 mr-2 ml-2" style="background-color:#425AA4;">
  21. <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Gender</strong></span> <i>info</i></div>
  22. </div>
  23. <!--Orientation-->
  24. <div class="card bg-faded rounded-0 border-0 p-1 mr-2 ml-2 mb-1" style="background-color:#425AA4;">
  25. <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Orientation</strong></span> <i>info</i></div>
  26. </div>
  27. <!--Species-->
  28. <div class="card bg-faded rounded-0 border-0 p-1 mb-1 mr-2 ml-2" style="background-color:#425AA4;">
  29. <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Species</strong></span> <i>info</i></div>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="col-4 p-1">
  34. <!--Middle image-->
  35. <div class="card rounded-0 my-5" style="background-image:url( IMG LINK ); background-size:cover; background-position: center; border:5px solid #425AA4; height:291px">
  36. <!--Translucent filter over image-->
  37. <div class="card bg-faded rounded-0 border-0" style="background-color:rgba(68,91,164,0.65); height:291px">
  38. <!--Compassion-->
  39. <div class="card bg-faded rounded-0 border-0 p-1 mt-4 mr-2 ml-2" style="background-color:#445BA4;">
  40. <p style="font-size: 15px; text-align: center; letter-spacing: 1px;">Compassion</p>
  41. <div class="progress bg-dark rounded">
  42. <!--Percent-->
  43. <div class="progress-bar" style="width: 50%; height: 12px; background-color: #65DAED">
  44. </div>
  45. </div>
  46. </div>
  47. <!--Companionship-->
  48. <div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#445BA4;">
  49. <p style="font-size: 15px; text-align: center; letter-spacing: 1px;">Companionship</p>
  50. <div class="progress bg-dark rounded">
  51. <!--Percent-->
  52. <div class="progress-bar" style="width: 50%; height: 12px; background-color: #65DAED">
  53. </div>
  54. </div>
  55. </div>
  56. <!--Trust-->
  57. <div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#445BA4;">
  58. <p style="font-size: 15px; text-align: center; letter-spacing: 1px;">Trust</p>
  59. <div class="progress bg-dark rounded">
  60. <!--Percent-->
  61. <div class="progress-bar" style="width: 50%; height: 12px; background-color: #65DAED">
  62. </div>
  63. </div>
  64. </div>
  65. <!--Honesty-->
  66. <div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#445BA4;">
  67. <p style="font-size: 15px; text-align: center; letter-spacing: 1px;">Honesty</p>
  68. <div class="progress bg-dark rounded">
  69. <!--Percent-->
  70. <div class="progress-bar" style="width: 50%; height: 12px; background-color: #65DAED">
  71. </div>
  72. </div>
  73. </div>
  74. <!--Understanding-->
  75. <div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#445BA4;">
  76. <p style="font-size: 15px; text-align: center; letter-spacing: 1px;">Understanding</p>
  77. <div class="progress bg-dark rounded">
  78. <!--Percent-->
  79. <div class="progress-bar" style="width: 50%; height: 12px; background-color: #65DAED">
  80. </div>
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. <div class="col-4 p-1">
  87. <!--Main box, character 2-->
  88. <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#81AADC; border-top-right-radius:15px;">
  89. <!--Character 2 image-->
  90. <a class="card rounded-0 border-0 p-2" style="background-image:url( IMG LINK ); background-size:cover; background-position: center; border-top-right-radius:15px; height:150px" href=" LINK ">
  91. </a>
  92. <!--Name box-->
  93. <div class="card bg-faded rounded-0 ml-1 mr-1 my-1" style="background-color:#6079C5; border:5px solid #425AA4">
  94. <p style="font-size: 45px; text-align: center; letter-spacing: 2px;" class="mb-1"><strong>NAME</strong></p>
  95. </div>
  96. <!--Age-->
  97. <div class="card bg-faded rounded-0 border-0 p-1 mt-1 mr-2 ml-2" style="background-color:#425AA4;">
  98. <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Age</strong></span> <i>info</i></div>
  99. </div>
  100. <!--Gender-->
  101. <div class="card bg-faded rounded-0 border-0 p-1 my-1 mr-2 ml-2" style="background-color:#425AA4;">
  102. <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Gender</strong></span> <i>info</i></div>
  103. </div>
  104. <!--Orientation-->
  105. <div class="card bg-faded rounded-0 border-0 p-1 mr-2 ml-2 mb-1" style="background-color:#425AA4;">
  106. <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Orientation</strong></span> <i>info</i></div>
  107. </div>
  108. <!--Species-->
  109. <div class="card bg-faded rounded-0 border-0 p-1 mb-1 mr-2 ml-2" style="background-color:#425AA4;">
  110. <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Species</strong></span> <i>info</i></div>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. <div class="row no-gutters">
  116. <div class="col-6 mt-1 p-2">
  117. <!--History main box-->
  118. <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#81AADC;">
  119. <!--Header-->
  120. <div class="card bg-faded rounded-0 mx-auto my-1" style="background-color:#6079C5; border:5px solid #425AA4; width:400px">
  121. <p style="font-size: 30px; text-align: center; letter-spacing: 2px;"><strong>HISTORY</strong></p>
  122. </div>
  123. <!--Text box-->
  124. <div class="card bg-faded rounded-0 border-0" style="background-color:#81AADC; height:250px; overflow:auto;">
  125. <p style="text-align: left; font-size: 15px; color:#23479B">How the characters met, how they got into their relationship, so on and so forth. Basically put how the characters got to know eachother and why they're still friends now</p>
  126. <a style="text-align: left; font-size: 15px; color:#23479B">And yes, of course- to everyone's surprise- the box scrolls. Also you can change this box to anything else if there's not much history to these 2. idk man</p>
  127. </div>
  128. </div>
  129. </div>
  130. <div class="col-6 mt-1 p-2">
  131. <!--Extra info/About main box-->
  132. <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#81AADC;">
  133. <!--Header-->
  134. <div class="card bg-faded rounded-0 mx-auto my-1" style="background-color:#6079C5; border:5px solid #425AA4; width:400px">
  135. <p style="font-size: 30px; text-align: center; letter-spacing: 2px;"><strong>ABOUT</strong></p>
  136. </div>
  137. <!--Text box-->
  138. <div class="card bg-faded rounded-0 border-0" style="background-color:#81AADC; height:250px; overflow:auto;">
  139. <p style="text-align: left; font-size: 15px; color:#23479B">How the characters feel about eachother basically. Their dynamic and stuff. Anything else you want to note about the relationship.</p>
  140. <a style="text-align: left; font-size: 15px; color:#23479B">Don't worry, the box here also scrolls</p>
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. <div class="row no-gutters p-1">
  146. <div class="col-3">
  147. <!--Bottom left box-->
  148. <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#81AADC; border-bottom-left-radius:15px;">
  149. <!--Type of relationship-->
  150. <div class="card bg-faded rounded-0 border-0 p-1 mt-1 mr-2 ml-2" style="background-color:#425AA4;">
  151. <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Type</strong></span> <i>info</i></div>
  152. </div>
  153. <!--Relationship status-->
  154. <div class="card bg-faded rounded-0 border-0 p-1 my-1 mr-2 ml-2" style="background-color:#425AA4;">
  155. <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Status</strong></span> <i>info</i></div>
  156. </div>
  157. </div>
  158. </div>
  159. <div class="col-5">
  160. <!--Quote background-->
  161. <div class="card rounded-0" style="background-image:url( IMG LINK ); background-size:cover; background-position: center; height:80px; border:1px solid #425AA4;">
  162. <!--Filter over bg-->
  163. <div class="card bg-faded rounded-0" style="background-color:rgba(68,91,164,0.75); height:291px">
  164. <!--Quote-->
  165. <p style="font-size: 25px; text-align: center; letter-spacing: 1px;">"Quote..."</p>
  166. </div>
  167. </div>
  168. </div>
  169. <div class="col-4">
  170. <!--Bottom right box-->
  171. <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#81AADC; border-bottom-right-radius:15px;">
  172. <!--Age difference-->
  173. <div class="card bg-faded rounded-0 border-0 p-1 mt-1 mr-2 ml-2" style="background-color:#425AA4;">
  174. <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Age difference</strong></span> <i>info</i></div>
  175. </div>
  176. <!--Height difference-->
  177. <div class="card bg-faded rounded-0 border-0 p-1 my-1 mr-2 ml-2" style="background-color:#425AA4;">
  178. <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Height difference</strong></span> <i>info</i></div>
  179. </div>
  180. </div>
  181. </div>
  182. </div>
  183. <!--Code credit DO NOT REMOVE/ALTER-->
  184. <p style="text-align: right;"><span style="font-size: 9px;">Code by <a href="https://toyhou.se/MCDogResource">MCDogWarrior</a></span></p>
  185. </div>
  186. </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!