Advertisement
ityizhuo

heejung.crd.co embeds

Sep 23rd, 2021
6,299
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.87 KB | None | 0 0
  1. <!--- heejung crd co embeds since so many of you are asking for it. keep in mind that this crd look AWFUL on desktop. maybe i will try to remake the whole thing later~ cr. are appreciated to itzhuo on twt --->
  2.  
  3. <!--- container --->
  4.  
  5. <style>
  6. #container#1 {
  7.     border-width:7px;
  8.     border-style:solid;
  9.     border-image: url("https://i.imgur.com/ROjUrNz.gif") 7 fill round;
  10.    }
  11. </style>
  12.  
  13. <!--- scrollboxes ---->
  14.  
  15.    <head>
  16. <link rel="preconnect" href="https://fonts.googleapis.com">
  17. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  18. <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300&display=swap" rel="stylesheet">
  19. </head>
  20.  
  21. <style>
  22. #scroll1 { /* use this for all of the containers just change the number and if you want play around with the position */
  23. height: 110px;
  24. width: 100%;
  25. padding: 10px;
  26. background: rgba(255, 255, 255, 0.8);
  27. border-radius:8px;
  28. font-family: 'Chakra Petch', sans-serif;
  29. line-height: 1.3;
  30. font-size:14px;
  31. overflow: auto;
  32. text-align:left;
  33. position: absolute;
  34. bottom: 4em;
  35. left:10.5em;
  36. z-index: 99;
  37. }
  38. </style>
  39. <div id="scroll1">
  40. <p>text text text text text text text text text text text text text text text text text text text </p>
  41. </div>
  42.  
  43. <!--- img index --->
  44.  
  45. <style>
  46. #image01 {
  47. position: absolute;
  48. top: -14.5em;
  49. left: 11em;
  50. z-index: 50;
  51.    }
  52. </style>
  53.  
  54. <!--- img index mask --->
  55.  
  56. <style>
  57. .fogmask { /* if you had pro plus you can use this directly in the element class */
  58. -webkit-mask-image: url(https://i.ibb.co/PTDHc2h/fogmask.png);
  59. -webkit-mask-repeat: no-repeat;
  60. -webkit-mask-position: top;
  61. -webkit-mask-size: 100%;
  62. }
  63. </style>
  64. <div class="fogmask"><img src="URL"></div>
  65.  
  66. <!--- in the corner img --->
  67.  
  68. <style>
  69. #image02 {
  70. position: absolute;
  71. top: 16em;
  72. left: 20em;
  73. z-index: 545;
  74. }
  75. </style>
  76.  
  77. <!--- name --->
  78.  
  79. <style>
  80. @font-face {
  81. font-family: hoollidday;
  82. src: url(https://dl.dropbox.com/s/yj168cmfy2psfhd/Hoollidday.ttf);
  83. }
  84.  
  85. #text02 {
  86. text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #f4a1c5, 0 -1px #f4a1c5, 0 0;
  87. font-family: hoolliday;
  88. font-size:  40px;
  89. transform: rotate(-15deg);
  90. position:relative;
  91. bottom:-65px;
  92. z-index:1;
  93.    }
  94. </style>
  95.  
  96. <!--- repr. music --->
  97.  
  98. <head>
  99. <link rel="preconnect" href="https://fonts.googleapis.com">
  100. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  101. <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300&display=swap" rel="stylesheet">
  102. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
  103. </head>
  104. <style>
  105. #musicplayer{
  106. display:grid;
  107. grid-template-columns:20px auto;
  108. align-items:center;
  109. width: 150px;
  110. position:relative;container#05;
  111. font-family: 'Chakra Petch', sans-serif;
  112. font-size:15px;
  113. font-weight:bold;
  114. line-height:140%;
  115. background:rgba(255, 188, 233, 0.25);
  116. border: 1px solid #FF69B4;
  117. }
  118. #musictitle{
  119. overflow: hidden;
  120. white-space: nowrap;
  121. display:inline-block;
  122. width: calc(100% - 10px - 1px);
  123. margin-left: calc(10px + 1px);
  124. }
  125. #musicpixel{
  126. width:150%;
  127. padding:5px;
  128. position:relative;
  129. min-height: 20px;
  130. background:#FFE6F6;
  131. border-right: 1px solid #FF69B4;
  132. }
  133. .overlay {
  134. opacity:0;
  135. position:absolute;
  136. top:0;
  137. left:0;
  138. text-align:center;
  139. width:100%;
  140. height:100%;
  141. transition:0.3s ease;
  142. background:white;
  143. }
  144. #musicplayer:hover .overlay {
  145. opacity: 1;
  146. transition:0.3s ease;
  147. }
  148. .playpause{
  149. position: absolute;
  150. top: 50%;
  151. left: 50%;
  152. transform: translate(-50%, -50%);
  153. align:center;
  154. }
  155. .playpause:hover{
  156. cursor:help;
  157. }
  158. #musicpixel img{
  159. display:block;
  160. align:center;
  161. }
  162. .marquee{
  163. display: inline-block;
  164. padding-left: 100%;
  165. animation: marquee 5s linear infinite;
  166. }
  167. @keyframes marquee{
  168. 0% {
  169. transform: translate(0, 0);
  170. }
  171. 100% {
  172. transform: translate(-100%, 0);
  173. }
  174. }
  175. </style>
  176. <div id='musicplayer'>
  177. <div id='musicpixel'>
  178. <img src='https://xyz.crd.co/assets/images/gallery12/1ad5e57b.gif?v=65834ec0'>
  179. <div class='overlay'>
  180. <div class='playpause'><i class="fas fa-play"></i></div>
  181. </div>
  182. </div>
  183. <div id='musictitle'>
  184. <span class='marquee'>DON'T open on desktop pls :cry: also this isn't draggable lol</span>
  185. </div>
  186. </div>
  187. <audio id='musicsrc' loop src='https://dl.dropbox.com/s/e1pw4feexdq279h/Get%20Up%20--%20%EB%B2%A0%EC%9D%B4%EB%B9%84%EB%B3%B5%EC%8A%A4.mp3'></audio>
  188. <script>
  189. document.querySelector('.playpause').addEventListener('click', playpause);
  190. function playpause(){
  191. if(document.querySelector('.playpause').innerHTML == '<i class="fas fa-play"></i>'){
  192. document.querySelector('#musicsrc').play();
  193. document.querySelector('.playpause').innerHTML = '<i class="fas fa-pause"></i>';
  194. } else{
  195. document.querySelector('#musicsrc').pause();
  196. document.querySelector('.playpause').innerHTML = '<i class="fas fa-play"></i>';
  197. }
  198. }
  199. </script>
  200.  
  201. <!--- and I think thats all if u have any concerns abt this just send a dm through twt :D --->
  202.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement