Advertisement
valentinegirl

cr chngmis

Mar 12th, 2022
541
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.40 KB | None | 0 0
  1. </style></head><body><div id="wrapper"><div id="main"><div class="inner"><div id="embed01"><script src="https://kit.fontawesome.com/8ef97d3168.js" crossorigin="anonymous"></script><link rel="preconnect" href="https://fonts.googleapis.com">
  2. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  3. <link href="https://fonts.googleapis.com/css2?family=Mali:wght@500&display=swap" rel="stylesheet"><div class="all"><div id="cont"><div id="play" class="play"><i class="fas fa-play"></i></div></div><div id="name">Name</div><img class=ic src="https://data.whicdn.com/images/357394720/original.jpg"><div id="infop"> scroll ~! <br> text text text text text text text text text text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text text text text text text text text text text </div> <div id="rate"> text text text text text text text text text text text text text text text text text text text text text text text text </div> <div id="contt"><div class="boxs"><img class=ari src="https://i.pinimg.com/originals/a4/5b/05/a45b0531787121bb0a74d82b1da41949.gif"><mark><i class="fas fa-folder-open"></i> RULES 🎧</mark> <br> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</br>
  4.  
  5. <mark><i class="fas fa-question-circle"></i> FIND ME 💗 </mark> <br> link link link link link </br>
  6. <br>scroll to the left to see more~!</br>
  7. </div><div class="boxs">
  8. <img class=arii src="https://i.pinimg.com/originals/98/3d/62/983d62b00d1d55ce50fb67b1eb424e96.png"><mark><i class="fas fa-music"></i> MUSIC 🎶 </mark> <br> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text<br></br>
  9. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text<br></br></div></div></div><audio id="track"><source src="https://dl.dropboxusercontent.com/s/25fo3wd1hpzjfn9/Rewind.mp3" type="audio/mpeg" /></audio></div><div id="embed02"><style> html {
  10. height: 100vh;
  11. width: 20wv;
  12. font-size: 16px;
  13. position: fixed;
  14. display: flex;
  15. align-items: center;
  16. justify-content: center;
  17. }
  18. * {
  19. padding: 0;
  20. margin: 0;
  21. box-sizing: border-box;
  22. }
  23. body {
  24. }
  25. .all {
  26. position: relative;
  27. width: 20em;
  28. height: 16em;
  29. background: #FEE8F3;
  30. border-radius: 7px;
  31. border: 1px solid #eaeaea;
  32. -webkit-backdrop-filter: blur(2px);
  33. backdrop-filter: blur(2px);
  34. box-shadow: 0 0 2px rgba(140,140,140,.2);
  35. display: flex;
  36. padding: 0px;
  37. position: relative;
  38. left: 30px;
  39. }
  40. @font-face {
  41. font-family: lovely script;
  42. src: url(https://dl.dropbox.com/s/ss5bqbogijw4zfj/LovelyScript.otf);
  43. }
  44. #cont {
  45. height: 100%;
  46. width: 43%;
  47. }
  48. .scroll {
  49. border-radius: 4px;
  50. padding: 5px;
  51. border: 1px solid #eaeaea;
  52. height: 100%;
  53. width: 100%;
  54. background: rgb(255, 255, 255, 0.5);
  55. margin-bottom: 10px;
  56. position: relative;
  57. overflow-y: scroll;
  58. overflow-x: hidden;
  59. font-family: 'Mali', cursive;
  60. font-size: 11px;
  61. }
  62. #tab {
  63. width: 10%;
  64. height: auto;
  65. display: flex;
  66. font-family: 'Mali', cursive;
  67. font-size: 14px;
  68. background: rgb(255, 255, 255, 0.8);
  69. border-radius: 100px;
  70. -webkit-backdrop-filter: blur(2px);
  71. backdrop-filter: blur(2px);
  72. box-shadow: 0 0 2px rgba(140,140,140,.2);
  73. position: relative;
  74. top: -5%;
  75. right: -2.5%;
  76. padding: 5px;
  77. z-index: 99;
  78. align-items: center;
  79. justify-content: center;
  80. }
  81. i {
  82. color: #f4bcd6;
  83. font-size: 16px;
  84. }
  85. .fa-heart {
  86. margin-right: 7px;
  87. }
  88. .fa-play {
  89. cursor:pointer;
  90. -webkit-text-stroke: 0.5px #000000;
  91. -webkit-backdrop-filter: blur(2px);
  92. background: rgb(255, 255, 255, 0.8);
  93. backdrop-filter: blur(2px);
  94. -webkit-filter: drop-shadow(0px 0px 2px rgba(140,140,140,.4));
  95. -webkit-background-clip: text;
  96. -webkit-text-fill-color: transparent;
  97. }
  98. .dolli {
  99. height: 65%;
  100. width: auto;
  101. position: absolute;
  102. left: -5%;
  103. bottom: -1.5%;
  104. border-radius: 0 0 7px 0;
  105. }
  106. .icons {
  107. border: 1px solid #eaeaea;
  108. border-radius: 100%;
  109. position: absolute;
  110. right: -5%;
  111. bottom: 50%;
  112. }
  113. #contt {
  114. width: 57%;
  115. height: 100%;
  116. overflow-x: scroll;
  117. white-space: nowrap;
  118. background: #fff2f8;
  119. padding-left: 5px;
  120. padding-top: 5px;
  121. padding-bottom: 5px;
  122. padding-right: 5px;
  123. border-radius: 5px;
  124. }
  125. .boxs {
  126. white-space: normal;
  127. display: inline-block;
  128. vertical-align: middle;
  129. background: #fff;
  130. height: 100%;
  131. width: 100%;
  132. border: 1px solid #eaeaea;
  133. background: rgb(255, 255, 255, 0.5);
  134. border-radius: 4px;
  135. margin-right: 1px;
  136. overflow-y: scroll;
  137. padding: 5px;
  138. font-size: 11px;
  139. line-height: 1.2;
  140. font-family: 'Mali', cursive;
  141. }
  142. .fa-folder-open , .fa-question-circle , .fa-music , .fa-video{
  143. line-height: 0;
  144. -webkit-filter: drop-shadow(0px 0px 1px rgba(255,255,255,.4));
  145. font-size: 15px;
  146. }
  147. mark {
  148. background: #FEE9F3;
  149. padding-left: 3px;
  150. padding-right: 3px;
  151. border-radius: 5px 0;
  152. border: 1px solid #eaeaea;
  153. margin-right: 5px;
  154. font-size: 13.5px;
  155. font-family: ktegaki;
  156. font-weight: bold;
  157. }
  158. @font-face {
  159. font-family: ktegaki;
  160. src: url(https://dl.dropbox.com/s/likp0uru5np58yn/KTEGAKI.ttf);
  161. }
  162. .ic {
  163. border-radius: 50%;
  164. background: #FEE9F3;
  165. width: 5em;
  166. height: 5em;
  167. position: absolute;
  168. left: 30%;
  169. top: -0.2%;
  170. z-index: 98;
  171. padding 8px;
  172. border: 7px solid #FEE9F3;
  173. overflow: hidden;
  174. object-fit: cover;
  175. }
  176. .play {
  177. padding: 5px;
  178. display: flex;
  179. border-radius: 4px;
  180. position: absolute;
  181. bottom: 1.5%;
  182. left: 1%;
  183. font-family: 'Mali', cursive;
  184. font-size: 11px;
  185. align-items: center;
  186. justify-content: center;
  187. }
  188. #name {
  189. font-family: lovely script;
  190. font-size: 2.5em;
  191. position: absolute;
  192. left: -7%;
  193. top: 15%;
  194. line-height: 0;
  195. transform: rotate(0deg);
  196. z-index: 999;
  197. color: #fff;
  198. text-shadow: -2px 0 #fee9f3, 0 2px #fee9f3, 2px 0 #fee9f3, 0 -2px #fee9f3, 0 0;
  199. -webkit-text-stroke: 0.5px #000000;
  200. }
  201. #infop {
  202. background: rgb(255, 255, 255, 0.5);
  203. width: 35%;
  204. height: 28%;
  205. position: absolute;
  206. overflow: scroll;
  207. left: 4%;
  208. text-align: center;
  209. padding: 5px;
  210. font-size: 10.5px;
  211. font-family: 'Mali', cursive;
  212. border-radius: 0 5px;
  213. bottom: 43%;
  214. border: 1px solid #eaeaea;
  215. -webkit-backdrop-filter: blur(2px);
  216. backdrop-filter: blur(2px);
  217. box-shadow: 0 0 2px rgba(140,140,140,.2);
  218. line-height: 1.2;
  219. }
  220. .ari {
  221. width: 100%;
  222. height: 100px;
  223. object-fit: cover;
  224. border-radius: 4px;
  225. margin-bottom: 10px;
  226. opacity: 0.8;
  227. -webkit-backdrop-filter: blur(2px);
  228. backdrop-filter: blur(2px);
  229. }
  230. .arii {
  231. width: 100%;
  232. height: 150px;
  233. object-fit: cover;
  234. border-radius: 4px;
  235. margin-bottom: 10px;
  236. opacity: 0.6;
  237. -webkit-backdrop-filter: blur(2px);
  238. backdrop-filter: blur(2px);
  239. }
  240. #rate {
  241. background: rgb(255, 255, 255, 0.5);
  242. width: 35%;
  243. height: 28%;
  244. overflow: scroll;
  245. text-align: center;
  246. padding: 5px;
  247. font-size: 10.5px;
  248. font-family: 'Mali', cursive;
  249. border-radius: 0 5px;
  250. border: 1px solid #eaeaea;
  251. -webkit-backdrop-filter: blur(2px);
  252. backdrop-filter: blur(2px);
  253. box-shadow: 0 0 2px rgba(140,140,140,.2);
  254. line-height: 1.2;
  255. z-index: 1038;
  256. position: absolute;
  257. bottom: 12.3%;
  258. left: 4%;
  259. </style></div><div id="embed03"><script> document.getElementById("play").onclick = function() {
  260. var audio = document.getElementById("track");
  261. if (audio.paused) audio.play();
  262. else audio.pause();
  263. }
  264. ;
  265. </script></div></div></div></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement