API tools faq
paste
Advertisement
mochiroll

Cradle.of.Desire.Characters

mochiroll
Feb 17th, 2024
43
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.97 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. /* faction colors */
  25. --Faction01: #d0a6ae;
  26. --Faction02: #b5a7c1;
  27. --Faction03: #7c98ae;
  28.  
  29. /* fonts */
  30. --TitleSize: 6.0em;
  31. --HeaderFont: 'Fleur De Leah', cursive;
  32. --HeaderSize: 3.5em;
  33. --BodyFont: 'Nunito', sans-serif;
  34. --BodySize: .9em;
  35.  
  36. /* <--------------------------------- images ---------------------------------> */
  37. --mainIMG: url('https://i.imgur.com/kTfIaHV.png') center/auto 100% no-repeat;
  38. --backgroundIMG: url('https://i.imgur.com/rDJ2piR.jpg') repeat;
  39. --Constellation: url('https://i.imgur.com/VAbvfML.png') right bottom/contain no-repeat;
  40.  
  41. /* roster images */
  42. --Char01: url('https://i.imgur.com/G43JcXR.jpg') center/cover no-repeat;
  43. --Char02: url('https://i.imgur.com/wy5hOAF.jpg') center/cover no-repeat;
  44. --Char03: url('https://i.imgur.com/QIDLulN.jpg') center/cover no-repeat;
  45.  
  46. /* <--------------------------------- shell (don't touch) ---------------------------------> */
  47.  
  48. margin: 0 auto;
  49. width: 100%;
  50. min-width: 300px;
  51. height: 70vh;
  52. min-height: 500px;
  53. max-height: 700px;
  54. background: var(--backgroundIMG);
  55. font-size: initial;
  56. overflow: hidden;
  57. position: relative;][comment]
  58.  
  59. ---------- start of background ---------- >
  60.  
  61. [/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]
  62.  
  63. < ---------- end of background ----------
  64.  
  65. [/comment][comment]
  66.  
  67. ---------- start of scrollbox ---------- >
  68.  
  69. [/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]
  70.  
  71. -------------------- start of title wrapper -------------------- >
  72.  
  73. [/comment][div=width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative;][div=font-size: initial; position: relative;][comment]
  74.  
  75. ------------------------------ start of main title ------------------------------ >
  76.  
  77. [/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);
  78.  
  79.  
  80.  
  81.  
  82. /* title here -> */]Cradle of Desire[/div][comment]
  83.  
  84. < ------------------------------ end of main title ------------------------------
  85.  
  86. [/comment][comment]
  87.  
  88. ------------------------------ start of sub title ------------------------------ >
  89.  
  90. [/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;
  91.  
  92.  
  93.  
  94.  
  95. /* subtitle here -> */]Characters[/div][comment]
  96.  
  97. < ------------------------------ end of sub title ------------------------------
  98.  
  99. [/comment][/div][/div][comment]
  100.  
  101. < -------------------- end of title wrapper --------------------
  102.  
  103. [/comment][comment]
  104.  
  105. -------------------- start of color03 icon -------------------- >
  106.  
  107. [/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;
  108.  
  109.  
  110.  
  111.  
  112. /* change "left" value if you swap the letter used */
  113. left: 22px;
  114.  
  115.  
  116.  
  117.  
  118. /* type letter here -> */]A[/div][/div][comment]
  119.  
  120. < -------------------- end of color03 icon --------------------
  121.  
  122. [/comment][comment]
  123.  
  124. -------------------- start of links + notes row -------------------- >
  125.  
  126. [/comment][div=display: flex; flex-flow: row-reverse wrap; margin-left: -25px; margin-top: -75px; justify-content: center; width: calc(100% + 25px);][comment]
  127.  
  128. ------------------------------ start of links section ------------------------------ >
  129.  
  130. [/comment][div=margin-left: 25px; margin-top: 175px; flex: 1; max-width: 120px; min-width: 120px; height: 120px; position: relative;][comment]
  131.  
  132. ---------------------------------------- start of Link 01 ---------------------------------------- >
  133.  
  134. [/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]
  135.  
  136.  
  137.  
  138.  
  139. 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);
  140.  
  141.  
  142.  
  143. /* link title here -> */]Discord[/div][/div][comment]
  144.  
  145. < ---------------------------------------- end of Link 01 ----------------------------------------
  146.  
  147. [/comment][comment]
  148.  
  149. ---------------------------------------- start of Link 02 ---------------------------------------- >
  150.  
  151. [/comment][div=width: 50px; height: 50px; position: absolute; right: 0; top: 0;][comment]
  152.  
  153.  
  154.  
  155.  
  156. 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);
  157.  
  158.  
  159.  
  160.  
  161. /* link title here -> */]Int.Check[/div][/div][comment]
  162.  
  163. < ---------------------------------------- end of Link 02 ----------------------------------------
  164.  
  165. [/comment][comment]
  166.  
  167. ---------------------------------------- start of Link 03 ---------------------------------------- >
  168.  
  169. [/comment][div=width: 50px; height: 50px; position: absolute; left: 0; bottom: 0;][comment]
  170.  
  171.  
  172.  
  173.  
  174. 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);
  175.  
  176.  
  177.  
  178.  
  179. /* link title here -> */]Lore[/div][/div][comment]
  180.  
  181. < ---------------------------------------- end of Link 03 ----------------------------------------
  182.  
  183. [/comment][comment]
  184.  
  185. ---------------------------------------- start of Link 04 ---------------------------------------- >
  186.  
  187. [/comment][div=width: 50px; height: 50px; position: absolute; right: 0; bottom: 0;][comment]
  188.  
  189.  
  190.  
  191.  
  192. 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);
  193.  
  194.  
  195.  
  196.  
  197. /* link title here -> */]IC[/div][/div][comment]
  198.  
  199.  
  200.  
  201. [/comment][/div][comment]
  202.  
  203. < ------------------------------ end of link section ------------------------------
  204.  
  205. [/comment][comment]
  206.  
  207. ------------------------------ start of notes section ------------------------------ >
  208.  
  209. [/comment][div=margin-left: 25px; margin-top: 75px; flex: 4; width: 100%; min-width: 250px;][comment]
  210.  
  211. ---------------------------------------- start of notes title ---------------------------------------- >
  212.  
  213. [/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);
  214.  
  215.  
  216.  
  217.  
  218. /* type title here > */]Notes .[/div][div=margin-top: 5px; border-radius: 5px; width: 100%; height: 7px; background: var(--Color03);][/div][/div][comment]
  219.  
  220. < ---------------------------------------- end of notes title ----------------------------------------
  221.  
  222. [/comment][comment]
  223.  
  224. ---------------------------------------- start of notes content box ---------------------------------------- >
  225.  
  226. [/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;
  227.  
  228.  
  229.  
  230.  
  231. /* write text here -> */]Suggestions or rules for character creation here.
  232.  
  233. 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]
  234.  
  235. -------------------------------------------------- start of decor -------------------------------------------------- >
  236.  
  237. [/comment][div=background: var(--Constellation); opacity: .05; width: 75%; aspect-ratio: 2/1; position: absolute; bottom: -25px; right: -15px;][/div][comment]
  238.  
  239. < -------------------------------------------------- end of decor --------------------------------------------------
  240.  
  241. [/comment][/div][/div][comment]
  242.  
  243. < ---------------------------------------- end of notes content box ----------------------------------------
  244.  
  245. [/comment][/div][comment]
  246.  
  247. < ------------------------------ end of notes section ------------------------------
  248.  
  249. [/comment][/div][comment]
  250.  
  251. < -------------------- end of notes + links row --------------------
  252.  
  253. [/comment][comment]
  254.  
  255. -------------------- start of cs deets section -------------------- >
  256.  
  257. [/comment][div=margin-top: 75px; width: 100%;][comment]
  258.  
  259. ------------------------------ start of cs deets title ------------------------------ >
  260.  
  261. [/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);
  262.  
  263.  
  264.  
  265.  
  266. /* type title here > */]Character Guidelines .[/div][div=margin-top: 5px; border-radius: 5px; width: 100%; height: 7px; background: var(--Color03);][/div][/div][comment]
  267.  
  268. < ------------------------------ end of cs deets title ------------------------------
  269.  
  270. [/comment][comment]
  271.  
  272. ------------------------------ start of cs deets content box ------------------------------ >
  273.  
  274. [/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;
  275.  
  276.  
  277.  
  278.  
  279. /* write text here -> */][div=display: inline; color: var(--Color01); font-weight: 700;]BASIC INFORMATION[/div]
  280.  
  281. [div=display: inline; color: var(--Color02);]Name:[/div] Thing 1.
  282.  
  283. [div=display: inline; color: var(--Color02);]Nicknames:[/div] Thing 2.
  284.  
  285. [div=display: inline; color: var(--Color02);]Date of Birth:[/div] More things.
  286.  
  287. etc.[comment]
  288.  
  289. ---------------------------------------- start of decor ---------------------------------------- >
  290.  
  291. [/comment][div=background: var(--Constellation); opacity: .05; width: 75%; aspect-ratio: 2/1; position: absolute; bottom: -25px; right: -15px;][/div][comment]
  292.  
  293. < ---------------------------------------- end of decor ----------------------------------------
  294.  
  295. [/comment][/div][/div][comment]
  296.  
  297. < ------------------------------ end of cs deets content box ------------------------------
  298.  
  299. [/comment][/div][comment]
  300.  
  301. < -------------------- end of cs deets section --------------------
  302.  
  303. [/comment][comment]
  304.  
  305. -------------------- start of roster section -------------------- >
  306.  
  307. [/comment][div=margin-top: 75px; width: 100%;][comment]
  308.  
  309. ------------------------------ start of roster title ------------------------------ >
  310.  
  311. [/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);
  312.  
  313.  
  314.  
  315.  
  316. /* type title here > */]Roster .[/div][div=margin-top: 5px; border-radius: 5px; width: 100%; height: 7px; background: var(--Color03);][/div][/div][comment]
  317.  
  318. < ------------------------------ end of roster title ------------------------------
  319.  
  320. [/comment][comment]
  321.  
  322. ---------------------------------------- start of Roster 01 ---------------------------------------- >
  323.  
  324. [/comment][div=margin-top: 15px; border-radius: 10px; width: 100%; background: var(--Faction01);][div=margin-left: 7px; padding-bottom: 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; display: flex; flex-flow: row wrap;][comment]
  325.  
  326. -------------------------------------------------- start of Roster LEFT -------------------------------------------------- >
  327.  
  328. [/comment][div=margin-top: 50px; flex: 1; min-width: 200px; min-height: 200px; max-height: 200px; background: var(--Char01);][/div][comment]
  329.  
  330. < -------------------------------------------------- end of Roster LEFT --------------------------------------------------
  331.  
  332. [/comment][comment]
  333.  
  334. -------------------------------------------------- start of Roster RIGHT -------------------------------------------------- >
  335.  
  336. [/comment][div=margin-top: 50px; padding: 0 8%; flex: 5; width: 82%; min-width: 200px;][div=margin-left: -7px; margin-bottom: 10px; display: flex; flex-flow: row-reverse wrap; width: calc(100% + 7px);][comment]
  337.  
  338. -------------------------------------------------- start of Roster Name -------------------------------------------------- >
  339.  
  340. [/comment][div=margin-left: 7px; padding-right: 5px; flex: 1; min-width: 100px; color: var(--Faction01); font-size: 1.2em; line-height: 100%; text-transform: uppercase; font-weight: 700; text-align: right;
  341.  
  342.  
  343.  
  344. /* write name here -> */]ALIAS[/div][comment]
  345.  
  346. < -------------------------------------------------- end of Roster Name --------------------------------------------------
  347.  
  348. [/comment][comment]
  349.  
  350. -------------------------------------------------- start of Roster Basic Info -------------------------------------------------- >
  351.  
  352. [/comment][div=flex: 4; min-width: 250px; display: flex; flex-flow: row wrap; color: var(--White); line-height: 100%; text-transform: uppercase; font-size: .9em;][div=margin-left: 7px; flex: 1; min-width: 90px; background: var(--Faction01); box-sizing: border-box; padding: 5px 10px;
  353.  
  354.  
  355.  
  356. /* Name Here -> */]Real Name[/div][div=margin-left: 7px; flex: 1; min-width: 90px; background: var(--Faction01); box-sizing: border-box; padding: 5px 10px;
  357.  
  358.  
  359.  
  360.  
  361. /* Faction Here -> */]Faction[/div][div=margin-left: 7px; flex: 1; min-width: 90px; background: var(--Faction01); box-sizing: border-box; padding: 5px 10px;
  362.  
  363.  
  364.  
  365.  
  366. /* Arcana Here -> */]Arcana[/div][/div][/div][comment]
  367.  
  368. < -------------------------------------------------- start of Roster Basic Info --------------------------------------------------
  369.  
  370. [/comment][comment]
  371.  
  372. -------------------------------------------------- start of Roster Description -------------------------------------------------- >
  373.  
  374. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac ligula eget lectus facilisis rutrum. Vivamus ullamcorper interdum risus at auctor. Aenean ultricies ullamcorper facilisis. Proin semper tortor mauris, ut dignissim quam finibus sit amet. Quisque vel aliquam arcu. Nunc feugiat id sapien id ornare. Vivamus non hendrerit augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.[comment]
  375.  
  376. < -------------------------------------------------- end of Roster Description --------------------------------------------------
  377.  
  378. [/comment][/div][comment]
  379.  
  380. < -------------------------------------------------- end of Roster RIGHT --------------------------------------------------
  381.  
  382. [/comment][comment]
  383.  
  384. -------------------------------------------------- start of decor -------------------------------------------------- >
  385.  
  386. [/comment][div=background: var(--Constellation); opacity: .05; width: 75%; aspect-ratio: 2/1; position: absolute; bottom: -25px; right: -15px;][/div][comment]
  387.  
  388. < -------------------------------------------------- end of decor --------------------------------------------------
  389.  
  390. [/comment][/div][/div][comment]
  391.  
  392. < ---------------------------------------- end of Roster 01 ----------------------------------------
  393.  
  394. [/comment][comment]
  395.  
  396. ---------------------------------------- start of Roster 02 ---------------------------------------- >
  397.  
  398. [/comment][div=margin-top: 50px; border-radius: 10px; width: 100%; background: var(--Faction02);][div=margin-left: 7px; padding-bottom: 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; display: flex; flex-flow: row wrap;][comment]
  399.  
  400. -------------------------------------------------- start of Roster LEFT -------------------------------------------------- >
  401.  
  402. [/comment][div=margin-top: 50px; flex: 1; min-width: 200px; min-height: 200px; max-height: 200px; background: var(--Char02);][/div][comment]
  403.  
  404. < -------------------------------------------------- end of Roster LEFT --------------------------------------------------
  405.  
  406. [/comment][comment]
  407.  
  408. -------------------------------------------------- start of Roster RIGHT -------------------------------------------------- >
  409.  
  410. [/comment][div=margin-top: 50px; padding: 0 8%; flex: 5; width: 82%; min-width: 200px;][div=margin-left: -7px; margin-bottom: 10px; display: flex; flex-flow: row-reverse wrap; width: calc(100% + 7px);][comment]
  411.  
  412. -------------------------------------------------- start of Roster Name -------------------------------------------------- >
  413.  
  414. [/comment][div=margin-left: 7px; padding-right: 5px; flex: 1; min-width: 100px; color: var(--Faction02); font-size: 1.2em; line-height: 100%; text-transform: uppercase; font-weight: 700; text-align: right;
  415.  
  416.  
  417.  
  418. /* write name here -> */]ALIAS[/div][comment]
  419.  
  420. < -------------------------------------------------- end of Roster Name --------------------------------------------------
  421.  
  422. [/comment][comment]
  423.  
  424. -------------------------------------------------- start of Roster Basic Info -------------------------------------------------- >
  425.  
  426. [/comment][div=flex: 4; min-width: 250px; display: flex; flex-flow: row wrap; color: var(--White); line-height: 100%; text-transform: uppercase; font-size: .9em;][div=margin-left: 7px; flex: 1; min-width: 90px; background: var(--Faction02); box-sizing: border-box; padding: 5px 10px;
  427.  
  428.  
  429.  
  430. /* Name Here -> */]Real Name[/div][div=margin-left: 7px; flex: 1; min-width: 90px; background: var(--Faction02); box-sizing: border-box; padding: 5px 10px;
  431.  
  432.  
  433.  
  434.  
  435. /* Faction Here -> */]Faction[/div][div=margin-left: 7px; flex: 1; min-width: 90px; background: var(--Faction02); box-sizing: border-box; padding: 5px 10px;
  436.  
  437.  
  438.  
  439.  
  440. /* Arcana Here -> */]Arcana[/div][/div][/div][comment]
  441.  
  442. < -------------------------------------------------- start of Roster Basic Info --------------------------------------------------
  443.  
  444. [/comment][comment]
  445.  
  446. -------------------------------------------------- start of Roster Description -------------------------------------------------- >
  447.  
  448. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac ligula eget lectus facilisis rutrum. Vivamus ullamcorper interdum risus at auctor. Aenean ultricies ullamcorper facilisis. Proin semper tortor mauris, ut dignissim quam finibus sit amet. Quisque vel aliquam arcu. Nunc feugiat id sapien id ornare. Vivamus non hendrerit augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.[comment]
  449.  
  450. < -------------------------------------------------- end of Roster Description --------------------------------------------------
  451.  
  452. [/comment][/div][comment]
  453.  
  454. < -------------------------------------------------- end of Roster RIGHT --------------------------------------------------
  455.  
  456. [/comment][comment]
  457.  
  458. -------------------------------------------------- start of decor -------------------------------------------------- >
  459.  
  460. [/comment][div=background: var(--Constellation); opacity: .05; width: 75%; aspect-ratio: 2/1; position: absolute; bottom: -25px; right: -15px;][/div][comment]
  461.  
  462. < -------------------------------------------------- end of decor --------------------------------------------------
  463.  
  464. [/comment][/div][/div][comment]
  465.  
  466. < ---------------------------------------- end of Roster 02 ----------------------------------------
  467.  
  468. [/comment][comment]
  469.  
  470. ---------------------------------------- start of Roster 03 ---------------------------------------- >
  471.  
  472. [/comment][div=margin-top: 50px; border-radius: 10px; width: 100%; background: var(--Faction03);][div=margin-left: 7px; padding-bottom: 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; display: flex; flex-flow: row wrap;][comment]
  473.  
  474. -------------------------------------------------- start of Roster LEFT -------------------------------------------------- >
  475.  
  476. [/comment][div=margin-top: 50px; flex: 1; min-width: 200px; min-height: 200px; max-height: 200px; background: var(--Char03);][/div][comment]
  477.  
  478. < -------------------------------------------------- end of Roster LEFT --------------------------------------------------
  479.  
  480. [/comment][comment]
  481.  
  482. -------------------------------------------------- start of Roster RIGHT -------------------------------------------------- >
  483.  
  484. [/comment][div=margin-top: 50px; padding: 0 8%; flex: 5; width: 82%; min-width: 200px;][div=margin-left: -7px; margin-bottom: 10px; display: flex; flex-flow: row-reverse wrap; width: calc(100% + 7px);][comment]
  485.  
  486. -------------------------------------------------- start of Roster Name -------------------------------------------------- >
  487.  
  488. [/comment][div=margin-left: 7px; padding-right: 5px; flex: 1; min-width: 100px; color: var(--Faction03); font-size: 1.2em; line-height: 100%; text-transform: uppercase; font-weight: 700; text-align: right;
  489.  
  490.  
  491.  
  492. /* write name here -> */]ALIAS[/div][comment]
  493.  
  494. < -------------------------------------------------- end of Roster Name --------------------------------------------------
  495.  
  496. [/comment][comment]
  497.  
  498. -------------------------------------------------- start of Roster Basic Info -------------------------------------------------- >
  499.  
  500. [/comment][div=flex: 4; min-width: 250px; display: flex; flex-flow: row wrap; color: var(--White); line-height: 100%; text-transform: uppercase; font-size: .9em;][div=margin-left: 7px; flex: 1; min-width: 90px; background: var(--Faction03); box-sizing: border-box; padding: 5px 10px;
  501.  
  502.  
  503.  
  504. /* Name Here -> */]Real Name[/div][div=margin-left: 7px; flex: 1; min-width: 90px; background: var(--Faction03); box-sizing: border-box; padding: 5px 10px;
  505.  
  506.  
  507.  
  508.  
  509. /* Faction Here -> */]Faction[/div][div=margin-left: 7px; flex: 1; min-width: 90px; background: var(--Faction03); box-sizing: border-box; padding: 5px 10px;
  510.  
  511.  
  512.  
  513.  
  514. /* Arcana Here -> */]Arcana[/div][/div][/div][comment]
  515.  
  516. < -------------------------------------------------- start of Roster Basic Info --------------------------------------------------
  517.  
  518. [/comment][comment]
  519.  
  520. -------------------------------------------------- start of Roster Description -------------------------------------------------- >
  521.  
  522. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac ligula eget lectus facilisis rutrum. Vivamus ullamcorper interdum risus at auctor. Aenean ultricies ullamcorper facilisis. Proin semper tortor mauris, ut dignissim quam finibus sit amet. Quisque vel aliquam arcu. Nunc feugiat id sapien id ornare. Vivamus non hendrerit augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.[comment]
  523.  
  524. < -------------------------------------------------- end of Roster Description --------------------------------------------------
  525.  
  526. [/comment][/div][comment]
  527.  
  528. < -------------------------------------------------- end of Roster RIGHT --------------------------------------------------
  529.  
  530. [/comment][comment]
  531.  
  532. -------------------------------------------------- start of decor -------------------------------------------------- >
  533.  
  534. [/comment][div=background: var(--Constellation); opacity: .05; width: 75%; aspect-ratio: 2/1; position: absolute; bottom: -25px; right: -15px;][/div][comment]
  535.  
  536. < -------------------------------------------------- end of decor --------------------------------------------------
  537.  
  538. [/comment][/div][/div][comment]
  539.  
  540. < ---------------------------------------- end of Roster 03 ----------------------------------------
  541.  
  542. [/comment][/div][comment]
  543.  
  544. < -------------------- end of roster section --------------------
  545.  
  546. [/comment][div=height: 50px;][/div][/div][/div][comment]
  547.  
  548. < ---------- end of scrollbox ----------
  549.  
  550. [/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
  551. ▼[/div][/div][comment]
  552.  
  553. ---------- start of credits ---------- >
  554.  
  555. [/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]
  556.  
  557. < ---------- end of credits ----------
  558.  
  559. [/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!