API tools faq
paste
mixue

cr envious

mixue
Oct 10th, 2024 (edited)
885
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.00 KB | None | 0 0
raw download clone embed print report
  1. --- MISC ---
  2.  
  3.  
  4. <style>
  5.  
  6. @font-face {
  7. font-family: roman;
  8. src: url(https://dl.dropbox.com/s/7bidj4o8lc71b8u/Hantam.ttf);
  9. }
  10.  
  11. @keyframes floating { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 10px); } 100% { transform: translate(0, -0px); } }
  12.  
  13. html {
  14. overflow: scroll;
  15. overflow-x: hidden;
  16. }
  17. ::-webkit-scrollbar {
  18. width: 0; /* Remove scrollbar space */
  19. background: transparent; /* Optional: just make scrollbar invisible */
  20. }
  21. /* Optional: show position indicator in red */
  22. ::-webkit-scrollbar-thumb {
  23. background: #FF0000;
  24. }
  25.  
  26. </style>
  27.  
  28.  
  29. --- MAIN CONTAINER ---
  30.  
  31.  
  32. height: 17.9em;
  33. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  34. filter: drop-shadow(0px 0px 5px #666);
  35.  
  36. (MOBILE)
  37.  
  38. width: 25em;
  39.  
  40.  
  41. --- LEFT CONTAINER ---
  42.  
  43.  
  44. width: 10em;
  45. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  46. filter: drop-shadow(0px 0px 5px #666);
  47. border-radius: 10px 0px 0px 50px;
  48. rotate: 90deg;
  49. position: absolute;
  50. right: 6em;
  51. bottom: 15em;
  52.  
  53. (MOBILE)
  54.  
  55. width: 8em;
  56. right: 7.5em;
  57. bottom: 15.5em;
  58.  
  59.  
  60. --- LEFT TEXT ---
  61.  
  62.  
  63. background: radial-gradient(circle, #FFC9D9 0%, #FA96C680 100%);
  64. border: 1px solid #C79191;
  65. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  66. border-radius: 10px 0px 0px 100px;
  67. padding: 7px;
  68.  
  69.  
  70. --- RIGHT CONTAINER ---
  71.  
  72.  
  73. width: 10em;
  74. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  75. filter: drop-shadow(0px 0px 5px #666);
  76. border-radius: 50px 0px 0px 10px;
  77. rotate: 90deg;
  78. position: absolute;
  79. right: -1em;
  80. bottom: 15em;
  81.  
  82. (MOBILE)
  83.  
  84. width: 8em;
  85. right: 1.2em;
  86. bottom: 15.5em;
  87.  
  88.  
  89. --- RIGHT TEXT ---
  90.  
  91.  
  92. background: radial-gradient(circle, #FFC9D9 0%, #FA96C680 100%);
  93. border: 1px solid #C79191;
  94. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  95. border-radius: 200px 0px 0px 20px;
  96. padding: 7px;
  97.  
  98.  
  99. --- MAIN IMAGE ---
  100.  
  101.  
  102. filter: drop-shadow(0px 0px 5px #666);
  103. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  104. z-index: 1;
  105. position: absolute;
  106. bottom: 1em;
  107.  
  108. (MOBILE)
  109.  
  110. right: 30px;
  111.  
  112.  
  113. --- NAME TEXT ---
  114.  
  115.  
  116. font-family: roman;
  117. background: radial-gradient(circle, #FAFAFA 0%, #FFC9E3 100%);
  118. border: 1px solid #fff;
  119. border-radius: 100%;
  120. width: 6.6em;
  121. padding: 3px 5px 3px 5px;
  122. text-shadow: -1px 0 #C791A1, 0 1px #C791A1, 1px 0 #C791A1, 0 -1px #C791A1, 0 0;
  123. -webkit-filter: drop-shadow(0px 0px 10px #666);
  124. z-index: 2;
  125. position: absolute;
  126. bottom: 0em;
  127. right: 0.5em;
  128.  
  129. (MOBILE)
  130.  
  131. width: 5.5em;
  132. right: 1.5em;
  133.  
  134.  
  135. --- NAVIGATION CONTAINER ---
  136.  
  137.  
  138. width: 3em;
  139. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  140. filter: drop-shadow(0px 0px 5px #666);
  141. border-radius: 0px 20px 20px 0px;
  142. animation-name: floating;
  143. animation-duration: 3s;
  144. animation-iteration-count: infinite;
  145. animation-timing-function: ease-in-out;
  146. position: absolute;
  147. bottom: 4.5em;
  148. right: -3em;
  149.  
  150. (MOBILE)
  151.  
  152. right: -5px;
  153.  
  154.  
  155. --- ICONS ---
  156.  
  157.  
  158. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  159. background: white;
  160. border-radius: 100%;
  161. border: solid 1px #C791A1;
  162.  
  163.  
  164. --- DOLL IMAGE ---
  165.  
  166.  
  167. filter: drop-shadow(0px 0px 5px #666);
  168. animation-name: floating;
  169. animation-duration: 3s;
  170. animation-iteration-count: infinite;
  171. animation-timing-function: ease-in-out;
  172. position: absolute;
  173. left: -3em;
  174. bottom: 0em;
  175.  
  176. (MOBILE)
  177.  
  178. left: -1em;
  179.  
  180.  
  181. --- LABEL TEXTS ---
  182.  
  183.  
  184. font-family: roman;
  185. background: radial-gradient(circle, #FAFAFA 0%, #FFC9E3 100%);
  186. border: 1px solid #fff;
  187. border-radius: 100%;
  188. width: 5.5em;
  189. padding: 3px 5px 3px 5px;
  190. text-shadow: -1px 0 #C791A1, 0 1px #C791A1, 1px 0 #C791A1, 0 -1px #C791A1, 0 0;
  191. -webkit-filter: drop-shadow(0px 0px 5px #666);
  192. z-index: 2;
  193. position: absolute;
  194. bottom: 8.2em;
  195. left: 1.7em;
  196.  
  197. (MOBILE)
  198.  
  199. width: 5em;
  200. left: 2.5em;
  201.  
  202.  
  203. --- INFO CONTAINERS (TOP) ---
  204.  
  205.  
  206. width: 12em;
  207. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  208. filter: drop-shadow(0px 0px 5px #666);
  209. border-radius: 100px 500px 500px 500px;
  210. position: absolute;
  211. left: 2.5em;
  212. bottom: 9em;
  213.  
  214. (MOBILE)
  215.  
  216. width: 11em;
  217. left: 4.5em;
  218.  
  219.  
  220. --- SCROLLBOX (TOP) ---
  221.  
  222.  
  223. background: radial-gradient(circle, #FAFAFA 0%, #FAFAFA80 100%);
  224. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  225. border: 1px solid #fff;
  226. border-radius: 100px 500px 500px 500px;
  227. height: 7.5em;
  228. overflow: auto;
  229. padding: 7px;
  230.  
  231.  
  232. --- INFO CONTAINERS (BOTTOM) ---
  233.  
  234.  
  235. width: 12em;
  236. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  237. filter: drop-shadow(0px 0px 5px #666);
  238. border-radius: 500px 100px 500px 500px;
  239. position: absolute;
  240. left: 2.5em;
  241. bottom: 1em;
  242.  
  243. (MOBILE)
  244.  
  245. width: 11em;
  246. left: 4.5em;
  247.  
  248.  
  249. --- LINKS & CREDITS TEXT ---
  250.  
  251. find me here: [link name](#) - [link name](#) - [link name](#) - [link name](#) - [link name](#) *credits to **envious** for the crd layout*
  252.  
  253.  
  254. --- SCROLLBOX (BOTTOM) ---
  255.  
  256.  
  257. background: radial-gradient(circle, #FAFAFA 0%, #FAFAFA80 100%);
  258. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  259. border: 1px solid #fff;
  260. border-radius: 500px 100px 500px 500px;
  261. height: 7.5em;
  262. overflow: auto;
  263. padding: 7px;
  264.  
  265.  
  266. --- SYMBOLS ---
  267.  
  268. ♥
  269. ♫
  270.  
  271.  
  272. --- MUSIC PLAYER ---
  273.  
  274.  
  275. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><link href="//fonts.googleapis.com/css?family=Karla" rel="stylesheet">
  276. <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>
  277.  
  278. <style>
  279.  
  280. #ongaku {
  281. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  282. border-radius: 30px 30px 30px 30px;
  283. -webkit-filter: drop-shadow(0px 0px 10px #666);
  284. margin: auto;
  285. width:35px;
  286. height:35px;
  287. z-index:9999;
  288. border: 1px solid #ccc; /*Border Colour*/
  289. background-color:#ffffff; /*Music Tab Background Colour*/
  290. border-radius:50px;
  291. opacity:.6;
  292. -webkit-transition: all 0.6s ease-in-out;
  293. -moz-transition: all 0.6s ease-in-out;
  294. -ms-transition: all 0.6s ease-in-out;
  295. -o-transition: all 0.6s ease-in-out;
  296. transition: all 0.6s ease-in-out;
  297. }
  298.  
  299. #ongaku {
  300. position: absolute;
  301. bottom: 14em;
  302. right: .5em;
  303. }
  304.  
  305. @media only screen and (max-width: 600px) {
  306. #ongaku {
  307. right: 2.5em;
  308. }
  309. }
  310.  
  311. #gaku {
  312. width:24px;
  313. height:24px;
  314. margin-top:3px;
  315. margin-left:3px;
  316. overflow:hidden;
  317. -webkit-transition: all 0.6s ease-in-out;
  318. -moz-transition: all 0.6s ease-in-out;
  319. -ms-transition: all 0.6s ease-in-out;
  320. -o-transition: all 0.6s ease-in-out;
  321. transition: all 0.6s ease-in-out;
  322. }
  323.  
  324. #kero { height:26px; }
  325. #kero img { margin-right:10px; margin-left:3px; margin-top:3px; } #kero embed { margin-top:-5px; } #kero embed, #kero {
  326. -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
  327. #ongaku:hover { width:80px; } #ongaku:hover #gaku { width:74px; } #ongaku:hover #kero { margin-left:-50px; }
  328.  
  329. .playy, .pausee {
  330. margin-left:7px;
  331. margin-top:4px;
  332. position:relative;
  333. left:20px;
  334. font-size:15px;
  335. color: #FFFFFF; /* play & pause buttons color */
  336. cursor:pointer;
  337. text-shadow: -1px 0 #666, 0 1px #666, 1px 0 #666, 0 -1px #666; } .pausee {display:none;}
  338.  
  339. </style>
  340.  
  341. <div id="ongaku"><div id="gaku"><div id="kero"><table cellspacing"0" cellpadding="0"><tr><td><img src="https://cdn.discordapp.com/emojis/1220534039426109440.gif"></td><td><div class="music-controls" onclick="songstart();"><div class="playy">►</div><div class="pausee">♪</div></a></td></tr></table></div>
  342.  
  343. <audio id="tune" src="linkurl"></audio>
Advertisement
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!