API tools faq
paste
Advertisement
ooksie

moonshine

ooksie
Dec 22nd, 2023 (edited)
190
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.98 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. [font=Chonburi]title, buttons[/font]
  4. [font=Lexend Deca]headers[/font]
  5. [font=Outfit]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.  
  11. --bg-color: #1c1c1c;
  12. --border: #fefefe;
  13.  
  14. /*main border colours*/
  15. --color-1: #ededed;
  16. /*edit this to add in an accent colour*/
  17. --color-2: #d1d1d1;
  18.  
  19. /*text colour*/
  20. --t-color: #ededed;
  21. /*dialogue colour*/
  22. --d: var(--color-2);
  23.  
  24. /*fonts used*/
  25. --title: 'Chonburi', serif;
  26. --header: 'Lexend Deca', sans-serif;
  27. --body: 'Outfit', sans-serif;
  28.  
  29. /*main image*/
  30. --img-1: url('https://i.imgur.com/9cuYn4g.png');
  31.  
  32. height:auto; width:100%; overflow-x:auto; margin:30px 0 40px 0;][div=height:auto; min-height:520px; width:100%; max-width:610px; min-width:370px; padding:30px; box-sizing:border-box; margin:auto; background: var(--bg-color); border:1px solid var(--border); position:relative; line-height:0; display:flex; flex-flow:row wrap;]
  33.  
  34. [comment]----role name----[/comment]
  35. [div=height:auto; width:100%; position:absolute; top:20px; left:0; display:flex; justify-content:center; z-index:6;][div=height:auto; width:auto; min-width:80px; padding:5px 4px 5px 6px; box-sizing:border-box;border:1px solid var(--color-1); border-radius:20px; color: var(--color-1); font-family:var(--title); line-height:100%; font-size:11px; text-align:center; background: var(--bg-color); font-style:oblique; letter-spacing:1px;][comment]
  36.  
  37. ----* * * role here----
  38.  
  39. [/comment]role.[/div][/div]
  40.  
  41. [comment]----header----[/comment]
  42. [div=height:75px; width:100%; border-bottom:1px solid var(--color-1); padding:18px 15px 10px 15px; box-sizing:border-box; display:flex; align-items:center; position:relative; overflow:hidden;]
  43. [comment]----big name----[/comment]
  44. [div=height:auto; width:auto; color: var(--color-1); font-size:clamp(30px, -80px + 10vw, 36px); font-family: var(--header); letter-spacing:1px; text-transform:uppercase; font-weight:bold; line-height:100%; position:relative; z-index:2; text-shadow:2px 2px var(--bg-color);][comment]
  45.  
  46. ----* * * name here----
  47.  
  48. [/comment]name here.[/div]
  49.  
  50. [comment]----decorative icons----[/comment]
  51. [div=height:auto; width:auto; position:absolute; bottom:-35px; right:-15px; z-index:1; color:transparent; -webkit-text-stroke:1px var(--color-2); opacity:0.4; line-height:100%; font-size:105px; letter-spacing:2px; transform:rotate(15deg);][comment]
  52.  
  53. ----* * *fa icon here----
  54.  
  55. [/comment][fa]fas fa-heart[/fa][/div]
  56.  
  57. [div=height:auto; width:auto; position:absolute; top:-5px; right:90px; z-index:1; color:transparent; -webkit-text-stroke:1px var(--color-2); opacity:0.4; line-height:100%; font-size:55px; letter-spacing:2px; transform:rotate(-35deg);][comment]
  58.  
  59. ----* * *fa icon here----
  60.  
  61. [/comment][fa]fas fa-heart[/fa][/div]
  62. [/div]
  63. [comment]----header end----[/comment]
  64.  
  65. [comment]----left----[/comment]
  66. [div=height:auto; min-height:180px; flex:40; min-width:180px; display:flex; flex-flow:column-reverse nowrap; border-right:clamp(0px, -50px + 5vw, 1px) solid var(--color-1); border-bottom:clamp(0px, 50px - 5vw, 1px) solid var(--color-1);]
  67.  
  68. [comment]----music player----[/comment]
  69. [div=height:35px; width:100%; flex-shrink:0; padding:5px 15px 5px 18px; box-sizing:border-box; border-top:1px solid var(--color-1); display:flex; flex-flow:row nowrap; align-items:center;]
  70. [comment]----play button----[/comment]
  71. [div=height:13px; width:13px; position:relative; flex-shrink:0; margin-bottom:1px;][div=height:100%; width:100%; background: URL('https://i.imgur.com/GxBUSrK.gif') 50% 0%; background-size:cover; position:relative; z-index:2; pointer-events:none;][/div]
  72. [comment]----actual media player----[/comment]
  73. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0.01%;][border=transparent; height:32px; width:32px; padding:0; position:relative; pointer-events:auto;]
  74.  
  75. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  76. [border=transparent; height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
  77. [media=soundcloud]soundcloud link here[/media]
  78. [/border]
  79.  
  80. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  81. [border=transparent; 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;]
  82. [media=googledrive]google file code here[/MEDIA]
  83. [/border]
  84.  
  85. [/border][/border]
  86. [comment]----actual media player end----[/comment]
  87. [/div]
  88. [comment]----play button end----[/comment]
  89.  
  90. [comment]----music info----[/comment]
  91. [div=height:auto; flex:1; max-width:87%; margin-left:auto; padding:0 0 1px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; justify-content:flex-end; font-family: var(--header); text-transform:uppercase; font-size:10.5px; letter-spacing:1px; align-items:center; color: var(--color-2); line-height:100%; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  92.  
  93. ----* * * song title here----
  94.  
  95. [/comment]song name[/div]
  96. [comment]----music info end----[/comment]
  97. [/div]
  98. [comment]----music player end----[/comment]
  99.  
  100. [comment]----contents container----[/comment]
  101. [div=height:96%; width:100%; padding:6px; box-sizing:border-box; position:relative;]
  102. [comment]----image----[/comment]
  103. [div=height:100%; width:100%; background: var(--img-1); background-size:cover; background-repeat:no-repeat;
  104.  
  105. /*edit the following to adjust the crop of the image*/ background-position: 50% 40%;
  106.  
  107. /*change value to 0 to remove editing*/ -webkit-filter:grayscale(1) contrast(0.8);
  108. ][/div]
  109. [div=height:100%; width:100%; border:6px solid transparent; position:absolute; top:0; left:0; z-index:2; background: var(--color-2); opacity:0.3; mix-blend-mode:overlay;][/div]
  110.  
  111. [comment]----details----[/comment]
  112. [div=height:100%; width:100%; position:absolute; top:0; left:0; z-index:3; display:flex; flex-direction:column; overflow:hidden;][div=height:100%; width:200%; overflow-y:scroll;][div=height:100%; width:50%; box-sizing:border-box; display:flex; align-items:flex-start; justify-content:flex-end;][div=height:auto; width:auto; padding:2px 4px 3px 4px; box-sizing:border-box; background: var(--bg-color); color: var(--color-2); font-size:8px; line-height:100%; opacity:0.7; margin:6px -2px 0 0;][fa]fas fa-chevron-down[/fa][/div][/div][div=height:107px; width:calc(50% + 4px); padding:0 0 0 4px; box-sizing:border-box; opacity:0.9;][div=height:100%; width:100%; padding:16px 0; box-sizing:border-box; background: var(--bg-color); display:flex; flex-direction:column; overflow:hidden;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; padding:0 8px 0 16px; box-sizing:border-box; --m:10px;][div=height:0; width:100%; margin-bottom: calc(var(--m) * -1);][/div]
  113.  
  114. [comment]----copy this whole thing to add another item----[/comment]
  115. [div=height:auto; width:auto; display:flex; flex-flow:column nowrap; margin-top: var(--m);]
  116. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2);][div=height:auto; width:auto; font-size:7px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  117.  
  118. ----* * * item title here----
  119.  
  120. [/comment]location[/div][/div]
  121. [div=height:auto; width:auto; color: var(--t-color); font-size:12.5px; font-family: var(--body); line-height:14px; margin:5px 0 0 0.5px;][comment]
  122.  
  123. ----* * * item contents here----
  124.  
  125. [/comment]answer here[/div]
  126. [/div]
  127. [comment]----copy me too!----[/comment]
  128.  
  129. [comment]----copy this whole thing to add another item----[/comment]
  130. [div=height:auto; width:auto; display:flex; flex-flow:column nowrap; margin-top: var(--m);]
  131. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2);][div=height:auto; width:auto; font-size:7px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  132.  
  133. ----* * * item title here----
  134.  
  135. [/comment]outfit[/div][/div]
  136. [div=height:auto; width:auto; color: var(--t-color); font-size:12.5px; font-family: var(--body); line-height:14px; margin:5px 0 0 0.5px;][comment]
  137.  
  138. ----* * *link here----
  139.  
  140. [/comment][url='xx'][comment]
  141. [/comment][div=display:inline; color: var(--t-color);][comment]
  142.  
  143. ----* * * item title here----
  144.  
  145. [/comment]click me![/div][/url][/div]
  146. [/div]
  147. [comment]----copy me too!----[/comment]
  148.  
  149. [comment]----copy this whole thing to add another item----[/comment]
  150. [div=height:auto; width:auto; display:flex; flex-flow:column nowrap; margin-top: var(--m);]
  151. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2);][div=height:auto; width:auto; font-size:7px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  152.  
  153. ----* * * item title here----
  154.  
  155. [/comment]interactions[/div][/div]
  156. [div=height:auto; width:auto; color: var(--t-color); font-size:12.5px; font-family: var(--body); line-height:14px; margin:5px 0 0 0.5px;][comment]
  157.  
  158. ----* * * item contents here----
  159.  
  160. [/comment]name, name, name[/div]
  161. [/div]
  162. [comment]----copy me too!----[/comment]
  163.  
  164. [comment]----copy this whole thing to add another item----[/comment]
  165. [div=height:auto; width:auto; display:flex; flex-flow:column nowrap; margin-top: var(--m);]
  166. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2);][div=height:auto; width:auto; font-size:7px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  167.  
  168. ----* * * item title here----
  169.  
  170. [/comment]tags[/div][/div]
  171. [div=height:auto; width:auto; color: var(--t-color); font-size:12.5px; font-family: var(--body); line-height:14px; margin:5px 0 0 0.5px;][comment]
  172.  
  173. ----* * * item contents here----
  174.  
  175. [/comment]@ user @ user[/div]
  176. [/div]
  177. [comment]----copy me too!----[/comment]
  178.  
  179. [/div][/div][/div][/div][/div][/div]
  180. [comment]----details end----[/comment]
  181. [/div]
  182. [comment]----contents container end----[/comment]
  183. [/div]
  184. [comment]----left end----[/comment]
  185.  
  186. [comment]----right----[/comment]
  187. [div=height:385px; flex:60; min-width:250px; padding:21px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; padding:0 12px 0 20px; box-sizing:border-box; text-align:justify; color: var(--t-color); font-size:12px; font-family: var(--body); line-height:15px;][comment]
  188.  
  189. ----* * * text starts here----
  190.  
  191. [/comment][div=display:inline; color: var(--d); font-weight:bold; letter-spacing:0.5px;]"this is a dialogue."[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum dui eget diam sodales lobortis. Nulla fermentum purus fringilla hendrerit tincidunt. Quisque ullamcorper fringilla augue, a laoreet ligula vehicula vel. Vestibulum laoreet tristique sem, vel malesuada nunc congue quis. Nulla aliquet massa a felis viverra iaculis. Praesent ac tortor quis diam efficitur consequat non id eros. Nullam malesuada quis nisl vitae consequat.
  192.  
  193. Ut iaculis, est sit amet laoreet fringilla, leo neque pharetra tellus, vel hendrerit lorem neque eget diam. Vivamus varius libero vitae nisl consequat egestas. Ut viverra lorem purus, egestas sagittis nulla dapibus et. Aenean ornare nulla non mattis luctus. Quisque accumsan nec mi in semper. Curabitur dignissim pellentesque dolor, ut malesuada urna interdum iaculis. Integer vulputate risus justo, nec volutpat turpis accumsan a. Nunc at aliquam leo. In vel sem et felis aliquet rutrum. Aenean eget maximus ipsum, fringilla semper velit. Donec tempus porta mauris at rutrum. Phasellus tincidunt, mauris id commodo varius, lorem nisi tincidunt dolor, sed tincidunt quam nulla eu enim. Ut fermentum elit vitae magna dignissim bibendum sed eu mi. Integer non semper mauris. Cras egestas orci quis rhoncus vulputate. Integer vestibulum congue justo vel eleifend.
  194. [/div][/div][/div]
  195. [comment]----right end----[/comment]
  196.  
  197.  
  198. [comment]----decorative border----[/comment]
  199. [div=height:calc(100% - 60px); width:calc(100% - 60px); position:absolute; top:30px; left:30px; border:1px solid var(--color-1); pointer-events:none; box-sizing:border-box;][/div]
  200. [div=height:90px; width:110px; position:absolute; top:23px; left:23px; box-sizing:border-box; border-top:1px solid var(--color-1); border-left:1px solid var(--color-1); pointer-events:none; z-index:6;][/div]
  201. [div=height:90px; width:110px; position:absolute; top:23px; right:23px; box-sizing:border-box; border-top:1px solid var(--color-1); border-right:1px solid var(--color-1); pointer-events:none; z-index:6;][/div]
  202. [div=height:90px; width:110px; position:absolute; bottom:23px; left:23px; box-sizing:border-box; border-bottom:1px solid var(--color-1); border-left:1px solid var(--color-1); pointer-events:none; z-index:6;][/div]
  203. [div=height:90px; width:110px; position:absolute; bottom:23px; right:23px; box-sizing:border-box; border-bottom:1px solid var(--color-1); border-right:1px solid var(--color-1); pointer-events:none; z-index:6;][/div]
  204. [/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!