API tools faq
paste
Advertisement
ooksie

bad ending

ooksie
Mar 16th, 2022 (edited)
230
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.27 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2. loosely inspired by [URL="https://soyeonzcodes.tumblr.com/midebilidad"][/URL]
  3.  
  4. [font=League Spartan]headers[/font]
  5. [font=Yomogi]quote[/font]
  6. [font=League Spartan]body text[/font]
  7.  
  8. [/comment][border=transparent;
  9.  
  10. /*main background colour*/
  11. --bg: #181819;
  12. /*textbox borders*/
  13. --border: #7a6f72;
  14.  
  15. /*main accent colour*/
  16. --color-1: #e56485;
  17. /*change main accent to rgb and input values here*/
  18. --color-1-t: rgb(229, 100, 133, 0.5);
  19. /*light accent colour -- off-white in the shade of main*/
  20. --color-2: #fff2f6;
  21. /*mid accent colour -- between color-1 & color-2*/
  22. --color-3: #f282a0;
  23.  
  24. /*name colour*/
  25. --h1: #fff;
  26. /*info + section header colour*/
  27. --h2: var(--color-1);
  28. /*text colour*/
  29. --t-color: #dfdee0;
  30.  
  31. /*fonts used*/
  32. --quote: 'Yomogi', display;
  33. --header: 'League Spartan', sans-serif;
  34. --body: 'League Spartan', sans-serif;
  35.  
  36. /*big image top/left*/
  37. --img-1: url('https://pbs.twimg.com/media/FNk84FHaIAQOwg9.jpg');
  38. /*small footer icon*/
  39. --img-2: url('https://i.imgur.com/dQCGv1E.png');
  40.  
  41. /*gallery images*/
  42. --gimg-1: URL('https://pbs.twimg.com/media/FNn20beacAAGgJU.jpg');
  43. --gimg-2: URL('https://pbs.twimg.com/media/FNn20bnaIAAckxp.jpg');
  44. --gimg-3: URL('https://pbs.twimg.com/media/FNn20bsaMAIYPw9.jpg');
  45. --gimg-4: URL('https://pbs.twimg.com/media/FNn20cCaIAAD6zc.jpg');
  46.  
  47. height:auto; width:100%; padding:0; overflow-x:auto; margin:10px 0 25px 0; line-height:0;][border=transparent; height:auto; width:100%; padding:0; max-width:480px; min-width:300px; position:relative; margin:10px auto;]
  48.  
  49. [comment]----main container----[/comment]
  50. [border=transparent; height:auto; min-height:417px; width:100%; padding:0; border:3px solid var(--color-1); border-radius:10px; overflow:hidden; --mb:clamp(0px, -50px + 11vw, 1px); --mb2:clamp(0px, 50px - 11vw, 1px); background: var(--bg); display:flex; flex-flow:column nowrap; position:relative; z-index:2;]
  51.  
  52. [comment]----row 1----[/comment]
  53. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row-reverse wrap;]
  54. [comment]----image----[/comment]
  55. [border=transparent; min-height:150px; flex:44; min-width:150px; padding:0; position:relative; border:1px solid var(--border); border-top: var(--mb2) solid var(--border); border-left: var(--mb) solid var(--border); background: var(--img-1); -webkit-filter: grayscale(1) contrast(0.7); background-size:cover;
  56.  
  57. /*edit the following to adjust the cropping of the image*/ background-position:50% 35%;][/border]
  58. [comment]----image end----[/comment]
  59.  
  60. [comment]----name/basics----[/comment]
  61. [border=transparent; height:170px; flex:56; min-width:220px; padding:0; box-sizing:border-box; border-bottom:1px solid var(--border); position:relative; overflow:hidden; display:flex; flex-flow:column nowrap;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; scroll-snap-type:y mandatory;]
  62.  
  63. [comment]----slide one----[/comment]
  64. [border=transparent; height:100%; width:50%; padding:15px 7px 15px 15px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; scroll-snap-align:start;][border=transparent; height:auto; width:auto; padding:0; position:absolute; bottom:8px; left:8px; color: var(--color-2); font-size:12px; opacity:0.5;][fa]fas fa-chevron-down[/fa][/border]
  65. [border=transparent; height:100%; width:100%; padding:35px 20px 35px 20px; box-sizing:border-box; position:absolute; top:0; left:0; display:flex; align:items:center; justify-content:center;][border=transparent; height:auto; width:auto; padding:0; font-size:102px; color: var(--color-1); text-shadow:0 0 10px var(--color-1); transform:rotate(-17deg) scaleY(0.9); margin:3px 90px 50px 0;][fa]fal fa-heart[/fa][/border][/border][border=transparent; height:auto; width:auto; padding:0; position:absolute; top:-40px; right:10px; font-size:70px; color: var(--color-3); text-shadow:0 0 10px var(--color-3); transform:rotate(8deg); z-index:2;][fa]fal fa-heart[/fa][/border]
  66.  
  67. [comment]----name container----[/comment]
  68. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:120px; max-width:175px; padding:0; margin:5px 0 0 0; display:flex; flex-flow:column nowrap; align-items:flex-end;]
  69. [comment]----name----[/comment]
  70. [border=transparent; height:auto; max-height:42px; overflow:hidden; max-width:160px; padding:0; color: var(--h1); font-weight:bold; font-family: var(--header); font-size:22px; line-height:20px; position:relative; z-index:2; text-align:right; margin:5px 5px 0 15px;][comment]
  71.  
  72. ----* * * name here----
  73.  
  74. [/comment]song yuqi[/border]
  75.  
  76. [comment]----role/subtitle----[/comment]
  77. [border=transparent; height:auto; width:auto; max-width:120px; padding:0; color: var(--color-3); font-size:10px; line-height:10px; font-family: var(--body); letter-spacing:1px; font-style:oblique; position:relative; z-index:2; text-align:right; opacity:0.9;][comment]
  78.  
  79. ----* * * subtitle here----
  80.  
  81. [/comment]the villain.[/border]
  82. [/border]
  83. [comment]----name container end----[/comment]
  84. [/border]
  85. [comment]----slide one end----[/comment]
  86.  
  87. [comment]----slide two----[/comment]
  88. [border=transparent; height:100%; width:50%; padding:25px 12px 25px 20px; box-sizing:border-box; display:flex; align-items:center; position:relative; scroll-snap-align:start;]
  89. [border=transparent; height:auto; width:auto; padding:0; position:absolute; top:-30px; right:-20px; font-size:80px; color: var(--color-1); text-shadow:0 0 10px var(--color-1); transform:rotate(15deg); z-index:2;][fa]fal fa-heart[/fa][/border][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; overflow:hidden;][border=transparent; height:auto; width:auto; padding:0; position:absolute; bottom:-26px; left:-22px; font-size:75px; color: var(--color-3); text-shadow:0 0 10px var(--color-3); transform:rotate(-12deg);][fa]fal fa-heart[/fa][/border][/border]
  90.  
  91. [border=transparent; height:auto; max-height:100%; width:100%; padding:0; display:flex; flex-flow:column nowrap; position:relative; z-index:3; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 15px 0 7px;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-9px;][/border]
  92.  
  93. [comment]----copy this whole thing to add another piece of info----[/comment]
  94. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; margin-top:6px;]
  95. [border=transparent; height:auto; width:auto; min-width:50px; flex-shrink:0; padding:0; font-family: var(--header); font-weight:bold; color: var(--h2); font-size:15px; line-height:15px; margin:3px 10px 0 0; letter-spacing:1px;][comment]
  96.  
  97. ----* * * info title here----
  98.  
  99. [/comment]name.[/border]
  100. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; color: var(--t-color); font-size:14px; line-height:15px; margin-top:3px; font-family: var(--body);][comment]
  101.  
  102. ----* * * info contents here----
  103.  
  104. [/comment]lorem ipsum[/border]
  105. [/border]
  106. [comment]----copy me too!----[/comment]
  107.  
  108. [comment]----copy this whole thing to add another piece of info----[/comment]
  109. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; margin-top:6px;]
  110. [border=transparent; height:auto; width:auto; min-width:50px; flex-shrink:0; padding:0; font-family: var(--header); font-weight:bold; color: var(--h2); font-size:15px; line-height:15px; margin:3px 10px 0 0; letter-spacing:1px;][comment]
  111.  
  112. ----* * * info title here----
  113.  
  114. [/comment]n. names.[/border]
  115. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; color: var(--t-color); font-size:14px; line-height:15px; margin-top:3px; font-family: var(--body);][comment]
  116.  
  117. ----* * * info contents here----
  118.  
  119. [/comment]lorem ipsum[/border]
  120. [/border]
  121. [comment]----copy me too!----[/comment]
  122.  
  123. [comment]----copy this whole thing to add another piece of info----[/comment]
  124. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; margin-top:6px;]
  125. [border=transparent; height:auto; width:auto; min-width:50px; flex-shrink:0; padding:0; font-family: var(--header); font-weight:bold; color: var(--h2); font-size:15px; line-height:15px; margin:3px 10px 0 0; letter-spacing:1px;][comment]
  126.  
  127. ----* * * info title here----
  128.  
  129. [/comment]gender.[/border]
  130. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; color: var(--t-color); font-size:14px; line-height:15px; margin-top:3px; font-family: var(--body);][comment]
  131.  
  132. ----* * * info contents here----
  133.  
  134. [/comment]lorem ipsum[/border]
  135. [/border]
  136. [comment]----copy me too!----[/comment]
  137.  
  138. [comment]----copy this whole thing to add another piece of info----[/comment]
  139. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; margin-top:6px;]
  140. [border=transparent; height:auto; width:auto; min-width:50px; flex-shrink:0; padding:0; font-family: var(--header); font-weight:bold; color: var(--h2); font-size:15px; line-height:15px; margin:3px 10px 0 0; letter-spacing:1px;][comment]
  141.  
  142. ----* * * info title here----
  143.  
  144. [/comment]age.[/border]
  145. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; color: var(--t-color); font-size:14px; line-height:15px; margin-top:3px; font-family: var(--body);][comment]
  146.  
  147. ----* * * info contents here----
  148.  
  149. [/comment]lorem ipsum[/border]
  150. [/border]
  151. [comment]----copy me too!----[/comment]
  152.  
  153. [comment]----copy this whole thing to add another piece of info----[/comment]
  154. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; margin-top:6px;]
  155. [border=transparent; height:auto; width:auto; min-width:50px; flex-shrink:0; padding:0; font-family: var(--header); font-weight:bold; color: var(--h2); font-size:15px; line-height:15px; margin:3px 10px 0 0; letter-spacing:1px;][comment]
  156.  
  157. ----* * * info title here----
  158.  
  159. [/comment]occupation.[/border]
  160. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; color: var(--t-color); font-size:14px; line-height:15px; margin-top:3px; font-family: var(--body);][comment]
  161.  
  162. ----* * * info contents here----
  163.  
  164. [/comment]lorem ipsum[/border]
  165. [/border]
  166. [comment]----copy me too!----[/comment]
  167.  
  168. [/border][/border][/border][/border]
  169. [comment]----slide two end----[/comment]
  170. [/border][/border]
  171. [comment]----name/basics end----[/comment]
  172. [/border]
  173. [comment]----row 1 end----[/comment]
  174.  
  175. [comment]----row 2 end----[/comment]
  176. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap;]
  177. [comment]----long quote----[/comment]
  178. [border=transparent; height:clamp(100px, -90px + 33vw, 190px); flex:27; min-width:90px; padding:20px 21px; box-sizing:border-box; border-right:var(--mb) solid var(--border); border-bottom:var(--mb2) solid var(--border); overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; color: var(--color-2); font-size:10px; text-align:justify; font-family: var(--body); line-height:15px; word-spacing:1px; opacity:0.63; overflow:hidden;][comment]
  179.  
  180. ----* * * quote here----
  181.  
  182. [/comment]you put me down, you want me dead. you don't even know me that well! i never cry, but i was in pain too, because of her. who is the villain? i was the villain in this novel. hey, yo, god or author? i'm going to hell, but not alone. in this play i can't see, i will change the ending.
  183. [/border][/border]
  184. [comment]----long quote end----[/comment]
  185.  
  186. [comment]----contents container----[/comment]
  187. [border=transparent; height:190px; flex:73; min-width:290px; padding:21px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-15px;][/border]
  188.  
  189. [comment]----about----[/comment]
  190. [border=transparent; height:auto; width:50%; padding:0 12px 0 20px; box-sizing:border-box; display:flex; flex-flow:column nowrap; margin-top:15px;][border=transparent; height:auto; width:100%; padding:2px 0 6px 0; box-sizing:border-box; background: var(--bg); color: var(--h2); font-family: var(--header); font-weight:bold; letter-spacing:1px; text-align:right; font-size:18px; text-shadow:0 0 4px var(--color-1); line-height:19px; position:sticky; top:-0.3px; font-style:oblique;][comment]
  191.  
  192. ----* * * section title here----
  193.  
  194. [/comment]is this my last supper?[/border]
  195. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-size:12px; text-align:justify; font-family: var(--body); line-height:15px;][comment]
  196.  
  197. ----* * * text starts here----
  198.  
  199. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id tempor lectus. Etiam sit amet tortor sagittis, venenatis nisl vel, aliquam augue. Nullam hendrerit placerat diam, quis mattis tellus maximus at. Duis dignissim ac mi in varius. Nulla facilisi. Phasellus accumsan ante a lorem aliquam, vel euismod eros egestas. Etiam auctor enim nunc, ac rutrum ex pellentesque vitae. Integer quis elit ante. In imperdiet volutpat libero non euismod. Integer ullamcorper dictum turpis quis auctor. Aenean quis magna placerat, facilisis urna sit amet, auctor turpis.
  200. [/border]
  201. [/border]
  202. [comment]----about end----[/comment]
  203.  
  204. [comment]----gallery----[/comment]
  205. [border=transparent; height:100%; width:50%; padding:0 12px 0 20px; box-sizing:border-box; display:flex; flex-flow:column nowrap; margin-top:15px;][border=transparent; height:auto; width:100%; padding:2px 0 6px 0; box-sizing:border-box; background: var(--bg); color: var(--h2); font-family: var(--header); font-weight:bold; letter-spacing:1px; text-align:right; font-size:18px; text-shadow:0 0 4px var(--color-1); line-height:19px; position:sticky; top:-0.3px; font-style:oblique;][comment]
  206.  
  207. ----* * * section title here----
  208.  
  209. [/comment]it's hot and sweet...[/border]
  210. [border=transparent; flex:1; width:100%; padding:0; display:flex; align-items:center;][border=transparent; height:100px; width:100%; padding:0; display:flex; flex-flow:row nowrap; overflow:hidden;][border=transparent; height:117px; width:100%; padding:0; overflow-x:scroll; overflow-y:hidden;][border=transparent; height:100px; width:calc(100% + 3px); padding:0; display:flex; flex-flow:row nowrap; align-items:center;][border=transparent; height:100%; width:0; padding:0; margin-right:-12px;][/border]
  211.  
  212. [comment]----gallery image----[/comment]
  213. [border=transparent; height:90px; width:90px; padding:0; margin:0 3px 0 15px; box-shadow:0 0 5px var(--color-3); border-radius:2px; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--gimg-1); background-size:cover; -webkit-filter: grayscale(1) contrast(0.7); border-radius:2px;
  214.  
  215. /*edit the following to adjust the cropping of the image*/ background-position:50% 0%;][/border][/border]
  216.  
  217. [comment]----gallery image----[/comment]
  218. [border=transparent; height:90px; width:90px; padding:0; margin:0 3px 0 15px; box-shadow:0 0 5px var(--color-3); border-radius:2px; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--gimg-2); background-size:cover; -webkit-filter: grayscale(1) contrast(0.7); border-radius:2px;
  219.  
  220. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  221.  
  222. [comment]----gallery image----[/comment]
  223. [border=transparent; height:90px; width:90px; padding:0; margin:0 3px 0 15px; box-shadow:0 0 5px var(--color-3); border-radius:2px; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--gimg-3); background-size:cover; -webkit-filter: grayscale(1) contrast(0.7); border-radius:2px;
  224.  
  225. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  226.  
  227. [comment]----gallery image----[/comment]
  228. [border=transparent; height:90px; width:90px; padding:0; margin:0 3px 0 15px; box-shadow:0 0 5px var(--color-3); border-radius:2px; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--gimg-4); background-size:cover; -webkit-filter: grayscale(1) contrast(0.7); border-radius:2px;
  229.  
  230. /*edit the following to adjust the cropping of the image*/ background-position:50% 0%;][/border][/border]
  231.  
  232. [border=0; padding:0; height:3px; width:3px; flex-shrink:0;][/border][/border][/border][/border][/border]
  233. [/border]
  234. [comment]----gallery end----[/comment]
  235.  
  236. [/border][/border]
  237. [comment]----contents container end----[/comment]
  238. [/border]
  239. [comment]----row 2 end----[/comment]
  240.  
  241. [comment]----footer----[/comment]
  242. [border=transparent; height:57px; width:100%; padding:5px 15px; box-sizing:border-box; border-top:3px solid var(--color-1); display:flex; flex-flow:row nowrap; align-items:center;]
  243.  
  244. [comment]----footer icon----[/comment]
  245. [border=transparent; height:40px; width:40px; padding:0; border:4px solid var(--color-1-t); box-sizing:border-box; border-radius:50%; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--img-2); border-radius:50%; background-size:cover; background-position:50% 50%; -webkit-filter: grayscale(1) contrast(0.7);][/border][/border]
  246.  
  247. [comment]----footer quote----[/comment]
  248. [border=transparent; height:auto; max-height:20px; flex:1; padding:0 0 2px 0; box-sizing:border-box; margin:0 18px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color: var(--color-3); font-family: var(--quote); font-size:13px; line-height:120%; text-shadow:0 0 4px var(--color-3);][comment]
  249.  
  250. ----* * * quote here----
  251.  
  252. [/comment]i'll never die, even if it's your sad ending.[/border]
  253.  
  254. [comment]----music player----[/comment]
  255. [border=transparent; height:40px; width:40px; padding:0; margin-left:auto; position:relative; flex-shrink:0; opacity:0.9;][border=transparent; height:40px; width:40px; padding:4px 0 0 0; box-sizing:border-box; background: var(--bg); color: var(--color-2); position:relative; z-index:2; display:flex; align-items:center; pointer-events:none; font-size:12px;][border=transparent; height:auto; width:auto; padding:0; margin:-2px 8px 0 0;][fa]far fa-play[/fa][/border][border=transparent; height:auto; width:auto; padding:0; font-size:13.5px;][fa]far fa-pause[/fa][/border][/border]
  256. [comment]----actual media player----[/comment]
  257. [border=transparent; height:40px; width:40px; padding:3px; box-sizing:border-box; overflow:hidden; position:absolute; top:0; left:0; z-index:1; opacity:0.01%; pointer-events:auto;]
  258.  
  259. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  260. [border=transparent; height:80px; width:180px; padding:0; margin-top:-14px; margin-left:-10px; position:absolute; top:0; left:0;]
  261. [media=soundcloud]https://soundcloud.com/user-901873654/g-i-dle-already[/media]
  262. [/border]
  263.  
  264. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  265. [border=transparent; height:500px; width:500px; margin-top:-170px; margin-left:-95px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  266. [media=googledrive]google drive file code here[/MEDIA]
  267. [/border]
  268.  
  269. [/border]
  270. [comment]----actual media player end----[/comment]
  271. [/border]
  272. [comment]----music player end----[/comment]
  273. [/border]
  274. [comment]----footer end----[/comment]
  275.  
  276. [comment]
  277. ----signature! do not remove
  278. [/comment][bg=transparent; height:fit-content; width:auto; padding:1px 5px 3px 5px; box-sizing:border-box; background: var(--bg); position:absolute;z-index:15;opacity:0.6;color: var(--color-1); font-size:clamp(9px, 40px - 9vw, 10px);text-align:center; top:10px; left:10px; line-height:100%; border-radius:1px;][font=Open Sans]♡coded by uxie♡[/font][/bg]
  279.  
  280. [/border]
  281. [comment]----main container end----[/comment]
  282.  
  283. [comment]----shadow----[/comment]
  284. [border=transparent; height:100%; width:100%; padding:0; background: var(--color-1-t); position:absolute; z-index:1; top:2px; right:-7px; border-radius:12px; transform:scale(1.01, 1.006);][/border]
  285.  
  286. [/border][/border]
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!