API tools faq
paste
Advertisement
mochiroll

Cradle.of.Desire.Interest.Check

mochiroll
Feb 17th, 2024
74
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.56 KB | None | 0 0
raw download clone embed print report
  1. [comment]
  2. Designed and coded by [USER=20950]@Nano[/USER].
  3.  
  4. Please do not remove the credits or claim the code as your own work.
  5.  
  6. If you found this code outside of my public workshop, please don't use it.
  7. I'd greatly appreciate it if you used the version of the code in that thread.
  8. If this code is not in the thread, that means I currently DO NOT wish for it to be used by other people.
  9.  
  10. [font=Fleur De Leah]cursive[/font]
  11. [font=Nunito]sans-serif[/font]
  12.  
  13. [/comment][div=
  14.  
  15. /* <--------------------------------- general accents ---------------------------------> */
  16.  
  17. /* colors */
  18. --Color01: #ccb4d3;
  19. --Color02: #acc8f4;
  20. --Color03: #faf1ab;
  21. --Black: #555555;
  22. --White: #fefefe;
  23.  
  24. /* fonts */
  25. --TitleSize: 6.0em;
  26. --HeaderFont: 'Fleur De Leah', cursive;
  27. --HeaderSize: 3.5em;
  28. --BodyFont: 'Nunito', sans-serif;
  29. --BodySize: .9em;
  30.  
  31. /* <--------------------------------- images ---------------------------------> */
  32. --mainIMG: url('https://i.imgur.com/kTfIaHV.png') center/auto 100% no-repeat;
  33. --backgroundIMG: url('https://i.imgur.com/rDJ2piR.jpg') repeat;
  34. --Constellation: url('https://i.imgur.com/VAbvfML.png') right bottom/contain no-repeat;
  35.  
  36. /* <--------------------------------- shell (don't touch) ---------------------------------> */
  37.  
  38. margin: 0 auto;
  39. width: 100%;
  40. min-width: 300px;
  41. height: 70vh;
  42. min-height: 500px;
  43. max-height: 700px;
  44. background: var(--backgroundIMG);
  45. font-size: initial;
  46. overflow: hidden;
  47. position: relative;][comment]
  48.  
  49. ---------- start of background ---------- >
  50.  
  51. [/comment][div=border-radius: 50%; height: 130%; aspect-ratio: 1; background-image: linear-gradient(145deg, var(--Color01), var(--Color02)); position: absolute; left: 50%; bottom: -45%; transform: translateX(-50%);][/div][div=width: 100%; background: var(--mainIMG); position: absolute; top: -50px; bottom: 0;][/div][comment]
  52.  
  53. < ---------- end of background ----------
  54.  
  55. [/comment][comment]
  56.  
  57. ---------- start of scrollbox ---------- >
  58.  
  59. [/comment][div=margin: 0 auto; width: 80%; min-width: 270px; max-width: 800px; height: 100%; overflow: hidden; position: relative; z-index: 1;][div=padding-right: 50px; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll;][comment]
  60.  
  61. -------------------- start of title wrapper -------------------- >
  62.  
  63. [/comment][div=width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative;][div=font-size: initial; position: relative;][comment]
  64.  
  65. ------------------------------ start of main title ------------------------------ >
  66.  
  67. [/comment][div=font-family: var(--HeaderFont); font-size: var(--TitleSize); line-height: 50%; color: var(--White); text-transform: lowercase; -webkit-text-stroke: 1px var(--Black); text-stroke: 1px var(--Black);
  68.  
  69.  
  70.  
  71.  
  72. /* title here -> */]Cradle of Desire[/div][comment]
  73.  
  74. < ------------------------------ end of main title ------------------------------
  75.  
  76. [/comment][comment]
  77.  
  78. ------------------------------ start of sub title ------------------------------ >
  79.  
  80. [/comment][div=padding: 4px 7px; font-family: var(--BodyFont); font-size: var(--BodySize); line-height: 100%; color: var(--Black); text-transform: uppercase; background: var(--Color03); position: absolute; right: 5px; bottom: -27px;
  81.  
  82.  
  83.  
  84.  
  85. /* subtitle here -> */]Interest Check[/div][comment]
  86.  
  87. < ------------------------------ end of sub title ------------------------------
  88.  
  89. [/comment][/div][/div][comment]
  90.  
  91. < -------------------- end of title wrapper --------------------
  92.  
  93. [/comment][comment]
  94.  
  95. -------------------- start of color03 icon -------------------- >
  96.  
  97. [/comment][div=margin: 0 auto; width: 150px; aspect-ratio: 1; background: var(--Color03); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transform: translateY(-50%); display: flex; justify-content: center; align-items: center; position: relative;][div=width: 110px; aspect-ratio: 1; background: var(--White); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); display: flex; justify-content: center; align-items: center;][div=width: calc(100% - 4px); aspect-ratio: 1; background: var(--Color03); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);][/div][/div][div=font-family: var(--HeaderFont); font-size: 75px; line-height: 100%; color: var(--White); text-transform: uppercase; position: absolute;
  98.  
  99.  
  100.  
  101.  
  102. /* change "left" value if you swap the letter used */
  103. left: 22px;
  104.  
  105.  
  106.  
  107.  
  108. /* type letter here -> */]A[/div][/div][comment]
  109.  
  110. < -------------------- end of color03 icon --------------------
  111.  
  112. [/comment][comment]
  113.  
  114. -------------------- start of links + prologue row -------------------- >
  115.  
  116. [/comment][div=display: flex; flex-flow: row-reverse wrap; margin-left: -25px; margin-top: -75px; justify-content: center; width: calc(100% + 25px);][comment]
  117.  
  118. ------------------------------ start of links section ------------------------------ >
  119.  
  120. [/comment][div=margin-left: 25px; margin-top: 175px; flex: 1; max-width: 120px; min-width: 120px; height: 120px; position: relative;][comment]
  121.  
  122. ---------------------------------------- start of Link 01 ---------------------------------------- >
  123.  
  124. [/comment][div=width: 50px; height: 50px; position: absolute; left: 0; top: 0;][div=border-radius: 7px; width: 100%; height: 100%; overflow: hidden; position: relative;][div=border-radius: 7px; width: 100%; height: 100%; background: var(--White); box-sizing: border-box; border: 10px solid var(--Color03);][/div][comment]
  125.  
  126.  
  127.  
  128.  
  129. put link here ->[/comment][URL="https://www.google.com/"][div=color: var(--Color03); font-family: var(--BodyFont); font-size: 50px; display: flex; justify-content: center; align-items: center; position: absolute; top: 3px; left: 3px;][fa]fab fa-discord[/fa][/div][/URL][/div][div=margin-top: 5px; font-family: var(--BodyFont); font-size: 8px; line-height: 100%; text-transform: uppercase; text-align: center; color: var(--Black);
  130.  
  131.  
  132.  
  133. /* link title here -> */]Discord[/div][/div][comment]
  134.  
  135. < ---------------------------------------- end of Link 01 ----------------------------------------
  136.  
  137. [/comment][comment]
  138.  
  139. ---------------------------------------- start of Link 02 ---------------------------------------- >
  140.  
  141. [/comment][div=width: 50px; height: 50px; position: absolute; right: 0; top: 0;][comment]
  142.  
  143.  
  144.  
  145.  
  146. put link here ->[/comment][URL="https://www.google.com/"][div=border-radius: 7px; width: 100%; height: 100%; background: var(--Color03); color: var(--White); font-family: var(--BodyFont); font-size: 25px; display: flex; justify-content: center; align-items: center;][fa]fas fa-book[/fa][/div][/URL][div=margin-top: 5px; font-family: var(--BodyFont); font-size: 8px; line-height: 100%; text-transform: uppercase; text-align: center; color: var(--Black);
  147.  
  148.  
  149.  
  150.  
  151. /* link title here -> */]Lore[/div][/div][comment]
  152.  
  153. < ---------------------------------------- end of Link 02 ----------------------------------------
  154.  
  155. [/comment][comment]
  156.  
  157. ---------------------------------------- start of Link 03 ---------------------------------------- >
  158.  
  159. [/comment][div=width: 50px; height: 50px; position: absolute; left: 0; bottom: 0;][comment]
  160.  
  161.  
  162.  
  163.  
  164. put link here ->[/comment][URL="https://www.google.com/"][div=border-radius: 7px; width: 100%; height: 100%; background: var(--Color03); color: var(--White); font-family: var(--BodyFont); font-size: 25px; display: flex; justify-content: center; align-items: center;][fa]fas fa-user[/fa][/div][/URL][div=margin-top: 5px; font-family: var(--BodyFont); font-size: 8px; line-height: 100%; text-transform: uppercase; text-align: center; color: var(--Black);
  165.  
  166.  
  167.  
  168.  
  169. /* link title here -> */]CS[/div][/div][comment]
  170.  
  171. < ---------------------------------------- end of Link 03 ----------------------------------------
  172.  
  173. [/comment][comment]
  174.  
  175. ---------------------------------------- start of Link 04 ---------------------------------------- >
  176.  
  177. [/comment][div=width: 50px; height: 50px; position: absolute; right: 0; bottom: 0;][comment]
  178.  
  179.  
  180.  
  181.  
  182. put link here ->[/comment][URL="https://www.google.com/"][div=border-radius: 7px; width: 100%; height: 100%; background: var(--Color03); color: var(--White); font-family: var(--BodyFont); font-size: 25px; display: flex; justify-content: center; align-items: center;][fa]fas fa-pencil[/fa][/div][/URL][div=margin-top: 5px; font-family: var(--BodyFont); font-size: 8px; line-height: 100%; text-transform: uppercase; text-align: center; color: var(--Black);
  183.  
  184.  
  185.  
  186.  
  187. /* link title here -> */]IC[/div][/div][comment]
  188.  
  189.  
  190.  
  191. [/comment][/div][comment]
  192.  
  193. < ------------------------------ end of link section ------------------------------
  194.  
  195. [/comment][comment]
  196.  
  197. ------------------------------ start of prologue section ------------------------------ >
  198.  
  199. [/comment][div=margin-left: 25px; margin-top: 75px; flex: 4; width: 100%; min-width: 250px;][comment]
  200.  
  201. ---------------------------------------- start of prologue title ---------------------------------------- >
  202.  
  203. [/comment][div=display: inline-block; position: relative; left: 100%; transform: translateX(calc(-100% - 10px));][div=padding-left: 7px; font-family: var(--HeaderFont); font-size: var(--HeaderSize); line-height: 50%; color: var(--Color01); text-transform: lowercase; -webkit-text-stroke: 1px var(--White); text-stroke: 1px var(--White);
  204.  
  205.  
  206.  
  207.  
  208. /* type title here > */]Prologue .[/div][div=margin-top: 5px; border-radius: 5px; width: 100%; height: 7px; background: var(--Color03);][/div][/div][comment]
  209.  
  210. < ---------------------------------------- end of prologue title ----------------------------------------
  211.  
  212. [/comment][comment]
  213.  
  214. ---------------------------------------- start of prologue content box ---------------------------------------- >
  215.  
  216. [/comment][div=margin-top: 15px; border-radius: 10px; width: 100%; background: var(--Color03);][div=margin-left: 7px; padding: min(10%, 50px); border-radius: 10px; width: calc(100% - 7px); background: var(--White); font-family: var(--BodyFont); font-size: var(--BodySize); line-height: 150%; color: var(--Black); text-align: justify; position: relative; overflow: hidden; box-sizing: border-box;
  217.  
  218.  
  219.  
  220.  
  221. /* write text here -> */]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et tempor augue. Aenean id ligula lorem. In eget scelerisque ligula. Donec quis sagittis odio. Phasellus non sapien convallis metus semper varius at ut nunc. Suspendisse sodales nisi vitae orci dignissim, et sagittis augue lacinia. Nunc nulla massa, ultrices sed aliquet nec, cursus ut mauris. Sed nec tincidunt nisi, in facilisis libero. Nulla convallis, nisi non semper venenatis, sem dolor dignissim odio, eget sodales velit nulla non enim. Curabitur hendrerit facilisis blandit. Curabitur vel molestie dolor, at placerat lorem. Integer consequat porttitor enim, et lacinia justo congue tempus. Integer volutpat, velit at accumsan convallis, sem odio laoreet nibh, at auctor risus eros eu dui. Ut sed neque ac dolor laoreet efficitur. Duis volutpat lectus non tincidunt porttitor.
  222.  
  223. Proin mauris eros, convallis sed nulla eu, aliquet bibendum magna. Proin in neque ac purus rutrum viverra. Sed id iaculis tellus, vestibulum pharetra est. Cras mollis tempus nulla, sit amet tristique velit euismod ac. Sed in aliquet metus. Phasellus consectetur sit amet nisl eget scelerisque. Sed ut mattis libero, a lacinia lectus. Maecenas molestie nec nisi vitae pharetra. Sed justo erat, lacinia quis hendrerit at, porttitor nec libero. Suspendisse gravida, massa in pellentesque lacinia, mi dolor imperdiet est, nec vehicula felis mi at diam. Pellentesque lacinia est sed nisi tristique laoreet. Proin quis mollis ipsum. Proin sit amet lacus non mauris facilisis sagittis. Donec vel dapibus ligula. Ut aliquet ornare enim, ullamcorper euismod nibh luctus quis.[comment]
  224.  
  225. -------------------------------------------------- start of decor -------------------------------------------------- >
  226.  
  227. [/comment][div=background: var(--Constellation); opacity: .05; width: 75%; aspect-ratio: 2/1; position: absolute; bottom: -25px; right: -15px;][/div][comment]
  228.  
  229. < -------------------------------------------------- end of decor --------------------------------------------------
  230.  
  231. [/comment][/div][/div][comment]
  232.  
  233. < ---------------------------------------- end of prologue content box ----------------------------------------
  234.  
  235. [/comment][/div][comment]
  236.  
  237. < ------------------------------ end of prologue section ------------------------------
  238.  
  239. [/comment][/div][comment]
  240.  
  241. < -------------------- end of prologue + links row --------------------
  242.  
  243. [/comment][comment]
  244.  
  245. -------------------- start of overview section -------------------- >
  246.  
  247. [/comment][div=margin-top: 75px; width: 100%;][comment]
  248.  
  249. ------------------------------ start of overview title ------------------------------ >
  250.  
  251. [/comment][div=display: inline-block; position: relative; left: 100%; transform: translateX(calc(-100% - 10px));][div=padding-left: 7px; font-family: var(--HeaderFont); font-size: var(--HeaderSize); line-height: 50%; color: var(--Color01); text-transform: lowercase; -webkit-text-stroke: 1px var(--White); text-stroke: 1px var(--White);
  252.  
  253.  
  254.  
  255.  
  256. /* type title here > */]Overview .[/div][div=margin-top: 5px; border-radius: 5px; width: 100%; height: 7px; background: var(--Color03);][/div][/div][comment]
  257.  
  258. < ------------------------------ end of overview title ------------------------------
  259.  
  260. [/comment][comment]
  261.  
  262. ------------------------------ start of overview content box ------------------------------ >
  263.  
  264. [/comment][div=margin-top: 15px; border-radius: 10px; width: 100%; background: var(--Color03);][div=margin-left: 7px; padding: min(10%, 50px); border-radius: 10px; width: calc(100% - 7px); background: var(--White); font-family: var(--BodyFont); font-size: var(--BodySize); line-height: 150%; color: var(--Black); text-align: justify; position: relative; overflow: hidden; box-sizing: border-box;
  265.  
  266.  
  267.  
  268.  
  269. /* write text here -> */]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et tempor augue. Aenean id ligula lorem. In eget scelerisque ligula. Donec quis sagittis odio. Phasellus non sapien convallis metus semper varius at ut nunc. Suspendisse sodales nisi vitae orci dignissim, et sagittis augue lacinia. Nunc nulla massa, ultrices sed aliquet nec, cursus ut mauris. Sed nec tincidunt nisi, in facilisis libero. Nulla convallis, nisi non semper venenatis, sem dolor dignissim odio, eget sodales velit nulla non enim. Curabitur hendrerit facilisis blandit. Curabitur vel molestie dolor, at placerat lorem. Integer consequat porttitor enim, et lacinia justo congue tempus. Integer volutpat, velit at accumsan convallis, sem odio laoreet nibh, at auctor risus eros eu dui. Ut sed neque ac dolor laoreet efficitur. Duis volutpat lectus non tincidunt porttitor.
  270.  
  271. Proin mauris eros, convallis sed nulla eu, aliquet bibendum magna. Proin in neque ac purus rutrum viverra. Sed id iaculis tellus, vestibulum pharetra est. Cras mollis tempus nulla, sit amet tristique velit euismod ac. Sed in aliquet metus. Phasellus consectetur sit amet nisl eget scelerisque. Sed ut mattis libero, a lacinia lectus. Maecenas molestie nec nisi vitae pharetra. Sed justo erat, lacinia quis hendrerit at, porttitor nec libero. Suspendisse gravida, massa in pellentesque lacinia, mi dolor imperdiet est, nec vehicula felis mi at diam. Pellentesque lacinia est sed nisi tristique laoreet. Proin quis mollis ipsum. Proin sit amet lacus non mauris facilisis sagittis. Donec vel dapibus ligula. Ut aliquet ornare enim, ullamcorper euismod nibh luctus quis.[comment]
  272.  
  273. ---------------------------------------- start of decor ---------------------------------------- >
  274.  
  275. [/comment][div=background: var(--Constellation); opacity: .05; width: 75%; aspect-ratio: 2/1; position: absolute; bottom: -25px; right: -15px;][/div][comment]
  276.  
  277. < ---------------------------------------- end of decor ----------------------------------------
  278.  
  279. [/comment][/div][/div][comment]
  280.  
  281. < ------------------------------ end of overview content box ------------------------------
  282.  
  283. [/comment][/div][comment]
  284.  
  285. < -------------------- end of overview section --------------------
  286.  
  287. [/comment][comment]
  288.  
  289. -------------------- start of rules section -------------------- >
  290.  
  291. [/comment][div=margin-top: 75px; margin-bottom: 75px; width: 100%;][comment]
  292.  
  293. ------------------------------ start of rules title ------------------------------ >
  294.  
  295. [/comment][div=display: inline-block; position: relative; left: 100%; transform: translateX(calc(-100% - 10px));][div=padding-left: 7px; font-family: var(--HeaderFont); font-size: var(--HeaderSize); line-height: 50%; color: var(--Color01); text-transform: lowercase; -webkit-text-stroke: 1px var(--White); text-stroke: 1px var(--White);
  296.  
  297.  
  298.  
  299.  
  300. /* type title here > */]Rules .[/div][div=margin-top: 5px; border-radius: 5px; width: 100%; height: 7px; background: var(--Color03);][/div][/div][comment]
  301.  
  302. < ------------------------------ end of rules title ------------------------------
  303.  
  304. [/comment][comment]
  305.  
  306. ------------------------------ start of rules content box ------------------------------ >
  307.  
  308. [/comment][div=margin-top: 15px; border-radius: 10px; width: 100%; background: var(--Color03);][div=margin-left: 7px; padding: min(10%, 50px); border-radius: 10px; width: calc(100% - 7px); background: var(--White); font-family: var(--BodyFont); font-size: var(--BodySize); line-height: 150%; color: var(--Black); text-align: justify; position: relative; overflow: hidden; box-sizing: border-box;][div=margin-top: -15px; margin-left: -25px;
  309.  
  310.  
  311.  
  312.  
  313. /* write text here -> */][LIST=1]
  314.  
  315. [*] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et tempor augue. Aenean id ligula lorem. In eget scelerisque ligula. Donec quis sagittis odio.
  316. [*] Phasellus non sapien convallis metus semper varius at ut nunc. Suspendisse sodales nisi vitae orci dignissim, et sagittis augue lacinia. Nunc nulla massa, ultrices sed aliquet nec, cursus ut mauris. Sed nec tincidunt nisi, in facilisis libero. Nulla convallis, nisi non semper venenatis, sem dolor dignissim odio, eget sodales velit nulla non enim. Curabitur hendrerit facilisis blandit. Curabitur vel molestie dolor, at placerat lorem.
  317. [*] Phasellus non sapien convallis metus semper varius at ut nunc. Suspendisse sodales nisi vitae orci dignissim, et sagittis augue lacinia. Nunc nulla massa, ultrices sed aliquet nec, cursus ut mauris. Sed nec tincidunt nisi, in facilisis libero. Nulla convallis, nisi non semper venenatis, sem dolor dignissim odio, eget sodales velit nulla non enim. Curabitur hendrerit facilisis blandit. Curabitur vel molestie dolor, at placerat lorem.
  318.  
  319. [/LIST][/div][comment]
  320.  
  321. ---------------------------------------- start of decor ---------------------------------------- >
  322.  
  323. [/comment][div=background: var(--Constellation); opacity: .05; width: 75%; aspect-ratio: 2/1; position: absolute; bottom: -25px; right: -15px;][/div][comment]
  324.  
  325. < ---------------------------------------- end of decor ----------------------------------------
  326.  
  327. [/comment][/div][/div][comment]
  328.  
  329. < ------------------------------ end of rules content box ------------------------------
  330.  
  331. [/comment][/div][comment]
  332.  
  333. < -------------------- end of rules section --------------------
  334.  
  335. [/comment][/div][/div][comment]
  336.  
  337. < ---------- end of scrollbox ----------
  338.  
  339. [/comment][div=font-family: var(--BodyFont); font-size: 10px; color: var(--Black); line-height: 100%; text-transform: uppercase; text-align: center; position: absolute; right: 20px; bottom: 10px;]Scroll
  340. ▼[/div][/div][comment]
  341.  
  342. ---------- start of credits ---------- >
  343.  
  344. [/comment][border=0; padding: 0; margin-top: 5px; width: 100%; font-family: var(--mainfont); font-size: .6em; line-height: 100%; text-align: center; text-transform: uppercase; opacity: .6;]Code by Nano[comment][USER=20950]@Nano[/USER][/comment][/border][comment]
  345.  
  346. < ---------- end of credits ----------
  347.  
  348. [/comment]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!