API tools faq
paste
ooksie

blue moon chiffon (nine lives)

ooksie
Dec 7th, 2020 (edited)
224
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.06 KB | None | 0 0
raw download clone embed print report
  1. [comment]code by nine lives ♡
  2.  
  3. fonts used:
  4. [font=Alice]name + basic info[/font]
  5. [font=Kristi]quote + section headers[/font]
  6. [font=Syne]body text[/font]
  7.  
  8. to replace fonts, replace them here then in the corresponding variables under * fonts used * check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  9.  
  10. [/comment][border=transparent;
  11. *background colour;
  12. --bg-color: #fff;
  13. *border colour;
  14. --border: #ededed;
  15. *first accent colour (darkest);
  16. --color-1: #47658a;
  17. *second accent colour (middle);
  18. --color-2: #9CC2D7;
  19. *third accent colour (lightest);
  20. --color-3: #CFE2EC;
  21. *fourth accent colour (light complementary colour);
  22. --color-4: #F6EDDE;
  23.  
  24. *blue details text colour;
  25. --h1: #708eb2;
  26. *brown subheader/secondary complementary accent colour;
  27. --h2: #bfa080;
  28.  
  29. *first text colour (lighter -- for traits);
  30. --t-color-1: #fff;
  31. *second text colour (darker-- backstory);
  32. --t-color-2: #000;
  33.  
  34. *fonts used;
  35. --name: 'Alice', serif;
  36. --header: 'Kristi', display;
  37. --header-2: 'Alice', serif;
  38. --body: 'Syne', sans-serif;
  39.  
  40. *decoration next to name;
  41. --deco: url('https://cdn.discordapp.com/attachments/774641055294816279/785081152507215872/v9i9qO4PxXogAAAABJRU5ErkJggg.png');
  42.  
  43. *header image;
  44. --img-1: url('https://i.pinimg.com/originals/36/17/87/361787b5270779e43a59b8769ba5b6ac.jpg');
  45. *big image on the left/bottom;
  46. --img-2: url('https://i.pinimg.com/564x/33/55/f8/3355f8790eedf383a12171287a09c4b6.jpg');
  47.  
  48. *images next to vices/virtues;
  49. --img-3: url('https://images-ext-2.discordapp.net/external/PGtvXoox890a78uYGZ_fZQ3ID0XAYkEpp-79yQYVtiw/https/i.pinimg.com/564x/45/84/29/458429514f0084359dab89abe90f8cb3.jpg?width=423&height=689');
  50. --img-4: url('https://images-ext-2.discordapp.net/external/PGtvXoox890a78uYGZ_fZQ3ID0XAYkEpp-79yQYVtiw/https/i.pinimg.com/564x/45/84/29/458429514f0084359dab89abe90f8cb3.jpg?width=423&height=689');
  51. --img-5: url('https://images-ext-2.discordapp.net/external/PGtvXoox890a78uYGZ_fZQ3ID0XAYkEpp-79yQYVtiw/https/i.pinimg.com/564x/45/84/29/458429514f0084359dab89abe90f8cb3.jpg?width=423&height=689');
  52.  
  53. *images bellow backstory;
  54. --img-6: url('https://cdn.discordapp.com/attachments/774641055294816279/784024750321041438/35d3c907d2d9958d41fc6891c9433910.png');
  55. --img-7: url('https://cdn.discordapp.com/attachments/774641055294816279/784025030211797013/60f04b3c66ffcd6cba0b8ff6d4ce2aed.png');
  56. --img-8: url('https://i.pinimg.com/564x/97/78/46/97784611de04541606ba54b5728faae0.jpg');
  57.  
  58. height:fit-content; width:100%; max-width:430px; padding:5px; box-sizing:border-box; background: var(--bg-color); border:1px solid var(--border); margin:auto; position:relative; line-height:0; display:flex; flex-flow:column nowrap; align-items:center;]
  59. [comment]----header image----[/comment]
  60. [border=transparent; height:110px; width:calc(100% - 10px); padding:0; background: var(--img-1); background-size:cover; margin:5px;
  61. /*edit the following to adjust the cropping of the image*/ background-position: 50% 30%;][/border]
  62.  
  63. [comment]----name, quote & decoration----[/comment]
  64. [border=transparent; height:30px; width:calc(100% - 10px); padding:0; display:flex; flex-flow: row nowrap; margin:5px;]
  65. [comment]----name----[/comment]
  66. [border=transparent; height:100%; width:fit-content; min-width:36%; padding:0 18px; box-sizing:border-box; position:relative; display:flex; align-items:flex-start; justify-content:center; flex-shrink:0;]
  67. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-1); text-transform:uppercase; letter-spacing:2.5px; font-size:29px; font-family: var(--name); line-height:65%; position:relative; z-index:3;][comment]
  68. ----* * * character's name here!----
  69. [/comment]name here[/border]
  70. [comment]----quote----[/comment]
  71. [border=transparent; height:23px; width:100%; padding:0 15px; box-sizing:border-box; background: var(--color-2); position:absolute; bottom:0; left:0; z-index:2; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; white-space:nowrap; color: var(--bg-color); font-family: var(--header); font-size:18px; line-height:13px; letter-spacing:0.5px;][comment]
  72. ----* * * quote here----
  73. [/comment]dramatic quote here[/border]
  74. [/border]
  75. [comment]----decoration-----[/comment]
  76. [border=transparent; height:100%; flex-grow:1; min-width:0; padding:0; background: var(--deco); background-size:auto 100%; background-position:15% 50%;][/border]
  77. [/border]
  78.  
  79. [comment]----main content container----[/comment]
  80. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow: row-reverse wrap;]
  81. [comment]----content----[/comment]
  82. [border=transparent; height:380px; min-height:240px; width:100%; flex:3 1; min-width:265px; padding:0; display:flex; flex-flow:column nowrap; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap;]
  83.  
  84. [comment]----basics----[/comment]
  85. [border=transparent; max-height:105px; width:100%; padding:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:100%; width:50%; padding:0; display:flex; flex-flow:row wrap; align-items:flex-start; justify-content:flex-start;]
  86.  
  87. [comment]----copy this whole thing to make another bit of character info!----[/comment]
  88. [border=transparent; height:fit-content; flex:1 0; min-width:calc(50% - 10px); padding:6px; box-sizing:border-box; background: var(--color-3); text-align:center; line-height:110%; color: var(--h1); text-transform:uppercase; font-family: var(--header-2); font-size:13px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; margin:5px;][comment]
  89. ----* * * info here----
  90. [/comment]full name[/border]
  91. [comment]----copy me too!----[/comment]
  92.  
  93. [comment]----copy this whole thing to make another bit of character info!----[/comment]
  94. [border=transparent; height:fit-content; flex:1 0; min-width:calc(50% - 10px); padding:6px; box-sizing:border-box; background: var(--color-3); text-align:center; line-height:110%; color: var(--h1); text-transform:uppercase; font-family: var(--header-2); font-size:13px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; margin:5px;][comment]
  95. ----* * * info here----
  96. [/comment]age[/border]
  97. [comment]----copy me too!----[/comment]
  98.  
  99. [comment]----copy this whole thing to make another bit of character info!----[/comment]
  100. [border=transparent; height:fit-content; flex:1 0; min-width:calc(50% - 10px); padding:6px; box-sizing:border-box; background: var(--color-3); text-align:center; line-height:110%; color: var(--h1); text-transform:uppercase; font-family: var(--header-2); font-size:13px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; margin:5px;][comment]
  101. ----* * * info here----
  102. [/comment]dob[/border]
  103. [comment]----copy me too!----[/comment]
  104.  
  105. [comment]----copy this whole thing to make another bit of character info!----[/comment]
  106. [border=transparent; height:fit-content; flex:1 0; min-width:calc(50% - 10px); padding:6px; box-sizing:border-box; background: var(--color-3); text-align:center; line-height:110%; color: var(--h1); text-transform:uppercase; font-family: var(--header-2); font-size:13px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; margin:5px;][comment]
  107. ----* * * info here----
  108. [/comment]gender[/border]
  109. [comment]----copy me too!----[/comment]
  110.  
  111. [comment]----copy this whole thing to make another bit of character info!----[/comment]
  112. [border=transparent; height:fit-content; flex:1 0; min-width:calc(50% - 10px); padding:6px; box-sizing:border-box; background: var(--color-3); text-align:center; line-height:110%; color: var(--h1); text-transform:uppercase; font-family: var(--header-2); font-size:13px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; margin:5px;][comment]
  113. ----* * * info here----
  114. [/comment]noble rank[/border]
  115. [comment]----copy me too!----[/comment]
  116.  
  117. [comment]----copy this whole thing to make another bit of character info!----[/comment]
  118. [border=transparent; height:fit-content; flex:1 0; min-width:calc(50% - 10px); padding:6px; box-sizing:border-box; background: var(--color-3); text-align:center; line-height:110%; color: var(--h1); text-transform:uppercase; font-family: var(--header-2); font-size:13px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; margin:5px;][comment]
  119. ----* * * info here----
  120. [/comment]epithet 1[/border]
  121. [comment]----copy me too!----[/comment]
  122.  
  123. [comment]----copy this whole thing to make another bit of character info!----[/comment]
  124. [border=transparent; height:fit-content; flex:1 0; min-width:calc(50% - 10px); padding:6px; box-sizing:border-box; background: var(--color-3); text-align:center; line-height:110%; color: var(--h1); text-transform:uppercase; font-family: var(--header-2); font-size:13px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; margin:5px;][comment]
  125. ----* * * info here----
  126. [/comment]pob[/border]
  127. [comment]----copy me too!----[/comment]
  128.  
  129. [/border][/border][/border]
  130. [comment]----basics end----[/comment]
  131.  
  132. [comment]----persona container----[/comment]
  133. [border=transparent; height:fit-content; max-height:270px; min-height:width:calc(100% - 10px); padding:0; margin:5px 0; display:flex; flex-flow: row-reverse wrap; align-items:center; justify-content:center;]
  134.  
  135. [comment]----images----[/comment]
  136. [border=transparent; height:auto; max-height:270px; min-height:75px; width:100%; padding:0; flex:3; display:flex; flex-flow: row wrap; align-items:center; justify-content:center;]
  137. [border=transparent; width:30%; padding:0; min-width:75px; margin:5px;][border=transparent; width:100%; padding:3px; box-sizing:border-box; border:1px solid var(--h2); border-radius:3px;][border=transparent; padding:0; padding-top:100%; border-radius:3px; background: var(--img-3); background-size:cover;
  138. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border][/border][/border]
  139. [border=transparent; width:30%; padding:0; min-width:75px; margin:5px;][border=transparent; width:100%; padding:3px; box-sizing:border-box; border:1px solid var(--h2); border-radius:3px;][border=transparent; padding:0; padding-top:100%; border-radius:3px; background: var(--img-4); background-size:cover;
  140. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border][/border][/border]
  141. [border=transparent; width:30%; padding:0; min-width:75px; margin:5px;][border=transparent; width:100%; padding:3px; box-sizing:border-box; border:1px solid var(--h2); border-radius:3px;][border=transparent; padding:0; padding-top:100%; border-radius:3px; background: var(--img-5); background-size:cover;
  142. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border][/border][/border]
  143. [/border]
  144.  
  145. [comment]----persona-----[/comment]
  146. [border=transparent; max-height:270px; min-height:185px; width:100%; padding:0; flex:5; display:flex; flex-flow: row wrap; align-items:center; justify-content:center;]
  147. [comment]----persona contents 1----[/comment]
  148. [border=transparent; height:125px; width:155px; padding:0; margin:5px; display:flex; flex-flow:column nowrap; align-items:center;]
  149. [comment]----title----[/comment]
  150. [border=transparent; height:10%; width:fit-content; padding:5px 15px; position:relative; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; color: var(--h2); font-size:30px; font-family: var(--header); line-height:100%; position:relative; top:-2px; z-index:3; letter-spacing:1px;][comment]
  151. ----* * * section title here----
  152. [/comment]virtues[/border]
  153. [border=transparent; height:65%; width:100%; padding:0; background:var(--color-4); position:absolute; bottom:0; left:0; z-index:2;][/border]
  154. [/border]
  155.  
  156. [comment]----text-----[/comment]
  157. [border=transparent; height:calc(90% - 5px); width:100%; padding:0; margin-top:5px; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow: row wrap; justify-content:center;]
  158.  
  159. [comment]----copy this whole thing to make one more trait----[/comment]
  160. [border=transparent; height:fit-content; width:fit-content; padding:3px 8px; box-sizing:border-box; background: var(--h2); margin:4px; color: var(--t-color-1); font-family: var(--body); line-height:100%; font-size:12px;][comment]
  161. ----* * * trait here----
  162. [/comment]trait[/border]
  163. [comment]----copy me too----[/comment]
  164.  
  165. [comment]----copy this whole thing to make one more trait----[/comment]
  166. [border=transparent; height:fit-content; width:fit-content; padding:3px 8px; box-sizing:border-box; background: var(--h2); margin:4px; color: var(--t-color-1); font-family: var(--body); line-height:100%; font-size:12px;][comment]
  167. ----* * * trait here----
  168. [/comment]trait[/border]
  169. [comment]----copy me too----[/comment]
  170.  
  171. [comment]----copy this whole thing to make one more trait----[/comment]
  172. [border=transparent; height:fit-content; width:fit-content; padding:3px 8px; box-sizing:border-box; background: var(--h2); margin:4px; color: var(--t-color-1); font-family: var(--body); line-height:100%; font-size:12px;][comment]
  173. ----* * * trait here----
  174. [/comment]longer trait[/border]
  175. [comment]----copy me too----[/comment]
  176.  
  177. [comment]----copy this whole thing to make one more trait----[/comment]
  178. [border=transparent; height:fit-content; width:fit-content; padding:3px 8px; box-sizing:border-box; background: var(--h2); margin:4px; color: var(--t-color-1); font-family: var(--body); line-height:100%; font-size:12px;][comment]
  179. ----* * * trait here----
  180. [/comment]trait[/border]
  181. [comment]----copy me too----[/comment]
  182.  
  183. [/border][/border][/border]
  184. [comment]----text end----[/comment]
  185. [/border]
  186. [comment]----persona contents 1 end----[/comment]
  187.  
  188. [comment]----persona contents 2----[/comment]
  189. [border=transparent; height:125px; width:155px; padding:0; margin:5px; display:flex; flex-flow:column nowrap; align-items:center;]
  190. [comment]----title----[/comment]
  191. [border=transparent; height:10%; width:fit-content; padding:5px 15px; position:relative; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; color: var(--h2); font-size:30px; font-family: var(--header); line-height:100%; position:relative; top:-2px; z-index:3; letter-spacing:1px;][comment]
  192. ----* * * section title here----
  193. [/comment]vices[/border]
  194. [border=transparent; height:65%; width:100%; padding:0; background:var(--color-4); position:absolute; bottom:0; left:0; z-index:2;][/border]
  195. [/border]
  196.  
  197. [comment]----text-----[/comment]
  198. [border=transparent; height:calc(90% - 5px); width:100%; padding:0; margin-top:5px; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow: row wrap; justify-content:center;]
  199.  
  200. [comment]----copy this whole thing to make one more trait----[/comment]
  201. [border=transparent; height:fit-content; width:fit-content; padding:3px 8px; box-sizing:border-box; background: var(--h2); margin:4px; color: var(--t-color-1); font-family: var(--body); line-height:100%; font-size:12px;][comment]
  202. ----* * * trait here----
  203. [/comment]trait[/border]
  204. [comment]----copy me too----[/comment]
  205.  
  206. [comment]----copy this whole thing to make one more trait----[/comment]
  207. [border=transparent; height:fit-content; width:fit-content; padding:3px 8px; box-sizing:border-box; background: var(--h2); margin:4px; color: var(--t-color-1); font-family: var(--body); line-height:100%; font-size:12px;][comment]
  208. ----* * * trait here----
  209. [/comment]trait[/border]
  210. [comment]----copy me too----[/comment]
  211.  
  212. [comment]----copy this whole thing to make one more trait----[/comment]
  213. [border=transparent; height:fit-content; width:fit-content; padding:3px 8px; box-sizing:border-box; background: var(--h2); margin:4px; color: var(--t-color-1); font-family: var(--body); line-height:100%; font-size:12px;][comment]
  214. ----* * * trait here----
  215. [/comment]longer trait[/border]
  216. [comment]----copy me too----[/comment]
  217.  
  218. [comment]----copy this whole thing to make one more trait----[/comment]
  219. [border=transparent; height:fit-content; width:fit-content; padding:3px 8px; box-sizing:border-box; background: var(--h2); margin:4px; color: var(--t-color-1); font-family: var(--body); line-height:100%; font-size:12px;][comment]
  220. ----* * * trait here----
  221. [/comment]trait[/border]
  222. [comment]----copy me too----[/comment]
  223.  
  224. [/border][/border][/border]
  225. [comment]----text end----[/comment]
  226. [/border]
  227. [comment]----persona contents 2 end----[/comment]
  228. [/border]
  229. [comment]----persona end----[/comment]
  230. [/border]
  231. [comment]----persona container end----[/comment]
  232.  
  233. [comment]----backstory----[/comment]
  234. [border=transparent; height:auto; min-height:180px; margin:5px; width:calc(100% - 10px); padding:0; display:flex; flex-flow:column nowrap; align-items:center;]
  235. [comment]----title----[/comment]
  236. [border=transparent; height:20px; width:100%; padding:5px 15px; box-sizing:border-box; position:relative; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; color: var(--color-1); font-size:35px; font-family: var(--header); line-height:100%; position:relative; top:-3px; z-index:3; letter-spacing:1px;][comment]
  237. ----* * * section title here----
  238. [/comment]backstory[/border]
  239. [border=transparent; height:20px; width:100%; padding:0; background:var(--color-3); position:absolute; bottom:0; left:0; z-index:2;][/border]
  240. [/border]
  241.  
  242. [comment]----text-----[/comment]
  243. [border=transparent; height:auto; max-height:198px; width:100%; margin-top:12px; padding:0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 5px; box-sizing:border-box; color: var(--t-color-2); font-family: var(--body); line-height:130%; text-align:justify; font-size:12px;][comment]
  244. ----* * * text starts here----
  245. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat venenatis ante quis consequat. Vestibulum vitae sapien id leo blandit tempor. Nullam eget ante sollicitudin tortor dapibus interdum. Donec vitae interdum tortor, imperdiet imperdiet metus. In vitae dui sodales, mattis tellus ut, interdum felis. Curabitur laoreet felis id nisl tempor luctus. Aenean blandit vestibulum porttitor. Donec dignissim sagittis tincidunt. Sed dictum dignissim risus ac euismod. Vivamus et quam vitae nisi semper sollicitudin nec et massa. Donec auctor tellus ac mauris tincidunt, sit amet fermentum ipsum vestibulum. Cras aliquam suscipit auctor. Duis vel varius enim, in pretium nibh. Ut sit amet ligula non nisl faucibus vehicula.
  246.  
  247. Morbi ultrices feugiat lorem, et gravida metus vulputate sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec commodo felis vel lacus mollis, quis accumsan odio placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed tristique venenatis ex a finibus. Mauris sit amet turpis in odio commodo vestibulum ut vitae massa. Etiam posuere pulvinar sem nec euismod. Fusce sagittis arcu a turpis elementum molestie. Quisque congue mi in elementum semper. Vivamus a odio tempus, elementum dolor in, malesuada enim. Maecenas vitae mauris diam. Donec vulputate, enim vel porttitor elementum, felis dolor tempus metus, suscipit rutrum justo libero luctus tortor.
  248. [/border][/border][/border]
  249. [comment]----text end----[/comment]
  250. [/border]
  251. [comment]----backstory end----[/comment]
  252.  
  253. [comment]----more images----[/comment]
  254. [border=transparent; height:55px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:center; justify-content:flex-end;]
  255. [border=transparent; height:45px; width:45px; padding:0; background:var(--img-6); border-radius:50%; background-size:cover; margin:0 5px;
  256. /*edit the following to change the cropping of the image*/ background-position: 50% 50%;][/border]
  257. [border=transparent; height:45px; width:45px; padding:0; background:var(--img-7); border-radius:50%; background-size:cover; margin:0 5px;
  258. /*edit the following to change the cropping of the image*/ background-position: 50% 50%;][/border]
  259. [border=transparent; height:45px; width:45px; padding:0; background:var(--img-8); border-radius:50%; background-size:cover; margin:0 5px;
  260. /*edit the following to change the cropping of the image*/ background-position: 50% 50%;][/border]
  261. [/border]
  262. [/border][/border][/border]
  263. [comment]----content end----[/comment]
  264.  
  265. [comment]----big image----[/comment]
  266. [border=transparent; height:auto; min-height:140px; max-height:380px; width:100%; min-width:130px; flex:1 0; padding:0; margin:5px; background: var(--img-2); background-size:cover; background-repeat:no-repeat;
  267. /*edit the following to adjust the cropping of the image*/ background-position: 30% 30%;][/border]
  268. [/border]
  269. [comment]----main content container end----[/comment]
  270.  
  271. [comment]----made with love by uxie and triples ♡ do not remove!! !!----[/comment]
  272. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--bg-color); font-size:10px; position:absolute; z-index:7; top:15px; left:15px; display:flex; flex-flow: row nowrap; align-items:center; line-height:100%;][border=transparent; height:fit-content; width:fit-content; padding:0; letter-spacing:0.5px; font-weight:bold;][font=Space Grotesk]nine lives[/font][/border][border=transparent; height:fit-content; width:fit-content; padding:0; margin-left:5px; font-size:8px;][fa]fas fa-cat[/fa][/border][/border]
  273. [/border]
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!