API tools faq
paste
ooksie

skin amaretto

ooksie
Jun 26th, 2025 (edited)
68
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.58 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. [font=Mea Culpa]title[/font]
  4. [font=Radley]header[/font]
  5. [font=Almarai]body[/font]
  6.  
  7. to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  8.  
  9. [/comment][div=
  10. /*border colour*/
  11. --border: #d1caca;
  12. /*top part of background*/
  13. --bg-1: var(--color-1);
  14. /*bottom part of background*/
  15. --bg-2: var(--color-2);
  16.  
  17. /*main accent colour -- saturated*/
  18. --color-1: #780E18;
  19. /*secondary accent colour -- neutral*/
  20. --color-2: #F2EAE7;
  21.  
  22. /*body text colour*/
  23. --t-color: #3B2828;
  24.  
  25. /*set to 0 to remove glow/blur on text*/
  26. --t-glow: clamp(2px, 0.05em, 3.8px);
  27.  
  28. /*grain texture overlayed over entire code*/
  29. --texture: url('https://i.imgur.com/8qUVuFt.png');
  30. /*replace block with none to remove grain texture*/
  31. --d-texture: block;
  32.  
  33. /*fonts used*/
  34. --title: 'Mea Culpa', display;
  35. --header: 'Radley', serif;
  36. --body: 'Almarai', sans-serif;
  37.  
  38. /*main left image -- % values are the X Y positions for cropping!*/
  39. --img-1: url('https://i.imgur.com/N4hkx99.png') 50% 30%;
  40. /*image editing values. set both values to 0 to remove editing*/
  41. --img-fblur: 5px;
  42. --img-fopacity: 0.6;
  43.  
  44. /*rose icon. you can delete this if you're using a fontawesome icon instead*/
  45. --icon: url('data:image/svg+xml,%3Csvg height="800" width="800" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xml:space="preserve"%3E%3Cstyle%3E.st0%7Bfill:%23000%7D%3C/style%3E%3Cpath class="st0" d="M241 145c-39-17-91 17-104 61s8 118 65 144 109-9 87-39c-74-9-122-88-100-127s91-22 52-39z"/%3E%3Cpath class="st0" d="M337 271c48-39 22-126-17-135-40-8-57 13-26 40 39 30-9 91-40 87 0 0 35 48 83 8z"/%3E%3Cpath class="st0" d="M254 120c44-18 74-10 101 16 13-39-31-104-109-113S93 119 128 171c9-17 61-64 126-51zM111 245c-74 18-82 90-66 135 18 48 5 83 26 92 21 8 92 13 153 17 61 5 109-48 91-109-174 31-204-96-204-135zM94 236s2-29 11-44c-5-4-9-22-9-22s-4-19-4-34c-33-7-90 34-92 41s11 81 39 83c31-24 55-24 55-24zM490 176c-40-83-114-66-114-66s5 22-4 35c43 48 13 147-25 158 131 57 160-58 164-75 5-18-13-31-21-52z"/%3E%3Cpath class="st0" d="M454 332c-22 16-86 12-122-7 2 14-13 38-20 39 27 12 54 62 7 116 19 19 96 5 141-25 7-4 19-52 22-79 4-37 7-69-28-44zM257 213c-19 5-30-6-23-19 6-10 5-20-9-13-29 18-11 67 25 63 49-18 28-63 14-61-13 1 9 26-7 30z"/%3E%3C/svg%3E');
  46.  
  47.  
  48. height:auto; width:100%; overflow-x:auto; overflow-y:hidden; margin:30px 0 40px 0; line-height:0;][div=height:auto; width:100%; max-width:600px; margin:auto; background: var(--bg-1); padding:45px clamp(25px, -400px + 50vw, 50px); border:1px solid var(--border); box-sizing:border-box; position:relative;
  49.  
  50. --db: clamp(0px, -200px + 20vw, 1px); --mb: clamp(0px, 200px - 20vw, 1px);]
  51.  
  52. [comment]----header----[/comment]
  53. [div=height:auto; min-height:100px; width:100%; display:flex; flex-flow:row wrap;
  54.  
  55. /*adjust padding values so that the first letter of title isn't cut off with the font*/
  56. --p-top:0px;
  57. --p-bottom: 15px;
  58. --p-left: 5px;]
  59. [comment]----title/role----[/comment]
  60. [div=height:auto; max-height:100px; flex:53; box-sizing:border-box; padding:var(--p-top) 0 var(--p-bottom) var(--p-left); min-width:fit-content; max-width:300px; margin-right:20px; color: var(--color-2); font-size:70px; line-height:100%; font-family: var(--title); text-shadow:0 0 var(--t-glow) var(--color-2); overflow:hidden;][comment]
  61.  
  62. ----* * * title here----
  63.  
  64. [/comment]Gabriela[/div]
  65.  
  66. [comment]----right subtitle/icon----[/comment]
  67. [div=height:auto; flex:47; max-width:250px; min-width:100px; display:flex; flex-flow:column nowrap; align-items:flex-end; padding:calc(var(--p-top) + 10px) 0 0 0; box-sizing:border-box; margin-left:auto;]
  68. [div=height:auto; max-height:42px; overflow:hidden; width:auto; text-align:right; color: var(--color-2); text-shadow:0 0 var(--t-glow) var(--color-2); font-size:12px; font-family: var(--body); line-height:14px; margin-bottom:20px; word-spacing:3px;][comment]
  69.  
  70. ----* * * subtitle here (max 3 lines)----
  71.  
  72. [/comment]Él llegó conmigo y conmigo se va; Sus ojos son mío', eso no va a cambiar.[/div]
  73.  
  74. [comment]----icon (image)----[/comment]
  75. [div=
  76.  
  77. /*replace here; with display:none; to use fontawesome icon instead*/ here;
  78.  
  79. height:33px; width:33px; transform:rotate(-16deg); background: var(--icon); -webkit-filter: drop-shadow(0 0 calc(var(--t-glow) * 0.4) var(--color-2)); background-size:contain; background-position:50% 50%; position:relative;][div=height:100%; width:100%; position:relative; top:-0%; left:-0%; background: var(--color-2); mask-image: var(--icon); mask-size: contain; mask-position:50% 50%;][/div][/div]
  80.  
  81. [comment]----icon (fontawesome)----[/comment]
  82. [div=
  83.  
  84. /*remove display:none; to use fontawesome icon*/ display:none;
  85.  
  86. height:33px; width:33px; transform:rotate(-16deg); font-size:33px; color: var(--color-2); text-shadow:0 0 var(--t-glow) var(--color-2); line-height:100%;][comment]
  87.  
  88. ----* * * fontawesome icon here----
  89.  
  90. [/comment][fa]fas fa-flower[/fa][/div]
  91. [/div]
  92. [comment]----right subtitle/icon end----[/comment]
  93. [/div]
  94. [comment]----header end----[/comment]
  95.  
  96. [comment]----main container----[/comment]
  97. [div=height:auto; width:100%; margin-top:35px; display:flex; flex-flow:row-reverse wrap;]
  98.  
  99. [comment]----right (main contents)----[/comment]
  100. [div=height:460px; flex:62; min-width:200px; position:relative; z-index:2; display:flex; flex-flow:column nowrap; background: var(--bg-2); border:1px solid var(--color-1); border-left: var(--mb) solid var(--color-1); box-sizing:border-box;]
  101.  
  102. [comment]----main contents----[/comment]
  103. [div=height:433px; width:100%; padding:20px; box-sizing:border-box; overflow:hidden;][div=height:100%; width:100%; overflow-y:scroll; scrollbar-width:none; color: var(--t-color); font-size:12px; font-family: var(--body); line-height:14px; text-align:justify; padding:10px 0 0 0; box-sizing:border-box;][div=height:auto; width:auto; padding:5px 20px 5px 5px; box-sizing:border-box; float:left; color: var(--color-1); font-family: var(--title); font-size: 40px; line-height:100%; margin-top:-10px; text-shadow:0 0 var(--t-glow) var(--color-1);][comment]
  104.  
  105. ----* * * first letter here----
  106.  
  107. [/comment]L[/div][comment]
  108.  
  109. ----* * * rest of text here----
  110.  
  111. [/comment]orem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie metus nibh. Etiam non dictum nisl, sit amet sollicitudin diam. Aenean vel semper enim. Sed tincidunt pharetra leo ut tempor. Donec ac condimentum est. Fusce id ante non dolor hendrerit tempus. Aenean lobortis lacus in augue elementum finibus. Aliquam erat volutpat. Morbi sodales fermentum magna, ut gravida tellus porta at. Maecenas posuere dui mauris, nec sollicitudin tortor feugiat in. Donec hendrerit, sapien eget sollicitudin imperdiet, turpis metus posuere tortor, ac pulvinar tellus eros ac elit.
  112.  
  113. Sed dui erat, egestas ac consequat nec, laoreet quis ante. Nunc nunc quam, lobortis quis velit eget, pretium malesuada odio. In maximus, sapien non sodales porttitor, arcu massa fermentum lectus, vitae mollis libero ante sit amet libero. Proin eget magna laoreet, lobortis dolor in, suscipit sapien. Integer vitae est ligula. Donec vel orci et metus mattis scelerisque semper quis enim. Aenean vitae leo vestibulum, feugiat nunc tempus, mattis nibh. Cras condimentum erat lectus, eu mollis urna faucibus vitae. Quisque molestie libero lacus. Maecenas eget nibh elementum, pellentesque metus non, auctor nisl. Fusce tristique tincidunt magna sit amet vestibulum. Sed dapibus egestas egestas. Vestibulum vestibulum tempus erat, sit amet ultrices diam pretium sed. Morbi sit amet lorem ut tortor luctus euismod.
  114. [/div][/div]
  115. [comment]----main contents end----[/comment]
  116.  
  117. [comment]----music player----[/comment]
  118. [div=height:27px; width:100%; background: var(--color-2); border-top:1px solid var(--color-1); display:flex; flex-flow:row nowrap; align-items:center; padding:0 15px 1px 15px; box-sizing:border-box; position:relative;][div=height:100%; width:100%; background: var(--color-1); opacity:0.8; position:absolute; top:0; left:0;][/div]
  119. [comment]----play button----[/comment]
  120. [div=height:auto; width:auto; position:relative; z-index:2;][div=height:0; width:0; position:relative; z-index:3; border-left:8px solid var(--color-2); border-top:5px solid transparent; border-bottom:5px solid transparent; -webkit-filter: drop-shadow(0 0 calc(var(--t-glow) * 0.4) var(--color-2));][/div]
  121.  
  122. [comment]----actual media player----[/comment]
  123. [div=height:100%; width:100%; position:absolute; top:0; left:0; z-index:3; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0.01%;][div=height:32px; width:32px; position:relative; pointer-events:auto; transform:scaleX(1.8);]
  124.  
  125. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  126. [div=height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0; /*remove this to use me, and add it to the other*/ display:none;]
  127. [media=soundcloud]https://soundcloud.com/sawtowne/magical-cure-love-shot[/media]
  128. [/div]
  129.  
  130. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  131. [div=height:500px; width:500px; margin-top:-170px; margin-left:-93px; padding:0px;]
  132. [media=googledrive]18FsmsVvTGVdRIB4iGyBFOM3HiSHyr5Hs[/MEDIA]
  133. [/div]
  134.  
  135. [/div][/div]
  136. [comment]----actual media player end----[/comment]
  137. [/div]
  138. [comment]----play button end----[/comment]
  139.  
  140. [comment]----song info----[/comment]
  141. [div=height:auto; max-height:15px; flex:1; position:relative; z-index:2; margin-left:15px; font-size:12px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; color: var(--color-2); text-shadow: 0 0 var(--t-glow) var(--color-2); font-family: var(--body); line-height:100%; text-transform:uppercase; text-align:right;][div=display:inline; font-weight:bold; letter-spacing:1px; font-size:11px;][comment]
  142.  
  143. ----* * * song name----
  144.  
  145. [/comment]gabriela[/div][comment]
  146.  
  147. [/comment][div=margin:0 10px 0 10px; display:inline-block;]—[/div][comment]
  148.  
  149. ----* * * song artist here----
  150.  
  151. [/comment]katseye[/div]
  152. [comment]----song info end----[/comment]
  153. [/div]
  154. [comment]----music player end----[/comment]
  155. [/div]
  156. [comment]----right end----[/comment]
  157.  
  158. [comment]----left (details)----[/comment]
  159. [div=height:auto; min-height:155px; flex:48; min-width:180px; display:flex; flex-flow:column wrap;]
  160. [comment]----left image----[/comment]
  161. [div=height:auto; flex:1; min-height:180px; width:100%; background: var(--img-1); background-size:cover; border:1px solid var(--color-1); border-top: var(--db) solid var(--color-1); box-sizing:border-box; overflow:hidden; position:relative; z-index:5;][div=height:100%; width:100%; background: var(--img-1); background-size:cover; mix-blend-mode:lighten; opacity: var(--img-fopacity); -webkit-filter: blur(var(--img-fblur));][/div][div=height:100%; width:100%; background: radial-gradient(ellipse 100% 100% at center, transparent, var(--color-1)); position:absolute; top:0; left:0; mix-blend-mode: overlay; opacity:0.5;][/div][div=height:100%; width:100%; background: var(--color-1); position:absolute; top:0; left:0; mix-blend-mode: soft-light; opacity:0.2;][/div][/div]
  162.  
  163. [comment]----details container
  164.  
  165. (the accordion MAY look a little funky in preview. do not worry, it will come out alright when you post it!)
  166.  
  167. ----[/comment]
  168. [div=height:145px; width:100%; flex-shrink:0; background: var(--color-1); border:1px solid var(--color-1); border-top: 0; box-sizing:border-box; position:relative; z-index:2; padding:12px 15px; box-sizing:border-box; overflow:hidden;][div=height:calc(100% + 144px); width:100%; box-sizing:border-box; margin-top:27px; display:flex; flex-flow:column nowrap; justify-content:flex-end; visibility:hidden;][accordion=100%]{slide=[div=height:266px; width:100%; font-weight:normal; font-variant:normal; box-sizing:border-box;]
  169.  
  170. [comment]----lobby page----[/comment]
  171. [div=height:117px; width:100%; visibility:visible; position:relative; z-index:2; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; color: var(--color-2); text-transform:uppercase; font-family: var(--header);]
  172. [div=height:auto; max-height:80px; overflow:hidden; width:auto; padding:0 6px 0 0; box-sizing:border-box; font-size:40px; letter-spacing:-6px; font-family: var(--header); line-height:100%; text-shadow:0 0 var(--t-glow) var(--color-2); text-align:center;][comment]
  173.  
  174. ----* * * name here----
  175.  
  176. [/comment]manon[/div]
  177.  
  178. [comment]----click instruction (DO NOT REMOVE!!!)----[/comment]
  179. [div=height:auto; width:100%; position:absolute; bottom:3px; left:0; opacity:0.4; text-align:center; font-weight:bold;letter-spacing:1px; font-size:9px; color: var(--color-2); font-family: var(--body);]click[/div]
  180. [/div]
  181. [comment]----lobby page end----[/comment]
  182.  
  183. [comment]----details page----[/comment]
  184. [div=height:114px; width:100%; margin-top:23px; visibility:visible; position:relative; z-index:2; padding:5px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:center; --m: 6px;][div=height:auto; width:100%; overflow-x:auto; scrollbar-width:none;][div=height:0; width:100%; margin-bottom:calc(var(--m) * -1);][/div]
  185.  
  186. [comment]----copy this whole thing to add another tag----[/comment]
  187. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; align-items:flex-start; color: var(--color-2); margin-top: var(--m);]
  188. [div=height:auto; width:fit-content; width:-moz-fit-content; min-width:70px; text-transform:uppercase; letter-spacing:-0.5px; font-size:11.5px; line-height:135%; font-family: var(--header); font-weight:bold; text-align:right;][comment]
  189.  
  190. ----* * * tag title here----
  191.  
  192. [/comment]mood.[/div]
  193.  
  194. [div=height:auto; flex:1; font-size:14px; line-height:14px; font-family: var(--body); text-align:left; margin-left:15px;][comment]
  195.  
  196. ----* * * tag contents here----
  197.  
  198. [/comment]vengeful...[/div]
  199. [/div]
  200. [comment]----copy me too!----[/comment]
  201.  
  202. [comment]----copy this whole thing to add another tag----[/comment]
  203. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; align-items:flex-start; color: var(--color-2); margin-top: var(--m);]
  204. [div=height:auto; width:fit-content; width:-moz-fit-content; min-width:70px; text-transform:uppercase; letter-spacing:-0.5px; font-size:11.5px; line-height:135%; font-family: var(--header); font-weight:bold; text-align:right;][comment]
  205.  
  206. ----* * * tag title here----
  207.  
  208. [/comment]location.[/div]
  209.  
  210. [div=height:auto; flex:1; font-size:14px; line-height:14px; font-family: var(--body); text-align:left; margin-left:15px;][comment]
  211.  
  212. ----* * * tag contents here----
  213.  
  214. [/comment]the arch[/div]
  215. [/div]
  216. [comment]----copy me too!----[/comment]
  217.  
  218. [comment]----copy this whole thing to add another tag----[/comment]
  219. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; align-items:flex-start; color: var(--color-2); margin-top: var(--m);]
  220. [div=height:auto; width:fit-content; width:-moz-fit-content; min-width:70px; text-transform:uppercase; letter-spacing:-0.5px; font-size:11.5px; line-height:135%; font-family: var(--header); font-weight:bold; text-align:right;][comment]
  221.  
  222. ----* * * tag title here----
  223.  
  224. [/comment]outfit.[/div]
  225.  
  226. [div=height:auto; flex:1; font-size:14px; line-height:14px; font-family: var(--body); text-align:left; margin-left:15px;][comment]
  227.  
  228. ----* * * tag contents here----
  229.  
  230. [/comment][url='xx']a dress[/url][/div]
  231. [/div]
  232. [comment]----copy me too!----[/comment]
  233.  
  234. [comment]----copy this whole thing to add another tag----[/comment]
  235. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; align-items:flex-start; color: var(--color-2); margin-top: var(--m);]
  236. [div=height:auto; width:fit-content; width:-moz-fit-content; min-width:70px; text-transform:uppercase; letter-spacing:-0.5px; font-size:11.5px; line-height:135%; font-family: var(--header); font-weight:bold; text-align:right;][comment]
  237.  
  238. ----* * * tag title here----
  239.  
  240. [/comment]tags.[/div]
  241.  
  242. [div=height:auto; flex:1; font-size:14px; line-height:14px; font-family: var(--body); text-align:left; margin-left:15px;][comment]
  243.  
  244. ----* * * tag contents here----
  245.  
  246. [/comment]@ user[/div]
  247. [/div]
  248. [comment]----copy me too!----[/comment]
  249.  
  250. [/div][/div]
  251. [comment]----details page end----[/comment]
  252.  
  253. }[div=height:125px; width:100%;][/div]{/slide}[/div][/accordion][div=height:266px; width:100%; font-weight:normal; font-variant:normal;][/div][/div]
  254.  
  255. [comment]----icon decoration----[/comment]
  256. [div=height:100%; width:100%; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; opacity:0.13;]
  257. [comment]----icon (image)----[/comment]
  258. [div=
  259.  
  260. /*replace here; with display:none; to use fontawesome icon instead*/ here;
  261.  
  262. height:100px; width:100px; transform:rotate(-16deg); background: var(--color-2); mask-image: var(--icon); mask-size: contain; mask-position:50% 50%;][/div]
  263.  
  264. [comment]----icon (fontawesome)----[/comment]
  265. [div=
  266.  
  267. /*remove display:none; to use fontawesome icon*/ display:none;
  268.  
  269. height:100px; width:100px; transform:rotate(-16deg); font-size:95px; color: var(--color-2); line-height:100%;][comment]
  270.  
  271. ----* * * fontawesome icon here----
  272.  
  273. [/comment][fa]fas fa-flower[/fa][/div]
  274. [/div]
  275. [comment]----icon decoration end----[/comment]
  276.  
  277. [/div]
  278. [comment]----details container end----[/comment]
  279. [/div]
  280. [comment]----left end----[/comment]
  281. [/div]
  282. [comment]----main container end----[/comment]
  283.  
  284. [comment]----background gradient----[/comment]
  285. [div=height:57%; width:100%; position:absolute; bottom:0; left:0; z-index:1; overflow:hidden;][div=height:100%; width:100%; position:relative; left:-0%; top:0%; background: radial-gradient(ellipse 120% 64% at top, var(--bg-1) 45%, var(--bg-2) 100%);;][/div][/div]
  286.  
  287. [comment]----noise texture----[/comment]
  288. [div=height:100%; width:100%; background: var(--texture) 50% 50%; background-size:30%; position:absolute; top:0; left:0; z-index:6; pointer-events:none; mix-blend-mode:overlay; opacity:0.6;][/div]
  289. [div=height:100%; width:100%; background: var(--texture) 50% 50%; background-size:30%; position:absolute; top:0; left:0; z-index:4; pointer-events:none; mix-blend-mode:multiply; opacity:0.18;][/div]
  290.  
  291. [comment]----signature! *** do not remove!! ***----[/comment]
  292. [div=height:auto;width:100%; position:absolute; z-index:6; opacity:0.1; bottom:32px; left:0; color: var(--color-1); font-size:9px;text-align:center; line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/div]
  293.  
  294. [/div][/div]
Advertisement
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!