API tools faq
paste
mixue

cr ikisschris

mixue
Apr 1st, 2024 (edited)
1,124
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.72 KB | None | 0 0
raw download clone embed print report
  1. ** PLEASE ADJUST THE POSITIONING, WIDTH & HEIGHT CODES IF IT DOESN'T LOOK GOOD ON YOUR DEVICE **
  2.  
  3.  
  4. --- URL (next page) ---
  5.  
  6. section:next
  7.  
  8.  
  9. --- NAVIGATION BUTTONS ---
  10.  
  11. #elementID li a {
  12. border-radius: 0px 0px 15px 15px;
  13. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  14. font-family: Pixelated MS Sans Serif;
  15. -webkit-transform: rotate(-90deg);
  16. z-index: 99;
  17. position: absolute;
  18. right: -53.5px;
  19. top: 60px;
  20. }
  21.  
  22. @media only screen and (max-width: 600px) {
  23. #elementID li a {
  24. right: -45px;
  25. }
  26. }
  27.  
  28.  
  29. --- MISC EMBED ---
  30.  
  31. <link rel="stylesheet" href="https://unpkg.com/98.css">
  32. <style>
  33. @font-face {
  34. font-family: Chemre;
  35. src: url(https://dl.dropbox.com/s/a4vu0khvvhe5lwq/Chemre.ttf);
  36. }
  37.  
  38. @font-face {
  39. font-family: pixel;
  40. src: url(https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0);
  41. }
  42.  
  43. @keyframes floating { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, -4px); } 100% { transform: translate(0, -0px); } }
  44.  
  45. @keyframes brrr { 0% { transform: rotate(-1deg); } 50% { transform: rotate(-1deg); } 51% { transform: rotate(1deg); } 100% { transform: rotate(1deg); } }
  46. </style>
  47.  
  48.  
  49. --- MAIN CONTAINER ---
  50.  
  51. #elementID > .wrapper {
  52. width: 95%;
  53. height: 210px;
  54. border-radius: 8px 8px 0px 0px;
  55. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  56. }
  57.  
  58. @media only screen and (max-width: 600px) {
  59. #elementID > .wrapper {
  60. height: 200px;
  61. }
  62. }
  63.  
  64.  
  65. --- TITLE TEXT ---
  66.  
  67. #elementID {
  68. font-family: Chemre;
  69. }
  70.  
  71.  
  72. --- WELCOME & CREDITS TEXT ---
  73.  
  74. welcome to ==@nameblog== click on the *Next Page* button to navigate!
  75.  
  76. © ikisschris for this carrd layout
  77.  
  78.  
  79. --- MAIN SCROLLBOX ---
  80.  
  81. #elementID {
  82. font-family: pixel;
  83. height: 120px;
  84. overflow: auto;
  85. background: rgba(255,255,255,0.78);
  86. border: 2px solid #fff;
  87. border-radius: 8px 3px 3px 8px;
  88. padding-top: 10px;
  89. padding-bottom: 10px;
  90. padding-left: 5px;
  91. padding-right: 5px;
  92. margin-bottom: 0.2em !important;
  93. }
  94.  
  95. @media only screen and (max-width: 600px) {
  96. #elementID {
  97. height: 130px;
  98. }
  99. }
  100.  
  101. #elementID mark {
  102. font-size: 17px;
  103. border-radius: 100%;
  104. }
  105.  
  106.  
  107. --- STATUS ONLINE TEXT EMBED ---
  108.  
  109. <head>
  110. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="" crossorigin="anonymous">
  111. </head>
  112. <style>
  113. @font-face {
  114. font-family: Nintendo-DS-BIOS;
  115. src: url(https://dl.dropbox.com/s/vlxjtnvrl9s0snp/Nintendo-DS-BIOS.ttf);
  116. }
  117.  
  118. #button {
  119. position: relative;
  120. bottom: -0.1em;
  121. z-index:99; } /* change this if you dont want it positioned */
  122.  
  123. #button {
  124. display: flex;
  125. align-items: center;
  126. background: none;
  127. padding:4px;
  128. width:auto;
  129. border-radius:30px;
  130. }
  131.  
  132. p3 {
  133. display: flex;
  134. align-items: center;
  135. font-size: .8em;
  136. color: #fff;
  137. font-family: “georgia”;
  138. animation:blinkingText .875s infinite;
  139. margin: auto;
  140. }
  141.  
  142. @keyframes blinkingText{
  143. 0%{ color: transparent; }
  144.  
  145. 49%{ color: transparent; }
  146.  
  147. 60%{ color: white; }
  148.  
  149. 99%{ color: white; }
  150.  
  151. 100%{ color: transparent; }
  152. }
  153.  
  154. </style>
  155. <div id="button"><i class="fas fa-globe" style="font-size:15px; color: transparent;"></i> <text style="color:white;display: flex; align-items: center;font-family:Nintendo-DS-BIOS; font-size:1em;">status: on-line <p3>&nbsp;&nbsp;●</p3></div>
  156.  
  157.  
  158. --- MIDDLE CONTAINER ---
  159.  
  160. #elementID > .wrapper {
  161. width: 95%;
  162. border-radius: 0px 0px 8px 8px;
  163. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  164. }
  165.  
  166.  
  167. --- TRANSPARENT TEXT ---
  168.  
  169. \s
  170.  
  171. --- BOTTOM CONTAINER ---
  172.  
  173. #elementID > .wrapper {
  174. width: 45%;
  175. border-radius: 0px 0px 4px 4px;
  176. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  177. }
  178.  
  179.  
  180. --- URL (home) ---
  181.  
  182. #home
  183.  
  184. --- BOTTOM TEXT ---
  185.  
  186. © blog registered to user's name
  187.  
  188. --- BOTTOM TEXT CODES ---
  189.  
  190. #elementID {
  191. font-family: pixel;
  192. }
  193.  
  194.  
  195. --- HEART BG CONTAINER ---
  196.  
  197. #elementID > .wrapper {
  198. width: 95%;
  199. height: 210px;
  200. border-radius: 8px 8px 0px 0px;
  201. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  202. }
  203.  
  204. @media only screen and (max-width: 600px) {
  205. #elementID > .wrapper {
  206. height: 200px;
  207. }
  208. }
  209.  
  210.  
  211. --- SCROLLABLE CONTAINER ---
  212.  
  213. #elementID > .wrapper {
  214. height: 180px;
  215. overflow: auto;
  216. backdrop-filter: blur(5px);
  217. width: 75%;
  218. border-radius: 9px;
  219. position: absolute;
  220. left: 41px;
  221. top: -190px;
  222. }
  223.  
  224.  
  225. --- LINKS ---
  226.  
  227. [link name](#)
  228.  
  229. --- LINKS TEXT ---
  230.  
  231. #elementID {
  232. font-family: pixel;
  233. background: rgba(255,255,255,0.6);
  234. padding-top: 3px;
  235. padding-bottom: 3px;
  236. padding-left: 3px;
  237. padding-right: 8px;
  238. border-radius: 3px;
  239. }
  240.  
  241. #elementID a {
  242. color: #000000;
  243. text-decoration: underline;
  244. text-decoration-style: dotted;
  245. }
  246.  
  247.  
  248. --- INFO CONTAINER ---
  249.  
  250. #elementID > .wrapper {
  251. width: 39%;
  252. height: 165px;
  253. border-radius: 9px;
  254. z-index: 1;
  255. position: absolute;
  256. left: 32px;
  257. bottom: 1em;
  258. }
  259.  
  260. @media only screen and (max-width: 600px) {
  261. #elementID > .wrapper {
  262. width: 43%;
  263. }
  264. }
  265.  
  266.  
  267. --- SCROLLBOX ---
  268.  
  269. #elementID {
  270. height: 120px;
  271. overflow: auto;
  272. background: #FFFFFF;
  273. border: 1px solid #9c9c9c;
  274. padding: 8px;
  275. border-radius: 6px 0px 0px 6px;
  276. box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  277. font-family: pixel;
  278. }
  279.  
  280. #elementID mark {
  281. font-size: 1.5em;
  282. background: -webkit-linear-gradient(-90deg, #F7B9D7 30%, #BABABA 70%, #BABABA 95%);
  283. -webkit-background-clip: text;
  284. -webkit-text-fill-color: transparent;
  285. }
  286.  
  287.  
  288. --- LABEL TEXT ---
  289.  
  290. #elementID {
  291. animation-name: floating;
  292. animation-duration: 3s;
  293. animation-iteration-count: infinite;
  294. animation-timing-function: ease-in-out;
  295. font-family: Chemre;
  296. position: absolute;
  297. left: 15px;
  298. bottom: 8.7em;
  299. z-index: 5;
  300. }
  301.  
  302. @media only screen and (max-width: 600px) {
  303. #elementID {
  304. bottom: 8.4em;
  305. }
  306. }
  307.  
  308. #elementID mark {
  309. border-radius: 3px 20px 20px 3px;
  310. border: 1px solid rgba(191,191,191,0.89);
  311. padding-left: 20px;
  312. padding-right: 5px;
  313. box-shadow: inset 13px 0px 6px -10px rgb(255 122 185 / 20%), inset -13px 0px 6px -10px rgb(255 122 185 / 20%), inset 0px 15px 6px -10px #ffffff, inset 0px -15px 6px -10px rgb(255 122 185 / 30%);
  314. }
  315.  
  316.  
  317. --- GALLERY ---
  318.  
  319. #elementID ul li .frame {
  320. border-radius: 8px 3px 20px 3px;
  321. }
  322.  
  323.  
  324. --- TRANSPARENT TEXT CODES ---
  325.  
  326. #elementID {
  327. height: 200px;
  328. }
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!