API tools faq
paste
milkandcookies

Untitled

milkandcookies
Jan 21st, 2022
892
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.73 KB | None | 0 0
raw download clone embed print report
  1. <!--- peachgirl crd codes just the scrollbox one btw --->
  2.  
  3. <head>
  4. <link rel="preconnect" href="https://fonts.googleapis.com">
  5. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  6. <link href="https://fonts.googleapis.com/css2?family=Cousine&display=swap" rel="stylesheet">
  7. </head>
  8.  
  9. <style>
  10. @font-face { /* font for mark */
  11. font-family:'handy';
  12. src: url(https://dl.dropbox.com/s/kqvt2miu9r4y9ye/handy00.ttf);
  13. }
  14.  
  15. .holder {
  16. display: inline-flex;
  17. }
  18.  
  19. .peach { /* main box */
  20. border-width: 7px;
  21. border-radius: 5px;
  22. height: 120px;
  23. width: 120px;
  24. padding: 2px;
  25. font-size: 0.85em;
  26. font-family: 'Cousine', monospace;
  27. color: #553f45;
  28. overflow: auto;
  29. position: relative;
  30. margin: auto;
  31. bottom: 0em;
  32. left: 0em;
  33. overflow: hidden;
  34. border: 2px solid #ffcce8;
  35. }
  36.  
  37. .peach:hover .img1 {
  38. height: 0%;
  39. }
  40.  
  41. .pp {
  42. background: rgb(255,255,255);
  43. width: 100%;
  44. height: 100%;
  45. background: transparent;
  46. }
  47.  
  48. .img1 { /* img cover */
  49. width: 100%;
  50. height: 100%;
  51. line-height: 300px;
  52. position: absolute;
  53. top: 0;
  54. left: 0;
  55. transition: 0.8s;
  56. -moz-transition: 0.8s;
  57. -webkit-transition: 0.8s;
  58. -o-transition: 0.8s;
  59. width: 100%;
  60. height: 100%;
  61. object-fit: cover;
  62. z-index: 1;
  63. }
  64.  
  65. #hello { /* css for scrollbox inside it */
  66. border-width: 7px;
  67. border-radius: 5px;
  68. height: 132px;
  69. width: 120px;
  70. padding: 5px;
  71. font-family: 'Cousine', monospace;
  72. font-size: 0.85em;
  73. line-height: 1.1;
  74. color: #000;
  75. overflow: auto;
  76. position: relative;
  77. left:-0.5em;
  78. bottom: 2.4em;
  79. z-index: 1;
  80. background: rgb(255,204,232);
  81. background: radial-gradient(circle, rgba(255,204,232,1) 0%, rgba(255,255,255,1) 70%);
  82. }
  83.  
  84. mark {
  85. background: #fff;
  86. border: 1px solid #FF95CD;
  87. border-radius: 4px;
  88. font-family:'handy';
  89. color: #FF95CD;
  90. padding-left: 15px;
  91. padding-right:15px;
  92. text-align: center;
  93. text-decoration: none;
  94. display: inline-block;
  95. font-size: 1em;
  96. margin: 0px 1px;
  97. cursor: hidden;
  98. }
  99.  
  100. a {
  101. text-decoration: underline;
  102. text-decoration-style: dotted;
  103. color: #FF78BC;
  104. font-weight: bold;
  105.  
  106. }
  107. a:hover {
  108. webkit-filter: blur(1px);
  109. filter: blur(1px);
  110. transition: .6s;
  111. }
  112.  
  113. }
  114. html {
  115. overflow: scroll;
  116. overflow-x: hidden;
  117. }
  118. ::-webkit-scrollbar {
  119. width: 0; /* remove scrollbar space */
  120. background: transparent; /* to make scrollbar invisible */
  121. }
  122. ::-webkit-scrollbar-thumb {
  123. background: transparent;
  124. }
  125.  
  126. ::selection {
  127. color: #FFA4D6;
  128. background: transparent;
  129. }
  130. </style>
  131.  
  132. <div class="holder">
  133. <div class="peach">
  134. <div class="pp">
  135. <br>
  136. <center>
  137. <div id="inside">
  138. <center>
  139. <div id="hello"><br>
  140. <mark>about</mark>
  141. <br>
  142. <br>
  143. 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>
  144. <br>
  145. <mark>lovely</mark>
  146. <br>
  147. <br>
  148. 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>
  149. <br>
  150. <mark> music </mark>
  151. <br>
  152. <br>
  153. 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>
  154. <br>
  155. <mark> links </mark>
  156. <br>
  157. <br>
  158. <a href="URL" target="_blank">title</a> <a href="URL" target="_blank">title</a> <a href="URL" target="_blank">title</a> <a href="URL" target="_blank">title</a> <br>
  159. <br>
  160. </div>
  161. </center>
  162. </div>
  163. </center>
  164. </div>
  165. <div id="overlay"><img class="img1" src="https://64.media.tumblr.com/df2b24786f850689d4b34b1cfd8407f4/0e7add406ccfa4df-6b/s400x600/49aee751e94d2aba1719bc31327e5cd9f2009e0c.jpg"></div>
  166. </div>
  167.  
  168. <div class="peach2">
  169. <div class="pp2">
  170. <br>
  171. <center>
  172. <div id="inside">
  173. <center>
  174. <div id="hello2"><br>
  175. <mark>byf</mark>
  176. <br>
  177. <br>
  178. 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>
  179. <br>
  180. <mark>dni</mark>
  181. <br>
  182. <br>
  183. 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>
  184. <br>
  185. <mark>notes</mark>
  186. <br>
  187. <br>
  188. 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
  189. <br>
  190. <br>
  191. </div>
  192. </center>
  193. </div>
  194. </center>
  195. </div>
  196. <div id="overlay"><img class="img2" src="https://64.media.tumblr.com/1ef725e112b4f7101e43d7ee16b6e671/0e7add406ccfa4df-c1/s500x750/2403c685258ad9d34c70c0126a31d48f505cefc0.jpg"></div>
  197. </div>
  198. </div>
  199.  
  200. <!--- ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ --->
  201.  
  202. <head>
  203. <link rel="preconnect" href="https://fonts.googleapis.com">
  204. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  205. <link href="https://fonts.googleapis.com/css2?family=Cousine&display=swap" rel="stylesheet">
  206. </head>
  207.  
  208. <style>
  209. @font-face {
  210. font-family:'handy';
  211. src: url(https://dl.dropbox.com/s/kqvt2miu9r4y9ye/handy00.ttf);
  212. }
  213.  
  214. .peach2 { /* main box */
  215. border-width: 7px;
  216. border-radius: 5px;
  217. height: 120px;
  218. width: 120px;
  219. padding: 2px;
  220. font-size: 0.85em;
  221. font-family: 'Cousine', monospace;
  222. color: #553f45;
  223. overflow: auto;
  224. position: relative;
  225. margin: auto;
  226. bottom: 0em;
  227. left: 0em;
  228. overflow: hidden;
  229. border: 2px solid #ffcce8;
  230. }
  231.  
  232. .peach2:hover .img2 {
  233. height: 0%;
  234. }
  235.  
  236. .pp2 {
  237. background: rgb(255,255,255);
  238. width: 100%;
  239. height: 100%;
  240. background: transparent;
  241. }
  242.  
  243. .img2 { /* img cover */
  244. width: 100%;
  245. height: 100%;
  246. line-height: 300px;
  247. position: absolute;
  248. top: 0;
  249. left: 0;
  250. transition: 0.8s;
  251. -moz-transition: 0.8s;
  252. -webkit-transition: 0.8s;
  253. -o-transition: 0.8s;
  254. width: 100%;
  255. height: 100%;
  256. object-fit: cover;
  257. z-index: 1;
  258. }
  259.  
  260. #hello2 { /* css for scrollbox inside it */
  261. border-width: 7px;
  262. border-radius: 5px;
  263. height: 132px;
  264. width: 120px;
  265. padding: 5px;
  266. font-size: 0.85em;
  267. line-height: 1.1;
  268. font-family: 'Cousine', monospace;
  269. color: #000;
  270. overflow: auto;
  271. position: relative;
  272. left:-0.5em;
  273. bottom: 2.4em;
  274. z-index: 1;
  275. background: rgb(255,204,232);
  276. background: radial-gradient(circle, rgba(255,204,232,1) 0%, rgba(255,255,255,1) 70%);
  277. }
  278.  
  279. mark {
  280. background: #fff;
  281. border: 1px solid #FF95CD;
  282. border-radius: 4px;
  283. font-family:'handy';
  284. color: #FF95CD;
  285. padding-left: 15px;
  286. padding-right:15px;
  287. text-align: center;
  288. text-decoration: none;
  289. display: inline-block;
  290. font-size: 1em;
  291. margin: 0px 1px;
  292. cursor: hidden;
  293. }
  294. html {
  295. overflow: scroll;
  296. overflow-x: hidden;
  297. }
  298. ::-webkit-scrollbar {
  299. width: 0; /* remove scrollbar space */
  300. background: transparent; /* to make scrollbar invisible */
  301. }
  302. ::-webkit-scrollbar-thumb {
  303. background: transparent;
  304. }
  305.  
  306. ::selection {
  307. color: #FFA4D6;
  308. background: transparent;
  309. }
  310.  
  311. </style>
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!