API tools faq
paste
nomskoo

carrd tut #40 - standard

nomskoo
Sep 27th, 2024 (edited)
41
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.78 KB | None | 0 0
raw download clone embed print report
  1. haiii and welcome :33 as always all positionings have been optimized for my personal devices so you may have to edit them to fit your devices!! if you have any questions about this tut / pastebin you can dm me @ crrdcore or send me a retrospring @ soobinzz!!
  2.  
  3. --- CODES ---
  4. <style>
  5. @font-face {
  6. font-family: roman;
  7. src: url(https://dl.dropbox.com/s/f9cfrx4wyt13rwv/ROMANTIC.TTF);
  8. }
  9.  
  10. #text01 {
  11. font-family: roman;
  12. text-shadow: -1px 0 #191919, 0 1px #191919, 1px 0 #191919, 0 -1px #191919;
  13. position: relative;
  14. bottom: -1.3em;
  15. left: 2.1em;
  16. z-index: 999;
  17. }
  18.  
  19. @media only screen and (max-width: 600px) {
  20. #text01 {
  21. position: relative;
  22. bottom: -1.2em;
  23. left: 2.7em;
  24. }
  25. }
  26.  
  27. #text02 {
  28. text-shadow: -1px 0 #808080, 0 1px #808080, 1px 0 #808080, 0 -1px #808080;
  29. width: 5.5em;
  30. background: #FFFFFF80;
  31. border-top: 3.5px double #808080;
  32. border-left: 3.5px double #808080;
  33. border-right: 3.5px double #808080;
  34. border-bottom: 3.5px double #808080;
  35. border-radius: 10px;
  36. transform: rotate(-6.4rad);
  37. position: relative;
  38. bottom: 1.2em;
  39. left: -0.7em;
  40. }
  41.  
  42. @media only screen and (max-width: 600px) {
  43. #text02 {
  44. position: relative;
  45. bottom: 1.8em;
  46. left: -2em;
  47. }
  48. }
  49.  
  50. ::-webkit-scrollbar {
  51. width: 16px
  52. }
  53.  
  54. ::-webkit-scrollbar:horizontal {
  55. height: 17px
  56. }
  57.  
  58. ::-webkit-scrollbar-corner {
  59. background: #eee
  60. }
  61.  
  62. ::-webkit-scrollbar-track:vertical {
  63. background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%)
  64. }
  65.  
  66. ::-webkit-scrollbar-track:horizontal {
  67. background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%)
  68. }
  69.  
  70. ::-webkit-scrollbar-thumb {
  71. border: 1.5px solid #888;
  72. border-radius: 3px;
  73. box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
  74. background-color: #eee;
  75. }
  76.  
  77. ::-webkit-scrollbar-thumb:vertical {
  78. background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
  79. }
  80.  
  81. ::-webkit-scrollbar-thumb:horizontal {
  82. background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb)
  83. }
  84.  
  85. ::-webkit-scrollbar-button:horizontal:end:increment,
  86. ::-webkit-scrollbar-button:horizontal:start:decrement,
  87. ::-webkit-scrollbar-button:vertical:end:increment,
  88. ::-webkit-scrollbar-button:vertical:start:decrement {
  89. display: block
  90. }
  91.  
  92. ::-webkit-scrollbar-button:vertical {
  93. height: 17px
  94. }
  95.  
  96. ::-webkit-scrollbar-button:vertical:start:decrement {
  97. background: white;
  98. background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
  99. background-repeat: no-repeat;
  100. background-position: center;
  101. -moz-background-size: cover;
  102. -webkit-background-size: cover;
  103. -o-background-size: cover;
  104. background-size: cover;
  105. }
  106.  
  107. ::-webkit-scrollbar-button:vertical:start:increment {
  108. display: none;
  109. }
  110.  
  111. ::-webkit-scrollbar-button:vertical:end:decrement {
  112. display: none;
  113. }
  114.  
  115. ::-webkit-scrollbar-button:vertical:end:increment {
  116. background: white;
  117. background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
  118. background-repeat: no-repeat;
  119. background-position: center;
  120. -moz-background-size: cover;
  121. -webkit-background-size: cover;
  122. -o-background-size: cover;
  123. background-size: cover;
  124. }
  125. </style>
  126.  
  127. --- LACE BORDER IMG ---
  128. <style>
  129. .two {
  130. border-width: 7px;
  131. border-style: solid;
  132. border-image: url("https://i.imgur.com/P1edUQb.png") 7 fill round;
  133. }
  134.  
  135. @media only screen and (max-width: 600px) {
  136. .two {
  137. position: relative;
  138. bottom: 0.5em;
  139. right: 1.5em;
  140. }
  141. }
  142.  
  143. </style>
  144.  
  145. <img class="two" src="https://i.pinimg.com/736x/b3/0f/38/b30f388295d458d4962c66a029ed11b6.jpg" alt="." style="width:350px;height:auto;border-radius:10px;">
  146.  
  147. --- ABOUT SCROLLBOX ---
  148. <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  149.  
  150. <style>
  151. #text03 {
  152. font-family: "Poppins", sans-serif;
  153. font-size: 15px;
  154. border-width: 7px;
  155. border-style: solid;
  156. border-image:
  157. url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
  158. height: 120px;
  159. width: 250px;
  160. padding: 10px;
  161. transform: rotate(6.4rad);
  162. position: relative;
  163. bottom: -1em;
  164. left: 3em;
  165. overflow-y: scroll;
  166. }
  167.  
  168. @media only screen and (max-width: 600px) {
  169. #text03 {
  170. font-size: 13px;
  171. position: relative;
  172. bottom: 0.5em;
  173. left: 2.5em;
  174. }
  175. }
  176.  
  177. mark {
  178. background: #B1E3B6;
  179. border: 1px solid #808080;
  180. border-radius: 10px;
  181. padding-top: 1.5px;
  182. padding-bottom: 1.5px;
  183. padding-left: 5px;
  184. padding-right: 5px;
  185. }
  186.  
  187. mark1 {
  188. color: #62A168;
  189. }
  190. </style>
  191.  
  192. <div id="text03"><mark>about</mark>
  193. <br>
  194. <br>
  195. haiii im <mark1>vio</mark1>! or <u>vee</u> :3 20 <mark1>it bun they</mark1> prns only pls <3 pan mexican enby autistic aquarius (0218) eng/spa OK!
  196. <br>
  197. <br>
  198. <mark>likes</mark>
  199. <br>
  200. <br>
  201. <mark1>bx <333</mark1> sanrio, kirby, deco, pc collecting, yeonjuns aotm, soobin noises, the color pink, reading, <s>coding</s>, old web, music, and <mark1>plushies!!</mark1></div>
  202.  
  203. --- BYF/DFI SCROLLBOX ---
  204. <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  205.  
  206. <style>
  207. #text03 {
  208. font-family: "Poppins", sans-serif;
  209. font-size: 15px;
  210. border-width: 7px;
  211. border-style: solid;
  212. border-image:
  213. url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
  214. height: 120px;
  215. width: 250px;
  216. padding: 10px;
  217. transform: rotate(6.4rad);
  218. position: relative;
  219. bottom: -1em;
  220. left: 3em;
  221. overflow-y: scroll;
  222. }
  223. @media only screen and (max-width: 600px) {
  224. #text03 {
  225. font-size: 13px;
  226. position: relative;
  227. bottom: 0.5em;
  228. left: 2.5em;
  229. }
  230. }
  231.  
  232. mark {
  233. background: #B1E3B6;
  234. border: 1px solid #808080;
  235. border-radius: 10px;
  236. padding-top: 1.5px;
  237. padding-bottom: 1.5px;
  238. padding-left: 5px;
  239. padding-right: 5px;
  240. }
  241.  
  242. mark1 {
  243. color: #62A168;
  244. }
  245. </style>
  246.  
  247. <div id="text03"><mark>byf</mark>
  248. <br>
  249. <br>
  250. 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 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 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 info info info info info info info info info info info info
  251. <br>
  252. <br>
  253. <mark>dfi</mark>
  254. <br>
  255. <br>
  256. 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 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 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 info info info info info info info info info info info info</div>
  257.  
  258. --- TUNES SCROLLBOX ---
  259. <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  260.  
  261. <style>
  262. @font-face {
  263. font-family: dreams;
  264. src: url(https://dl.dropbox.com/s/i9lg3nchwvgi6p3/dream.ttf);
  265. }
  266.  
  267. #text03 {
  268. font-family: "Poppins", sans-serif;
  269. font-size: 15px;
  270. border-width: 7px;
  271. border-style: solid;
  272. border-image:
  273. url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
  274. height: 120px;
  275. width: 250px;
  276. padding: 10px;
  277. transform: rotate(6.4rad);
  278. position: relative;
  279. bottom: -1em;
  280. left: 3em;
  281. overflow-y: scroll;
  282. }
  283. @media only screen and (max-width: 600px) {
  284. #text03 {
  285. font-size: 13px;
  286. position: relative;
  287. bottom: 0.5em;
  288. left: 2.5em;
  289. }
  290. }
  291.  
  292. mark {
  293. background: #B1E3B6;
  294. border: 1px solid #808080;
  295. border-radius: 10px;
  296. padding-top: 1.5px;
  297. padding-bottom: 1.5px;
  298. padding-left: 5px;
  299. padding-right: 5px;
  300. }
  301.  
  302. mark2 {
  303. font-family: dreams;
  304. color: #62A168;
  305. }
  306. </style>
  307.  
  308. <div id="text03"><mark>ults</mark>
  309. <br>
  310. <br>
  311. <u>cix</u> bx <mark2>4</mark2> <u>txt</u> yeonjun + soobin <mark2>4</mark2> <u>solo</u> bahiyyih
  312. <br>
  313. <br>
  314. <mark>semi ults</mark>
  315. <br>
  316. <br>
  317. <u>txt</u> hueningkai <mark2>4</mark2> <u>cix</u> yonghee + hyunsuk <mark2>4</mark2> <u>bonedo</u> woonhak <mark2>4</mark2> <u>chebul</u> jiwon <mark2>4</mark2> <u>fromis_9</u> hayoung <mark2>4</mark2> <u>nmixx</u> haewon <mark2>4</mark2> <u>stayc</u> sieun + isa <mark2>4</mark2> <u>itzy</u> chaeryeong <mark2>4</mark2> <u>ive</u> wonyo + rei <mark2>4</mark2> lsrfm chaewon
  318. </div>
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!