API tools faq
paste
Advertisement
mochiroll

One_Day.Code

mochiroll
Jul 28th, 2021 (edited)
309
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 50.37 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=Oswald].[/font]
  6. [font=Exo 2].[/font]
  7.  
  8. [/comment][comment]
  9.  
  10. // accents
  11.  
  12. [/comment][border=0; padding: 0;
  13. --accent: #fecb00;
  14. --offwhite: #eeeeee;
  15. --black: #222222;
  16. --bgcolor: rgba(34, 34, 34, .9);
  17.  
  18. --headerfont: 'Oswald', sans-serif;
  19. --textfont: 'Exo 2', sans-serif;
  20.  
  21. --profileicon: url('https://i.imgur.com/NysD3n6.jpg') center/cover no-repeat;
  22. --bgimage: url('https://i.imgur.com/Az4RQ8V.png') center/cover no-repeat;
  23. --historyimage: url('https://i.imgur.com/TZljBXc.png') top center/cover no-repeat;
  24.  
  25. --rsquoteicon: url('https://i.imgur.com/adnXblJ.png') center/cover no-repeat;
  26. --relationship01img: url('https://i.imgur.com/5sR5ab5.png') center/cover no-repeat;
  27. --relationship01color: #748ea4;
  28. --relationship02img: url('https://i.imgur.com/QXquQ9w.png') center/cover no-repeat;
  29. --relationship02color: #60986e;
  30. --relationship03img: url('https://i.imgur.com/cdwoVMq.png') center/cover no-repeat;
  31. --relationship03color: #972424;
  32.  
  33. border=0;
  34. display: flex;
  35. flex-flow: row nowrap;
  36. margin: 75px auto 0;
  37. padding: 0;
  38. width: 100%;
  39. max-width: 1000px;
  40. min-width: 300px;
  41. height: 70vh;
  42. max-height: 600px;
  43. min-height: 400px;
  44. font-size: initial;
  45. overflow: hidden;
  46. position: relative;][comment]
  47.  
  48. --------- start of left side --------->
  49.  
  50. [/comment][border=0; padding: 0; max-width: 50px; min-width: 50px; height: 70vh; max-height: 600px; min-height: 400px; background: var(--offwhite); font-size: 20px; line-height: 100%; color: var(--accent); text-align: center; position: relative; z-index: 1; pointer-events: none;][comment]
  51.  
  52. ------------------ start of tab icons ------------------>
  53.  
  54. [/comment][comment]
  55.  
  56. // tab icon 01 - basic information //
  57.  
  58. [/comment][border=0; margin-top: 20px; padding: 0;][fa]fas fa-power-off[/fa][/border][comment]
  59.  
  60. // tab icon 02 - backstory //
  61.  
  62. [/comment][border=0; margin-top: 20px; padding: 0;][fa]fas fa-exclamation-triangle[/fa][/border][comment]
  63.  
  64. // tab icon 03 - relationships //
  65.  
  66. [/comment][border=0; margin-top: 20px; padding: 0;][fa]fas fa-seedling[/fa][/border][comment]
  67.  
  68. // tab icon 04 - combat data //
  69.  
  70. [/comment][border=0; margin-top: 20px; padding: 0; font-size: 23px;][fa]fab fa-superpowers[/fa][/border][comment]
  71.  
  72. // tab icon 05 - extra+notes //
  73.  
  74. [/comment][border=0; margin-top: 20px; padding: 0; font-size: 22px;][fa]far fa-star[/fa][/border][comment]
  75.  
  76. <------------------ end of tab icons ------------------
  77.  
  78. [/comment][/border][comment]
  79.  
  80. <--------- end of left side ---------
  81.  
  82. --------- start of right side --------->
  83.  
  84. [/comment][border=0; padding: 0; width: 100%; height: 70vh; max-height: 600px; min-height: 400px; position: relative;][comment]
  85.  
  86. ------------------ start of right side background ------------------>
  87.  
  88. [/comment][border=0; padding: 0; width: 100%; height: 70vh; max-height: 600px; min-height: 400px; background: linear-gradient(var(--bgcolor), var(--bgcolor)), var(--bgimage); position: absolute; z-index: 1;][/border][comment]
  89.  
  90. <------------------ end of right side background ------------------
  91.  
  92. ------------------ start of tabs ------------------>
  93.  
  94. [/comment][border=0; padding: 0; width: 100%; line-height: 36px; position: absolute; left: -70px; top: 14px;][tabs]
  95.  
  96.  
  97.  
  98.  
  99.  
  100. [tab=010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101][border=0; display: flex; flex-flow: row wrap; justify-content: center; margin-left: -15px; padding: 15px 30px 15px 15px; width: calc(100% - 2px); height: 70vh; max-height: 600px; min-height: 400px; position: absolute; z-index: 2; top: -14px; left: 70px; overflow-y: scroll; font-size: initial; line-height: initial;][comment]
  101.  
  102. --------------------------- start of tab01 left --------------------------->
  103.  
  104. [/comment][border=0; margin-left: 15px; margin-bottom: 30px; padding: 0; flex: 1; width: 100%; max-width: 300px; min-width: 250px; height: calc(70vh - 30px); max-height: 570px; min-height: 370px; overflow: hidden;][border=0; padding: 0 30px 0 0; width: 100%; height: calc(70vh - 30px); max-height: 570px; min-height: 370px; overflow-y: scroll;][comment]
  105.  
  106. ------------------------------------ start of proficon ------------------------------------>
  107.  
  108. [/comment][border=0; box-sizing: border-box; padding: 10px; width: 100%; position: relative;][comment]
  109.  
  110. // corner accents //
  111.  
  112. [/comment][border=0; padding: 0; width: 50px; height: 50px; background: var(--accent); position: absolute; top: 0; left: 0;][/border][border=0; padding: 0; width: 50px; height: 50px; background: var(--accent); position: absolute; bottom: 0; right: 0;][/border][comment]
  113.  
  114. --------------------------------------------- start of profile image --------------------------------------------->
  115.  
  116. [/comment][border=0; margin: 0 auto; padding: 100% 0 0 0; width: 100%; background: var(--profileicon); position: relative;][comment]
  117.  
  118. // artist credit here v v v //
  119.  
  120. [/comment][border=0; font-family: var(--textfont); font-size: .7em; line-height: 100%; color: var(--offwhite); text-transform: uppercase; position: absolute; bottom: 0; left: 0;]Art: Myoukaku Banji[/border][/border][comment]
  121.  
  122. <--------------------------------------------- end of profile image ---------------------------------------------
  123.  
  124. [/comment][/border][comment]
  125.  
  126. <------------------------------------ end of proficon ------------------------------------
  127.  
  128. ------------------------------------ start of profile data ------------------------------------>
  129.  
  130. [/comment][border=0; margin-top: 25px; padding: 0; font-size: initial;][comment]
  131.  
  132. --------------------------------------------- start of profile header --------------------------------------------->
  133.  
  134. [/comment][border=0; display: inline-block; border-bottom: 1px solid var(--accent); padding: 0 5px; font-family: var(--textfont); font-size: 1em; color: var(--accent); text-transform: uppercase; font-style: italic; position: relative; z-index: 3;]PROFILE[/border][border=0; margin-top: -2px; padding: 0; width: 100%; height: 1px; background: var(--offwhite);][/border][comment]
  135.  
  136. <--------------------------------------------- end of profile header ---------------------------------------------
  137.  
  138. --------------------------------------------- start of basic information --------------------------------------------->
  139.  
  140. [/comment][border=0; margin-top: 20px; padding: 0; width: 100%; font-family: var(--textfont); font-size: .8em; line-height: 110%; font-style: italic;][comment]
  141.  
  142. ------------------------------------------------------ start of info 01 ------------------------------------------------------>
  143.  
  144. [/comment][border=0; display: flex; flex-flow: row wrap; margin-top: 13px; margin-left: -5px; padding: 0 5px; width: calc(100% - 5px);][border=0; margin-left: 5px; padding: 0; flex: 1; min-width: 100px; color: var(--accent); text-transform: uppercase; text-align: left;]NAME...[/border][border=0; margin-left: 5px; padding: 0; flex: 2; min-width: 100px; color: var(--offwhite); text-transform: capitalize; text-align: right;]Surname, Given[/border][/border][comment]
  145.  
  146. <------------------------------------------------------ end of info 01 ------------------------------------------------------
  147.  
  148. ------------------------------------------------------ start of info 02 ------------------------------------------------------>
  149.  
  150. [/comment][border=0; display: flex; flex-flow: row wrap; margin-top: 13px; margin-left: -5px; padding: 0 5px; width: calc(100% - 5px);][border=0; margin-left: 5px; padding: 0; flex: 1; min-width: 100px; color: var(--accent); text-transform: uppercase; text-align: left;]CODE NAME...[/border][border=0; margin-left: 5px; padding: 0; flex: 2; min-width: 100px; color: var(--offwhite); text-transform: capitalize; text-align: right;]Nickname/Alias[/border][/border][comment]
  151.  
  152. <------------------------------------------------------ end of info 02 ------------------------------------------------------
  153.  
  154. ------------------------------------------------------ start of info 03 ------------------------------------------------------>
  155.  
  156. [/comment][border=0; display: flex; flex-flow: row wrap; margin-top: 13px; margin-left: -5px; padding: 0 5px; width: calc(100% - 5px);][border=0; margin-left: 5px; padding: 0; flex: 1; min-width: 100px; color: var(--accent); text-transform: uppercase; text-align: left;]GENDER...[/border][border=0; margin-left: 5px; padding: 0; flex: 2; min-width: 100px; color: var(--offwhite); text-transform: capitalize; text-align: right;]Gender[/border][/border][comment]
  157.  
  158. <------------------------------------------------------ end of info 03 ------------------------------------------------------
  159.  
  160. ------------------------------------------------------ start of info 04 ------------------------------------------------------>
  161.  
  162. [/comment][border=0; display: flex; flex-flow: row wrap; margin-top: 13px; margin-left: -5px; padding: 0 5px; width: calc(100% - 5px);][border=0; margin-left: 5px; padding: 0; flex: 1; min-width: 100px; color: var(--accent); text-transform: uppercase; text-align: left;]AGE...[/border][border=0; margin-left: 5px; padding: 0; flex: 2; min-width: 100px; color: var(--offwhite); text-transform: capitalize; text-align: right;]Age (##)[/border][/border][comment]
  163.  
  164. <------------------------------------------------------ end of info 04 ------------------------------------------------------
  165.  
  166. ------------------------------------------------------ start of info 05 ------------------------------------------------------>
  167.  
  168. [/comment][border=0; display: flex; flex-flow: row wrap; margin-top: 13px; margin-left: -5px; padding: 0 5px; width: calc(100% - 5px);][border=0; margin-left: 5px; padding: 0; flex: 1; min-width: 100px; color: var(--accent); text-transform: uppercase; text-align: left;]DATE OF BIRTH...[/border][border=0; margin-left: 5px; padding: 0; flex: 2; min-width: 100px; color: var(--offwhite); text-transform: capitalize; text-align: right;]Month #[/border][/border][comment]
  169.  
  170. <------------------------------------------------------ end of info 05 ------------------------------------------------------
  171.  
  172. ------------------------------------------------------ start of info 06 ------------------------------------------------------>
  173.  
  174. [/comment][border=0; display: flex; flex-flow: row wrap; margin-top: 13px; margin-left: -5px; padding: 0 5px; width: calc(100% - 5px);][border=0; margin-left: 5px; padding: 0; flex: 1; min-width: 100px; color: var(--accent); text-transform: uppercase; text-align: left;]RACE...[/border][border=0; margin-left: 5px; padding: 0; flex: 2; min-width: 100px; color: var(--offwhite); text-transform: capitalize; text-align: right;]Species[/border][/border][comment]
  175.  
  176. <------------------------------------------------------ end of info 06 ------------------------------------------------------
  177.  
  178. ------------------------------------------------------ start of info 07 ------------------------------------------------------>
  179.  
  180. [/comment][border=0; display: flex; flex-flow: row wrap; margin-top: 13px; margin-left: -5px; padding: 0 5px; width: calc(100% - 5px);][border=0; margin-left: 5px; padding: 0; flex: 1; min-width: 100px; color: var(--accent); text-transform: uppercase; text-align: left;]RANK...[/border][border=0; margin-left: 5px; padding: 0; flex: 2; min-width: 100px; color: var(--offwhite); text-transform: capitalize; text-align: right;]#[/border][/border][comment]
  181.  
  182. <------------------------------------------------------ end of info 07 ------------------------------------------------------
  183.  
  184. ------------------------------------------------------ start of info 08 ------------------------------------------------------>
  185.  
  186. [/comment][border=0; display: flex; flex-flow: row wrap; margin-top: 13px; margin-left: -5px; padding: 0 5px; width: calc(100% - 5px);][border=0; margin-left: 5px; padding: 0; flex: 1; min-width: 100px; color: var(--accent); text-transform: uppercase; text-align: left;]SQUAD...[/border][border=0; margin-left: 5px; padding: 0; flex: 2; min-width: 100px; color: var(--offwhite); text-transform: capitalize; text-align: right;]Name[/border][/border][comment]
  187.  
  188. <------------------------------------------------------ end of info 08 ------------------------------------------------------
  189.  
  190. [/comment][/border][comment]
  191.  
  192. <--------------------------------------------- end of basic information ---------------------------------------------
  193.  
  194. [/comment][/border][comment]
  195.  
  196. <------------------------------------ end of profile data ------------------------------------
  197.  
  198. [/comment][/border][/border][comment]
  199.  
  200. <--------------------------- end of tab01 left ---------------------------
  201.  
  202.  
  203. --------------------------- start of tab01 right --------------------------->
  204.  
  205. [/comment][border=0; margin: 10px 0 30px 15px; padding: 0; flex: 3; width: 100%; max-width: 700px; min-width: 250px; height: calc(70vh - 40px); max-height: 560px; min-height: 350px; overflow: hidden;][border=0; padding: 0 30px 0 0; width: 100%; height: calc(70vh - 40px); max-height: 560px; min-height: 360px; overflow-y: scroll;][comment]
  206.  
  207. ------------------------------------ start of header ------------------------------------>
  208.  
  209. [/comment][border=0; display: flex; flex-flow: row nowrap; margin-left: -10px; margin-bottom: 12px; padding: 0; width: calc(100% + 10px);][border=0; display: inline-block; margin-left: 10px; padding: 0; font-family: var(--headerfont); font-size: 1.8em; line-height: 100%; color: var(--accent); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;]Appearance[/border][border=0; margin-top: 2px; margin-left: 10px; padding: 0; font-family: var(--textfont); font-size: .7em; line-height: 120%; color: var(--offwhite); font-style: italic; text-align: justify;]Our laughter disappeared from the city, and with a tired looking face, I blamed it on someone else to settle my heart, but it’s still murky.[/border][/border][border=0; margin: 0 auto; padding: 0; width: calc(100% - 10px); height: 1px; background: var(--accent);][/border][comment]
  210.  
  211. <------------------------------------ end of header ------------------------------------
  212.  
  213. ------------------------------------ start of body text ------------------------------------>
  214.  
  215. [/comment][border=0; margin-top: 12px; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 140%; color: var(--offwhite); text-align: justify;][border=0; display: inline; padding: 0; color: var(--accent);]height:[/border] #’##” (###cm)
  216. [border=0; display: inline; padding: 0; color: var(--accent);]hair color:[/border] value
  217. [border=0; display: inline; padding: 0; color: var(--accent);]eye color:[/border] value
  218.  
  219. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lorem lacus, fermentum ac dapibus vel, tristique in ante. Donec ac iaculis lorem. Donec mauris turpis, hendrerit ac iaculis sagittis, convallis vitae orci. Phasellus in malesuada est. Integer sit amet erat eu massa sagittis pellentesque. Sed dignissim molestie nibh quis hendrerit. Vestibulum sit amet velit pharetra massa consequat condimentum. Vivamus et cursus justo. Sed id sollicitudin lectus. Integer vehicula in odio sed elementum. Morbi commodo, libero et luctus maximus, odio lorem porta ex, et efficitur orci velit at libero. Praesent ullamcorper sapien mi. Proin eu diam at massa mattis tempor. Donec sit amet eros pretium, eleifend leo non, efficitur purus. Pellentesque ante purus, bibendum sed dui sit amet, mattis suscipit velit.[/border][comment]
  220.  
  221. <------------------------------------ end of body text ------------------------------------
  222.  
  223. [/comment][comment]
  224.  
  225. // divider //
  226.  
  227. [/comment][border=0; margin: 40px 0; padding: 0; color: var(--accent); font-size: 1em; text-align: center;]⬩ ⬥ ❖ ⬥ ⬩[/border][comment]
  228.  
  229. ------------------------------------ start of header ------------------------------------>
  230.  
  231. [/comment][border=0; display: flex; flex-flow: row nowrap; margin-left: -10px; margin-bottom: 12px; padding: 0; width: calc(100% + 10px);][border=0; display: inline-block; margin-left: 10px; padding: 0; font-family: var(--headerfont); font-size: 1.8em; line-height: 100%; color: var(--accent); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;]Personality[/border][border=0; margin-top: 2px; margin-left: 10px; padding: 0; font-family: var(--textfont); font-size: .7em; line-height: 120%; color: var(--offwhite); font-style: italic; text-align: justify;]Bodies and words should be for understanding each other but they’re used to probe one another, wearing each other down.[/border][/border][border=0; margin: 0 auto; padding: 0; width: calc(100% - 10px); height: 1px; background: var(--accent);][/border][comment]
  232.  
  233. <------------------------------------ end of header ------------------------------------
  234.  
  235. ------------------------------------ start of body text ------------------------------------>
  236.  
  237. [/comment][border=0; margin-top: 12px; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 140%; color: var(--offwhite); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac sem et nulla blandit iaculis. Nunc elementum placerat ligula, nec ultrices nibh tempor at. Maecenas vehicula molestie placerat. Pellentesque auctor enim eget pretium vestibulum. Nullam ac viverra neque, at condimentum orci. Vivamus eleifend ante eget tristique dignissim. Proin vitae augue lobortis orci convallis blandit sed sed odio. Pellentesque sed aliquet lorem. Integer eu aliquet neque. Mauris eu eros in turpis lacinia iaculis. Nullam eu maximus lectus. Aenean dignissim urna enim, id hendrerit ante consequat eu. Mauris sed gravida ipsum, eu venenatis turpis. Maecenas iaculis ac ligula sit amet tempor. Duis iaculis, purus ut tempus finibus, libero quam vehicula orci, a mattis enim lorem eu leo.
  238.  
  239. Etiam in lectus quis magna placerat tincidunt vitae ut augue. Vestibulum eget gravida dui, feugiat rhoncus nunc. Integer scelerisque eros tortor, nec tempus risus porta nec. Sed laoreet tristique orci id posuere. Mauris at pretium enim, nec dictum nulla. Donec non suscipit arcu. Nullam at auctor neque. Integer hendrerit placerat odio eget vehicula. Duis lobortis fringilla metus vitae ullamcorper. Curabitur vehicula magna nulla, in porta arcu dapibus eu. Aenean mauris enim, dapibus sit amet sapien hendrerit, tempus porta tortor. Proin et ornare justo, venenatis porttitor orci. Integer scelerisque eget elit vel lobortis.
  240.  
  241. Morbi mattis nisi ut felis vestibulum, sit amet bibendum diam imperdiet. Pellentesque eu scelerisque libero, in mattis nisi. Pellentesque dictum velit quis turpis efficitur, nec lacinia purus mattis. Duis porttitor malesuada nibh, id eleifend est placerat sit amet. Mauris velit dolor, euismod ut lectus in, cursus pellentesque nisi. Nulla facilisi. Nunc eget ligula pellentesque, ullamcorper mauris dictum, consectetur nunc. Mauris lectus tellus, feugiat nec mi at, pretium venenatis massa.[/border][comment]
  242.  
  243. <------------------------------------ end of body text ------------------------------------
  244.  
  245. [/comment][/border][/border][comment]
  246.  
  247. <--------------------------- end of tab01 right ---------------------------
  248.  
  249. [/comment][/border][/tab]
  250.  
  251.  
  252.  
  253.  
  254.  
  255. [tab=020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202][border=0; display: flex; flex-flow: row wrap; justify-content: center; margin-left: -15px; padding: 15px 30px 15px 15px; width: calc(100% - 2px); height: 70vh; max-height: 600px; min-height: 400px; position: absolute; z-index: 2; top: -14px; left: 70px; overflow-y: scroll; font-size: initial; line-height: initial;][comment]
  256.  
  257. --------------------------- start of tab02 left --------------------------->
  258.  
  259. [/comment][border=0; margin-left: 15px; margin-bottom: 30px; padding: 0; flex: 1; width: 100%; max-width: 300px; min-width: 250px; height: calc(70vh - 30px); max-height: 570px; min-height: 370px; background: var(--historyimage);][/border][comment]
  260.  
  261. <--------------------------- end of tab02 left ---------------------------
  262.  
  263.  
  264. --------------------------- start of tab02 right --------------------------->
  265.  
  266. [/comment][border=0; margin: 10px 0 30px 15px; padding: 0; flex: 3; width: 100%; max-width: 700px; min-width: 250px; height: calc(70vh - 40px); max-height: 560px; min-height: 350px; overflow: hidden;][border=0; padding: 0 30px 0 0; width: 100%; height: calc(70vh - 40px); max-height: 560px; min-height: 360px; overflow-y: scroll;][comment]
  267.  
  268. ------------------------------------ start of header ------------------------------------>
  269.  
  270. [/comment][border=0; display: flex; flex-flow: row nowrap; margin-left: -10px; margin-bottom: 12px; padding: 0; width: calc(100% + 10px);][border=0; display: inline-block; margin-left: 10px; padding: 0; font-family: var(--headerfont); font-size: 1.8em; line-height: 100%; color: var(--accent); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;]Backstory[/border][border=0; margin-top: 2px; margin-left: 10px; padding: 0; font-family: var(--textfont); font-size: .7em; line-height: 120%; color: var(--offwhite); font-style: italic; text-align: justify;]We’ll vow to meet again, in a place beyond tonight. But precious places disappear, and not a thing can be done. Collecting emotions with nowhere to go, when is “someday”?[/border][/border][border=0; margin: 0 auto; padding: 0; width: calc(100% - 10px); height: 1px; background: var(--accent);][/border][comment]
  271.  
  272. <------------------------------------ end of header ------------------------------------
  273.  
  274. ------------------------------------ start of body text ------------------------------------>
  275.  
  276. [/comment][border=0; margin-top: 12px; padding: 0; font-family: var(--textfont); font-size: .9em; line-height: 140%; color: var(--offwhite); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lorem lacus, fermentum ac dapibus vel, tristique in ante. Donec ac iaculis lorem. Donec mauris turpis, hendrerit ac iaculis sagittis, convallis vitae orci. Phasellus in malesuada est. Integer sit amet erat eu massa sagittis pellentesque. Sed dignissim molestie nibh quis hendrerit. Vestibulum sit amet velit pharetra massa consequat condimentum. Vivamus et cursus justo. Sed id sollicitudin lectus. Integer vehicula in odio sed elementum. Morbi commodo, libero et luctus maximus, odio lorem porta ex, et efficitur orci velit at libero. Praesent ullamcorper sapien mi. Proin eu diam at massa mattis tempor. Donec sit amet eros pretium, eleifend leo non, efficitur purus. Pellentesque ante purus, bibendum sed dui sit amet, mattis suscipit velit.
  277.  
  278. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac sem et nulla blandit iaculis. Nunc elementum placerat ligula, nec ultrices nibh tempor at. Maecenas vehicula molestie placerat. Pellentesque auctor enim eget pretium vestibulum. Nullam ac viverra neque, at condimentum orci. Vivamus eleifend ante eget tristique dignissim. Proin vitae augue lobortis orci convallis blandit sed sed odio. Pellentesque sed aliquet lorem. Integer eu aliquet neque. Mauris eu eros in turpis lacinia iaculis. Nullam eu maximus lectus. Aenean dignissim urna enim, id hendrerit ante consequat eu. Mauris sed gravida ipsum, eu venenatis turpis. Maecenas iaculis ac ligula sit amet tempor. Duis iaculis, purus ut tempus finibus, libero quam vehicula orci, a mattis enim lorem eu leo.[comment]
  279.  
  280. // divider //
  281.  
  282. [/comment][border=0; margin: 40px 0; padding: 0; color: var(--accent); font-size: 1em; text-align: center;]⬩ ⬥ ❖ ⬥ ⬩[/border]Etiam in lectus quis magna placerat tincidunt vitae ut augue. Vestibulum eget gravida dui, feugiat rhoncus nunc. Integer scelerisque eros tortor, nec tempus risus porta nec. Sed laoreet tristique orci id posuere. Mauris at pretium enim, nec dictum nulla. Donec non suscipit arcu. Nullam at auctor neque. Integer hendrerit placerat odio eget vehicula. Duis lobortis fringilla metus vitae ullamcorper. Curabitur vehicula magna nulla, in porta arcu dapibus eu. Aenean mauris enim, dapibus sit amet sapien hendrerit, tempus porta tortor. Proin et ornare justo, venenatis porttitor orci. Integer scelerisque eget elit vel lobortis.
  283.  
  284. Morbi mattis nisi ut felis vestibulum, sit amet bibendum diam imperdiet. Pellentesque eu scelerisque libero, in mattis nisi. Pellentesque dictum velit quis turpis efficitur, nec lacinia purus mattis. Duis porttitor malesuada nibh, id eleifend est placerat sit amet. Mauris velit dolor, euismod ut lectus in, cursus pellentesque nisi. Nulla facilisi. Nunc eget ligula pellentesque, ullamcorper mauris dictum, consectetur nunc. Mauris lectus tellus, feugiat nec mi at, pretium venenatis massa.[/border][comment]
  285.  
  286. <------------------------------------ end of body text ------------------------------------
  287.  
  288. [/comment][/border][/border][comment]
  289.  
  290. <--------------------------- end of tab02 right ---------------------------
  291.  
  292. [/comment][/border][/tab]
  293.  
  294.  
  295.  
  296.  
  297.  
  298. [tab=030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303][border=0; padding: 0; margin: 15px; width: calc(100% - 30px); height: calc(70vh - 30px); max-height: 570px; min-height: 370px; position: absolute; z-index: 2; top: -14px; left: 70px; overflow: hidden; font-size: initial; line-height: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: calc(70vh - 30px); max-height: 570px; min-height: 370px; overflow-y: scroll;][comment]
  299.  
  300. --------------------------- start of header --------------------------->
  301.  
  302. [/comment][border=0; display: flex; flex-flow: row nowrap; margin-left: -10px; margin-bottom: 12px; padding: 0; width: calc(100% + 10px);][border=0; display: inline-block; margin-left: 10px; padding: 0; font-family: var(--headerfont); font-size: 1.8em; line-height: 100%; color: var(--accent); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;]Relationships[/border][border=0; margin-top: 2px; margin-left: 10px; padding: 0; font-family: var(--textfont); font-size: .7em; line-height: 120%; color: var(--offwhite); font-style: italic; text-align: justify;]No one’s to blame, and that’s why it’s hard. Lamenting with words with no destination. I just want to share carefree laughs with you, like always.[/border][/border][border=0; margin: 0 auto; padding: 0; width: calc(100% - 10px); height: 1px; background: var(--accent);][/border][comment]
  303.  
  304. <--------------------------- end of header ---------------------------
  305.  
  306. --------------------------- start of rs content--------------------------->
  307.  
  308. [/comment][comment]
  309.  
  310. ------------------------------------ start of rs01 ------------------------------------>
  311.  
  312. [/comment][border=0; display: flex; flex-flow: row wrap; margin-left: -20px; margin-top: 12px; padding: 0; width: calc(100% + 20px); position: relative;][comment]
  313.  
  314. ---------------------------------------------- start of character tags ------------------------------------>
  315.  
  316. [/comment][border=0; display: flex; flex-flow: row wrap; margin-left: -5px; padding: 0; position: absolute; left: 15%; top: 160px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--offwhite); text-align: center; text-transform: uppercase;][comment]
  317.  
  318. vvv character tag 01 vvv
  319.  
  320. [/comment][border=0; display: inline-block; margin-left: 5px; margin-bottom: 5px; padding: 5px 8px; background: var(--relationship01color);]FIRST SURNAME[/border][comment]
  321.  
  322. vvv character tag 02 vvv
  323.  
  324. [/comment][border=0; display: inline-block; margin-left: 5px; margin-bottom: 5px; padding: 5px 8px; background: var(--relationship01color);]AGE[/border][comment]
  325.  
  326. vvv character tag 03 vvv
  327.  
  328. [/comment][border=0; display: inline-block; margin-left: 5px; margin-bottom: 5px; padding: 5px 8px; background: var(--relationship01color);]RELATIONSHIP[/border][comment]
  329.  
  330. vvv character tag 04 vvv
  331.  
  332. [/comment][border=0; display: inline-block; margin-left: 5px; margin-bottom: 5px; padding: 5px 8px; background: var(--relationship01color);]Played by[/border][/border][comment]
  333.  
  334. <---------------------------------------------- end of character tags ------------------------------------
  335.  
  336. [/comment][border=0; margin-left: 20px; margin-bottom: 22px; padding: 0; flex: 1; width: 100%; min-width: 200px; max-width: 300px;][border=0; padding: 0; width: 100%; height: 200px; background: var(--relationship01img);][/border][/border][border=0; box-sizing: border-box; margin-left: 20px; margin-top: 18px; margin-bottom: 22px; padding: 0; flex: 2; width: 100%; min-width: 200px; height: 120px; font-family: var(--textfont); font-size: .9em; line-height: 140%; color: var(--offwhite); text-align: justify; overflow: hidden;][border=0; box-sizing: content-box; padding: 0; padding-right: 30px; width: 100%; height: 120px; overflow-y: scroll;][comment]
  337.  
  338. vvv relationship description vvv
  339.  
  340. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu sem ut odio mattis gravida et nec lorem. Duis vel libero tristique, iaculis ligula id, sollicitudin felis. Curabitur viverra purus turpis, a vulputate quam sagittis ut. Quisque ullamcorper arcu id diam facilisis, vitae aliquet metus efficitur. Nam tincidunt congue facilisis. Pellentesque gravida orci vitae nunc commodo rutrum. Curabitur eu molestie libero. Phasellus id ligula magna.[/border][/border][/border][comment]
  341.  
  342. <------------------------------------ end of rs01 ------------------------------------
  343.  
  344. [/comment][comment]
  345.  
  346. // divider //
  347.  
  348. [/comment][border=0; margin: 18px 0 40px; padding: 0; color: var(--accent); font-size: 1em; text-align: center;]⬩ ⬥ ❖ ⬥ ⬩[/border][comment]
  349.  
  350. ------------------------------------ start of rs02 ------------------------------------>
  351.  
  352. [/comment][border=0; display: flex; flex-flow: row wrap; margin-left: -20px; margin-top: 12px; padding: 0; width: calc(100% + 20px); position: relative;][comment]
  353.  
  354. ---------------------------------------------- start of character tags ------------------------------------>
  355.  
  356. [/comment][border=0; display: flex; flex-flow: row wrap; margin-left: -5px; padding: 0; position: absolute; left: 15%; top: 160px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--offwhite); text-align: center; text-transform: uppercase;][comment]
  357.  
  358. vvv character tag 01 vvv
  359.  
  360. [/comment][border=0; display: inline-block; margin-left: 5px; margin-bottom: 5px; padding: 5px 8px; background: var(--relationship02color);]FIRST SURNAME[/border][comment]
  361.  
  362. vvv character tag 02 vvv
  363.  
  364. [/comment][border=0; display: inline-block; margin-left: 5px; margin-bottom: 5px; padding: 5px 8px; background: var(--relationship02color);]AGE[/border][comment]
  365.  
  366. vvv character tag 03 vvv
  367.  
  368. [/comment][border=0; display: inline-block; margin-left: 5px; margin-bottom: 5px; padding: 5px 8px; background: var(--relationship02color);]RELATIONSHIP[/border][comment]
  369.  
  370. vvv character tag 04 vvv
  371.  
  372. [/comment][border=0; display: inline-block; margin-left: 5px; margin-bottom: 5px; padding: 5px 8px; background: var(--relationship02color);]Played by[/border][/border][comment]
  373.  
  374. <---------------------------------------------- end of character tags ------------------------------------
  375.  
  376. [/comment][border=0; margin-left: 20px; margin-bottom: 22px; padding: 0; flex: 1; width: 100%; min-width: 200px; max-width: 300px;][border=0; padding: 0; width: 100%; height: 200px; background: var(--relationship02img);][/border][/border][border=0; box-sizing: border-box; margin-left: 20px; margin-top: 18px; margin-bottom: 22px; padding: 0; flex: 2; width: 100%; min-width: 200px; height: 120px; font-family: var(--textfont); font-size: .9em; line-height: 140%; color: var(--offwhite); text-align: justify; overflow: hidden;][border=0; box-sizing: content-box; padding: 0; padding-right: 30px; width: 100%; height: 120px; overflow-y: scroll;][comment]
  377.  
  378. vvv relationship description vvv
  379.  
  380. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu sem ut odio mattis gravida et nec lorem. Duis vel libero tristique, iaculis ligula id, sollicitudin felis. Curabitur viverra purus turpis, a vulputate quam sagittis ut. Quisque ullamcorper arcu id diam facilisis, vitae aliquet metus efficitur. Nam tincidunt congue facilisis. Pellentesque gravida orci vitae nunc commodo rutrum. Curabitur eu molestie libero. Phasellus id ligula magna.[/border][/border][/border][comment]
  381.  
  382. <------------------------------------ end of rs02 ------------------------------------
  383.  
  384. [/comment][comment]
  385.  
  386. // divider //
  387.  
  388. [/comment][border=0; margin: 18px 0 40px; padding: 0; color: var(--accent); font-size: 1em; text-align: center;]⬩ ⬥ ❖ ⬥ ⬩[/border][comment]
  389.  
  390. ------------------------------------ start of rs03 ------------------------------------>
  391.  
  392. [/comment][border=0; display: flex; flex-flow: row wrap; margin-left: -20px; margin-top: 12px; padding: 0; width: calc(100% + 20px); position: relative;][comment]
  393.  
  394. ---------------------------------------------- start of character tags ------------------------------------>
  395.  
  396. [/comment][border=0; display: flex; flex-flow: row wrap; margin-left: -5px; padding: 0; position: absolute; left: 15%; top: 160px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--offwhite); text-align: center; text-transform: uppercase;][comment]
  397.  
  398. vvv character tag 01 vvv
  399.  
  400. [/comment][border=0; display: inline-block; margin-left: 5px; margin-bottom: 5px; padding: 5px 8px; background: var(--relationship03color);]FIRST SURNAME[/border][comment]
  401.  
  402. vvv character tag 02 vvv
  403.  
  404. [/comment][border=0; display: inline-block; margin-left: 5px; margin-bottom: 5px; padding: 5px 8px; background: var(--relationship03color);]AGE[/border][comment]
  405.  
  406. vvv character tag 03 vvv
  407.  
  408. [/comment][border=0; display: inline-block; margin-left: 5px; margin-bottom: 5px; padding: 5px 8px; background: var(--relationship03color);]RELATIONSHIP[/border][comment]
  409.  
  410. vvv character tag 04 vvv
  411.  
  412. [/comment][border=0; display: inline-block; margin-left: 5px; margin-bottom: 5px; padding: 5px 8px; background: var(--relationship03color);]Played by[/border][/border][comment]
  413.  
  414. <---------------------------------------------- end of character tags ------------------------------------
  415.  
  416. [/comment][border=0; margin-left: 20px; margin-bottom: 22px; padding: 0; flex: 1; width: 100%; min-width: 200px; max-width: 300px;][border=0; padding: 0; width: 100%; height: 200px; background: var(--relationship03img);][/border][/border][border=0; box-sizing: border-box; margin-left: 20px; margin-top: 18px; margin-bottom: 22px; padding: 0; flex: 2; width: 100%; min-width: 200px; height: 120px; font-family: var(--textfont); font-size: .9em; line-height: 140%; color: var(--offwhite); text-align: justify; overflow: hidden;][border=0; box-sizing: content-box; padding: 0; padding-right: 30px; width: 100%; height: 120px; overflow-y: scroll;][comment]
  417.  
  418. vvv relationship description vvv
  419.  
  420. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu sem ut odio mattis gravida et nec lorem. Duis vel libero tristique, iaculis ligula id, sollicitudin felis. Curabitur viverra purus turpis, a vulputate quam sagittis ut. Quisque ullamcorper arcu id diam facilisis, vitae aliquet metus efficitur. Nam tincidunt congue facilisis. Pellentesque gravida orci vitae nunc commodo rutrum. Curabitur eu molestie libero. Phasellus id ligula magna.[/border][/border][/border][comment]
  421.  
  422. <------------------------------------ end of rs03 ------------------------------------
  423.  
  424. [/comment][comment]
  425.  
  426. <--------------------------- end of rs content ---------------------------
  427.  
  428. [/comment][/border][/border][/tab]
  429.  
  430.  
  431.  
  432.  
  433.  
  434. [tab=040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404][border=0; padding: 0; margin: 15px; width: calc(100% - 30px); height: calc(70vh - 30px); max-height: 570px; min-height: 370px; position: absolute; z-index: 2; top: -14px; left: 70px; overflow: hidden; font-size: initial; line-height: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: calc(70vh - 30px); max-height: 570px; min-height: 370px; overflow-y: scroll;][comment]
  435.  
  436. --------------------------- start of header --------------------------->
  437.  
  438. [/comment][border=0; display: flex; flex-flow: row nowrap; margin-left: -10px; margin-bottom: 12px; padding: 0; width: calc(100% + 10px);][border=0; display: inline-block; margin-left: 10px; padding: 0; font-family: var(--headerfont); font-size: 1.8em; line-height: 100%; color: var(--accent); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;]Combat Data[/border][border=0; margin-top: 2px; margin-left: 10px; padding: 0; font-family: var(--textfont); font-size: .7em; line-height: 120%; color: var(--offwhite); font-style: italic; text-align: justify;]Making sure nothing else can be taken away, my heart will beat here constantly. Within a night where everything is cast away, I want to keep dreaming, as always.[/border][/border][border=0; margin: 0 auto 12px; padding: 0; width: calc(100% - 10px); height: 1px; background: var(--accent);][/border][comment]
  439.  
  440. <--------------------------- end of header ---------------------------
  441.  
  442. --------------------------- start of content wrap 01 --------------------------->
  443.  
  444. [/comment][border=0; display: flex; flex-flow: row wrap; margin-left: -30px; padding: 0; width: calc(100% + 25px);][comment]
  445.  
  446. ------------------------------------ start of left side/label 01 ------------------------------------>
  447.  
  448. [/comment][border=0; margin-left: 30px; padding: 0; flex: 1; width: 100%; min-width: 150px; max-width: 300px;][border=0; box-sizing: border-box; margin-bottom: 5px; padding: 3px; width: 100%; background: var(--accent); font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--offwhite); text-align: center; text-transform: uppercase;]Magical And Racial Abilities[/border][/border][comment]
  449.  
  450. <------------------------------------ end of left side/label 01 ------------------------------------
  451.  
  452. ------------------------------------ start of right side 01 ------------------------------------>
  453.  
  454. [/comment][border=0; margin-left: 30px; padding: 0; flex: 2; width: 100%; min-width: 200px; max-width: 700px; font-family: var(--textfont); font-size: .9em; line-height: 140%; color: var(--offwhite); text-align: justify;][comment]
  455.  
  456. --------------------------------------------- start of title x1 --------------------------------------------->
  457.  
  458. [/comment][border=0; padding: 0; text-align: left; text-transform: uppercase;]001. Data Entry One[/border][comment]
  459.  
  460. <--------------------------------------------- end of title x1 ---------------------------------------------
  461.  
  462. --------------------------------------------- start of entry x1 --------------------------------------------->
  463.  
  464. [/comment][border=0; border-left: 1px solid var(--accent); margin: 5px 0 5px 10px; padding: 5px 0 5px 10px; width: calc(100% - 21px);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt pretium purus nec semper. Ut malesuada nunc non sapien vulputate, ut accumsan felis ornare. Donec lacus risus, lacinia ac euismod at, ultricies vitae purus. Morbi feugiat mollis dolor id pellentesque. Pellentesque vehicula nisl lorem, eget ullamcorper lacus viverra ut. Donec sodales ex non justo viverra, sed fringilla diam iaculis. Cras vehicula dui vitae nunc tristique, eget gravida lacus pharetra. Sed lobortis eget est non dictum. Vestibulum vel mauris pretium, laoreet dolor sit amet, ultricies enim. Aliquam bibendum ut nisi vitae molestie. Praesent cursus, massa a dignissim elementum, arcu purus egestas diam, eget laoreet purus enim in tellus. Maecenas vehicula sit amet tellus maximus tincidunt.[/border][comment]
  465.  
  466. <--------------------------------------------- end of title x1 ---------------------------------------------
  467.  
  468. --------------------------------------------- start of title x2 --------------------------------------------->
  469.  
  470. [/comment][border=0; padding: 0; text-align: left; text-transform: uppercase;]002. Data Entry Two[/border][comment]
  471.  
  472. <--------------------------------------------- end of title x2 ---------------------------------------------
  473.  
  474. --------------------------------------------- start of entry x2 --------------------------------------------->
  475.  
  476. [/comment][border=0; border-left: 1px solid var(--accent); margin: 5px 0 5px 10px; padding: 5px 0 5px 10px; width: calc(100% - 21px);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt pretium purus nec semper. Ut malesuada nunc non sapien vulputate, ut accumsan felis ornare. Donec lacus risus, lacinia ac euismod at, ultricies vitae purus. Morbi feugiat mollis dolor id pellentesque. Pellentesque vehicula nisl lorem, eget ullamcorper lacus viverra ut. Donec sodales ex non justo viverra, sed fringilla diam iaculis. Cras vehicula dui vitae nunc tristique, eget gravida lacus pharetra. Sed lobortis eget est non dictum. Vestibulum vel mauris pretium, laoreet dolor sit amet, ultricies enim.[/border][comment]
  477.  
  478. <--------------------------------------------- end of entry x2 ---------------------------------------------
  479.  
  480. [/comment][/border][comment]
  481.  
  482. <------------------------------------ end of right side 01 ------------------------------------
  483.  
  484. [/comment][/border][comment]
  485.  
  486. <--------------------------- end of content wrap 01 ---------------------------
  487.  
  488. --------------------------- start of content wrap 02 --------------------------->
  489.  
  490. [/comment][border=0; display: flex; flex-flow: row wrap; margin-left: -30px; padding: 0; width: calc(100% + 25px);][comment]
  491.  
  492. ------------------------------------ start of left side/label 02 ------------------------------------>
  493.  
  494. [/comment][border=0; margin-left: 30px; padding: 0; flex: 1; width: 100%; min-width: 150px; max-width: 300px;][border=0; box-sizing: border-box; margin-bottom: 5px; padding: 3px; width: 100%; background: var(--accent); font-family: var(--textfont); font-size: .9em; line-height: 100%; color: var(--offwhite); text-align: center; text-transform: uppercase;]General Knowledge[/border][/border][comment]
  495.  
  496. <------------------------------------ end of left side/label 02 ------------------------------------
  497.  
  498. ------------------------------------ start of right side 02 ------------------------------------>
  499.  
  500. [/comment][border=0; margin-left: 30px; padding: 0; flex: 2; width: 100%; min-width: 200px; max-width: 700px; font-family: var(--textfont); font-size: .9em; line-height: 140%; color: var(--offwhite); text-align: justify;][comment]
  501.  
  502. --------------------------------------------- start of title x3 --------------------------------------------->
  503.  
  504. [/comment][border=0; padding: 0; text-align: left; text-transform: uppercase;]003. Data Entry Three[/border][comment]
  505.  
  506. <--------------------------------------------- end of title x3 ---------------------------------------------
  507.  
  508. --------------------------------------------- start of entry x3 --------------------------------------------->
  509.  
  510. [/comment][border=0; border-left: 1px solid var(--accent); margin: 5px 0 5px 10px; padding: 5px 0 5px 10px; width: calc(100% - 21px);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt pretium purus nec semper. Ut malesuada nunc non sapien vulputate, ut accumsan felis ornare. Donec lacus risus, lacinia ac euismod at, ultricies vitae purus. Morbi feugiat mollis dolor id pellentesque. Pellentesque vehicula nisl lorem, eget ullamcorper lacus viverra ut. Donec sodales ex non justo viverra, sed fringilla diam iaculis. Cras vehicula dui vitae nunc tristique, eget gravida lacus pharetra. Sed lobortis eget est non dictum. Vestibulum vel mauris pretium, laoreet dolor sit amet, ultricies enim. Aliquam bibendum ut nisi vitae molestie. Praesent cursus, massa a dignissim elementum, arcu purus egestas diam, eget laoreet purus enim in tellus. Maecenas vehicula sit amet tellus maximus tincidunt.[/border][comment]
  511.  
  512. <--------------------------------------------- end of title x3 ---------------------------------------------
  513.  
  514. --------------------------------------------- start of title x4 --------------------------------------------->
  515.  
  516. [/comment][border=0; padding: 0; text-align: left; text-transform: uppercase;]004. Data Entry Four[/border][comment]
  517.  
  518. <--------------------------------------------- end of title x4 ---------------------------------------------
  519.  
  520. --------------------------------------------- start of entry x4 --------------------------------------------->
  521.  
  522. [/comment][border=0; border-left: 1px solid var(--accent); margin: 5px 0 5px 10px; padding: 5px 0 5px 10px; width: calc(100% - 21px);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt pretium purus nec semper. Ut malesuada nunc non sapien vulputate, ut accumsan felis ornare. Donec lacus risus, lacinia ac euismod at, ultricies vitae purus. Morbi feugiat mollis dolor id pellentesque. Pellentesque vehicula nisl lorem, eget ullamcorper lacus viverra ut. Donec sodales ex non justo viverra, sed fringilla diam iaculis. Cras vehicula dui vitae nunc tristique, eget gravida lacus pharetra. Sed lobortis eget est non dictum. Vestibulum vel mauris pretium, laoreet dolor sit amet, ultricies enim. Aliquam bibendum ut nisi vitae molestie. Praesent cursus, massa a dignissim elementum, arcu purus egestas diam, eget laoreet purus enim in tellus. Maecenas vehicula sit amet tellus maximus tincidunt.[/border][comment]
  523.  
  524. <--------------------------------------------- end of title x4 ---------------------------------------------
  525.  
  526. [/comment][/border][comment]
  527.  
  528. <------------------------------------ end of right side 02 ------------------------------------
  529.  
  530. [/comment][/border][comment]
  531.  
  532. <--------------------------- end of content wrap 02 ---------------------------
  533.  
  534. [/comment][/border][/border][/tab]
  535.  
  536.  
  537.  
  538.  
  539.  
  540. [tab=050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505][border=0; padding: 0; margin: 15px; width: calc(100% - 30px); height: calc(70vh - 30px); max-height: 570px; min-height: 370px; position: absolute; z-index: 2; top: -14px; left: 70px; overflow: hidden; font-size: initial; line-height: initial;][border=0; padding: 0; padding-right: 30px; width: 100%; height: calc(70vh - 30px); max-height: 570px; min-height: 370px; overflow-y: scroll;][comment]
  541.  
  542. --------------------------- start of header --------------------------->
  543.  
  544. [/comment][border=0; display: flex; flex-flow: row nowrap; margin-left: -10px; margin-bottom: 12px; padding: 0; width: calc(100% + 10px);][border=0; display: inline-block; margin-left: 10px; padding: 0; font-family: var(--headerfont); font-size: 1.8em; line-height: 100%; color: var(--accent); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;]Notes[/border][border=0; margin-top: 2px; margin-left: 10px; padding: 0; font-family: var(--textfont); font-size: .7em; line-height: 120%; color: var(--offwhite); font-style: italic; text-align: justify;]To keep the lamplight from burning out, I‘ll sing right now, to never let you down. I want to delight, keep thinking ‘bout the future. We’ll vow to meet again, in a place beyond tonight.[/border][/border][border=0; margin: 0 auto; padding: 0; width: calc(100% - 10px); height: 1px; background: var(--accent);][/border][comment]
  545.  
  546. <--------------------------- end of header ---------------------------
  547.  
  548. --------------------------- start of note box 001 --------------------------->
  549.  
  550. [/comment][border=0; display: flex; flex-flow: row nowrap; margin: 12px 0 18px -10px; padding: 0; width: calc(100% + 10px);][border=0; margin-left: 10px; padding: 7px 0; flex: 1; max-width: 50px; text-align: left; font-family: var(--headerfont); font-size: 1.4em; line-height: 100%; color: var(--accent); font-weight: 700;]001.[/border][border=0; border-left: 4px solid var(--accent); box-sizing: border-box; margin-left: 10px; padding: 15px; flex: 10; background: var(--black); font-family: var(--textfont); font-size: .9em; line-height: 140%; color: var(--offwhite); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus enim sapien, dapibus id ligula ac, rhoncus elementum ante. Nullam tempus porttitor enim tincidunt sollicitudin. Nullam a fringilla tellus. Maecenas fringilla consequat orci id facilisis. Duis vitae odio et neque volutpat hendrerit at nec turpis.[/border][/border][comment]
  551.  
  552. <--------------------------- end of note box 001 ---------------------------
  553.  
  554. --------------------------- start of note box 002 --------------------------->
  555.  
  556. [/comment][border=0; display: flex; flex-flow: row nowrap; margin: 12px 0 18px -10px; padding: 0; width: calc(100% + 10px);][border=0; margin-left: 10px; padding: 7px 0; flex: 1; max-width: 50px; text-align: left; font-family: var(--headerfont); font-size: 1.4em; line-height: 100%; color: var(--accent); font-weight: 700;]002.[/border][border=0; border-left: 4px solid var(--accent); box-sizing: border-box; margin-left: 10px; padding: 15px; flex: 10; background: var(--black); font-family: var(--textfont); font-size: .9em; line-height: 140%; color: var(--offwhite); text-align: justify;]Morbi ullamcorper nunc vel consectetur sollicitudin. Morbi porttitor elit et ultricies porttitor. Vivamus vitae porta ante. Morbi feugiat ac diam in iaculis.[/border][/border][comment]
  557.  
  558. <--------------------------- end of note box 002 ---------------------------
  559.  
  560. --------------------------- start of note box 003 --------------------------->
  561.  
  562. [/comment][border=0; display: flex; flex-flow: row nowrap; margin: 12px 0 18px -10px; padding: 0; width: calc(100% + 10px);][border=0; margin-left: 10px; padding: 7px 0; flex: 1; max-width: 50px; text-align: left; font-family: var(--headerfont); font-size: 1.4em; line-height: 100%; color: var(--accent); font-weight: 700;]003.[/border][border=0; border-left: 4px solid var(--accent); box-sizing: border-box; margin-left: 10px; padding: 15px; flex: 10; background: var(--black); font-family: var(--textfont); font-size: .9em; line-height: 140%; color: var(--offwhite); text-align: justify;]Etiam nec erat pretium, dignissim enim nec, interdum risus. Vivamus congue est vitae lectus commodo maximus. Donec molestie mauris nulla, ac molestie nulla hendrerit non. In at sodales nisl, id egestas nisi. Donec facilisis eros eget molestie sagittis. Aliquam eleifend bibendum diam in fermentum. Ut vel quam quis purus tincidunt tristique ut eget odio.[/border][/border][comment]
  563.  
  564. <--------------------------- end of note box 003 ---------------------------
  565.  
  566. [/comment][/border][/border][/tab]
  567.  
  568.  
  569.  
  570.  
  571.  
  572. [/tabs][/border][comment]
  573.  
  574. <------------------ end of tabs ------------------>
  575.  
  576. [/comment][/border][comment]
  577.  
  578. <--------- end of right side --------->
  579.  
  580. [/comment][/border][comment]
  581.  
  582. // visible credit -- please don't remove!!! //
  583.  
  584. [/comment][border=0px; margin: 5px auto 75px; padding: 0; width: 100%; max-width: 1000px; font-size: .6em; text-align: center; text-transform: uppercase; opacity: .5;]code by Nano[comment][USER=20950]@Nano[/USER][/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!