API tools faq
paste
mixue

cr crdskiz 6

mixue
Nov 24th, 2023 (edited)
499
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.63 KB | None | 0 0
raw download clone embed print report
  1. ** PLEASE ADJUST THE POSITIONING, HEIGHT & WIDTH CODES IF IT DOESN'T LOOK GOOD ON YOUR DEVICE **
  2.  
  3. --- CODES EMBED ---
  4.  
  5. <style>
  6. @font-face {
  7. font-family: nintendo;
  8. src: url(https://dl.dropbox.com/s/vlxjtnvrl9s0snp/Nintendo-DS-BIOS.ttf);
  9. }
  10.  
  11. @font-face {
  12. font-family: kiwi;
  13. src: url(https://dl.dropbox.com/s/388cvx0do21kj3n/KiwiSoda.ttf);
  14. }
  15.  
  16. ::-webkit-scrollbar {
  17. width: 4px;
  18. }
  19.  
  20. ::-webkit-scrollbar:horizontal { height: 4px;
  21. }
  22.  
  23. ::-webkit-scrollbar:vertical {
  24. height: 0px;
  25. }
  26.  
  27. ::-webkit-scrollbar-thumb {
  28. background-color: #A8A8A891;
  29. }
  30.  
  31. ::-webkit-scrollbar-thumb:vertical {
  32. background: #A8A8A891;
  33. }
  34.  
  35. ::-webkit-scrollbar-thumb:horizontal {
  36. background: #A8A8A891;
  37. }
  38.  
  39. @keyframes flicker {
  40. 0% { opacity: 0.27861; } 5% { opacity: 0.34769; } 10% { opacity: 0.23604; } 15% { opacity: 0.90626; } 20% { opacity: 0.18128; } 25% { opacity: 0.83891; } 30% { opacity: 0.65583; } 35% { opacity: 0.67807; } 40% { opacity: 0.26559; } 45% { opacity: 0.84693; } 50% { opacity: 0.96019; } 55% { opacity: 0.08594; } 60% { opacity: 0.20313; } 65% { opacity: 0.71988; } 70% { opacity: 0.53455; } 75% { opacity: 0.37288; } 80% { opacity: 0.71428; } 85% { opacity: 0.70419; } 90% { opacity: 0.7003; } 95% { opacity: 0.36108; } 100% { opacity: 0.24387; }
  41. }
  42.  
  43. #wrapper::after {
  44. content: " ";
  45. display: block;
  46. position: absolute;
  47. top: 0;
  48. left: 0;
  49. bottom: 0;
  50. right: 0;
  51. background: rgba(255, 255, 255, 0.1);
  52. opacity: 0;
  53. z-index: 2;
  54. pointer-events: none;
  55. animation: flicker 0.15s infinite;
  56. }
  57.  
  58. #wrapper::before{
  59. content: " ";
  60. display: block;
  61. position: absolute;
  62. top: 0;
  63. left: 0;
  64. bottom: 0;
  65. right: 0;
  66. background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(230,230,230,0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  67. z-index: 2;
  68. background-size: 100% 2px, 3px 100%;
  69. pointer-events: none;
  70. }
  71.  
  72. </style>
  73.  
  74. --- TOP CONTAINER ---
  75.  
  76. height: 40px;
  77. border-radius: 1em 1em 0.5em 0.5em;
  78. box-shadow: inset 0 7px 7px -7px white, inset 7px 0 7px -7px white, inset -7px 0 7px -7px white, inset 0 -7px 7px -7px black;
  79. margin-bottom: 5px !important;
  80.  
  81. (mobile)
  82.  
  83. height: 35px;
  84.  
  85. --- CIRCLE TEXTS ---
  86.  
  87. [●]{#313773} [●]{#EFEFFC} [●]{#C3D4FF}
  88.  
  89. --- LEFT CONTAINER ---
  90.  
  91. height: 215px;
  92. width: 170px;
  93. box-shadow: inset 0 7px 7px -4px white, inset 7px 0 7px -7px white, inset -7px 0 7px -7px white, inset 0 -7px 7px -7px white;
  94. border-radius: 0.5em;
  95. z-index: 1;
  96. position: absolute;
  97. left: 0em;
  98.  
  99. (mobile)
  100.  
  101. height: 200px;
  102. width: 150px;
  103.  
  104. --- NAME TEXT ---
  105.  
  106. font-family: kiwi;
  107. right: 0.45em;
  108.  
  109. (mobile)
  110.  
  111. right: 0.2em;
  112.  
  113. --- RIGHT CONTAINER ---
  114.  
  115. height: 132px;
  116. width: 235px;
  117. box-shadow: inset 0 7px 7px -4px white, inset 7px 0 7px -7px white, inset -7px 0 7px -7px white, inset 0 -7px 7px -7px white;
  118. border-radius: 0.5em;
  119. position: relative;
  120. bottom: -0.15em;
  121. right: -6.1em;
  122. margin-bottom: 7px !important;
  123.  
  124. (mobile)
  125.  
  126. height: 132px;
  127. width: 170px;
  128. right: -6.5em;
  129. bottom: -0.3em;
  130.  
  131. --- CREDITS ---
  132.  
  133. cr __crdskiz__ for this carrd layout
  134.  
  135. --- FIRST SCROLLBOX ---
  136.  
  137. background: rgba(255,255,255,0.812);
  138. border-radius: 0.5em;
  139. height: 118px;
  140. overflow-y: scroll;
  141. font-family: nintendo;
  142. padding: 5px;
  143.  
  144. (Text: Highlight)
  145.  
  146. background: linear-gradient(90deg, #313773, white, #c3d4ff, #efeffc);
  147. -webkit-background-clip: text;
  148. -webkit-text-fill-color: transparent;
  149. padding-left: 2px;
  150. padding-right: 2px;
  151. font-size: 1.2em;
  152. -webkit-text-stroke: 0.5px black;
  153. font-family: kiwi;
  154. font-weight: bold;
  155. letter-spacing: 1px;
  156. line-height: .5em;
  157. filter: drop-shadow(0px 0px 1px #2e3468);
  158.  
  159. --- SCROLLABLE CONTAINER ---
  160.  
  161. width: 285px;
  162. height: 120px;
  163. box-shadow: inset 0 7px 7px -4px white, inset 7px 0 7px -7px white, inset -7px 0 7px -7px white, inset 0 -7px 7px -7px white;
  164. border-radius: 0.5em;
  165. overflow-x: scroll;
  166. white-space: nowrap;
  167. margin-top: 2px !important;
  168.  
  169. (mobile)
  170.  
  171. width: 220px;
  172. height: 100px;
  173.  
  174. --- HORIZONTAL SCROLLBOX EMBED ---
  175.  
  176. <style>
  177. #boxes {
  178. white-space: normal;
  179. display: inline-block;
  180. height: 80px;
  181. width: 160px;
  182. padding: 5px;
  183. font-size: 1.2em;
  184. vertical-align: middle;
  185. margin-right: .5em;
  186. background: #ffffffcf;
  187. border-radius: 0.50em;
  188. font-family: nintendo;
  189. overflow-y: auto;
  190. text-align: left;
  191. }
  192.  
  193. mark {
  194. background: linear-gradient(90deg, #313773, white, #c3d4ff, #efeffc);
  195. -webkit-background-clip: text;
  196. -webkit-text-fill-color: transparent;
  197. padding-left: 2px;
  198. padding-right: 2px;
  199. font-size: 1.2em;
  200. -webkit-text-stroke: 0.5px black;
  201. font-family: kiwi;
  202. font-weight: bold;
  203. letter-spacing: 1px;
  204. line-height: .5em;
  205. filter: drop-shadow(0px 0px 1px #2e3468);
  206. }
  207. </style>
  208.  
  209. <div id="boxes">
  210. <mark>dni</mark> info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
  211. <br></br>
  212. <mark>byf</mark> info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
  213. </div>
  214.  
  215. <div id="boxes">
  216. <mark>love club</mark> info info info info info info info info info info info info info info info info
  217. <br></br>
  218. <mark>music</mark>info info info info info info info info info info info info info info info info
  219. </div>
  220.  
  221. --- RIGHT IMAGE CONTAINER ---
  222.  
  223. height: 120px;
  224. width: 120px;
  225. box-shadow: inset 0 7px 7px -4px white, inset 7px 0 7px -7px white, inset -7px 0 7px -7px white, inset 0 -7px 7px -7px white;
  226. border-radius: 0.5em;
  227. position: absolute;
  228. right: 0em;
  229. bottom: 0em;
  230.  
  231. (mobile)
  232.  
  233. height: 100px;
  234. width: 100px;
  235.  
  236. --- BOTTOM CONTAINER ---
  237.  
  238. height: 35px;
  239. border-radius: 0.5em 0.5em 1em 1em;
  240. box-shadow: inset 0 7px 7px -7px black, inset 7px 0 7px -7px white, inset -7px 0 7px -7px white, inset 0 -7px 7px -7px white;
  241. margin-top: 5px !important;
  242.  
  243. --- MUSIC PLAYER ---
  244.  
  245. <link rel="preconnect" href="https://fonts.googleapis.com">
  246. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  247. <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;800&display=swap" rel="stylesheet">
  248. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  249. <script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>
  250. <style type="text/css"> /*-------MUSIC PLAYER BY GLENTHEMES-------*/
  251. #glenplayer02 {
  252. position:relative;
  253. margin-top: 5px;
  254. margin-bottom: 5px;
  255. top:0px;
  256. left: 10px;
  257. display: flex;
  258. z-index: 99;
  259. }
  260.  
  261. #glenplayer02 a { text-decoration: none; }
  262.  
  263. #glenplayer02 > div { align-self:center; -webkit-align-self:center; }
  264.  
  265. .music-controls { user-select:none; -webkit-user-select:none; font-size:18px; cursor:pointer; }
  266.  
  267. .playy, .pausee {
  268. color: #fff;
  269. text-shadow: -1px 0 #313773, 0 1px #313773, 1px 0 #313773, 0 -1px #313773, 0 0;
  270. } /* color of play & pause buttons */
  271.  
  272. .pausee { display: none; }
  273.  
  274. .sonata {
  275. margin-left: 5px;
  276. font-family: 'M PLUS Rounded 1c', sans-serif;
  277. font-size:13px;
  278. color: #fff;
  279. font-weight: light;
  280. word-wrap: break-word;
  281. width: 200px;
  282. text-shadow: -1px 0 #313773, 0 1px #313773, 1px 0 #313773, 0 -1px #313773, 0 0; /* color of music note symbol */ }
  283.  
  284. .labeltext {
  285. margin-left:0px;
  286. position: relative;
  287. bottom:10px;
  288. font-family: 'M PLUS Rounded 1c', sans-serif;
  289. font-size:14px;
  290. color: #313773;
  291. font-weight: light;
  292. text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0;/* color of song title */
  293. }
  294. </style>
  295. <body>
  296.  
  297. <div id="glenplayer02">
  298. <div class="music-controls" onclick="songstart();">
  299. <div class="playy">►</div>
  300. <div class="pausee">♬</div></div>
  301. <div class="sonata"> <marquee> song lyrics song lyrics song lyrics song lyrics </marquee> </div><div class="labeltext"></div></div>
  302. <audio id="tune" src="linkurl""audio"></audio>
  303. </body>
  304. <div class="labeltext">
  305. </div>
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!