API tools faq
paste
Advertisement
mochiroll

Cradle.of.Desire.Glossary

mochiroll
Feb 17th, 2024
42
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.15 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 -> */]Glossary & NPCs[/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 + note 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-star[/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 -> */]Int.Check[/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 entry 1 section ------------------------------ >
  198.  
  199. [/comment][div=margin-left: 25px; margin-top: 75px; flex: 4; width: 100%; min-width: 250px;][comment]
  200.  
  201. ---------------------------------------- start of entry 1 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 > */]Title .[/div][div=margin-top: 5px; border-radius: 5px; width: 100%; height: 7px; background: var(--Color03);][/div][/div][comment]
  209.  
  210. < ---------------------------------------- end of entry 1 title ----------------------------------------
  211.  
  212. [/comment][comment]
  213.  
  214. ---------------------------------------- start of entry 1 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. Duis commodo dui congue ligula aliquet, a fermentum sem lacinia. Quisque at ex eu ante mollis suscipit ac sed nisl. Nam fringilla, arcu quis tincidunt porttitor, orci tellus aliquet ligula, a porttitor magna mi et dui. Pellentesque viverra, ex eget vestibulum accumsan, augue odio euismod neque, sit amet porttitor mi ex non mi. Ut laoreet id mauris vitae pellentesque. Curabitur nec dolor sed neque accumsan ornare. Fusce consequat enim eget rutrum pellentesque.[comment]
  222.  
  223. -------------------------------------------------- start of decor -------------------------------------------------- >
  224.  
  225. [/comment][div=background: var(--Constellation); opacity: .05; width: 75%; aspect-ratio: 2/1; position: absolute; bottom: -25px; right: -15px;][/div][comment]
  226.  
  227. < -------------------------------------------------- end of decor --------------------------------------------------
  228.  
  229. [/comment][/div][/div][comment]
  230.  
  231. < ---------------------------------------- end of entry 1 content box ----------------------------------------
  232.  
  233. [/comment][/div][comment]
  234.  
  235. < ------------------------------ end of entry 1 section ------------------------------
  236.  
  237. [/comment][/div][comment]
  238.  
  239. < -------------------- end of entry 1 + links row --------------------
  240.  
  241. [/comment][comment]
  242.  
  243. -------------------- start of entry 2 section -------------------- >
  244.  
  245. [/comment][div=margin-top: 75px; width: 100%;][comment]
  246.  
  247. ------------------------------ start of entry 2 title ------------------------------ >
  248.  
  249. [/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);
  250.  
  251.  
  252.  
  253.  
  254. /* type title here > */]Title .[/div][div=margin-top: 5px; border-radius: 5px; width: 100%; height: 7px; background: var(--Color03);][/div][/div][comment]
  255.  
  256. < ------------------------------ end of entry 2 title ------------------------------
  257.  
  258. [/comment][comment]
  259.  
  260. ------------------------------ start of entry 2 content box ------------------------------ >
  261.  
  262. [/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;
  263.  
  264.  
  265.  
  266.  
  267. /* write text here -> */]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo dui congue ligula aliquet, a fermentum sem lacinia. Quisque at ex eu ante mollis suscipit ac sed nisl. Nam fringilla, arcu quis tincidunt porttitor, orci tellus aliquet ligula, a porttitor magna mi et dui. Pellentesque viverra, ex eget vestibulum accumsan, augue odio euismod neque, sit amet porttitor mi ex non mi. Ut laoreet id mauris vitae pellentesque. Curabitur nec dolor sed neque accumsan ornare. Fusce consequat enim eget rutrum pellentesque.
  268.  
  269. Suspendisse eget velit et quam varius luctus. Nam egestas urna lacus, a maximus ante feugiat eu. Nullam vitae congue urna. Ut interdum sollicitudin dui a rhoncus. Mauris quis massa eu justo condimentum ultricies. Donec placerat efficitur ultrices. Ut dolor tellus, maximus ultricies dapibus nec, ultricies sed purus. Quisque sagittis quam sed maximus ullamcorper. Nunc sapien velit, gravida et condimentum non, ornare sit amet enim. Cras consectetur magna sit amet finibus maximus. Cras imperdiet placerat dui a consectetur. Curabitur porta tellus a facilisis posuere. Pellentesque sed mi laoreet, dictum justo quis, dictum mauris.[comment]
  270.  
  271. ---------------------------------------- start of decor ---------------------------------------- >
  272.  
  273. [/comment][div=background: var(--Constellation); opacity: .05; width: 75%; aspect-ratio: 2/1; position: absolute; bottom: -25px; right: -15px;][/div][comment]
  274.  
  275. < ---------------------------------------- end of decor ----------------------------------------
  276.  
  277. [/comment][/div][/div][comment]
  278.  
  279. < ------------------------------ end of entry 2 content box ------------------------------
  280.  
  281. [/comment][/div][comment]
  282.  
  283. < -------------------- end of entry 2 section --------------------
  284.  
  285. [/comment][comment]
  286.  
  287. -------------------- start of entry 3 section -------------------- >
  288.  
  289. [/comment][div=margin-top: 75px; width: 100%;][comment]
  290.  
  291. ------------------------------ start of entry 3 title ------------------------------ >
  292.  
  293. [/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);
  294.  
  295.  
  296.  
  297.  
  298. /* type title here > */]Title .[/div][div=margin-top: 5px; border-radius: 5px; width: 100%; height: 7px; background: var(--Color03);][/div][/div][comment]
  299.  
  300. < ------------------------------ end of entry 3 title ------------------------------
  301.  
  302. [/comment][comment]
  303.  
  304. ------------------------------ start of entry 3 content box ------------------------------ >
  305.  
  306. [/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;
  307.  
  308.  
  309.  
  310.  
  311. /* write text here -> */]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo dui congue ligula aliquet, a fermentum sem lacinia. Quisque at ex eu ante mollis suscipit ac sed nisl. Nam fringilla, arcu quis tincidunt porttitor, orci tellus aliquet ligula, a porttitor magna mi et dui. Pellentesque viverra, ex eget vestibulum accumsan, augue odio euismod neque, sit amet porttitor mi ex non mi. Ut laoreet id mauris vitae pellentesque. Curabitur nec dolor sed neque accumsan ornare. Fusce consequat enim eget rutrum pellentesque.
  312.  
  313. Suspendisse eget velit et quam varius luctus. Nam egestas urna lacus, a maximus ante feugiat eu. Nullam vitae congue urna. Ut interdum sollicitudin dui a rhoncus. Mauris quis massa eu justo condimentum ultricies. Donec placerat efficitur ultrices. Ut dolor tellus, maximus ultricies dapibus nec, ultricies sed purus. Quisque sagittis quam sed maximus ullamcorper. Nunc sapien velit, gravida et condimentum non, ornare sit amet enim. Cras consectetur magna sit amet finibus maximus. Cras imperdiet placerat dui a consectetur. Curabitur porta tellus a facilisis posuere. Pellentesque sed mi laoreet, dictum justo quis, dictum mauris.
  314.  
  315. Quisque venenatis erat elit, malesuada efficitur purus sagittis quis. Donec et justo elit. Duis dui odio, finibus in lorem id, maximus malesuada mi. Fusce sodales magna non mauris sodales condimentum. Cras consequat odio ac bibendum pretium. Mauris semper pharetra nisi, id bibendum dolor pellentesque at. Donec vel libero tincidunt, pretium est at, hendrerit mi.[comment]
  316.  
  317. ---------------------------------------- start of decor ---------------------------------------- >
  318.  
  319. [/comment][div=background: var(--Constellation); opacity: .05; width: 75%; aspect-ratio: 2/1; position: absolute; bottom: -25px; right: -15px;][/div][comment]
  320.  
  321. < ---------------------------------------- end of decor ----------------------------------------
  322.  
  323. [/comment][/div][/div][comment]
  324.  
  325. < ------------------------------ end of entry 3 content box ------------------------------
  326.  
  327. [/comment][/div][comment]
  328.  
  329. < -------------------- end of entry 3 section --------------------
  330.  
  331. [/comment][comment]
  332.  
  333. -------------------- start of entry 4 section -------------------- >
  334.  
  335. [/comment][div=margin-top: 75px; margin-bottom: 75px; width: 100%;][comment]
  336.  
  337. ------------------------------ start of entry 4 title ------------------------------ >
  338.  
  339. [/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);
  340.  
  341.  
  342.  
  343.  
  344. /* type title here > */]Title .[/div][div=margin-top: 5px; border-radius: 5px; width: 100%; height: 7px; background: var(--Color03);][/div][/div][comment]
  345.  
  346. < ------------------------------ end of entry 4 title ------------------------------
  347.  
  348. [/comment][comment]
  349.  
  350. ------------------------------ start of entry 4 content box ------------------------------ >
  351.  
  352. [/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;
  353.  
  354.  
  355.  
  356.  
  357. /* write text here -> */]Nunc cursus eros eu ante ullamcorper, sed volutpat quam sollicitudin. Praesent in ligula eget purus eleifend faucibus a at odio. Duis nec nulla sapien. Nunc pharetra ullamcorper consectetur. Integer a velit vulputate leo feugiat condimentum. Donec tempus tortor mi, vitae mollis mauris pretium id. Proin ullamcorper accumsan facilisis. Integer efficitur ipsum ut interdum lacinia. Quisque nibh felis, blandit eget diam sit amet, vehicula pretium justo. Nunc quis libero scelerisque, imperdiet nisl in, semper magna. Nullam lobortis tristique egestas. Proin sagittis nisl nisi, eu dignissim leo feugiat id. Praesent sapien lorem, faucibus eget nulla ac, maximus vehicula arcu. Pellentesque quis orci sit amet purus fringilla rhoncus. Morbi at sagittis leo, sed suscipit elit. Nam at orci at est rhoncus posuere.[comment]
  358.  
  359. ---------------------------------------- start of decor ---------------------------------------- >
  360.  
  361. [/comment][div=background: var(--Constellation); opacity: .05; width: 75%; aspect-ratio: 2/1; position: absolute; bottom: -25px; right: -15px;][/div][comment]
  362.  
  363. < ---------------------------------------- end of decor ----------------------------------------
  364.  
  365. [/comment][/div][/div][comment]
  366.  
  367. < ------------------------------ end of entry 4 content box ------------------------------
  368.  
  369. [/comment][/div][comment]
  370.  
  371. < -------------------- end of entry 4 section --------------------
  372.  
  373. [/comment][/div][/div][comment]
  374.  
  375. < ---------- end of scrollbox ----------
  376.  
  377. [/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
  378. ▼[/div][/div][comment]
  379.  
  380. ---------- start of credits ---------- >
  381.  
  382. [/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]
  383.  
  384. < ---------- end of credits ----------
  385.  
  386. [/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!