API tools faq
paste
Advertisement
mochiroll

Flos.Code

mochiroll
Feb 14th, 2021 (edited)
490
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 39.32 KB | None | 0 0
raw download clone embed print report
  1. [comment]
  2. Designed and coded by [USER=20950]@Nano[/USER].
  3. Please do not remove the credits or claim the code as your own work.
  4.  
  5. [font=Mrs Saint Delafield].[/font]
  6. [font=Noto Serif JP].[/font]
  7. [font=Source Sans Pro].[/font]
  8. [/comment][comment]
  9.  
  10. // accents
  11.  
  12. [/comment][border=0; padding: 0;
  13. --bgpattern: url('https://i.imgur.com/e8Xrnmr.png') repeat;
  14. --bgtransparent: rgba(255, 255, 255, 0.5);
  15. --bgsolid: #fefefe;
  16. --accent: #b14641;
  17. --ribbon: #a33737;
  18. --textcolor: #755952;
  19. --headercolor: #fefefe;
  20.  
  21. --namefont: 'Mrs Saint Delafield', cursive;
  22. --jpfont: 'Noto Serif JP', serif;
  23. --textfont: 'Source Sans Pro', sans-serif;
  24.  
  25. --img01: url('<-- image url -->') center top/cover no-repeat;
  26. --img02: url('<-- image url -->') center/cover no-repeat;
  27. --img03: url('<-- image url -->') center/cover no-repeat;
  28. --img04: url('<-- image url -->') left center/cover no-repeat;
  29.  
  30. padding: 75px 0;
  31. width: 100%;
  32. font-size: initial;
  33. position: relative;
  34. display: flex; flex-flow: column nowrap; justify-content: center; align-items: center;
  35. ][div=background: var(--bgpattern); position: absolute; inset: 0; z-index: 1; pointer-events: none;][/div][border=0; display: flex; flex-flow: row wrap; justify-content: center; margin: 0 auto; padding: 0; width: 100%; max-width: 900px; min-width: 300px; position: relative; z-index: 2; pointer-events: none;][comment]
  36.  
  37. // start of left side //
  38.  
  39. [/comment][border=0; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 0; flex: 1; max-width: 500px; min-width: 250px; height: 70vh; max-height: 600px; min-height: 300px; position: relative;][comment]
  40.  
  41. // start of image //
  42.  
  43. [/comment][border=0; top: 0; right: 0; bottom: 0; left: 0; padding: 0; background: var(--img01); filter: sepia(25%) grayscale(20%); box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, .3);position: absolute;][/border][comment]
  44.  
  45. // end of image //
  46.  
  47. [/comment][comment]
  48.  
  49. // start of tab covers //
  50.  
  51. [/comment][border=0; top: 25px; right: -15px; padding: 0; position: absolute;][border=0; padding: 3px 30px; background: var(--accent); font-family: var(--textfont); font-size: 12px; color: var(--headercolor); text-align: center; text-transform: lowercase;]basic info[/border][border=0; right: 0; padding: 0; width: 15px; height: 5px; background: var(--ribbon); clip-path: polygon(100% 0, 0 0, 0 100%); position: absolute;][/border][border=0; margin-top: 11px; padding: 3px 30px; background: var(--accent); font-family: var(--textfont); font-size: 12px; color: var(--headercolor); text-align: center; text-transform: lowercase;]backstory[/border][border=0; right: 0; padding: 0; width: 15px; height: 5px; background: var(--ribbon); clip-path: polygon(100% 0, 0 0, 0 100%); position: absolute;][/border][border=0; margin-top: 11px; padding: 3px 30px; background: var(--accent); font-family: var(--textfont); font-size: 12px; color: var(--headercolor); text-align: center; text-transform: lowercase;]extra[/border][border=0; right: 0; padding: 0; width: 15px; height: 5px; background: var(--ribbon); clip-path: polygon(100% 0, 0 0, 0 100%); position: absolute;][/border][comment]
  52.  
  53. // end of tab covers //
  54.  
  55. [/comment][/border][comment]
  56.  
  57. // start of name //
  58.  
  59. [/comment][border=0; padding: 0; font-family: var(--namefont); font-size: 3em; line-height: 100%; color: var(--headercolor); text-transform: capitalize; position: relative; pointer-events: auto;]Last First[/border][border=0; margin-top: -25px; padding: 0; font-family: var(--jpfont); font-size: 2em; line-height: 100%; color: var(--accent); position: relative; pointer-events: auto;]名前[/border][comment]
  60.  
  61. // end of name //
  62.  
  63. [/comment][/border][comment]
  64.  
  65. // end of left side //
  66.  
  67. [/comment][comment]
  68.  
  69. // start of right side base //
  70.  
  71. [/comment][border=0; padding: 0; flex: 3; max-width: 600px; min-width: 250px; height: 70vh; max-height: 600px; min-height: 300px; background: var(--bgtransparent);][/border][comment]
  72.  
  73. // end of right side base //
  74.  
  75. [/comment][/border][comment]
  76.  
  77. // start of tabs //
  78.  
  79. [/comment][border=0; top: 97px; padding: 0; width: 100%; max-width: 900px; min-width: 300px; line-height: 29px; position: absolute;][tabs]
  80.  
  81.  
  82.  
  83.  
  84.  
  85. [tab=01010101010101010101010101010101010101010101010101010101010101010101010101010101010101][border=0; display: flex; flex-flow: row wrap; justify-content: center; top: -22px; right: 0; left: 0; padding: 0; position: absolute; z-index: 3; pointer-events: none;][border=0; padding: 0; flex: 1; max-width: 500px; min-width: 250px; height: 70vh; max-height: 600px; min-height: 300px; position: relative;][border=0; padding: 0; width: calc(100% - 100px); height: 150px; pointer-events: auto;][/border][/border][comment]
  86.  
  87. // start of content box //
  88.  
  89. [/comment][border=0; box-sizing: border-box; padding: 25px; flex: 3; max-width: 600px; min-width: 250px; height:70vh; max-height: 600px; min-height: 300px; position: relative; pointer-events: auto; overflow: hidden;][border=0; padding: 0 40px 0 0; width: calc(100% + 10px); height: calc(70vh - 50px); max-height: 550px; min-height: 250px; overflow-y: scroll;][comment]
  90.  
  91. --------- start of profile header ---------
  92.  
  93. [/comment][border=0; display: flex; flex-flow: row nowrap; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0; margin-left: 5px; padding: 3px 10px; flex: 1; width: calc(100% - 20px); max-width: 125px; background: var(--accent); font-family: var(--textfont); font-size: .7em; line-height: 100%; color: var(--headercolor); text-transform: lowercase;]PROFILE[/border][border=0; display: flex; align-items: center; margin-left: 5px; padding: 0; flex: 3; width: 100%;][border=0; padding: 0; width: 100%; height: 2px; background: var(--accent);][/border][/border][/border][comment]
  94.  
  95. --------- end of profile header ---------
  96.  
  97. [/comment][comment]
  98.  
  99. --------- start of profile info box ---------
  100.  
  101. [/comment][border=0; box-sizing: border-box; margin-top: 5px; padding: 15px; background: var(--bgsolid);][comment]
  102.  
  103. ---------------------- start of profile row ----------------------
  104.  
  105. [/comment][border=0; display: flex; flex-flow: row wrap; margin-top: -30px; margin-left: -10px; padding: 0;][comment]
  106.  
  107. ------------------------------------------ start stat 01 ------------------------------------------
  108.  
  109. [/comment][border=0; margin-top: 30px; margin-left: 10px; padding: 0; flex: 1; width: 100%; max-width: 300px; min-width: 125px;][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase;]FULL NAME[/border][border=0; margin-top: 10px; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--textcolor); text-transform: capitalize;]Surname, Given[/border][/border][comment]
  110.  
  111. ------------------------------------------ end stat 01 ------------------------------------------
  112.  
  113. [/comment][comment]
  114.  
  115. ------------------------------------------ start stat 02 ------------------------------------------
  116.  
  117. [/comment][border=0; margin-top: 30px; margin-left: 10px; padding: 0; flex: 1; width: 100%; max-width: 300px; min-width: 125px;][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase;]NICKNAMES[/border][border=0; margin-top: 10px; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--textcolor); text-transform: capitalize;]Alias[/border][/border][comment]
  118.  
  119. ------------------------------------------ end stat 02 ------------------------------------------
  120.  
  121. [/comment][comment]
  122.  
  123. ------------------------------------------ start stat 03 ------------------------------------------
  124.  
  125. [/comment][border=0; margin-top: 30px; margin-left: 10px; padding: 0; flex: 1; width: 100%; max-width: 300px; min-width: 125px;][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase;]OCCUPATION[/border][border=0; margin-top: 10px; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--textcolor); text-transform: capitalize;]Blep[/border][/border][comment]
  126.  
  127. ------------------------------------------ end stat 03 ------------------------------------------
  128.  
  129. [/comment][comment]
  130.  
  131. ------------------------------------------ start stat 04 ------------------------------------------
  132.  
  133. [/comment][border=0; margin-top: 30px; margin-left: 10px; padding: 0; flex: 1; width: 100%; max-width: 300px; min-width: 125px;][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase;]AGE[/border][border=0; margin-top: 10px; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--textcolor); text-transform: capitalize;]Age (##)[/border][/border][comment]
  134.  
  135. ------------------------------------------ end stat 04 ------------------------------------------
  136.  
  137. [/comment][comment]
  138.  
  139. ------------------------------------------ start stat 05 ------------------------------------------
  140.  
  141. [/comment][border=0; margin-top: 30px; margin-left: 10px; padding: 0; flex: 1; width: 100%; max-width: 300px; min-width: 125px;][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase;]BIRTHDAY[/border][border=0; margin-top: 10px; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--textcolor); text-transform: capitalize;]Month n[sup]th[/sup][/border][/border][comment]
  142.  
  143. ------------------------------------------ end stat 05 ------------------------------------------
  144.  
  145. [/comment][comment]
  146.  
  147. ------------------------------------------ start stat 06 ------------------------------------------
  148.  
  149. [/comment][border=0; margin-top: 30px; margin-left: 10px; padding: 0; flex: 1; width: 100%; max-width: 300px; min-width: 125px;][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase;]GENDER[/border][border=0; margin-top: 10px; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--textcolor); text-transform: capitalize;]---[/border][/border][comment]
  150.  
  151. ------------------------------------------ end stat 06 ------------------------------------------
  152.  
  153. [/comment][/border][comment]
  154.  
  155. ---------------------- end of profile row ----------------------
  156.  
  157. [/comment][/border][comment]
  158.  
  159. --------- end of profile info box ---------
  160.  
  161. [/comment][comment]
  162.  
  163. --------- start of quote + profile icon ---------
  164.  
  165. [/comment][border=0; display: flex; flex-flow: row-reverse wrap; justify-content: center; margin-top: 15px; margin-left: -15px; padding: 0; width: calc(100% + 15px);][comment]
  166.  
  167. ---------------------- start profile icon ----------------------
  168.  
  169. [/comment][border=0; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 100px;][border=0; padding: 0; width: 100%; padding-top: 100%; background: var(--img02);][/border][/border][comment]
  170.  
  171. ---------------------- end profile icon ----------------------
  172.  
  173. [/comment][comment]
  174.  
  175. ---------------------- start quote box ----------------------
  176.  
  177. [/comment][border=0; box-sizing: border-box; display: flex; justify-content: center; align-items: center; margin-left: 15px; padding: 25px; flex: 4; width: 100%; min-width: 250px; background: var(--bgsolid);][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 125%; color: var(--accent); text-align: center; font-style: italic;]Greetings, to my wishes, my future, and my incessant regrets. The dream with a fever of 38.5℃ eventually faded away.[/border][/border][comment]
  178.  
  179. ---------------------- end quote box ----------------------
  180.  
  181. [/comment][/border][comment]
  182.  
  183. --------- end of quote + profile icon ---------
  184.  
  185. [/comment][comment]
  186.  
  187. --------- start of appearance header ---------
  188.  
  189. [/comment][border=0; display: flex; flex-flow: row nowrap; margin-top: 15px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0; margin-left: 5px; padding: 3px 10px; flex: 1; width: calc(100% - 20px); max-width: 125px; background: var(--accent); font-family: var(--textfont); font-size: .7em; line-height: 100%; color: var(--headercolor); text-transform: lowercase;]APPEARANCE[/border][border=0; display: flex; align-items: center; margin-left: 5px; padding: 0; flex: 3; width: 100%;][border=0; padding: 0; width: 100%; height: 2px; background: var(--accent);][/border][/border][/border][comment]
  190.  
  191. --------- end of appearance header ---------
  192.  
  193. [/comment][comment]
  194.  
  195. --------- start of appearance box ---------
  196.  
  197. [/comment][border=0; box-sizing: border-box; margin-top: 5px; padding: 15px; background: var(--bgsolid);][comment]
  198.  
  199. ---------------------- start of appearance image ----------------------
  200.  
  201. [/comment][border=0; padding: 0; width: 100%; height: 175px; background: var(--img03);][/border][comment]
  202.  
  203. ---------------------- end of appearance image ----------------------
  204.  
  205. [/comment][comment]
  206.  
  207. ---------------------- start of basics subheader ----------------------
  208.  
  209. [/comment][border=1px solid var(--accent); display: inline-block; margin-top: 20px; padding: 2px 12px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--accent); text-align: center; text-transform: lowercase;]BASICS[/border][comment]
  210.  
  211. ---------------------- end of basics subheader ----------------------
  212.  
  213. [/comment][comment]
  214.  
  215. ---------------------- start of appearance profile row ----------------------
  216.  
  217. [/comment][border=0; display: flex; flex-flow: row wrap; margin-top: -20px; margin-left: -10px; padding: 0;][comment]
  218.  
  219. ------------------------------------------ start stat 01 ------------------------------------------
  220.  
  221. [/comment][border=0; margin-top: 30px; margin-left: 10px; padding: 0; flex: 1; width: 100%; max-width: 300px; min-width: 125px;][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase;]HEIGHT[/border][border=0; margin-top: 10px; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--textcolor); text-transform: capitalize;]#’##” | ###cm[/border][/border][comment]
  222.  
  223. ------------------------------------------ end stat 01 ------------------------------------------
  224.  
  225. [/comment][comment]
  226.  
  227. ------------------------------------------ start stat 02 ------------------------------------------
  228.  
  229. [/comment][border=0; margin-top: 30px; margin-left: 10px; padding: 0; flex: 1; width: 100%; max-width: 300px; min-width: 125px;][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase;]WEIGHT[/border][border=0; margin-top: 10px; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--textcolor); text-transform: capitalize;]###lbs | ##kg[/border][/border][comment]
  230.  
  231. ------------------------------------------ end stat 02 ------------------------------------------
  232.  
  233. [/comment][comment]
  234.  
  235. ------------------------------------------ start stat 03 ------------------------------------------
  236.  
  237. [/comment][border=0; margin-top: 30px; margin-left: 10px; padding: 0; flex: 1; width: 100%; max-width: 300px; min-width: 125px;][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase;]BLOOD TYPE[/border][border=0; margin-top: 10px; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--textcolor); text-transform: capitalize;]X[/border][/border][comment]
  238.  
  239. ------------------------------------------ end stat 03 ------------------------------------------
  240.  
  241. [/comment][comment]
  242.  
  243. ------------------------------------------ start stat 04 ------------------------------------------
  244.  
  245. [/comment][border=0; margin-top: 30px; margin-left: 10px; padding: 0; flex: 1; width: 100%; max-width: 300px; min-width: 125px;][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase;]HAIR COLOR[/border][border=0; margin-top: 10px; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--textcolor); text-transform: capitalize;]Color[/border][/border][comment]
  246.  
  247. ------------------------------------------ end stat 04 ------------------------------------------
  248.  
  249. [/comment][comment]
  250.  
  251. ------------------------------------------ start stat 05 ------------------------------------------
  252.  
  253. [/comment][border=0; margin-top: 30px; margin-left: 10px; padding: 0; flex: 1; width: 100%; max-width: 300px; min-width: 125px;][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase;]EYE COLOR[/border][border=0; margin-top: 10px; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--textcolor); text-transform: capitalize;]Color[/border][/border][comment]
  254.  
  255. ------------------------------------------ end stat 05 ------------------------------------------
  256.  
  257. [/comment][/border][comment]
  258.  
  259. ---------------------- end of appearance profile row ----------------------
  260.  
  261. [/comment][comment]
  262.  
  263. ---------------------- start of miscellaneous subheader ----------------------
  264.  
  265. [/comment][border=1px solid var(--accent); display: inline-block; margin-top: 20px; padding: 2px 12px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--accent); text-align: center; text-transform: lowercase;]MISCELLANEOUS[/border][comment]
  266.  
  267. ---------------------- end of miscellaneous subheader ----------------------
  268.  
  269. [/comment][comment]
  270.  
  271. ---------------------- start of miscellaneous description ----------------------
  272.  
  273. [/comment][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 135%; color: var(--textcolor); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer laoreet dictum massa non scelerisque. Donec mauris turpis, cursus nec lectus id, vulputate iaculis dui. Nulla quis velit imperdiet, iaculis eros vitae, sollicitudin nulla. Quisque sollicitudin risus non metus scelerisque, eget feugiat libero semper. In commodo consequat efficitur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla eu mi eget nisl tincidunt rhoncus nec eu odio. In ultricies tellus leo, vitae venenatis dui faucibus sit amet. Quisque pharetra nunc leo, eu auctor augue vestibulum id. Nam mi mauris, venenatis at mauris a, aliquet dapibus nibh.[/border][comment]
  274.  
  275. ---------------------- end of miscellaneous description ----------------------
  276.  
  277. [/comment][/border][comment]
  278.  
  279. --------- end of appearance box ---------
  280.  
  281. [/comment][comment]
  282.  
  283. --------- start of personality header ---------
  284.  
  285. [/comment][border=0; display: flex; flex-flow: row nowrap; margin-top: 15px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0; margin-left: 5px; padding: 3px 10px; flex: 1; width: calc(100% - 20px); max-width: 125px; background: var(--accent); font-family: var(--textfont); font-size: .7em; line-height: 100%; color: var(--headercolor); text-transform: lowercase;]PERSONALITY[/border][border=0; display: flex; align-items: center; margin-left: 5px; padding: 0; flex: 3; width: 100%;][border=0; padding: 0; width: 100%; height: 2px; background: var(--accent);][/border][/border][/border][comment]
  286.  
  287. --------- end of personality header ---------
  288.  
  289. [/comment][comment]
  290.  
  291. --------- start of personality box ---------
  292.  
  293. [/comment][border=0; box-sizing: border-box; margin-top: 5px; padding: 15px; background: var(--bgsolid);][comment]
  294.  
  295. ---------------------- start of personality quote ----------------------
  296.  
  297. [/comment][border=0; box-sizing: border-box; border-left: 5px solid var(--accent); margin-left: 10px; padding: 5px 15px; width: calc(100% - 10px); font-family: var(--textfont); font-size: .9em; line-height: 135%; color: var(--accent); text-align: justify; font-style: italic;]Greetings again. Your thoughts, your sorrows, and your erratic emotional way of thinking remain trapped within a 85cm radius.[/border][comment]
  298.  
  299. ---------------------- end of personality quote ----------------------
  300.  
  301. [/comment][comment]
  302.  
  303. ---------------------- start of personality description ----------------------
  304.  
  305. [/comment][border=0; margin-top: 15px; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 135%; color: var(--textcolor); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac turpis lectus. Cras feugiat ornare urna vel congue. Ut et nisl arcu. Nullam eget magna ut libero efficitur tristique sit amet ac ante. Nulla sed ex aliquet, ullamcorper arcu eu, convallis magna. Mauris hendrerit vulputate ligula, et molestie enim fringilla sed. Curabitur mi dolor, condimentum eget ipsum vitae, pretium semper augue. Nam nec magna purus.
  306.  
  307. Aliquam elit tellus, posuere non vestibulum eget, porttitor eu dui. Vestibulum et ultrices augue. Vivamus aliquet lobortis mauris, id cursus dui luctus maximus. Ut id imperdiet dui, ut pharetra metus. Proin non leo ante. Aliquam erat volutpat. Nulla laoreet metus ante, in commodo sapien pharetra id. Vivamus fermentum, nisi at iaculis blandit, tortor nibh bibendum ipsum, a faucibus dolor massa et neque. Curabitur tempor ex justo, non varius erat gravida eget. Sed condimentum ipsum purus, id ultricies velit semper in. Etiam condimentum, odio eget imperdiet iaculis, leo mi tristique sem, et tempor metus turpis sed libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit eu ligula quis condimentum. Aenean viverra maximus vestibulum. Suspendisse sit amet est quis justo rutrum euismod eleifend sit amet arcu. Vestibulum justo tortor, efficitur non ante ut, mollis dapibus risus.
  308.  
  309. Quisque vel leo vel diam posuere maximus at vel dui. Sed luctus, nulla sed laoreet sagittis, urna ante bibendum libero, eu tempus enim erat id metus. Proin odio quam, dapibus non posuere hendrerit, mollis at ante. Nunc tincidunt faucibus augue eget elementum. Donec finibus vestibulum convallis. Mauris in efficitur est. Proin sed dui tempor, consectetur nunc non, mollis lacus. Mauris lobortis pellentesque pretium. Proin id posuere mauris. Pellentesque a bibendum nisi, consectetur tincidunt lorem. Cras tortor lorem, porta sit amet porta ac, ultricies in dolor.[/border][comment]
  310.  
  311. ---------------------- end of personality description ----------------------
  312.  
  313. [/comment][/border][comment]
  314.  
  315. --------- end of personality box ---------
  316.  
  317. [/comment][/border][/border][comment]
  318.  
  319. // end of content box //
  320.  
  321. [/comment][/border][/tab]
  322.  
  323.  
  324.  
  325.  
  326.  
  327. [tab=02020202020202020202020202020202020202020202020202020202020202020202020202020202020202][border=0; display: flex; flex-flow: row wrap; justify-content: center; top: -22px; right: 0; left: 0; padding: 0; position: absolute; z-index: 3; pointer-events: none;][border=0; padding: 0; flex: 1; max-width: 500px; min-width: 250px; height: 70vh; max-height: 600px; min-height: 300px; position: relative;][border=0; padding: 0; width: calc(100% - 100px); height: 150px; pointer-events: auto;][/border][/border][comment]
  328.  
  329. // start of content box //
  330.  
  331. [/comment][border=0; box-sizing: border-box; padding: 25px; flex: 3; max-width: 600px; min-width: 250px; height:70vh; max-height: 600px; min-height: 300px; position: relative; pointer-events: auto; overflow: hidden;][border=0; padding: 0 40px 0 0; width: calc(100% + 10px); height: calc(70vh - 50px); max-height: 550px; min-height: 250px; overflow-y: scroll;][comment]
  332.  
  333. --------- start of backstory header ---------
  334.  
  335. [/comment][border=0; display: flex; flex-flow: row nowrap; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0; margin-left: 5px; padding: 3px 10px; flex: 1; width: calc(100% - 20px); max-width: 125px; background: var(--accent); font-family: var(--textfont); font-size: .7em; line-height: 100%; color: var(--headercolor); text-transform: lowercase;]BACKSTORY[/border][border=0; display: flex; align-items: center; margin-left: 5px; padding: 0; flex: 3; width: 100%;][border=0; padding: 0; width: 100%; height: 2px; background: var(--accent);][/border][/border][/border][comment]
  336.  
  337. --------- end of backstory header ---------
  338.  
  339. [/comment][comment]
  340.  
  341. --------- start of backstory box ---------
  342.  
  343. [/comment][border=0; box-sizing: border-box; margin-top: 5px; padding: 15px; background: var(--bgsolid);][comment]
  344.  
  345. ---------------------- start of backstory image ----------------------
  346.  
  347. [/comment][border=0; padding: 0; width: 100%; height: 175px; background: var(--img04);][/border][comment]
  348.  
  349. ---------------------- end of backstory image ----------------------
  350.  
  351. [/comment][comment]
  352.  
  353. ---------------------- start of backstory quote ----------------------
  354.  
  355. [/comment][border=0; box-sizing: border-box; border-left: 5px solid var(--accent); margin-top: 15px; margin-left: 10px; padding: 5px 15px; width: calc(100% - 10px); font-family: var(--textfont); font-size: .9em; line-height: 135%; color: var(--accent); text-align: justify; font-style: italic;]Everything that overflowed from today, where we fractured our true feelings, will be lit with firewood, carried by the wind, and color the rusty sky.[/border][comment]
  356.  
  357. ---------------------- end of backstory quote ----------------------
  358.  
  359. [/comment][comment]
  360.  
  361. ---------------------- start of backstory description ----------------------
  362.  
  363. [/comment][border=0; margin-top: 15px; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 135%; color: var(--textcolor); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero lacus, dapibus in faucibus at, tristique sit amet elit. Maecenas euismod neque ac elit elementum faucibus. Quisque sit amet pharetra velit. Ut sit amet placerat urna, ac cursus dui. Nulla mollis eget arcu at sagittis. Pellentesque turpis sem, lobortis imperdiet euismod sed, vehicula eu elit. Proin at ultricies orci. Quisque ut mollis nisi, et blandit nulla. Donec dictum erat vel massa tincidunt, a maximus mi lacinia. Cras scelerisque egestas augue ut cursus. Sed condimentum nunc fringilla elit imperdiet, at dictum ligula tincidunt.
  364.  
  365. Integer ac velit erat. Praesent a augue neque. Suspendisse eu gravida quam. Mauris ornare dignissim mauris, at lacinia ante molestie a. Vivamus convallis id turpis nec posuere. Mauris malesuada lobortis leo. Etiam eu urna vitae dui aliquam luctus quis id mi.
  366.  
  367. Integer sem massa, cursus et augue sit amet, feugiat commodo dolor. Integer rutrum lorem in justo ullamcorper consequat. Vestibulum volutpat odio risus, non interdum lorem dapibus et. In vulputate massa nisi. Duis pellentesque bibendum ullamcorper. Proin et finibus justo, ac posuere elit. Proin dignissim ut nulla et vulputate. Ut tellus risus, feugiat quis scelerisque sed, fringilla non quam. Ut fringilla erat vitae consequat imperdiet. Vivamus luctus viverra neque nec lacinia. Curabitur aliquet nulla in augue convallis volutpat. Aliquam massa justo, porttitor lacinia condimentum in, maximus vitae enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin convallis rutrum dui sit amet egestas. Nunc bibendum erat sit amet lacus lobortis pretium. Duis urna leo, ultricies eget finibus ac, ullamcorper a metus.
  368.  
  369. Etiam dapibus ut diam sed vehicula. Praesent orci turpis, hendrerit vel ultrices eget, egestas non nisi. Nunc ac ipsum odio. Proin imperdiet est eget risus vestibulum, id aliquet tortor imperdiet. Etiam pretium ligula ac viverra imperdiet. Phasellus pretium ullamcorper felis, ac venenatis nibh maximus ut. Etiam iaculis semper dui, sit amet ullamcorper eros semper a.
  370.  
  371. Nam ut vehicula orci. Sed nunc purus, ultrices id placerat at, bibendum a purus. Integer pulvinar lorem non erat sollicitudin pulvinar. Curabitur orci enim, consequat ac ultrices in, vestibulum at nisl. Praesent vitae nulla sed magna lacinia viverra. Aliquam magna dolor, tempus vitae urna non, iaculis blandit ipsum. Morbi orci turpis, dictum eu sapien et, fermentum eleifend ex. Integer tempus at tellus vitae pretium.[/border][comment]
  372.  
  373. ---------------------- end of backstory description ----------------------
  374.  
  375. [/comment][/border][comment]
  376.  
  377. --------- end of backstory box ---------
  378.  
  379. [/comment][comment]
  380.  
  381. --------- start of relationships header ---------
  382.  
  383. [/comment][border=0; display: flex; flex-flow: row nowrap; margin-top: 15px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0; margin-left: 5px; padding: 3px 10px; flex: 1; width: calc(100% - 20px); max-width: 125px; background: var(--accent); font-family: var(--textfont); font-size: .7em; line-height: 100%; color: var(--headercolor); text-transform: lowercase;]RELATIONSHIPS[/border][border=0; display: flex; align-items: center; margin-left: 5px; padding: 0; flex: 3; width: 100%;][border=0; padding: 0; width: 100%; height: 2px; background: var(--accent);][/border][/border][/border][comment]
  384.  
  385. --------- end of relationships header ---------
  386.  
  387. [/comment][comment]
  388.  
  389. --------- start of relationship box ---------
  390.  
  391. [/comment][border=0; box-sizing: border-box; margin-top: 5px; padding: 15px; background: var(--bgsolid);][comment]
  392.  
  393. ---------------------- start of relationship#1 subheader // name here ----------------------
  394.  
  395. [/comment][border=1px solid var(--accent); display: inline-block; padding: 2px 12px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--accent); text-align: center; text-transform: lowercase;]Name#1[/border][comment]
  396.  
  397. ---------------------- end of relationship#1 subheader // name here ----------------------
  398.  
  399. [/comment][comment]
  400.  
  401. ---------------------- start of relationship #1 description ----------------------
  402.  
  403. [/comment][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 135%; color: var(--textcolor); text-align: justify;][i]Relationship[/i]
  404.  
  405. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus lobortis cursus. Nulla a porta orci. Curabitur accumsan magna vel erat ornare facilisis. Suspendisse ac quam in risus accumsan maximus. Fusce eget dictum velit. Donec imperdiet lobortis egestas. Aliquam maximus ante enim, et auctor eros luctus non.[/border][comment]
  406.  
  407. ---------------------- end of relationship #1 description ----------------------
  408.  
  409. [/comment][comment]
  410.  
  411. ---------------------- start of relationship#2 subheader // name here ----------------------
  412.  
  413. [/comment][border=1px solid var(--accent); display: inline-block; margin-top: 15px; padding: 2px 12px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--accent); text-align: center; text-transform: lowercase;]Name#2[/border][comment]
  414.  
  415. ---------------------- end of relationship#2 subheader // name here ----------------------
  416.  
  417. [/comment][comment]
  418.  
  419. ---------------------- start of relationship #2 description ----------------------
  420.  
  421. [/comment][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 135%; color: var(--textcolor); text-align: justify;][i]Relationship[/i]
  422.  
  423. Sed facilisis sed lectus eu egestas. Donec sed tempus nulla, lacinia placerat eros. Ut hendrerit porta felis, vitae suscipit mi pretium in. Pellentesque eget sapien vitae tortor tincidunt auctor scelerisque sed leo. Vestibulum ac nibh varius, rutrum nulla at, vehicula sem.[/border][comment]
  424.  
  425. ---------------------- end of relationship #2 description ----------------------
  426.  
  427. [/comment][/border][comment]
  428.  
  429. --------- end of personality box ---------
  430.  
  431. [/comment][/border][/border][comment]
  432.  
  433. // end of content box //
  434.  
  435. [/comment][/border][/tab]
  436.  
  437.  
  438.  
  439.  
  440.  
  441. [tab=03030303030303030303030303030303030303030303030303030303030303030303030303030303030303][border=0; display: flex; flex-flow: row wrap; justify-content: center; top: -22px; right: 0; left: 0; padding: 0; position: absolute; z-index: 3; pointer-events: none;][border=0; padding: 0; flex: 1; max-width: 500px; min-width: 250px; height: 70vh; max-height: 600px; min-height: 300px; position: relative;][border=0; padding: 0; width: calc(100% - 100px); height: 150px; pointer-events: auto;][/border][/border][comment]
  442.  
  443. // start of content box //
  444.  
  445. [/comment][border=0; box-sizing: border-box; padding: 25px; flex: 3; max-width: 600px; min-width: 250px; height:70vh; max-height: 600px; min-height: 300px; position: relative; pointer-events: auto; overflow: hidden;][border=0; padding: 0 40px 0 0; width: calc(100% + 10px); height: calc(70vh - 50px); max-height: 550px; min-height: 250px; overflow-y: scroll;][comment]
  446.  
  447. --------- start of extras header ---------
  448.  
  449. [/comment][border=0; display: flex; flex-flow: row nowrap; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0; margin-left: 5px; padding: 3px 10px; flex: 1; width: calc(100% - 20px); max-width: 125px; background: var(--accent); font-family: var(--textfont); font-size: .7em; line-height: 100%; color: var(--headercolor); text-transform: lowercase;]EXTRAS[/border][border=0; display: flex; align-items: center; margin-left: 5px; padding: 0; flex: 3; width: 100%;][border=0; padding: 0; width: 100%; height: 2px; background: var(--accent);][/border][/border][/border][comment]
  450.  
  451. --------- end of extras header ---------
  452.  
  453. [/comment][comment]
  454.  
  455. --------- start of extras box ---------
  456.  
  457. [/comment][border=0; box-sizing: border-box; margin-top: 5px; padding: 15px; background: var(--bgsolid);][comment]
  458.  
  459. ---------------------- start of extras quote ----------------------
  460.  
  461. [/comment][border=0; box-sizing: border-box; border-left: 5px solid var(--accent); margin-left: 10px; padding: 5px 15px; width: calc(100% - 10px); font-family: var(--textfont); font-size: .9em; line-height: 135%; color: var(--accent); text-align: justify; font-style: italic;]Under the monochromatic exhaustion after hardship, the seasons lost their color, took on the heat, festered dully, and spilled down into the worn-out town.[/border][comment]
  462.  
  463. ---------------------- end of extras quote ----------------------
  464.  
  465. [/comment][comment]
  466.  
  467. ---------------------- start of note#1 subheader // title here ----------------------
  468.  
  469. [/comment][border=1px solid var(--accent); display: inline-block; margin-top: 15px; padding: 2px 12px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--accent); text-align: center; text-transform: lowercase;]Likes[/border][comment]
  470.  
  471. ---------------------- end of note#1 subheader // title here ----------------------
  472.  
  473. [/comment][comment]
  474.  
  475. ---------------------- start of note#1 description ----------------------
  476.  
  477. [/comment][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 135%; color: var(--textcolor); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis nisl diam, lacinia porta sem tristique vel. Duis erat elit, fermentum et nisl sit amet, pulvinar gravida mi.[/border][comment]
  478.  
  479. ---------------------- end of note#1 description ----------------------
  480.  
  481. [/comment][comment]
  482.  
  483. ---------------------- start of note#2 subheader // title here ----------------------
  484.  
  485. [/comment][border=1px solid var(--accent); display: inline-block; margin-top: 15px; padding: 2px 12px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--accent); text-align: center; text-transform: lowercase;]Dislikes[/border][comment]
  486.  
  487. ---------------------- end of note#2 subheader // title here ----------------------
  488.  
  489. [/comment][comment]
  490.  
  491. ---------------------- start of note#2 description ----------------------
  492.  
  493. [/comment][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 135%; color: var(--textcolor); text-align: justify;]Praesent aliquam ultricies elit non sollicitudin. In quis fermentum metus. Donec ut dolor eget metus posuere volutpat. Integer eget pharetra mauris.[/border][comment]
  494.  
  495. ---------------------- end of note#2 description ----------------------
  496.  
  497. [/comment][comment]
  498.  
  499. ---------------------- start of note#3 subheader // title here ----------------------
  500.  
  501. [/comment][border=1px solid var(--accent); display: inline-block; margin-top: 15px; padding: 2px 12px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--accent); text-align: center; text-transform: lowercase;]Note#3[/border][comment]
  502.  
  503. ---------------------- end of note#3 subheader // title here ----------------------
  504.  
  505. [/comment][comment]
  506.  
  507. ---------------------- start of note#3 description ----------------------
  508.  
  509. [/comment][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 135%; color: var(--textcolor); text-align: justify;]Mauris ac tempus orci. Nam suscipit sit amet diam ac mollis. Praesent eu lobortis leo. Donec quis enim id lacus convallis tincidunt quis vel nisi. Aenean fringilla tortor non justo facilisis, vel interdum augue malesuada. Cras diam lectus, sodales a enim et, iaculis aliquam turpis.[/border][comment]
  510.  
  511. ---------------------- end of note#3 description ----------------------
  512.  
  513. [/comment][comment]
  514.  
  515. ---------------------- start of note#4 subheader // title here ----------------------
  516.  
  517. [/comment][border=1px solid var(--accent); display: inline-block; margin-top: 15px; padding: 2px 12px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--accent); text-align: center; text-transform: lowercase;]Note#4[/border][comment]
  518.  
  519. ---------------------- end of note#4 subheader // title here ----------------------
  520.  
  521. [/comment][comment]
  522.  
  523. ---------------------- start of note#4 description ----------------------
  524.  
  525. [/comment][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 135%; color: var(--textcolor); text-align: justify;]Nam sit amet lorem aliquet, vulputate nulla efficitur, tempus neque. Nullam sagittis risus sit amet suscipit lacinia. Vestibulum tortor neque, varius et posuere eu, luctus sed lacus.[/border][comment]
  526.  
  527. ---------------------- end of note#4 description ----------------------
  528.  
  529. [/comment][comment]
  530.  
  531. ---------------------- start of note#5 subheader // title here ----------------------
  532.  
  533. [/comment][border=1px solid var(--accent); display: inline-block; margin-top: 15px; padding: 2px 12px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--accent); text-align: center; text-transform: lowercase;]Note#5[/border][comment]
  534.  
  535. ---------------------- end of note#5 subheader // title here ----------------------
  536.  
  537. [/comment][comment]
  538.  
  539. ---------------------- start of note#5 description ----------------------
  540.  
  541. [/comment][border=0; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 135%; color: var(--textcolor); text-align: justify;]Vestibulum vitae urna quis metus tristique placerat. Cras non feugiat nisi. Mauris mattis sollicitudin lorem sit amet vestibulum. Sed dictum eleifend lacinia.[/border][comment]
  542.  
  543. ---------------------- end of note#5 description ----------------------
  544.  
  545. [/comment][/border][comment]
  546.  
  547. --------- end of extras box ---------
  548.  
  549. [/comment][/border][/border][comment]
  550.  
  551. // end of content box //
  552.  
  553. [/comment][/border][/tab]
  554.  
  555.  
  556.  
  557.  
  558.  
  559. [/tabs][/border][comment]
  560.  
  561. // end of tabs //
  562.  
  563. [/comment][comment]
  564.  
  565. // visible credit -- please don't remove!!! //
  566.  
  567. [/comment][border=0px; margin: 5px auto 0; padding: 0; width: 100%; max-width: 1000px; height: 0; font-size: .6em; text-align: center; color: var(--textcolor); text-transform: uppercase; opacity: .7;]code by Nano[comment][USER=20950]@Nano[/USER][/comment][/border][comment]
  568.  
  569. // end of visible credit //
  570.  
  571. [/comment][/border]
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!