API tools faq
paste
Advertisement
ooksie

afterglow

ooksie
Jan 9th, 2024 (edited)
137
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.79 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. [font=Instrument Serif]title[/font]
  4. [font=Almarai]body[/font]
  5.  
  6. 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 ( ‾́ ◡ ‾́ )
  7.  
  8. [/comment][div=
  9.  
  10. /*main background*/
  11. --bg-1:#F4EFEE;
  12. /*textbox background*/
  13. --bg-2: #f9f9f9;
  14. /*textbox border*/
  15. --border:#000;
  16.  
  17. /*accent colours*/
  18. --color-1: #3EB7A6;
  19. --color-2: #EC6F91;
  20. --color-3: #EFC32E;
  21.  
  22. /*text colour*/
  23. --t-color: #020202;
  24.  
  25. /*fonts used*/
  26. --title:'Instrument Serif', display;
  27. --body:'Almarai', sans-serif;
  28.  
  29. /*header image*/
  30. --img-1: url('https://i.pinimg.com/736x/83/84/a7/8384a72c4fe1391b20621a2ed232870f.jpg');
  31. /*smaller icon*/
  32. --img-2: URL('https://i.pinimg.com/564x/6d/66/95/6d66959daac7881e3b037d1e53ea405c.jpg');
  33.  
  34.  
  35. height:auto; width:100%; overflow-x:auto; overflow-y:hidden; margin:20px 0 50px 0; position:relative; line-height:0;][div=height:auto; width:100%; max-width:409px; border:1px solid var(--border); margin:0 auto; position:relative; padding:8px; box-sizing:border-box; display:flex; flex-flow:column nowrap; background: var(--bg-1);]
  36.  
  37. [comment]----header----[/comment]
  38. [div=height:130px; width:100%; border:1px solid var(--border); box-sizing:border-box; background: var(--img-1); margin-bottom:8px; background-size:cover;
  39.  
  40. /*edit the following to adjust the cropping of the image*/ background-position:50% 30%;
  41.  
  42. ][div=height:100%; width:100%; background: var(--color-1); opacity:0.75;][/div][/div]
  43.  
  44. [comment]----checkered decoration----[/comment]
  45. [div=height:60px; width:100%; border:1px solid var(--border); box-sizing:border-box; background: var(--bg-2); background-image: linear-gradient(45deg, var(--color-2) 25%, transparent 25%, transparent 75%, var(--color-2) 75%, var(--color-2)), linear-gradient(45deg, var(--color-2) 25%, transparent 25%, transparent 75%, var(--color-2) 75%, var(--color-2)); background-size: 60px 60px; background-position: 0 0, 30px 30px;][/div]
  46.  
  47. [comment]----title----[/comment]
  48. [div=height:198px; width:100%; position:absolute; padding:40px 0 0 0; box-sizing:border-box; top:8px; right:0; display:flex; align-items:center; justify-content:center;][div=height:8px; width:100%; background: var(--bg-1); position:absolute; z-index:1; bottom:60px; left:0; border:1px solid var(--bg-color); box-sizing:border-box;][/div]
  49. [div=height:auto; width:auto; min-width:150px; padding:15px 25px; box-sizing:border-box; border:1px solid var(--border); background: var(--bg-1);][div=height:100%; width:100%; position:relative; z-index:2; display:flex; align-items:center; justify-content:center;][div=height:auto; width:auto; padding:5px 3px 5px 10px; box-sizing:border-box; color: var(--color-3); font-size:45px; font-family: var(--title); letter-spacing:0px; line-height:80%; text-transform:uppercase; -webkit-text-stroke:0.5px var(--border); text-shadow:1px 1px var(--border); background: var(--bg-1); position:relative; z-index:2;][comment]
  50.  
  51. ----* * * title here----
  52.  
  53. [/comment]afterglow[/div]
  54.  
  55. [div=height:30px; width:calc(100% + 30px); border:1px solid var(--border); border-bottom:0; border-left:0; border-radius:50%; transform:rotate(-7deg); position:absolute; top:10px; left:-15px; z-index:1;][/div][div=height:30px; width:calc(100% + 30px); border:1px solid var(--border); border-top:0; border-right:0; border-radius:50%; transform:rotate(-7deg); position:absolute; top:10px; left:-15px; z-index:3;][/div]
  56. [/div][/div]
  57. [/div]
  58. [comment]----title end----[/comment]
  59.  
  60. [comment]----basics----[/comment]
  61. [div=height:120px; width:100%; display:flex; flex-flow:row-reverse nowrap; margin-top:8px;]
  62. [div=height:120px; width:clamp(90px, -300px + 45vw, 120px); border:1px solid var(--border); padding:8px; box-sizing:border-box; background: var(--bg-2); flex-shrink:0; margin-left:8px;][div=height:100%; width:100%; background: var(--img-2); background-size:cover; border:1px solid var(--border); box-sizing:border-box; -webkit-filter:saturate(0.8);
  63.  
  64. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  65.  
  66. ][div=height:100%; width:100%; background: var(--color-1); mix-blend-mode:soft-light; opacity:0.5;][/div][/div][/div]
  67.  
  68. [div=height:100%; flex:1; border:1px solid var(--border); padding:13px 0; box-sizing:border-box; overflow:hidden; display:flex; flex-direction:column; background: var(--bg-2);][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; padding:0 7px 0 15px; box-sizing:border-box; display:flex; flex-flow:column nowrap; --m: 8px;][div=height:0; width:100%; margin-bottom: calc(var(--m) * -1);][/div]
  69.  
  70. [comment]----copy this whole thing to add another piece of info----[/comment]
  71. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; align-items:center; margin-top: calc(var(--m) - 3px); color: var(--t-color); font-family: var(--body);]
  72. [div=height:auto; width:auto; padding:3px 6px; box-sizing:border-box; background: var(--color-3); font-size:11px; text-transform:uppercase; font-weight:bold; letter-spacing:1px; line-height:100%; margin:3px 8px 0 0;][comment]
  73.  
  74. ----* * * info title here----
  75.  
  76. [/comment]name[/div]
  77. [div=height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; margin:3px 0 0 0; font-size:12px; line-height:16px;][comment]
  78.  
  79. ----* * * info contents here----
  80.  
  81. [/comment]name name[/div]
  82. [/div]
  83. [comment]----copy me too!----[/comment]
  84.  
  85. [comment]----copy this whole thing to add another piece of info----[/comment]
  86. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; align-items:center; margin-top: calc(var(--m) - 3px); color: var(--t-color); font-family: var(--body);]
  87. [div=height:auto; width:auto; padding:3px 6px; box-sizing:border-box; background: var(--color-3); font-size:11px; text-transform:uppercase; font-weight:bold; letter-spacing:1px; line-height:100%; margin:3px 8px 0 0;][comment]
  88.  
  89. ----* * * info title here----
  90.  
  91. [/comment]nicknames[/div]
  92. [div=height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; margin:3px 0 0 0; font-size:12px; line-height:16px;][comment]
  93.  
  94. ----* * * info contents here----
  95.  
  96. [/comment]name name[/div]
  97. [/div]
  98. [comment]----copy me too!----[/comment]
  99.  
  100. [comment]----copy this whole thing to add another piece of info----[/comment]
  101. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; align-items:center; margin-top: calc(var(--m) - 3px); color: var(--t-color); font-family: var(--body);]
  102. [div=height:auto; width:auto; padding:3px 6px; box-sizing:border-box; background: var(--color-3); font-size:11px; text-transform:uppercase; font-weight:bold; letter-spacing:1px; line-height:100%; margin:3px 8px 0 0;][comment]
  103.  
  104. ----* * * info title here----
  105.  
  106. [/comment]age[/div]
  107. [div=height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; margin:3px 0 0 0; font-size:12px; line-height:16px;][comment]
  108.  
  109. ----* * * info contents here----
  110.  
  111. [/comment]number[/div]
  112. [/div]
  113. [comment]----copy me too!----[/comment]
  114.  
  115. [comment]----copy this whole thing to add another piece of info----[/comment]
  116. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; align-items:center; margin-top: calc(var(--m) - 3px); color: var(--t-color); font-family: var(--body);]
  117. [div=height:auto; width:auto; padding:3px 6px; box-sizing:border-box; background: var(--color-3); font-size:11px; text-transform:uppercase; font-weight:bold; letter-spacing:1px; line-height:100%; margin:3px 8px 0 0;][comment]
  118.  
  119. ----* * * info title here----
  120.  
  121. [/comment]age[/div]
  122. [div=height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; margin:3px 0 0 0; font-size:12px; line-height:16px;][comment]
  123.  
  124. ----* * * info contents here----
  125.  
  126. [/comment]number[/div]
  127. [/div]
  128. [comment]----copy me too!----[/comment]
  129.  
  130. [comment]----copy this whole thing to add another piece of info----[/comment]
  131. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; align-items:center; margin-top: calc(var(--m) - 3px); color: var(--t-color); font-family: var(--body);]
  132. [div=height:auto; width:auto; padding:3px 6px; box-sizing:border-box; background: var(--color-3); font-size:11px; text-transform:uppercase; font-weight:bold; letter-spacing:1px; line-height:100%; margin:3px 8px 0 0;][comment]
  133.  
  134. ----* * * info title here----
  135.  
  136. [/comment]role[/div]
  137. [div=height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; margin:3px 0 0 0; font-size:12px; line-height:16px;][comment]
  138.  
  139. ----* * * info contents here----
  140.  
  141. [/comment]blah blah[/div]
  142. [/div]
  143. [comment]----copy me too!----[/comment]
  144.  
  145. [/div][/div][/div]
  146. [/div]
  147. [comment]----basics end----[/comment]
  148.  
  149. [comment]----contents----[/comment]
  150. [div=height:auto; max-height:270px; width:100%; margin-top:8px; border:1px solid var(--border); padding:15px 0; box-sizing:border-box; overflow:hidden; display:flex; flex-direction:column; background: var(--bg-2);][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:12px; font-family: var(--body); line-height:16px; color: var(--t-color); margin-top: var(--m);][comment]
  151.  
  152. ----* * * text starts here----
  153.  
  154. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis sem odio, eget blandit felis euismod mollis. Mauris id ante tellus. Aliquam ultricies est metus, a sodales nunc condimentum at. Integer non nisl ac augue commodo consequat in pellentesque nunc. Morbi a libero ante. Suspendisse porta urna id leo venenatis hendrerit. Nulla tristique diam at euismod ullamcorper. Praesent suscipit euismod nisi, ac pulvinar massa dignissim a. Suspendisse id lectus enim. Nulla consectetur venenatis eros vitae eleifend. Curabitur ac interdum est, et maximus tortor. Sed volutpat quam nec dolor porta egestas. Phasellus sit amet efficitur augue. Phasellus interdum auctor pretium. Aenean a tempus ante. Pellentesque suscipit lectus egestas neque finibus vestibulum.
  155.  
  156. Integer fermentum purus tristique nisi mollis, sit amet imperdiet tortor pretium. Quisque ligula lectus, imperdiet at mauris ut, placerat vehicula dui. Ut consequat turpis nec semper elementum. Donec iaculis magna ante, sit amet varius nisi placerat at. Vestibulum quis dolor quis felis blandit faucibus. Maecenas sed facilisis nunc, vel egestas magna. Suspendisse condimentum ullamcorper libero, ut semper lectus vehicula at. In fringilla, metus et bibendum eleifend, nulla mauris euismod nulla, a vehicula ligula lorem sit amet turpis. Ut eu auctor enim. Sed eu malesuada mauris.
  157. [/div][/div][/div]
  158. [comment]----contents end----[/comment]
  159.  
  160. [comment]----music player----[/comment]
  161. [div=height:auto; width:100%; padding:0 1px; box-sizing:border-box; /*replace flex with none to remove music player*/ display:flex; flex-flow:row nowrap; align-items:center; margin-top:8px;]
  162. [comment]----play button----[/comment]
  163. [div=height:auto; width:auto; color: var(--border); position:relative; flex-shrink:0;][div=height:auto; width:auto; pointer-events:none; font-size:9.5px; line-height:100%; position:relative; z-index:2;][fa]fas fa-play[/fa][div=display:inline-block; font-size:10.5px; position:relative; top:1px; transform:scaleY(1.11);][fa]fas fa-pause[/fa][/div][/div]
  164.  
  165. [comment]----actual media player----[/comment]
  166. [div=height:100%; width:100%; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0.01%;][div=height:32px; width:32px; position:relative; pointer-events:auto;]
  167.  
  168. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  169. [div=height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
  170. [media=soundcloud]https://soundcloud.com/althea-grace-lalap/1-hour-jung-kook-standing-next[/media]
  171. [/div]
  172.  
  173. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  174. [div=height:500px; width:500px; margin-top:-170px; margin-left:-93px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  175. [media=googledrive]1SzIsHeSofj_Er2AOPradYnqs8IIc92_a[/MEDIA]
  176. [/div]
  177.  
  178. [/div][/div]
  179. [comment]----actual media player end----[/comment]
  180.  
  181. [/div]
  182. [comment]----play button end----[/comment]
  183.  
  184. [comment]----song info----[/comment]
  185. [div=height:auto; flex:1; margin-left:16px; display:flex; flex-flow:row wrap; justify-content:flex-end; font-family: var(--body); font-size:11px;][div=height:auto; width:auto; padding:3px 0 2px 0; box-sizing:border-box; color: var(--border); text-transform:uppercase; line-height:100%; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:bold; letter-spacing:1px;][comment]
  186.  
  187. ----* * * song name here----
  188.  
  189. [/comment]standing next to you[/div]
  190. [div=height:auto; flex:1; padding:3px 0 2px 0; box-sizing:border-box; min-width:fit-content; min-width:-moz-fit-content; display:flex; align-items:center;][div=height:0; flex:1; border-top:1px solid var(--border); margin:0 12px;][/div][div=height:auto; width:auto; flex-shrink:0; text-transform:uppercase; line-height:100%; white-space:nowrap; letter-spacing:1px;][comment]
  191.  
  192. ----* * * song artist here----
  193.  
  194. [/comment]jungkook[/div]
  195. [/div][/div]
  196. [/div]
  197. [comment]----music player end----[/comment]
  198.  
  199. [comment]----signature! do not remove----[/comment]
  200. [div=height:auto;width:fit-content; padding:0px 5px 3px 5px; box-sizing:border-box; position:absolute; z-index:6; opacity:0.2; top:10px; right:6px; color: var(--border); font-size:8px;text-align:center; background:var(--bg-color); line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/div]
  201. [/div][/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!