API tools faq
paste
ooksie

midas (uxie x sirnateunknown)

ooksie
May 29th, 2022 (edited)
135
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.37 KB | None | 1 0
raw download clone embed print report
  1. [comment]designed by sirnateunknown, coded by uxie!
  2.  
  3. fonts used:
  4. [font=Libre Bodoni]music title[/font]
  5. [font=Belgrano]music artist[/font]
  6. [font=Libre Baskerville]headers, body[/font]
  7.  
  8. 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 ( ‾́ ◡ ‾́ )
  9.  
  10. [/comment][border=transparent;
  11.  
  12. /*background colour*/
  13. --bg-color: #000;
  14.  
  15. /*main accent colour -- image & textbox borders, headers*/
  16. --color-1: #A78122;
  17. /*secondary accent colour -- music artist, music buttons*/
  18. --color-2: #fff;
  19.  
  20. /*text colour*/
  21. --t-color: #fff;
  22.  
  23. /*main image*/
  24. --img-1: url('https://i.postimg.cc/JhxqsY6N/DUSTRIAL-FUTURE-CULT-modified.png');
  25.  
  26. /*fonts used*/
  27. --mt: 'Libre Bodoni', display;
  28. --ma: 'Belgrano', sans-serif;
  29. --header: 'Libre Baskerville', serif;
  30. --body: 'Libre Baskerville', serif;
  31.  
  32.  
  33. height:auto; width:100%; padding:0 0 20px 0; box-sizing:border-box; position:relative; line-height:0; overflow-x:auto; overflow-y:hidden; margin:15px 0 30px 0;][border=transparent; height:auto; min-height:800px; width:100%; min-width:320px; max-width:415px; padding:20px; box-sizing:border-box; background: var(--bg-color); position:relative; margin:0 auto;]
  34.  
  35. [comment]----character icon----[/comment]
  36. [border=transparent; width:100%; padding:5px 10px; box-sizing:border-box;][border=transparent; padding:0; padding-top:calc(100% - 22px); position:relative; border:11px solid var(--color-1); box-sizing:border-box;][border=transparent; height:calc(100% + 4px); width:calc(100% + 4px); padding:8px; box-sizing:border-box; position:absolute; top:-2px; left:-2px; border:10px solid var(--color-1); border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; box-sizing:border-box; border:10px solid var(--color-1); border-radius:50%; background: var(--img-1); background-size:cover;
  37.  
  38. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  39.  
  40. ][/border][/border][/border][/border]
  41.  
  42. [comment]----music player----[/comment]
  43. [border=transparent; height:auto; width:100%; padding:0 10px; box-sizing:border-box; margin-top:15px; display:flex; flex-flow:column nowrap; align-items:center;]
  44.  
  45. [comment]----song title----[/comment]
  46. [border=transparent; height:auto; width:100%; padding:0; text-align:center; color: var(--color-1); font-family: var(--mt); text-transform:uppercase; font-size:35px; line-height:100%; letter-spacing:2px;][comment]
  47.  
  48. ----* * * song title here---
  49.  
  50. [/comment]Song Name[/border]
  51.  
  52. [comment]----song artist----[/comment]
  53. [border=transparent; height:auto; width:100%; padding:0; text-align:center; color: var(--color-2); font-family: var(--ma); font-size:22px; line-height:100%; margin-top:6px;][comment]
  54.  
  55. ----* * * song artist here----
  56.  
  57. [/comment]Artist[/border]
  58.  
  59. [comment]----progress bar----[/comment]
  60. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; position:relative; margin-top:15px;][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; display:flex; flex-flow:row nowrap; align-items:center;][border=transparent; height:4px; width:100%; padding:0; background: var(--color-2); border-radius:2px; opacity:0.3;][/border][/border][border=transparent; height:4px; padding:0;
  61.  
  62. /*edit the following to adjust progress of song, max 95%!*/ width:35%;
  63.  
  64. background: var(--color-2); border-radius:2px; margin-right:-3px;][/border][border=transparent; height:14px; width:14px; padding:0; background: var(--color-2); border-radius:50%; flex-shrink:0;][/border][/border]
  65.  
  66. [comment]----buttons----[/comment]
  67. [border=transparent; height:auto; width:70%; padding:0; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; margin-top:20px;]
  68. [border=transparent; height:auto; width:auto; padding:0; font-size:25px; color: var(--color-2);][fa]fas fa-step-backward[/fa][/border]
  69.  
  70. [comment]----play button----[/comment]
  71. [border=transparent; height:55px; width:55px; padding:0; box-sizing:border-box; position:relative; margin:0 45px; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:1px 0 0 2px; box-sizing:border-box; border-radius:50%; background: var(--color-2); display:flex; align-items:center; justify-content:center; color: var(--bg-color); font-size:23px; pointer-events:none; position:relative; z-index:2;][fa]fas fa-play[/fa][/border]
  72.  
  73. [comment]----actual media player----[/comment]
  74. [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; opacity:0.01%;][border=transparent; height:32px; width:32px; padding:0; overflow:hidden; position:relative;]
  75.  
  76. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  77. [border=transparent; height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
  78. [media=soundcloud]soundcloud link here[/media]
  79. [/border]
  80.  
  81. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  82. [border=transparent; height:500px; width:500px; margin-top:-173px; margin-left:-98px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  83. [media=googledrive]google file code here[/MEDIA]
  84. [/border]
  85.  
  86. [/border][/border]
  87. [comment]----actual media player end----[/comment]
  88. [/border]
  89. [comment]----play button end----[/comment]
  90.  
  91. [border=transparent; height:auto; width:auto; padding:0; font-size:25px; color: var(--color-2);][fa]fas fa-step-forward[/fa][/border]
  92. [/border]
  93. [comment]----buttons end----[/comment]
  94. [/border]
  95. [comment]----music player end----[/comment]
  96.  
  97. [comment]----text container----[/comment]
  98. [border=transparent; height:465px; width:100%; padding:0 10px; box-sizing:border-box; border:11px solid var(--color-1); margin-top:30px;][border=transparent; height:calc(100% + 2px); width:100%; padding:15px 0; box-sizing:border-box; border:8px solid var(--color-1); border-top:0; border-bottom:0; overflow:hidden; margin:-1px 0;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  99.  
  100. [comment]----details----[/comment]
  101. [border=transparent; height:auto; width:50%; padding:0 7px 0 15px; box-sizing:border-box; margin:20px 0 30px 0; --m-i: 23px;][border=transparent; height:0; width:100%; padding:0; margin-bottom: calc(var(--m-i) * -1);][/border]
  102.  
  103. [comment]----copy this whole thing to add another detail----[/comment]
  104. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; align-items:center; margin-top: var(--m-i);]
  105. [border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); text-align:center; font-size:15px; text-transform:uppercase; font-family: var(--header); line-height:100%;][comment]
  106.  
  107. ----* * * detail title here----
  108.  
  109. [/comment]location[/border]
  110.  
  111. [border=transparent; height:auto; width:auto; padding:0; color: var(--t-color); text-align:center; font-size:13px; font-family: var(--body); line-height:15px; margin-top:5px;][comment]
  112.  
  113. ----* * * detail contents here----
  114.  
  115. [/comment]Answer[/border]
  116. [/border]
  117. [comment]----copy me too!----[/comment]
  118.  
  119. [comment]----copy this whole thing to add another detail----[/comment]
  120. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; align-items:center; margin-top: var(--m-i);]
  121. [border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); text-align:center; font-size:15px; text-transform:uppercase; font-family: var(--header); line-height:100%;][comment]
  122.  
  123. ----* * * detail title here----
  124.  
  125. [/comment]interactions[/border]
  126.  
  127. [border=transparent; height:auto; width:auto; padding:0; color: var(--t-color); text-align:center; font-size:13px; font-family: var(--body); line-height:15px; margin-top:5px;][comment]
  128.  
  129. ----* * * detail contents here----
  130.  
  131. [/comment]Answer[/border]
  132. [/border]
  133. [comment]----copy me too!----[/comment]
  134.  
  135. [/border]
  136. [comment]----details end----[/comment]
  137.  
  138. [comment]----text contents----[/comment]
  139. [border=transparent; height:auto; width:50%; padding:0 7px 0 15px; box-sizing:border-box; color: var(--t-color); font-size:13px; text-align:justify; font-family: var(--body); line-height:16px;][comment]
  140.  
  141. ----* * * text starts here----
  142.  
  143. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis nisl quis ex consequat efficitur. Integer tempor vel magna ut ullamcorper. Curabitur rutrum pharetra nunc eu venenatis. Vestibulum a scelerisque odio, ut sollicitudin enim. Vestibulum augue elit, tempus ac pretium eu, ultrices et nisl. Cras id arcu a nunc aliquam commodo vel eget sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis eu malesuada nisi, at venenatis erat. Proin et metus ex. Nam sapien metus, iaculis at purus nec, ullamcorper posuere nisi.
  144.  
  145. Curabitur non lorem augue. Nunc convallis sollicitudin purus eu imperdiet. Proin ac rutrum diam, nec molestie nisi. Nullam in ipsum aliquet, viverra augue et, egestas nisi. Aliquam cursus mi dui, pretium molestie nisi elementum sed. Nullam convallis lacinia nunc, vitae facilisis purus semper pharetra. In consequat tincidunt molestie. Sed diam velit, sagittis non sapien id, scelerisque euismod nibh. Cras condimentum dolor a nunc eleifend fringilla. Etiam facilisis ligula massa, et dictum dui euismod nec.
  146. [/border]
  147. [comment]----text contents end----[/comment]
  148. [/border][/border][/border]
  149. [comment]----text container end----[/comment]
  150.  
  151. [comment]----name----[/comment]
  152. [border=transparent; height:auto; width:100%; padding:0; text-align:center; color: var(--color-1); font-family: var(--header); text-transform:uppercase; font-size:30px; line-height:100%; letter-spacing:2px; font-weight:bold; margin-top:25px;][comment]
  153.  
  154. ----* * * character here---
  155.  
  156. [/comment]name[/border]
  157.  
  158. [/border][comment]----signature! (do not remove!)-----
  159. [/comment][bg=transparent; height:auto; width:100%; padding:0; position:absolute; bottom:15px; left:0; z-index:7; text-align:center; box-sizing:border-box; opacity:0.65;font-size:10px;text-align:center; line-height:100%;][font=Open Sans]♡design by sirnateunknown, coded by uxie♡[/font][/bg][/border]
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!