API tools faq
paste
Advertisement
mochiroll

Cradle.of.Desire.IC.Intro

mochiroll
Feb 17th, 2024
39
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.96 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 -> */]In Character[/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 + overview 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-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);
  165.  
  166.  
  167.  
  168.  
  169. /* link title here -> */]Lore[/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-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);
  183.  
  184.  
  185.  
  186.  
  187. /* link title here -> */]CS[/div][/div][comment]
  188.  
  189.  
  190.  
  191. [/comment][/div][comment]
  192.  
  193. < ------------------------------ end of link section ------------------------------
  194.  
  195. [/comment][comment]
  196.  
  197. ------------------------------ start of overview section ------------------------------ >
  198.  
  199. [/comment][div=margin-left: 25px; margin-top: 75px; flex: 4; width: 100%; min-width: 250px;][comment]
  200.  
  201. ---------------------------------------- start of overview 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 > */]Overview .[/div][div=margin-top: 5px; border-radius: 5px; width: 100%; height: 7px; background: var(--Color03);][/div][/div][comment]
  209.  
  210. < ---------------------------------------- end of overview title ----------------------------------------
  211.  
  212. [/comment][comment]
  213.  
  214. ---------------------------------------- start of overview 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.
  222.  
  223. 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.
  224.  
  225. 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]
  226.  
  227. -------------------------------------------------- start of decor -------------------------------------------------- >
  228.  
  229. [/comment][div=background: var(--Constellation); opacity: .05; width: 75%; aspect-ratio: 2/1; position: absolute; bottom: -25px; right: -15px;][/div][comment]
  230.  
  231. < -------------------------------------------------- end of decor --------------------------------------------------
  232.  
  233. [/comment][/div][/div][comment]
  234.  
  235. < ---------------------------------------- end of overview content box ----------------------------------------
  236.  
  237. [/comment][/div][comment]
  238.  
  239. < ------------------------------ end of overview section ------------------------------
  240.  
  241. [/comment][/div][comment]
  242.  
  243. < -------------------- end of overview + links row --------------------
  244.  
  245. [/comment][comment]
  246.  
  247. -------------------- start of index section -------------------- >
  248.  
  249. [/comment][div=margin-top: 75px; width: 100%;][comment]
  250.  
  251. ------------------------------ start of index title ------------------------------ >
  252.  
  253. [/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);
  254.  
  255.  
  256.  
  257.  
  258. /* type title here > */]Index .[/div][div=margin-top: 5px; border-radius: 5px; width: 100%; height: 7px; background: var(--Color03);][/div][/div][comment]
  259.  
  260. < ------------------------------ end of index title ------------------------------
  261.  
  262. [/comment][comment]
  263.  
  264. ------------------------------ start of index content box ------------------------------ >
  265.  
  266. [/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;
  267.  
  268.  
  269.  
  270.  
  271. /* write text here -> */][div=display: inline; color: var(--Color01); font-weight: 700;]Scene 001:[/div] [URL="google.com"]Title Here[/URL][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 index content box ------------------------------
  282.  
  283. [/comment][/div][comment]
  284.  
  285. < -------------------- end of index section --------------------
  286.  
  287. [/comment][comment]
  288.  
  289. -------------------- start of summary section -------------------- >
  290.  
  291. [/comment][div=margin-top: 75px; margin-bottom: 75px; width: 100%;][comment]
  292.  
  293. ------------------------------ start of summary 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 > */]Summaries .[/div][div=margin-top: 5px; border-radius: 5px; width: 100%; height: 7px; background: var(--Color03);][/div][/div][comment]
  301.  
  302. < ------------------------------ end of summary title ------------------------------
  303.  
  304. [/comment][comment]
  305.  
  306. ------------------------------ start of summary 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;
  309.  
  310.  
  311.  
  312.  
  313. /* write text here -> */][div=display: inline; color: var(--Color01); font-weight: 700;]Scene 001:[/div] TBA[comment]
  314.  
  315. ---------------------------------------- start of decor ---------------------------------------- >
  316.  
  317. [/comment][div=background: var(--Constellation); opacity: .05; width: 75%; aspect-ratio: 2/1; position: absolute; bottom: -25px; right: -15px;][/div][comment]
  318.  
  319. < ---------------------------------------- end of decor ----------------------------------------
  320.  
  321. [/comment][/div][/div][comment]
  322.  
  323. < ------------------------------ end of summary content box ------------------------------
  324.  
  325. [/comment][/div][comment]
  326.  
  327. < -------------------- end of summary section --------------------
  328.  
  329. [/comment][/div][/div][comment]
  330.  
  331. < ---------- end of scrollbox ----------
  332.  
  333. [/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
  334. ▼[/div][/div][comment]
  335.  
  336. ---------- start of credits ---------- >
  337.  
  338. [/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]
  339.  
  340. < ---------- end of credits ----------
  341.  
  342. [/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!