API tools faq
paste
Advertisement
caticooties

yume fanfare (bs) code

caticooties
Jan 8th, 2021
44
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.18 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3. YUME FANFARE (BS) / by cati/dogboy
  4.  
  5. NOTES
  6. awesomefont icon: fas fa-heart and far fa-heart
  7. (use ctrl+f + replace for icon replacement)
  8. mobile friendly + bootstrap cplors! ✔✔✔
  9.  
  10. RULES & DISCLAIMERS
  11. - fav/comment if using pls!
  12. - not wysiwyg friendly so please turn that off!
  13. - feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
  14. - have a nice day!!
  15.  
  16. --->
  17.  
  18. <div class="container" style="background:none;max-width:1030px;margin:70px auto;">
  19. <div class="row">
  20. <!--- character 1 --->
  21. <div class="col-lg-4 p-2">
  22. <div class="card bg-primary" style="position:relative;border:0px;">
  23. <div class="text-center" style="z-index:2;">
  24. <div class="w-100 d-block mx-auto" style="position:absolute;">
  25. <!--- hearts and icon --->
  26. <i class="fas fa-heart m-3 text-danger" style="font-size:50px;"></i>
  27. <img class="rounded-circle" style="height:120px;width:120px;border:8px solid;margin-top:-55px;" src="https://64.media.tumblr.com/77f5f54c93594489577bc10d0649ca14/tumblr_prkkykQqUv1v1p4nw_400.jpg">
  28. <i class="fas fa-heart m-3 text-danger" style="font-size:50px;"></i>
  29. </div>
  30. </div>
  31. <div class="card" style="background:#FFF;z-index:1;border:0px;margin:13px;border-radius:0px;">
  32. <!--- name --->
  33. <h3 class="text-center p-3" style="margin-top:70px;color:#7268A6;font-weight:300;letter-spacing:0.09em;">
  34. <a href="URLHERE" class="text-dark" style="font-size:25px;">NAME OR TITLE HERE</a>
  35. </h3>
  36. </div>
  37. <div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:150px;overflow:auto;">
  38. <!--- anecdotal and description --->
  39. <p class="m-2 text-center text-dark" style="font-size:15px;font-weight:350;"><i class="m-1 fa-lg fas fa-quote-left float-left" />This box scrolls, so feel free to type as much as you'd like. It's supposed to be an anecdotal from the character, when you ask them about the other character!<i class="m-1 fa-lg fas fa-quote-right float-right" /></p>
  40. <hr class="text-dark" style="width:95%;">
  41. <p class="text-center text-dark" style="font-weight:350;font-size:13px;">
  42. A small description about the character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
  43. </p>
  44. </div>
  45. <div class="card p-2" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:180px;overflow:auto;">
  46. <div class="row no-gutters m-2">
  47. <!--- likes and dislikes --->
  48. <div class="col-lg-6">
  49. <h1 class="text-uppercase text-center text-dark" style="font-size:22px;letter-spacing:1px;font-weight:350;">LIKES <i class="fas fa-heart"></i></h1>
  50. <ul class="mt-2 text-dark">
  51. <li>content</li>
  52. <li>content</li>
  53. <li>content</li>
  54. <li>content</li>
  55. <li>content</li>
  56. </ul>
  57. </div>
  58. <div class="col-lg-6">
  59. <h1 class="text-uppercase text-center text-dark" style="font-size:22px;letter-spacing:1px;font-weight:350;">DISLIKES <i class="fas fa-heart-broken"></i></h1>
  60. <ul class="mt-2 text-dark">
  61. <li>content</li>
  62. <li>content</li>
  63. <li>content</li>
  64. <li>content</li>
  65. <li>content</li>
  66. </ul>
  67. </div>
  68. </div>
  69. </div>
  70. <div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;">
  71. <!--- stats, "fr fas-heart" is an empty heart and "fas fa-heart" is a full one! --->
  72. <div class="justify-content-between text-dark" style="font-size:20px;">
  73. <div><span style="letter-spacing:1px;font-weight:350;">AFFECTION</span></div>
  74. <div><span><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
  75. </div>
  76. <div class="justify-content-between my-2 text-dark" style="font-size:20px;">
  77. <div><span style="letter-spacing:1px;font-weight:350;">TRUST</span></div>
  78. <div><span><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
  79. </div>
  80. <div class="justify-content-between text-dark" style="font-size:20px;">
  81. <div><span style="letter-spacing:1px;font-weight:350;">JEALOUSY</span></div>
  82. <div><span><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
  83. </div>
  84. <div class="justify-content-between my-2 text-dark" style="font-size:20px;">
  85. <div><span style="letter-spacing:1px;font-weight:350;">ATTACHMENT</span></div>
  86. <div><span><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. <!--- middle column --->
  92. <div class="col-lg-4 p-2">
  93. <div class="card h-100 bg-primary" style="border:0px;">
  94. <!--- image --->
  95. <div class="card m-2" style="background:url('https://static.wikia.nocookie.net/lovecommittee/images/2/29/Chocokano.png/revision/latest?cb=20190711003647');background-size:cover;background-position:center;height:200px;border-radius:3px;"></div>
  96. <div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:10px 10px 15px;height:170px;overflow:auto;">
  97. <!--- relationship description --->
  98. <p class="text-center text-dark" style="font-weight:350;font-size:14px;">
  99. A short description about their relationship. Can be about how they met, why they love each other so much, etc. This box scrolls, so you can go ham. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vie. Lorem ipsum dolor sit.
  100. </p>
  101. </div>
  102. <!--- hearts --->
  103. <p class="mb-3 justify-content-center text-danger">
  104. <i class="far fa-heart" style="font-size:40px;"></i><i class="fas fa-heart mx-1" style="font-size:40px;"></i><i class="far fa-heart" style="font-size:40px;"></i><i class="fas fa-heart mx-1" style="font-size:40px;"></i><i class="far fa-heart" style="font-size:40px;"></i>
  105. </p>
  106. <div class="card p-3 text-center text-dark" style="background:#FFF;border:0px;border-radius:0px;margin:0px 10px;height:170px;overflow:auto;">
  107. <!--- music player and playlist, paste the end of a yt link after the "youtube.com/embed/" / credit to Strabi + phasmology for music code ! --->
  108. <span><iframe class="flex-fill" style="height:3em;width:3em;opacity:0;position:absolute;z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
  109. src="https://www.youtube.com/embed/URLHERE"></iframe><i class="far fa-play-circle fa-spin fa-3x" style="animation-duration:10s;"></i></span>
  110. <div class="row mt-2">
  111. <div class="col-12">
  112. <span class="text-uppercase" style="font-weight:350;letter-spacing:0.05em;font-size:16px;">song name / <i>artist</i></span>
  113. </div>
  114. <div class="col-12">
  115. <span class="text-uppercase" style="font-weight:350;letter-spacing:0.05em;font-size:16px;">song name / <i>artist</i></span>
  116. </div>
  117. <div class="col-12">
  118. <span class="text-uppercase" style="font-weight:350;letter-spacing:0.05em;font-size:16px;">song name / <i>artist</i></span>
  119. </div>
  120. <div class="col-12">
  121. <span class="text-uppercase" style="font-weight:350;letter-spacing:0.05em;font-size:16px;">song name / <i>artist</i></span>
  122. </div>
  123. <div class="col-12">
  124. <span class="text-uppercase" style="font-weight:350;letter-spacing:0.05em;font-size:16px;">song name / <i>artist</i></span>
  125. </div>
  126. </div>
  127. </div>
  128. <!--- hearts --->
  129. <p class="m-3 justify-content-center text-danger">
  130. <i class="far fa-heart" style="font-size:40px;"></i><i class="fas fa-heart mx-1" style="font-size:40px;"></i><i class="far fa-heart" style="font-size:40px;"></i><i class="fas fa-heart mx-1" style="font-size:40px;"></i><i class="far fa-heart" style="font-size:40px;"></i>
  131. </p>
  132. </div>
  133.  
  134. </div>
  135. <!--- user 2 --->
  136. <div class="col-lg-4 p-2">
  137. <div class="card bg-primary" style="position:relative;border:0px;">
  138. <div class="text-center" style="z-index:2;">
  139. <div class="w-100 d-block mx-auto" style="position:absolute;">
  140. <!--- hearts and icon --->
  141. <i class="fas fa-heart m-3 text-danger" style="font-size:50px;"></i>
  142. <img class="rounded-circle" style="height:120px;width:120px;border:8px solid;margin-top:-55px;" src="https://64.media.tumblr.com/6edda020ce9e2bfe701b1edef980b8df/tumblr_prkkykTGQJ1v1p4nw_400.jpg">
  143. <i class="fas fa-heart m-3 text-danger" style="font-size:50px;"></i>
  144. </div>
  145. </div>
  146. <div class="card" style="background:#FFF;z-index:1;border:0px;margin:13px;border-radius:0px;">
  147. <!--- name --->
  148. <h3 class="text-center p-3" style="margin-top:70px;color:#7268A6;font-weight:300;letter-spacing:0.09em;">
  149. <a href="URLHERE" class="text-dark" style="font-size:25px;">NAME OR TITLE HERE</a>
  150. </h3>
  151. </div>
  152. <div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:150px;overflow:auto;">
  153. <!--- anecdotal and description --->
  154. <p class="m-2 text-center text-dark" style="font-size:15px;font-weight:350;"><i class="m-1 fa-lg fas fa-quote-left float-left" />This box scrolls, so feel free to type as much as you'd like. It's supposed to be an anecdotal from the character, when you ask them about the other character!<i class="m-1 fa-lg fas fa-quote-right float-right" /></p>
  155. <hr class="text-dark" style="width:95%;">
  156. <p class="text-center text-dark" style="font-weight:350;font-size:13px;">
  157. A small description about the character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
  158. </p>
  159. </div>
  160. <div class="card p-2" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:180px;overflow:auto;">
  161. <div class="row no-gutters m-2">
  162. <!--- likes and dislikes --->
  163. <div class="col-lg-6">
  164. <h1 class="text-uppercase text-center text-dark" style="font-size:22px;letter-spacing:1px;font-weight:350;">LIKES <i class="fas fa-heart"></i></h1>
  165. <ul class="mt-2 text-dark">
  166. <li>content</li>
  167. <li>content</li>
  168. <li>content</li>
  169. <li>content</li>
  170. <li>content</li>
  171. </ul>
  172. </div>
  173. <div class="col-lg-6">
  174. <h1 class="text-uppercase text-center text-dark" style="font-size:22px;letter-spacing:1px;font-weight:350;">DISLIKES <i class="fas fa-heart-broken"></i></h1>
  175. <ul class="mt-2 text-dark">
  176. <li>content</li>
  177. <li>content</li>
  178. <li>content</li>
  179. <li>content</li>
  180. <li>content</li>
  181. </ul>
  182. </div>
  183. </div>
  184. </div>
  185. <div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;">
  186. <!--- stats, "fr fas-heart" is an empty heart and "fas fa-heart" is a full one! --->
  187. <div class="justify-content-between text-dark" style="font-size:20px;">
  188. <div><span style="letter-spacing:1px;font-weight:350;">AFFECTION</span></div>
  189. <div><span><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
  190. </div>
  191. <div class="justify-content-between my-2 text-dark" style="font-size:20px;">
  192. <div><span style="letter-spacing:1px;font-weight:350;">TRUST</span></div>
  193. <div><span><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
  194. </div>
  195. <div class="justify-content-between text-dark" style="font-size:20px;">
  196. <div><span style="letter-spacing:1px;font-weight:350;">JEALOUSY</span></div>
  197. <div><span><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
  198. </div>
  199. <div class="justify-content-between my-2 text-dark" style="font-size:20px;">
  200. <div><span style="letter-spacing:1px;font-weight:350;">ATTACHMENT</span></div>
  201. <div><span><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. <!--- credit, dont remove pls! --->
  208. <a class="d-block text-muted text-right mr-2" href="9486580" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
  209. </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!