API tools faq
paste
vladimirpinarum

F2U Delicious

vladimirpinarum
Apr 1st, 2021 (edited)
935
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.18 KB | None | 0 0
raw download clone embed print report
  1. <!----------------------------------------------------------------
  2. DELICIOUS PROFILE
  3. Profile by HTMLobster (noll)
  4.  
  5. Please read notes on how to change rarity in the perspective areas (rarity and level sections).
  6.  
  7. TOS:
  8. Do not remove my credit. You may edit it, however.
  9. You may edit code/frankenstein with others as long as their TOS allows!
  10. Turn off WYSIWYG and turn on Code Editor.
  11. Ask me if you want to redistribute edits. Must be F2U.
  12. ------------------------------------------------------------------>
  13. <div class="container" style="max-width:800px;">
  14. <!--- Heading --->
  15. <div class="border p-2 row no-gutters" style="border-top:3px solid #633c1c; border-left:3px solid #633c1c; border-right:3px solid #633c1c; background-image:linear-gradient(to bottom, #f2c144, #eaa43a); border-radius:15px 15px 0 0;">
  16. <div class="col-md-4 hidden-sm-down d-flex flex-wrap align-content-center text-center" style="font-weight:900;">
  17. <!--- Affection --->
  18. <span class="badge badge-pill p-2" style="font-size: 1.3em; background:#663418; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; font-weight:900;"><img src="https://i.imgur.com/zk3xknc.png" style="width:25px;"> 69/1,000</span>
  19. </div>
  20. <!--- Name --->
  21. <div class="col-md-4 col-10 text-center" style="font-size:2em; font-weight:bold; color:#542216; font-weight:900;">Character Name</div>
  22. <div class="col-md-4 col-2 text-right"><i class="fas fa-times" style="color:#a46923; font-size:3em; text-shadow:-1px -1px 0 #85561c,1px -1px 0 #85561c,-1px 1px 0 #85561c,1px 1px 0 #85561c;"></i></div>
  23. </div>
  24.  
  25. <div class="row no-gutters" style="background:#77382b url('https://i.imgur.com/rFmOXjA.png'); border-left:3px solid #633c1c;border-right:3px solid #633c1c; min-height:405px; background-position:0px -215px;background-repeat: no-repeat;background-size: 800px;">
  26.  
  27. <!--- Left column --->
  28. <div class="col-md-8 p-3 row no-gutters">
  29. <!--- Pet & Nav Buttons --->
  30. <div class="col-3">
  31. <div class="p-1 text-center text-white" style="font-weight:bold; background:rgba(117,56,44,.4); border:2px solid #000; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; border-radius:10px; width:100px; margin-bottom: 38px;">Combi Pet:<br><img src="https://i.imgur.com/l0kbUfx.png"></div>
  32. <!--- Pet image above ^^^ --->
  33.  
  34. <ul class="nav nav-tabs card-header-tabs row no-gutters" style="width:100px;">
  35. <li class="col-md-12 mb-2" style="box-shadow:inset 1px 1px rgba(255,255,255,.3), inset -1px -1px rgba(255,255,255,.3); border:2px solid #000; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; background:linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.2)); border-radius:10px;"><a class="btn btn-block active text-white p-1 active show" data-toggle="tab" href="#tab1">Story</a></li>
  36. <li class="col-md-12 mb-1" style="box-shadow:inset 1px 1px rgba(255,255,255,.3), inset -1px -1px rgba(255,255,255,.3); border:2px solid #000; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; background:linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.2)); border-radius:10px;"><a class="btn btn-block text-white p-1 show" data-toggle="tab" href="#tab2">Relationships</a></li>
  37. </ul>
  38.  
  39. </div>
  40. <!--- Character --->
  41. <div class="col-6">
  42. <div class="text-center pb-2">
  43. <!--- Rarity --->
  44. <!---
  45. CHANGE RARITY - Common Default
  46. Common: background:#aa7b3f; text-shadow:-1px -1px 0 #62471d,1px -1px 0 #62471d,-1px 1px 0 #62471d,1px 1px 0 #62471d;
  47. Rare: background:#2671a0; text-shadow:-1px -1px 0 #0e2a69,1px -1px 0 #0e2a69,-1px 1px 0 #0e2a69,1px 1px 0 #0e2a69;
  48. Epic: background:#9d3e91; text-shadow:-1px -1px 0 #4e1265,1px -1px 0 #4e1265,-1px 1px 0 #4e1265,1px 1px 0 #4e1265;
  49. Legendary: background:linear-gradient(to right,#5bfda7,#49c5fd,#f859fd); text-shadow:-1px -1px 0 #27566f,1px -1px 0 #27566f,-1px 1px 0 #27566f,1px 1px 0 #27566f;
  50. --->
  51. <span class="badge badge-pill p-1 text-center" style="width:130px; background:#aa7b3f; text-shadow:-1px -1px 0 #62471d,1px -1px 0 #62471d,-1px 1px 0 #62471d,1px 1px 0 #62471d; border:2px solid #1b0624; font-size:1.2em; font-weight:900;">COMMON</span>
  52. <!--- Change rarity in above section ^^^^ --->
  53. </div>
  54. <!--- Character image - 204px tall, width will adjust --->
  55. <div class="text-center">
  56. <img src="https://i.imgur.com/yfMgAq5.png" style="height:204px;">
  57. </div>
  58. </div>
  59. <!--- Nav Buttons right --->
  60. <div class="col-3">
  61. <ul class="nav nav-tabs card-header-tabs row no-gutters ml-3" style="max-width:105px;">
  62. <li class="text-center mb-2 ml-4" style="box-shadow:inset 1px 5px rgba(255,255,255,.3), inset -1px -1px rgba(255,255,255,.3); border:2px solid #000; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; background:linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1)); border-radius:10px;">
  63. <!--- Wardrobe icon --->
  64. <a class="btn btn-block p-2 show" data-toggle="tab" href="#tab3"><img src="https://i.imgur.com/cAwidiI.png"></a>
  65. </li>
  66. <li class="text-center ml-4" style="box-shadow:inset 1px 5px rgba(255,255,255,.3), inset -1px -1px rgba(255,255,255,.3); border:2px solid #000; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; background:linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1)); border-radius:10px;">
  67. <!--- Candy icon --->
  68. <a class="btn btn-block p-2 show" data-toggle="tab" href="#tab4"><img src="https://i.imgur.com/bwNq8kY.png"></a>
  69. </li>
  70. </ul>
  71. </div>
  72.  
  73. <!--- Bottom info --->
  74. <div class="col text-center mt-3">
  75. <!--- Level --->
  76. <!---
  77. CHANGE RARITY - Common Default
  78. Common: color:#fdda76; img: https://i.imgur.com/i6cTEty.png
  79. Rare: color:#57cafd; img: https://i.imgur.com/6mvWX97.png
  80. Epic: color:#e732f7; img: https://i.imgur.com/wkzVfV4.png
  81. Legendary: color:#0bfd96; img: https://i.imgur.com/c6whq5h.png
  82. --->
  83. <div class="d-inline-block mr-2" style="font-size:1.3em; color:#fdda76; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;">Lv.7</div>
  84. <div class="d-inline-block" style="z-index:2; margin-right:-20px; position:relative;"><img src="https://i.imgur.com/i6cTEty.png"></div>
  85. <!--- Change rarity in above section ^^^^ --->
  86. <div class="d-inline-block" style="height:100%; vertical-align:middle;">
  87. <div class="progress rounded-0 d-inline-block" style="width:150px; border:2px solid #000; background:#000;">
  88. <!--- EXP: change width & area-valuenow. if editing the text, you may need to fiddle with the padding-left value! --->
  89. <div class="progress-bar" role="progressbar" style="width:40%; height:24px; background:#509cdc; text-shadow: -1px -1px 0 #1a446b, 1px -1px 0 #1a446b, -1px 1px 0 #1a446b, 1px 1px 0 #1a446b; font-size: 1.4em; font-weight: 900; padding-top: 3px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"><span style="padding-left:60px;">4/10</span></div>
  90. </div>
  91. </div>
  92. </div>
  93.  
  94. <!--- Energy & Skill --->
  95. <div class="col-12 text-center mt-1 p-1" style="background:rgba(37,18,16,.6); border:2px solid #53271e; border-radius:5px; font-weight:900;">
  96. <p class="text-white" style="font-size:1.2em; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;"><img src="https://i.imgur.com/YwJNEz5.png" style="margin-right:10px; height:30px;">Energy: 69</p>
  97. <hr style="background: #311710; border-bottom: 1px solid #4e2e29; margin-top: -12px; margin-bottom: 3px;">
  98. <p class="text-white" style="font-size:1.2em; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;"><img src="https://i.imgur.com/uxjEz3R.png" style="margin-right:10px; height:25px;">Skill Lv.7</p>
  99. </div>
  100.  
  101. </div>
  102.  
  103. <!--- Right column --->
  104. <div class="col-md-4" style="background:rgba(37,18,16,.7);">
  105. <!--- Header image --->
  106. <div style="background:url('https://i.imgur.com/q7ohicJ.png'); background-position:-35px; background-size:cover; height:100px;"></div>
  107.  
  108. <div class="tab-content">
  109. <!--- TAB ONE --->
  110. <div class="tab-pane fade active show" id="tab1">
  111. <div class="p-1">
  112. <div class="p-1">
  113. <!--- Story --->
  114. <div class="text-white" style="font-size: 1.3em; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; font-weight:900;">Story</div>
  115. <div style="height:260px; overflow-y:auto;">
  116. <p style="color:#b6897b; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et neque ultrices, scelerisque tortor sit amet, imperdiet sapien. Praesent dapibus dui tortor, ut gravida nisl porta vel. Cras in dui felis. Praesent nec urna non enim hendrerit sollicitudin quis ut sapien.</p>
  117. <p style="color:#b6897b; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;">Curabitur posuere non metus ut efficitur. Ut nec elit rhoncus, faucibus ligula ut, bibendum magna. Quisque pretium ex in faucibus varius. Quisque sed dignissim erat, vitae vulputate ex. Curabitur congue fermentum est, in ultrices nibh aliquet et. Praesent lacinia nisl vitae tincidunt venenatis. Quisque iaculis lobortis leo et convallis.</p>
  118. <p style="color:#b6897b; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;">Morbi vel posuere dui, sit amet hendrerit eros. Praesent aliquet ligula sit amet luctus auctor. Aliquam mattis semper tellus in malesuada.</p>
  119. <!--- Feel free to add more paragraphs --->
  120. </div>
  121. </div>
  122. </div>
  123. </div>
  124.  
  125. <!--- TAB TWO --->
  126. <div class="tab-pane fade" id="tab2">
  127. <div class="p-1">
  128. <div class="p-1">
  129. <!--- Relationships --->
  130. <div class="text-white" style="font-size: 1.3em; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; font-weight:900;">Relationships</div>
  131. <div style="height:260px; overflow-y:auto;">
  132. <!--- Row 1 --->
  133. <div class="row no-gutters">
  134. <!--- Relationship 1 --->
  135. <div class="col-md-4 col-2 pr-1 mb-1"><img src="https://via.placeholder.com/150.png" style="border-radius:15px;"></div>
  136. <div class="col-md-8 col-4">
  137. <h2 class="text-white m-0" style="font-size: 1.1em;"><a class="text-white" style="text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;" href="URL">Name</a></h2>
  138. <p style="color:#b6897b; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; line-height: 14px;">Notes about their relationship.</p>
  139. </div>
  140. <!--- Relationship 2 --->
  141. <div class="col-md-4 col-2 pr-1 mb-1"><img src="https://via.placeholder.com/150.png" style="border-radius:15px;"></div>
  142. <div class="col-md-8 col-4">
  143. <h2 class="text-white m-0" style="font-size: 1.1em;"><a class="text-white" style="text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;" href="URL">Name</a></h2>
  144. <p style="color:#b6897b; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; line-height: 14px;">Notes about their relationship.</p>
  145. </div>
  146. </div>
  147. <!--- Row 2 --->
  148. <div class="row no-gutters">
  149. <!--- Relationship 3 --->
  150. <div class="col-md-4 col-2 pr-1 mb-1"><img src="https://via.placeholder.com/150.png" style="border-radius:15px;"></div>
  151. <div class="col-md-8 col-4">
  152. <h2 class="text-white m-0" style="font-size: 1.1em;"><a class="text-white" style="text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;" href="URL">Name</a></h2>
  153. <p style="color:#b6897b; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; line-height: 14px;">Notes about their relationship.</p>
  154. </div>
  155. <!--- Relationship 4 --->
  156. <div class="col-md-4 col-2 pr-1 mb-1"><img src="https://via.placeholder.com/150.png" style="border-radius:15px;"></div>
  157. <div class="col-md-8 col-4">
  158. <h2 class="text-white m-0" style="font-size: 1.1em;"><a class="text-white" style="text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;" href="URL">Name</a></h2>
  159. <p style="color:#b6897b; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; line-height: 14px;">Notes about their relationship.</p>
  160. </div>
  161. </div>
  162. <!--- Copy the section from "Row 2" until here to add more relationships --->
  163. </div>
  164. </div>
  165. </div>
  166. </div>
  167.  
  168. <!--- TAB THREE --->
  169. <div class="tab-pane fade" id="tab3">
  170. <div class="p-1">
  171. <div class="p-1">
  172. <div style="height:285px; overflow-y:auto;">
  173. <!--- Design --->
  174. <div class="text-white" style="font-size: 1.3em; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; font-weight:900;">Design Notes</div>
  175. <div>
  176. <ul class="fa-ul" style="color:#b6897b; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;">
  177. <li><i class="fa-li fas fa-pen"></i>Note</li>
  178. <li><i class="fa-li fas fa-pen"></i>Note</li>
  179. <li><i class="fa-li fas fa-pen"></i>Note</li>
  180. </ul>
  181. </div>
  182. <!--- Wardrobe --->
  183. <div class="text-white" style="font-size: 1.3em; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; font-weight:900;">Wardrobe</div>
  184. <div class="row no-gutters">
  185. <!--- Outfit 1 --->
  186. <div class="col-md-6 col-3 pr-1 mb-2">
  187. <!--- Outfit img --->
  188. <div style="background:url('https://via.placeholder.com/200.png') center; background-size:cover; height:200px; border-radius:15px;">
  189. <div class="h-100 w-100 card text-center border-0" style="background:none;">
  190. <a class="w-100 text-white mt-auto stretched-link" style="text-decoration:none; background:rgba(37,18,16,0.7); font-weight:900; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; border-radius:0 0 15px 15px;" href="URL">Outfit One</a>
  191. <!--- Oufit name above --->
  192. </div>
  193. </div>
  194. </div>
  195. <!--- Outfit 2 --->
  196. <div class="col-md-6 col-3 pl-1 mb-2 pr-1 pr-md-0">
  197. <!--- Outfit img --->
  198. <div style="background:url('https://via.placeholder.com/200.png') center; background-size:cover; height:200px; border-radius:15px;">
  199. <div class="h-100 w-100 card text-center border-0" style="background:none;">
  200. <a class="w-100 text-white mt-auto stretched-link" style="text-decoration:none; background:rgba(37,18,16,0.7); font-weight:900; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; border-radius:0 0 15px 15px;" href="URL">Outfit Two</a>
  201. </div>
  202. </div>
  203. </div>
  204. <!--- Outfit 3 --->
  205. <div class="col-md-6 col-3 pr-1 pl-1 pl-md-0">
  206. <!--- Outfit img --->
  207. <div style="background:url('https://via.placeholder.com/200.png') center; background-size:cover; height:200px; border-radius:15px;">
  208. <div class="h-100 w-100 card text-center border-0" style="background:none;">
  209. <a class="w-100 text-white mt-auto stretched-link" style="text-decoration:none; background:rgba(37,18,16,0.7); font-weight:900; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; border-radius:0 0 15px 15px;" href="URL">Outfit Three</a>
  210. <!--- Outfit name above --->
  211. </div>
  212. </div>
  213. </div>
  214. <!--- Outfit 4 --->
  215. <div class="col-md-6 col-3 pl-1">
  216. <!--- Outfit img --->
  217. <div style="background:url('https://via.placeholder.com/200.png') center; background-size:cover; height:200px; border-radius:15px;">
  218. <div class="h-100 w-100 card text-center border-0" style="background:none;">
  219. <a class="w-100 text-white mt-auto stretched-link" style="text-decoration:none; background:rgba(37,18,16,0.7); font-weight:900; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; border-radius:0 0 15px 15px;" href="URL">Outfit Four</a>
  220. <!--- Outfit name above --->
  221. </div>
  222. </div>
  223. </div>
  224.  
  225. </div>
  226. </div>
  227. </div>
  228. </div>
  229. </div>
  230.  
  231. <!--- TAB FOUR --->
  232. <div class="tab-pane fade" id="tab4">
  233. <div class="p-1">
  234. <div class="p-1">
  235. <div style="height:285px; overflow-y:auto;">
  236. <!--- Likes --->
  237. <div class="text-white" style="font-size: 1.3em; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; font-weight:900;">Likes</div>
  238. <div>
  239. <ul class="fa-ul" style="color:#b6897b; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;">
  240. <li><i class="fa-li fas fa-heart"></i>like</li>
  241. <li><i class="fa-li fas fa-heart"></i>like</li>
  242. <li><i class="fa-li fas fa-heart"></i>like</li>
  243. </ul>
  244. </div>
  245. <!--- Dislikes --->
  246. <div class="text-white" style="font-size: 1.3em; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; font-weight:900;">Dislikes</div>
  247. <div>
  248. <ul class="fa-ul" style="color:#b6897b; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;">
  249. <li><i class="fa-li fas fa-times"></i>dislike</li>
  250. <li><i class="fa-li fas fa-times"></i>dislike</li>
  251. <li><i class="fa-li fas fa-times"></i>dislike</li>
  252. </ul>
  253. </div>
  254. <!--- Notes --->
  255. <div class="text-white" style="font-size: 1.3em; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; font-weight:900;">Notes</div>
  256. <div>
  257. <ul class="fa-ul" style="color:#b6897b; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;">
  258. <li><i class="fa-li fas fa-pen"></i>note</li>
  259. <li><i class="fa-li fas fa-pen"></i>note</li>
  260. <li><i class="fa-li fas fa-pen"></i>note</li>
  261. </ul>
  262. </div>
  263. </div>
  264. </div>
  265. </div>
  266. </div>
  267.  
  268. </div>
  269.  
  270. </div>
  271. </div>
  272. <div style="border-bottom:3px solid #633c1c; border-left:3px solid #633c1c; border-right:3px solid #633c1c; height:20px; background:#eaa43a; border-radius:0 0 15px 15px;">
  273. </div>
  274. <div class="text-right"><a class="text-dark mr-1" href="" style="font-size:1.3em;" data-toggle="tooltip" title="images from Cookie Run: Ovenbreak"><i class="fas fa-camera"></i></a><a class="text-dark" href="https://toyhou.se/HTMLobster" style="font-size:1.3em;" data-toggle="tooltip" title="theme by noll"><i class="fas fa-rabbit-fast"></i></a></div>
  275. </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!