API tools faq
paste
Advertisement
ooksie

stop that feeling (ph+scroll)

ooksie
Apr 23rd, 2024
36
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.98 KB | None | 0 0
raw download clone embed print report
  1. [div=height:auto; width:100%; max-width:730px; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; margin:30px auto 40px auto;]
  2.  
  3. [comment]----placeholder----[/comment]
  4. [comment]coded by uxie!
  5.  
  6. [font=Fugaz One]title[/font]
  7.  
  8. sticker fonts:
  9. [font=Oranienbaum]sticker one[/font]
  10. [font=Grape Nuts]sticker two[/font]
  11. [font=Antonio]sticker three[/font]
  12.  
  13. [/comment][div=
  14.  
  15. /*sticker header background*/
  16. --bg: #f9f7ef;
  17. /*shadows/borders. advice -- no need to touch this.*/
  18. --border: rgb(0, 0, 0, 0.2);
  19. --shadow: rgb(0, 0, 0, 0.3);
  20. /*sticker header text/icons colour*/
  21. --color-1: #2E2D25;
  22.  
  23. /*sticker header font*/
  24. --title:'Fugaz One', sans-serif;
  25.  
  26. /*text sticker customisations below! sXa generally refers to the sticker's background colour, sXb generally refers to the sticker's text colour. sXt is the font!*/
  27. /*sticker one*/
  28. --s1a: #FBF8F0;
  29. --s1b: #2E2D25;
  30. --s1t: 'Oranienbaum', serif;
  31.  
  32. /*sticker two*/
  33. --s2a: #d37a7a;
  34. --s2b: #2E2D25;
  35. --s2t: 'Grape Nuts', display;
  36.  
  37. /*sticker three*/
  38. --s3a: #2E2D25;
  39. --s3b: #FBF8F0;
  40. --s3t: 'Antonio', sans-serif;
  41.  
  42. /*image sticker customisations below!*/
  43. /*sticker 4 -- recc. this to be the main image of your oc/aesthetic*/
  44. --s4: URL('https://i.pinimg.com/564x/af/40/3e/af403eef0f9c1776f7e9c6f044ef3c43.jpg');
  45. /*sticker 5 -- recc. this to be a secondary image of your oc/aesthetic*/
  46. --s5: URL('https://i.pinimg.com/736x/84/75/50/8475500067460e4eda7292153cc4df90.jpg');
  47. /*sticker 6 -- a taller image, get like an aesthetic poster or something*/
  48. --s6: URL('https://i.pinimg.com/564x/77/56/41/77564195117d871c4c72e18e990ff78b.jpg');
  49. /*the following two are square images. replace these with actual sticker images, like the kind you find on redbubble! try to get them transparent!*/
  50. --s7: url('https://i.imgur.com/p4kOQUe.png');
  51. --s8: url('https://i.imgur.com/jArjhHB.png');
  52.  
  53. /*textures! don't touch these*/
  54. --patexture: url('https://www.transparenttextures.com/patterns/textured-paper.png');
  55. --pltexture: url('https://i.imgur.com/qYilws3.png');
  56. --doodle:url('https://i.imgur.com/oq7A6Om.png');
  57. --staple: url('https://i.imgur.com/eqdPeu4.png');
  58.  
  59.  
  60. height:auto; flex:1; flex-shrink:0; padding:0 0 10px 0; box-sizing:border-box; margin:30px; display:flex; align-items:center; justify-content:center; line-height:0;][div=height:auto; width:280px; display:flex; flex-flow:column nowrap; align-items:center; transform:rotate(3deg); position:relative;]
  61.  
  62. [comment]----sticker header----[/comment]
  63. [div=height:100px; width:100%; overflow:hidden; padding:15px 20px; box-sizing:border-box; background: var(--bg); position:relative; z-index:11; display:flex; align-items:center; justify-content:center; box-shadow:0px 2px 5px var(--shadow), 0px -1px 5px var(--shadow); border-radius:1px;][div=height:100%; width:100%; position:absolute; top:0; left:0; z-index:5; pointer-events:none; background: var(--patexture); background-size:150%; opacity:0.3; mix-blend-mode: multiply;][/div]
  64.  
  65. [div=height:auto; width:auto; color: var(--color-1); font-family: var(--title); font-size:35px; line-height:80%;][comment]
  66.  
  67. ----* * * role here----
  68.  
  69. [/comment]Good Luck, Babe[i]![/i][/div]
  70.  
  71. [comment]----decorations----[/comment]
  72. [div=height:85px; width:97px; background: var(--doodle); background-size:contain; background-repeat:no-repeat; position:absolute; bottom:-8px; right:-5px; transform:rotate(-25deg);][/div]
  73.  
  74. [div=height:100%; width:100%; position:absolute; top:0; left:0; /*remove display:none; to show*/ display:none; ]
  75. [div=height:auto; width:auto; color: var(--color-1); font-size:50px; position:absolute; bottom:-2px; right:60px; transform:rotate(-25deg); line-height:100%;][comment]
  76.  
  77. ----* * * doodle one (use an fa-icon!)----
  78.  
  79. [/comment][fa]fal fa-star[/fa][/div]
  80. [div=height:auto; width:auto; color: var(--color-1); font-size:30px; position:absolute; bottom:27px; right:21px; transform:rotate(-38deg); line-height:100%;][comment]
  81.  
  82. ----* * * doodle one (use an fa-icon! make it the same as above!)----
  83.  
  84. [/comment][fa]far fa-star[/fa][/div]
  85. [/div]
  86. [comment]----decorations end----[/comment]
  87.  
  88. [comment]----staples----[/comment]
  89. [div=height:20px; width:35px; background: var(--staple) 50% 50%; background-size:contain; background-repeat:no-repeat; position:absolute; bottom:0px; right:5px;][/div]
  90. [div=height:20px; width:35px; background: var(--staple) 50% 50%; background-size:contain; background-repeat:no-repeat; position:absolute; bottom:0px; left:5px;][/div]
  91. [/div]
  92. [comment]----header end----[/comment]
  93.  
  94. [comment]----bag----[/comment]
  95. [div=height:300px; width:279px; position:relative; box-shadow:3px 3px 5px var(--shadow); margin-right:2px; padding:15px; box-sizing:border-box;][div=height:100%; width:100%; background: var(--pltexture); background-size:cover; position:absolute; top:0; left:0; z-index:10; opacity:0.8; pointer-events:none; border-radius:1px; border:1px solid var(--border);][/div][div=height:100%; width:100%; position:absolute; top:0; left:0; z-index:9; background: var(--shadow); opacity:0.1; mix-blend-mode:hard-light;][/div]
  96.  
  97. [comment]----** text stickers **----[/comment]
  98. [comment]----sticker one----[/comment]
  99. [div=height:auto; width:fit-content; width:-moz-fit-content; position:absolute; top:65px; left:70px; font-family: var(--s1t); font-size:23px; letter-spacing:-1px; word-spacing:4px; transform:rotate(55deg);][div=height:100%; width:100%; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center;][div=height:auto; width:auto; color: var(--s1b); line-height:100%;][comment]
  100.  
  101. ----* * * sticker contents here (recc. this one to be a short quote, line, whatever)----
  102.  
  103. [/comment]I Told You So[/div][/div]
  104. [div=height:auto; width:auto; -webkit-text-stroke:12px var(--s1a); line-height:100%; box-shadow:2px 2px 3px var(--shadow);]][comment]
  105.  
  106. ----* * * SAME TEXT HERE AGAIN----
  107.  
  108. [/comment]I Told You So[/div][/div]
  109. [comment]----sticker one end----[/comment]
  110.  
  111. [comment]----sticker two----[/comment]
  112. [div=height:auto; width:auto; max-width:180px; position:absolute; z-index:3; bottom:22px; right:10px; text-indent:18px; transform:rotate(-5deg);][div=display:inline; box-decoration-break:clone; padding:3px 8px; box-sizing:border-box; border-radius:10px; -webkit-box-decoration-break: clone; background: var(--s2a); color: var(--s2b); font-family: var(--s2t); line-height:18px; font-size:12px; letter-spacing:1px; text-transform:uppercase; word-spacing:3px; font-weight:bold; box-shadow:2px 2px 3px var(--shadow);][comment]
  113.  
  114. ----* * * sticker contents here (recc. this one to be a longer quote)----
  115.  
  116. [/comment]you can kiss a hundred boys in bars
  117. shoot another shot, try to stop the feeling[/div][/div]
  118.  
  119. [comment]----sticker three----[/comment]
  120. [div=height:auto; width:auto; max-width:150px; z-index:5; position:absolute; top:60px; left:20px; transform:rotate(15deg); padding:6px 8px 8px 8px; box-sizing:border-box; background: var(--s3a); color: var(--s3b); font-family: var(--s3t); font-size:12px; text-transform:uppercase; letter-spacing:2px; line-height:100%; font-weight:bold; border-radius:2px; box-shadow:2px 2px 3px var(--shadow);][comment]
  121.  
  122. ----* * * sticker contents here (recc. this one to be your oc's name, faceclaim)----
  123.  
  124. [/comment]#chappell roan[/div]
  125. [comment]----text stickers end----[/comment]
  126.  
  127. [comment]----** image stickers **----[/comment]
  128.  
  129. [comment]----sticker four----[/comment]
  130. [div=height:150px; width:130px; border:5px solid var(--bg); box-sizing:border-box; background: var(--s4); background-size:cover; transform:rotate(3deg); position:absolute; bottom:70px; left:20px; box-shadow:2px 2px 3px var(--shadow);
  131.  
  132. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/div]
  133.  
  134. [comment]----sticker five----[/comment]
  135. [div=height:80px; width:75px; border:4px solid var(--bg); box-sizing:border-box; background: var(--s5); background-size:cover; transform:rotate(-5deg); position:absolute; top:65px; right:20px; z-index:4; box-shadow:2px 2px 3px var(--shadow);
  136.  
  137. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/div]
  138.  
  139. [comment]----sticker six----[/comment]
  140. [div=height:150px; width:75px; border:2px solid var(--bg); box-sizing:border-box; background: var(--s6); background-size:cover; transform:rotate(0deg); position:absolute; bottom:30px; right:40px; box-shadow:2px 2px 3px var(--shadow);
  141.  
  142. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/div]
  143.  
  144. [comment]----sticker seven----[/comment]
  145. [div=height:80px; width:80px; background: var(--s7); background-size:contain; background-repeat:no-repeat; transform:rotate(-10deg); position:absolute; top:-2px; right:65px; z-index:5;
  146.  
  147. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/div]
  148.  
  149. [comment]----sticker eight----[/comment]
  150. [div=height:65px; width:65px; background: var(--s8); background-size:contain; background-repeat:no-repeat; transform:rotate(15deg); position:absolute; top:30px; right:-5px; z-index:5;
  151.  
  152. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/div]
  153.  
  154. [/div]
  155. [comment]----bag end----[/comment]
  156.  
  157. [/div][/div]
  158. [comment]----placeholder end----[/comment]
  159.  
  160. [comment]----scroll textbox----[/comment]
  161. [div=
  162.  
  163. /*want to add any small customisations to your textbox? do it here!*/
  164. --border-colour: xx;
  165. --border-width: xx;
  166. --bg: xx;
  167. --t-color: xx;
  168.  
  169. /*some customisations you SHOULD edit*/
  170. --font-size: 12px;
  171. --line-height:130%;
  172.  
  173. height:408px; flex:2; min-width:300px; max-width:380px; margin:30px; display:flex; flex-direction:column; overflow:hidden; padding:15px 0; box-sizing:border-box; background: var(--bg); border: var(--border-width) solid var(--border-colour); margin:0 auto;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; padding:0 7px 0 15px; box-sizing:border-box; text-align:justify; font-size: var(--font-size); line-height: var(--line-height);][comment]
  174.  
  175. ----* * * text starts here----
  176.  
  177. [/comment][font=Libre Franklin]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec erat in nisl porta ornare eu sit amet lorem. Proin ligula dolor, suscipit in volutpat non, viverra vitae velit. Vivamus cursus gravida orci, efficitur pharetra diam vestibulum eu. Nulla facilisi. Quisque nec libero sed dui eleifend faucibus. Aenean quis arcu vitae mauris suscipit imperdiet. Integer sodales mauris diam, sit amet commodo mauris viverra ullamcorper. Etiam accumsan, leo vitae maximus sagittis, lorem lectus vehicula arcu, vitae aliquet leo neque at nisl.
  178.  
  179. Proin id elit quis lectus eleifend feugiat at vitae est. Praesent sed lacus in ipsum feugiat mattis. Praesent aliquet elit lacus, at hendrerit nunc congue sed. Vivamus dapibus ex nec sapien lacinia malesuada. Mauris at iaculis libero. Sed commodo fermentum ipsum, non dignissim neque sollicitudin vel. Vestibulum dapibus tellus eget ligula commodo, vel bibendum arcu egestas. Sed tempor imperdiet purus, ac euismod purus. Nulla eu vehicula tellus.
  180.  
  181. Maecenas euismod viverra nunc, eu eleifend lectus vestibulum aliquet. Quisque condimentum, ex eget sagittis aliquam, nibh eros tempor nunc, sit amet mollis ipsum nibh eu mi. Curabitur sit amet egestas elit, nec interdum ante. Etiam elit odio, lacinia a vulputate sit amet, bibendum sed arcu. Ut quis porta ante. Aenean sed iaculis ligula. Fusce convallis rhoncus lacus, tristique lobortis justo efficitur et. Proin eros dui, scelerisque id metus aliquam, dignissim consequat tortor. Nam sed augue eu ante feugiat suscipit eu id odio. Maecenas vitae lectus eu lacus consectetur gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae lobortis magna, at blandit neque. In mollis rhoncus lacus, eget egestas diam consectetur at. Quisque molestie elit et augue convallis, aliquam sollicitudin est dictum.
  182. [/font][/div][/div][/div]
  183. [comment]----scroll textbox end----[/comment]
  184.  
  185. [/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!