API tools faq
paste
Advertisement
circlejourney

Blood or Tears (Tears)

circlejourney
Oct 11th, 2023 (edited)
67
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.87 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. Blood or Tears (Tears) by Circlejourney. See my codes here:
  3. https://toyhou.se/orchestrator/characters/folder:524040
  4. -->
  5.  
  6. <div class="card" id="tears" style="background-image: linear-gradient(to bottom, #C5E9E6, #CEEDEA); background-size: 20%, cover; color: #0F0F12;">
  7.  
  8.  
  9. <!-- Pagedoll -->
  10. <img style="position: absolute; bottom: 5px; right: 5px; height: 120px;" src="https://rebuild.circlejourney.net/images/df/teamtearsmascot.png">
  11.  
  12. <!-- Credits -->
  13. <div style="position: absolute; bottom: 0; left: 5px; font-size: 9pt; opacity: 0.7;">
  14. <a href="https://toyhou.se/orchestrator/characters/folder:524040" style="color: #24506B">Theme by Circlejourney</a>, art by @TenTen, logos by @YoctoCrunch
  15. </div>
  16.  
  17.  
  18. <div class="d-flex align-items-center py-2">
  19. <div class="flex-grow-1" style="border-top: 4px solid #0F0F12; border-bottom: 4px solid #0F0F12; height: 12px;"></div>
  20.  
  21. <div class="team-title m-2 w-25 d-flex flex-column" style="min-width: 150px;">
  22.  
  23. <img class="d-block mb-2" src="https://rebuild.circlejourney.net/images/df/teamtearslogolong.png">
  24.  
  25. <p class="subheading text-center text-white d-inline-block" style="border-radius: 10px; background-color: #0F0F12;">
  26. User • Your username
  27. </p>
  28.  
  29. </div>
  30.  
  31. <div class="flex-grow-1" style="border-top: 4px solid #0F0F12; border-bottom: 4px solid #0F0F12; height: 12px;"></div>
  32. </div>
  33.  
  34. <div class="row p-4">
  35.  
  36. <!-- Character 1 + 2 column -->
  37. <div class="col-12 col-lg-8">
  38. <div class="row no-gutters nav">
  39. <div class="col-12 col-lg-4 flex-column">
  40.  
  41. <!-- Character 1 portrait. Update href, background-image to preference. Remove border if not ace character/pair. -->
  42. <a href="#CHARACTER-1-LINK"
  43. style="background-image: url(https://rebuild.circlejourney.net/images/df/teamtearsmascot.png);
  44. border: 4px solid #1E897F;
  45.  
  46. background-size: cover; background-position: top; text-decoration: none; background-color: grey; height: 300px;"
  47. class="flex-column justify-content-end text-center w-100"
  48. target="_blank">
  49.  
  50. <span class="char-label text-white pt-5 pb-3" style="font-size: 13pt; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); line-height: 1.2em;">
  51.  
  52. Character 1 Name
  53.  
  54. <span style="color: #B4E5E0">⭑ace</span>
  55. <span style="color: #B4E5E0">⭑ace pair</span>
  56.  
  57. </span>
  58. </a>
  59.  
  60.  
  61.  
  62. <!-- Clickable relationship button that opens the notes tab. Delete this block if you don't need it. -->
  63. <div class="d-flex align-items-center justify-content-center text-center" style="height: 0; z-index: 2;">
  64. <a href="#tears-1" class="d-block text-white" data-toggle="collapse" style="padding: 0.1rem; font-size: 13pt; border-radius: 10px; background-color: #1E897F;">
  65.  
  66. <i class="relationship-arrows fa fa-arrows-up-down"></i>
  67.  
  68. Relationship 1
  69.  
  70. </a>
  71. </div>
  72.  
  73.  
  74.  
  75. <!-- Character 2 portrait. Update href, background-image to preference. Remove border if not ace character/pair. -->
  76. <a href="#CHARACTER-2-LINK"
  77. style="background-image: url(https://rebuild.circlejourney.net/images/df/teamtearsmascot.png);
  78. border: 4px solid #1E897F;
  79.  
  80. background-size: cover; background-position: top; text-decoration: none; background-color: grey; height: 300px;"
  81. class="flex-column justify-content-end text-center w-100"
  82. target="_blank">
  83.  
  84. <span class="char-label text-white pt-5 pb-3" style="font-size: 13pt; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); line-height: 1.2em;">
  85.  
  86. Character 2 Name
  87.  
  88. <span style="color: #B4E5E0">⭑ace pair</span>
  89.  
  90. </span>
  91. </a>
  92. </div>
  93.  
  94.  
  95.  
  96. <!-- Character 3 + 4 column -->
  97. <div class="col-12 col-lg-4 flex-column">
  98.  
  99. <!-- Character 3 portrait. Update href, background-image to preference. Remove border if not ace character/pair. -->
  100. <a href="#CHARACTER-3-LINK"
  101. style="background-image: url(https://rebuild.circlejourney.net/images/df/teamtearsmascot.png);
  102.  
  103. background-size: cover; background-position: top; text-decoration: none; background-color: grey; height: 300px;"
  104. class="flex-column justify-content-end text-center w-100"
  105. target="_blank">
  106.  
  107. <span class="char-label text-white pt-5 pb-3" style="font-size: 13pt; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); line-height: 1.2em;">
  108.  
  109. Character 3 Name
  110.  
  111. </span>
  112. </a>
  113.  
  114.  
  115. <!-- Clickable relationship button that opens the notes tab. Delete this block if you don't need it. -->
  116. <div class="d-flex align-items-center justify-content-center text-center" style="height: 0; z-index: 2;">
  117. <a href="#tears-2" class="d-block text-white" data-toggle="collapse" style="padding: 0.1rem; font-size: 13pt; border-radius: 10px; background-color: #1E897F;">
  118.  
  119. <i class="relationship-arrows fa fa-arrows-up-down"></i>
  120.  
  121. Relationship 2
  122.  
  123. </a>
  124. </div>
  125.  
  126.  
  127. <!-- Character 4 portrait. Update href, background-image to preference. -->
  128. <a href="#CHARACTER-4-LINK"
  129. style="background-image: url(https://rebuild.circlejourney.net/images/df/teamtearsmascot.png);
  130.  
  131. background-size: cover; background-position: top; text-decoration: none; background-color: grey; height: 300px;"
  132. class="flex-column justify-content-end text-center w-100"
  133. target="_blank">
  134.  
  135. <span class="char-label text-white pt-5 pb-3" style="font-size: 13pt; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); line-height: 1.2em;">
  136.  
  137. Character 4 Name
  138.  
  139. </span>
  140. </a>
  141. </div>
  142.  
  143.  
  144.  
  145. <!-- Character 5 + 6 column -->
  146. <div class="col-12 col-lg-4 flex-column">
  147.  
  148. <!-- Character 5 portrait. Update href, background-image to preference. -->
  149. <a href="#CHARACTER-5-LINK"
  150. style="background-image: url(https://rebuild.circlejourney.net/images/df/teamtearsmascot.png);
  151.  
  152. background-size: cover; background-position: top; text-decoration: none; background-color: grey; height: 300px;"
  153. class="flex-column justify-content-end text-center w-100"
  154. target="_blank">
  155.  
  156. <span class="char-label text-white pt-5 pb-3" style="font-size: 13pt; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); line-height: 1.2em;">
  157.  
  158. Character 5 Name
  159.  
  160. </span>
  161. </a>
  162.  
  163.  
  164. <!-- Clickable relationship button that opens the notes tab. Delete this block if you don't need it. -->
  165. <div class="d-flex align-items-center justify-content-center text-center" style="height: 0; z-index: 2;">
  166. <a href="#tears-3" class="d-block text-white" data-toggle="collapse" style="padding: 0.1rem; font-size: 13pt; border-radius: 10px; background-color: #1E897F;">
  167.  
  168. <i class="relationship-arrows fa fa-arrows-up-down"></i>
  169.  
  170. Relationship 3
  171.  
  172. </a>
  173. </div>
  174.  
  175.  
  176. <!-- Character 6 portrait. Update href, background-image to preference. -->
  177. <a href="#CHARACTER-6-LINK"
  178. style="background-image: url(https://rebuild.circlejourney.net/images/df/teamtearsmascot.png);
  179.  
  180. background-size: cover; background-position: top; text-decoration: none; background-color: grey; height: 300px;"
  181. class="flex-column justify-content-end text-center w-100"
  182. target="_blank">
  183.  
  184. <span class="char-label text-white pt-5 pb-3" style="font-size: 13pt; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); line-height: 1.2em;">
  185.  
  186. Character 6 Name
  187.  
  188. </span>
  189. </a>
  190. </div>
  191. </div>
  192.  
  193. </div>
  194.  
  195. <div class="info col-12 col-lg-4" style="padding-bottom: 100px;">
  196. <p>Usage notes. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
  197. <p>Click on the relationship labels to view more info about the characters / relationship. Click on the portraits to open their Toyhouse profiles.</p>
  198.  
  199. <br>
  200. <div id="tears-info">
  201. <div class="collapse" id="tears-1" data-parent="#tears-info">
  202. <h4 class="text-white d-inline-block p-1" style="padding: 0.1rem; background-color: #0F0F12;">
  203. Character 1 + Character 2
  204. </h4>
  205. <p>
  206. Relationship 1 info here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  207. </p>
  208. </div>
  209.  
  210. <div class="collapse" id="tears-2" data-parent="#tears-info">
  211. <h4 class="text-white d-inline-block p-1" style="padding: 0.1rem; background-color: #0F0F12;">
  212. Character 3 + Character 4
  213. </h4>
  214. <p>
  215. Relationship 2 info goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  216. </p>
  217. </div>
  218.  
  219. <div class="collapse" id="tears-3" data-parent="#tears-info">
  220. <h4 class="text-white d-inline-block p-1" style="padding: 0.1rem; background-color: #0F0F12;">
  221. Character 5 + Character 6
  222. </h4>
  223. <p>
  224. Relationship 3 info here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  225. </p>
  226. </div>
  227. </div>
  228. </div>
  229.  
  230. </div>
  231. </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!