API tools faq
paste
caticooties

kirakira doki code

caticooties
Oct 15th, 2020 (edited)
283
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.21 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3. KIRAKIRA DOKI / by cati/dogboy
  4.  
  5. NOTES
  6. accent: #6D9EEB
  7. icon: fas fa-stars, fas fa-rectangle-wide
  8. (use ctrl+f + replace for accent/icon replacement)
  9. semi-mobile friendly + custom colors! ✔✔✔
  10.  
  11. RULES & DISCLAIMERS
  12. - fav/comment if using pls!
  13. - not wysiwyg friendly so please turn that off!
  14. - feel free to edit/frakenstein/etc if you feel! just keep my credit pwease
  15. - have a nice day!!
  16.  
  17. GENERAL INSTRUCTIONS
  18. - TO REMOVE THE SPINNING ANIMATION: go to every "fas fa-stars", and remove the part that says "fa-spin"
  19.  
  20. --->
  21.  
  22. <div class="container-fluid" style="background:url(https://64.media.tumblr.com/b9a5b762edb81670ce011be6a58e480a/tumblr_inline_mvmuledGjd1qid2nw.png) repeat fixed;padding:20px;border-radius:10px;max-width:600px;margin:30px auto 5px;">
  23. <div class="card" style="background:#FFFFFF;border:0px;border-radius:0px;">
  24. <div style="border-radius:0px;background-color:#6D9EEB;">
  25. <div class="d-flex justify-content-between">
  26. <i class="fas fa-star fa-3x p-3 fa-spin" style="color:#FFFFFF"></i>
  27. <!--- quote --->
  28. <p class="text-uppercase m-4 font-italic" style="color:#FFFFFF;font-size:18px;letter-spacing:1px;" align="center"><i class="fas fa-quote-left" style="color:#FFFFFF" />&nbsp;
  29. quote here!
  30. &nbsp;<i class="fas fa-quote-right" style="color:#FFFFFF" /></p>
  31. <i class="fas fa-star fa-3x p-3 fa-spin" style="color:#FFFFFF"></i>
  32. </div>
  33. </div>
  34. <div class="row no-gutters">
  35. <div class="col-md-6">
  36. <div class="p-1 m-2 pl-3 mt-4">
  37. <!--- info panel --->
  38. <div class="justify-content-between m-1">
  39. <div><span class="font-weight-bold" style="color:#6D9EEB;font-size:18px;letter-spacing:1px;">NAME:</span></div>
  40. <div><span class="text-muted font-italic" style="font-size:18px;letter-spacing:1px;">content</span></div>
  41. </div>
  42. <div class="justify-content-between m-1">
  43. <div><span class="font-weight-bold" style="color:#6D9EEB;font-size:18px;letter-spacing:1px;">AGE:</span></div>
  44. <div><span class="text-muted font-italic" style="font-size:18px;letter-spacing:1px;">content</span></div>
  45. </div>
  46. <div class="justify-content-between m-1">
  47. <div><span class="font-weight-bold" style="color:#6D9EEB;font-size:18px;letter-spacing:1px;">GENDER:</span></div>
  48. <div><span class="text-muted font-italic" style="font-size:18px;letter-spacing:1px;">content</span></div>
  49. </div>
  50. <div class="justify-content-between m-1">
  51. <div><span class="font-weight-bold" style="color:#6D9EEB;font-size:18px;letter-spacing:1px;">SPECIE:</span></div>
  52. <span class="text-muted font-italic" style="font-size:18px;letter-spacing:1px;">content</span>
  53. </div>
  54. <div class="justify-content-between m-1">
  55. <div><span class="font-weight-bold" style="color:#6D9EEB;font-size:18px;letter-spacing:1px;">SEXUALITY:</span></div>
  56. <span class="text-muted font-italic" style="font-size:18px;letter-spacing:1px;">content</span>
  57. </div>
  58. </div>
  59. </div>
  60. <div class="col-md-5">
  61. <!--- avatar --->
  62. <img class="mx-auto d-block fr-rounded mt-3 pull-right" style="width:180px;border:4px solid #6D9EEB;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/24439687_sy8.gif">
  63. </div>
  64. <div class="col-md-12">
  65. <!--- color palette --->
  66. <div class="justify-content-between p-3">
  67. <i class="fas fa-rectangle-wide fa-6x" style="color: #85C9E9;"></i>
  68. <i class="fas fa-rectangle-wide fa-6x ml-2" style="color: #FD81B0;"></i>
  69. <i class="fas fas fa-rectangle-wide fa-6x ml-2" style="color: #197778;"></i>
  70. <i class="fas fas fa-rectangle-wide fa-6x ml-2" style="color: #F4D2B4;"></i></div>
  71. </div>
  72. </div>
  73. </div>
  74.  
  75. <div class="justify-content-center">
  76. <div class="card m-4 px-3" style="border-radius:5px;background-color:#6D9EEB;height:40px;color:#FFFFFF;">
  77. <!--- toggle --->
  78. <a data-toggle="collapse" href="#more" style="color:#FFFFFF;"><h3 class="text-uppercase font-italic mt-2" style="font-size:22px;letter-spacing:3px;" align="center">★ kirakira doki! ★</h3></a></div>
  79. </div>
  80. <div class="my-1 collapse" id="more">
  81. <div class="card" style="background:#FFFFFF;border:0px;border-radius:0px;">
  82. <div class="row mx-auto">
  83. <div class="col-12 mt-3">
  84. <div class="row align-items-center">
  85. <i class="fas fa-star fa-2x ml-3 fa-spin" style="color:#6D9EEB"></i>
  86. <div class="col-lg"><div class="card" style="background-color:#6D9EEB;"></div></div>
  87. <div class="col-lg"><h1 class="font-italic text-uppercase text-center" style="color:#6D9EEB;font-size:25px;letter-spacing:3px;">personality</h1></div>
  88. <div class="col-lg"><div class="card" style="background-color:#6D9EEB;"></div></div>
  89. <i class="fas fa-star fa-2x mr-3 fa-spin" style="color:#6D9EEB"></i>
  90. </div>
  91. </div>
  92.  
  93. <div class="col-md-12">
  94. <div class="px-2 pt-2" style="background-color: #FFFFFF;height:200px;overflow: auto;">
  95. <!--- personality icon --->
  96. <img class="fr-rounded m-1" style="width:140px;border:4px solid #6D9EEB;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/26083937_lhD.png" align="left">
  97. <!--- personality --->
  98. <p class="m-0 text-center" style="color: #6D9EEB;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
  99. </div>
  100. <!--- stats bars, higher percentage = closer to the right! credit to @eggy for this concept. if you change the name of the stat the width of the overall progress bar will change, so keep that in mind! --->
  101. <div class="col-12 mb-4">
  102. <span class="pr-3 text-uppercase font-weight-bold font-italic pull-left" style="color:#6D9EEB;font-size:14px;letter-spacing:1px;border-radius:8px;">intro</span>
  103. <span class="pl-3 text-uppercase font-weight-bold font-italic pull-right" style="color:#6D9EEB;font-size:14px;letter-spacing:1px;border-radius:8px;">extro</span>
  104. <div class="progress rounded-0 mt-3">
  105. <div class="progress-bar" style="color:#6D9EEB;background:none;border-right-width:8px;border-right-style:solid;
  106. width:51%">
  107. </div>
  108. </div>
  109. <br>
  110. <span class="pr-3 text-uppercase font-weight-bold font-italic pull-left" style="color:#6D9EEB;font-size:14px;letter-spacing:1px;border-radius:8px;">logic</span>
  111. <span class="pl-3 text-uppercase font-weight-bold font-italic pull-right" style="color:#6D9EEB;font-size:14px;letter-spacing:1px;border-radius:8px;">feelin</span>
  112. <div class="progress rounded-0">
  113. <div class="progress-bar" style="color:#6D9EEB;background:none;border-right-width:8px;border-right-style:solid;
  114. width:52%">
  115. </div>
  116. </div>
  117. <br>
  118. <span class="pr-3 text-uppercase font-weight-bold font-italic pull-left" style="color:#6D9EEB;font-size:14px;letter-spacing:1px;border-radius:8px;">order</span>
  119. <span class="pl-3 text-uppercase font-weight-bold font-italic pull-right" style="color:#6D9EEB;font-size:14px;letter-spacing:1px;border-radius:8px;">haste</span>
  120. <div class="progress rounded-0">
  121. <div class="progress-bar" style="color:#6D9EEB;background:none;border-right-width:8px;border-right-style:solid;
  122. width:51%">
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127.  
  128. <div class="col-12">
  129. <div class="row align-items-center">
  130. <i class="fas fa-star fa-2x ml-3 fa-spin" style="color:#6D9EEB"></i>
  131. <div class="col-lg"><div class="card" style="background-color:#6D9EEB;"></div></div>
  132. <div class="col-lg"><h1 class="font-italic text-uppercase text-center" style="color:#6D9EEB;font-size:25px;letter-spacing:3px;">TRIVIA</h1></div>
  133. <div class="col-lg"><div class="card" style="background-color:#6D9EEB;"></div></div>
  134. <i class="fas fa-star fa-2x mr-3 fa-spin" style="color:#6D9EEB"></i>
  135. </div>
  136. </div>
  137.  
  138. <div class="col-md-12">
  139. <div class="px-2 pt-2" style="background-color: #FFFFFF;height:200px;overflow: auto;">
  140. <!--- trivia icon --->
  141. <img class="fr-rounded m-1" style="width:140px;border:4px solid #6D9EEB;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/25593118_RAw.png" align="right">
  142. <!--- trivia --->
  143. <ul class="m-0" style="color: #6D9EEB;">
  144. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac.</li>
  145. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  146. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  147. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  148. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  149. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  150. </ul>
  151. </div>
  152. </div>
  153.  
  154. <div class="col-12 mt-3">
  155. <div class="row align-items-center">
  156. <i class="fas fa-star fa-2x ml-3 fa-spin" style="color:#6D9EEB"></i>
  157. <div class="col-lg"><div class="card" style="background-color:#6D9EEB;"></div></div>
  158. <div class="col-lg"><h1 class="font-italic text-uppercase text-center" style="color:#6D9EEB;font-size:25px;letter-spacing:3px;">Relationships</h1></div>
  159. <div class="col-lg"><div class="card" style="background-color:#6D9EEB;"></div></div>
  160. <i class="fas fa-star fa-2x mr-3 fa-spin" style="color:#6D9EEB"></i>
  161. </div>
  162. </div>
  163.  
  164. <!--- character 1 --->
  165. <div class="col-4 mt-3 my-3 text-center">
  166. <img class="fr-rounded" style="width:100px;border:3px solid #6D9EEB;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/24502570_G6t_7552719.png?1597470245">
  167. <h3 class="font-italic mt-2 text-uppercase text-center" style="color:#6D9EEB;letter-spacing:1px;"><a href="URLHERE" style="color:#6D9EEB;">name</a></h3>
  168. <i class="fas fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
  169. <i class="fas fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
  170. <i class="far fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
  171. <p class="m-1" style="color: #6D9EEB;font-size:12px;height:100px;overflow:auto;">
  172. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui.
  173. </p>
  174. </div>
  175.  
  176. <!--- character 2 --->
  177. <div class="col-4 mt-3 my-3 text-center">
  178. <img class="fr-rounded" style="width:100px;border:3px solid #6D9EEB;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/24502570_G6t_7552719.png?1597470245">
  179. <h3 class="font-italic mt-2 text-uppercase text-center" style="color:#6D9EEB;letter-spacing:1px;"><a href="URLHERE" style="color:#6D9EEB;">name</a></h3>
  180. <i class="fas fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
  181. <i class="fas fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
  182. <i class="far fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
  183. <p class="m-1" style="color: #6D9EEB;font-size:12px;height:100px;overflow:auto;">
  184. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui.
  185. </p>
  186. </div>
  187.  
  188. <!--- character 3, if you want to add more characters highlight until the next </div> and copy+paste! --->
  189. <div class="col-4 mt-3 my-3 text-center">
  190. <img class="fr-rounded" style="width:100px;border:3px solid #6D9EEB;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/24502570_G6t_7552719.png?1597470245">
  191. <h3 class="font-italic mt-2 text-uppercase text-center" style="color:#6D9EEB;letter-spacing:1px;"><a href="URLHERE" style="color:#6D9EEB;">name</a></h3>
  192. <i class="fas fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
  193. <i class="fas fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
  194. <i class="far fa-heart" style="font-size:22px;color:#6D9EEB;"></i>
  195. <p class="m-1" style="color: #6D9EEB;font-size:12px;height:100px;overflow:auto;">
  196. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui.
  197. </p>
  198. </div>
  199.  
  200.  
  201. </div>
  202. </div>
  203. <div class="p-2" style="background-color:#6D9EEB;">
  204. <!--- credit, dont remove pls! --->
  205. <a class="d-block text-right" href="https://toyhou.se/8534671.kirakira-doki-f2u-html" style="font-size:12px;color:#FFFFFF;letter-spacing:4px;">code by cati <i class="fad fa-rainbow"></i></a>
  206. </div>
  207. </div>
  208. </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!