API tools faq
paste
Advertisement
mochiroll

CTRL+R.Code

mochiroll
Nov 5th, 2022
251
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 62.28 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=Changa One]sans-serif[/font]
  6. [font=Exo 2]sans-serif[/font]
  7.  
  8. [/comment][comment]
  9.  
  10. // accents //
  11.  
  12. [/comment][border=0; padding: 0;
  13.  
  14. /* colors */
  15. --accent: #b51400;
  16. --white: #fefefe;
  17. --bggradient: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.9));
  18.  
  19. /* fonts */
  20. --decofont: 'Changa One', sans-serif;
  21. --mainfont: 'Exo 2', sans-serif;
  22.  
  23. /* textures */
  24. --bgpattern: url('https://i.imgur.com/JlEq6rQ.jpg') repeat;
  25. --graph: url('https://i.imgur.com/ep9rbat.png') repeat;
  26.  
  27. /* character images */
  28. --mainIMG: url('https://i.imgur.com/WlQvXU9.jpg') 50% 50%/cover no-repeat;
  29. --appearanceIMG: url('https://i.imgur.com/XVD5D92.jpg') 75% 50%/cover no-repeat;
  30. --personalityIMG: url('https://i.imgur.com/UWX7hx3.jpg') 50% 10%/cover no-repeat;
  31. --backstoryIMG: url('https://i.imgur.com/fqChEuu.jpg') 50% 50%/cover no-repeat;
  32. --combatIMG: url('https://i.imgur.com/w2pXFhb.jpg') 50% 25%/cover no-repeat;
  33. --notesIMG: url('https://i.imgur.com/PD5xDS4.jpg') 50% 10%/cover no-repeat;
  34.  
  35. /* relationship images */
  36. --RS01: url('https://i.imgur.com/DY7B2e1.jpg') 50% 25%/cover no-repeat;
  37. --RS02: url('https://i.imgur.com/T466fiF.jpg') 50% 25%/cover no-repeat;
  38. --RS03: url('https://i.imgur.com/TighVpu.jpg') 50% 25%/cover no-repeat;
  39.  
  40. padding: 0;
  41. width: 100%;
  42. font-size: initial;
  43. line-height: initial;
  44. overflow: hidden;
  45. position: relative;][comment]
  46.  
  47. ---------- start of background ---------->
  48.  
  49. [/comment][border=0; padding: 0; width: 100%; background: var(--bgpattern); pointer-events: none; position: absolute; z-index: 2;][border=0; padding: 50px 0; width: 100%; background: var(--bggradient);][border=0; padding: 0; margin: 0 auto; width: 100%; max-width: 1000px;][border=0; padding: 0; margin-left: -10px; width: calc(100% + 10px); display: flex; flex-flow: row-reverse wrap; justify-content: center;][border=0; padding: 0; margin-left: 10px; width: 100%; min-width: 300px; flex: 1; height: 525px; position: relative;][/border][border=0; padding: 0; margin-left: 10px; width: 100%; min-width: 300px; flex: 1; height: 525px;][/border][/border][/border][/border][/border][comment]
  50.  
  51. <---------- end of background ----------
  52.  
  53. [/comment][comment]
  54.  
  55. ----- start of wrapper ----->
  56.  
  57. [/comment][border=0; padding: 50px 0; margin: 0 auto; width: 100%; max-width: 1000px;][border=0; padding: 0; margin-left: -10px; width: calc(100% + 10px); display: flex; flex-flow: row-reverse wrap; justify-content: center;][comment]
  58.  
  59. ---------- start of RIGHT side ---------->
  60.  
  61. [/comment][border=0; padding: 0; margin-left: 10px; width: 100%; min-width: 300px; flex: 1; height: 525px; position: relative; z-index: 3;][comment]
  62.  
  63. --------------- start of top line --------------->
  64.  
  65. [/comment][border=0; padding: 0; margin: 12px 0; width: 90%; max-width: 275px; height: 1px; background: var(--white); position: absolute; right: 25px;][border=0; padding: 0; width: 5px; height: 5px; position: absolute; top: -2px; left: -10px; background: var(--white);][/border][border=0; padding: 0; width: 5px; height: 5px; position: absolute; top: -2px; right: -10px; background: var(--white);][/border][/border][comment]
  66.  
  67. <--------------- end of top line ---------------
  68.  
  69. [/comment][comment]
  70.  
  71. --------------- start of image box --------------->
  72.  
  73. [/comment][border=0; padding: 0; margin-top: 25px; position: relative;][comment]
  74.  
  75. -------------------- start of images -------------------->
  76.  
  77. [/comment][border=0; padding: 0; margin-top: 25px; width: 100%; height: 500px; background: var(--mainIMG); clip-path: polygon(120px 0%, 100% 0, 100% 0, 100% calc(100% - 120px), calc(100% - 120px) 100%, 120px 100%, 0% calc(100% - 120px), 0% 120px);][border=0; padding: 0; margin-top: 25px; width: 100%; height: 500px; background: var(--graph); clip-path: polygon(100px 0%, 100% 0, 100% 0, 100% calc(100% - 100px), calc(100% - 100px) 100%, 100px 100%, 0% calc(100% - 100px), 0% 100px);][comment]
  78.  
  79. ------------------------- start of text wrapper ------------------------->
  80.  
  81. [/comment][border=0; padding: 0; position: relative; top: 90px;][comment]
  82.  
  83. ------------------------------ start of role + name ------------------------------>
  84.  
  85. [/comment][border=0; padding: 0; margin: 0 auto; width: calc(100% - 120px); position: relative;][border=0; padding: 0; font-family: var(--mainfont); font-size: 1em; line-height: 100%; color: var(--white); text-transform: uppercase;][comment]
  86.  
  87. ///// Type ID Below /////
  88.  
  89. [/comment]ID: 450390399[/border][border=0; padding: 0; font-family: var(--mainfont); font-size: 2.3em; line-height: 100%; font-weight: 700; color: var(--accent); text-transform: uppercase;][comment]
  90.  
  91. ///// Type First Name Below /////
  92.  
  93. [/comment]Firstname[/border][border=0; padding: 0; font-family: var(--mainfont); font-size: 3em; line-height: 0; font-weight: 700; color: var(--white); position: absolute; top: 3px; right: 0;]+[/border][/border][comment]
  94.  
  95. <------------------------------ end of role + name ------------------------------
  96.  
  97. [/comment][comment]
  98.  
  99. ------------------------------ start of loading bar ------------------------------>
  100.  
  101. [/comment][border=3px solid var(--white); padding: 4px; margin: 15px auto 5px; width: calc(100% - 100px); border-radius: 7px; position: relative;][border=0; padding: 0; width: 80%; height: 9px; background: var(--accent); border-radius: 3px;][/border][/border][comment]
  102.  
  103. <------------------------------ end of loading bar ------------------------------
  104.  
  105. [/comment][comment]
  106.  
  107. ------------------------------ start of basic info ------------------------------>
  108.  
  109. [/comment][border=0; padding: 0; margin: 0 auto; width: calc(100% - 100px); position: relative; font-family: var(--mainfont); font-size: 1em; line-height: 100%; color: var(--white); text-transform: uppercase; text-align: right;]LOADING...80%
  110.  
  111. NAME: Fullname
  112. DOB: XX.XX.XXXX
  113. AGE: ##
  114. GENDER: --[/border][comment]
  115.  
  116. <------------------------------ end of basic info ------------------------------
  117.  
  118. [/comment][/border][comment]
  119.  
  120. <------------------------- end of text wrapper -------------------------
  121.  
  122. [/comment][/border][/border][comment]
  123.  
  124. <-------------------- end of images --------------------
  125.  
  126. [/comment][comment]
  127.  
  128. --------------- start of triangles --------------->
  129.  
  130. [/comment][border=0; padding: 0; width: 75px; height: 75px; background: var(--accent); clip-path: polygon(0 0, 0% 100%, 100% 0); position: absolute; left: 10px; top: 10px;][/border][border=0; padding: 0; width: 75px; height: 75px; background: var(--accent); clip-path: polygon(0 100%, 0 0, 100% 100%); position: absolute; left: 10px; bottom: 10px;][/border][comment]
  131.  
  132. <--------------- end of triangles ---------------
  133.  
  134. [/comment][comment]
  135.  
  136. --------------- start of deco text --------------->
  137.  
  138. [/comment][border=0; padding: 0; position: absolute; right: 25px; bottom: 20px;][border=0; padding: 0; width: 60px; height: 1px; background: var(--white); position: absolute; left: 15px;][/border][border=0; padding: 0; font-family: var(--decofont); font-size: 60px; line-height: 100%; font-weight: 700; color: var(--accent); position: absolute; right: -25px; top: -25px;]01[/border][border=0; padding: 0; font-family: var(--decofont); font-size: 50px; line-height: 100%; font-weight: 500; color: transparent; -webkit-text-stroke: 1px var(--white); text-transform: uppercase; font-style: italic;]File:[border=0; padding: 0; display: inline; letter-spacing: -12px; font-style: normal;]//[/border][/border][/border][comment]
  139.  
  140. <--------------- end of deco text ---------------
  141.  
  142. [/comment][/border][comment]
  143.  
  144. <--------------- end of image box ---------------
  145.  
  146. [/comment][/border][comment]
  147.  
  148. <---------- end of RIGHT side ----------
  149.  
  150. [/comment][comment]
  151.  
  152. ---------- start of LEFT side ---------->
  153.  
  154. [/comment][border=0; padding: 0; margin-left: 10px; width: 100%; min-width: 300px; flex: 1; height: 525px; overflow: hidden; position: relative;][border=0; padding: 0; width: calc(100% + 15px); position: relative; left: -20px; line-height: 25px;][comment]
  155.  
  156. --------------- start of tab covers --------------->
  157.  
  158. [/comment][border=0; padding: 0; width: 1px; height: 130px; background: var(--white); position: absolute; top: 6px; left: 32px; z-index: 3; pointer-events: none;][border=3px solid var(--white); padding: 0; width: 7px; height: 7px; background: var(--accent); position: absolute; top: 0; left: -6px;][/border][border=3px solid var(--white); padding: 0; width: 7px; height: 7px; background: var(--accent); position: absolute; top: 30px; left: -6px;][/border][border=3px solid var(--white); padding: 0; width: 7px; height: 7px; background: var(--accent); position: absolute; top: 60px; left: -6px;][/border][border=3px solid var(--white); padding: 0; width: 7px; height: 7px; background: var(--accent); position: absolute; top: 90px; left: -6px;][/border][border=3px solid var(--white); padding: 0; width: 7px; height: 7px; background: var(--accent); position: absolute; top: 120px; left: -6px;][/border][/border][border=0; padding: 0; width: calc(100% - 45px); height: 150px; position: absolute; right: 0; pointer-events: initial;][/border][comment]
  159.  
  160. <--------------- end of tab covers ---------------
  161.  
  162. [/comment][comment]
  163.  
  164. --------------- start of tabs --------------->
  165.  
  166. [/comment][tabs]
  167.  
  168.  
  169.  
  170.  
  171.  
  172.  
  173.  
  174.  
  175.  
  176.  
  177. [tab=0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101][border=0; padding: 0; width: calc(100% - 55px); line-height: initial; position: absolute; top: 25px; right: 0; z-index: 3;][comment]
  178.  
  179. -------------------- start of tab 01 cover label -------------------->
  180.  
  181. [/comment][border=0; padding: 0 1px 1px 0; width: 24px; height: 24px; background: var(--accent); font-family: var(--mainfont); font-size: 11px; line-height: 0; font-weight: 700; color: var(--white); display: flex; justify-content: center; align-items: center; pointer-events: initial; position: absolute; top: -25px; left: -35px;]01[/border][comment]
  182.  
  183. <-------------------- end of tab 01 cover label --------------------
  184.  
  185. [/comment][comment]
  186.  
  187. -------------------- start of tab 01 scrollbox -------------------->
  188.  
  189. [/comment][border=0; padding: 0; width: 100%; height: 500px; overflow: hidden;][border=0; padding: 0 30px 0 0; width: 100%; height: 500px; overflow-x: hidden; overflow-y: scroll;][comment]
  190.  
  191. ------------------------- start of header ------------------------->
  192.  
  193. [/comment][border=0; padding: 0; margin-bottom: 25px; width: calc(100% - 52px); height: 198px; position: relative;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][/border][/border][/border][/border][/border][border=0; padding: 0; width: 100%; height: 198px; background: var(--appearanceIMG); position: absolute; top: 0; left: 0;][comment]
  194.  
  195. ------------------------------ start of header title ------------------------------>
  196.  
  197. [/comment][border=0; padding: 0; position: absolute; bottom: 15px; right: -52px;][border=0; padding: 0; margin: 0 0 2px 2px; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-transform: uppercase; text-align: left;]File:///C:/[/border][border=0; padding: 3px 10px 6px; background: var(--accent); font-family: var(--mainfont); font-size: 1em; font-weight: 700; line-height: 100%; color: var(--white); text-transform: uppercase;][comment]
  198.  
  199. ///// Type Header Title Below /////
  200.  
  201. [/comment]Appearance[/border][/border][comment]
  202.  
  203. <------------------------------ end of header title ------------------------------
  204.  
  205. [/comment][/border][/border][comment]
  206.  
  207. <------------------------- end of header -------------------------
  208.  
  209. [/comment][comment]
  210.  
  211. . start of header -> content spacer .
  212.  
  213. [/comment][border=0; padding: 0; height: 25px;][/border][comment]
  214.  
  215. . end of header -> content spacer .
  216.  
  217. [/comment][comment]
  218.  
  219. ------------------------- start of content ------------------------->
  220.  
  221. [/comment][border=0; padding: 0; width: 100%; font-family: var(--mainfont); font-size: .9em; line-height: 130%; color: var(--white); text-align: justify;][border=0; padding: 0; color: var(--accent); display: inline;]> [/border]HEIGHT: #'##" | ##cm
  222. [border=0; padding: 0; color: var(--accent); display: inline;]> [/border]WEIGHT: ##lbs | ##kg
  223. [border=0; padding: 0; color: var(--accent); display: inline;]> [/border]FACECLAIM: --
  224.  
  225. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et velit et tortor rhoncus porttitor. Etiam odio dolor, tincidunt id accumsan vitae, lobortis ac metus. Nullam ac placerat eros. Duis id turpis porta sem commodo sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis suscipit magna a risus mattis, sit amet tincidunt tellus eleifend. Maecenas et tortor tortor.
  226.  
  227. In eros velit, rutrum sed elit sed, dignissim blandit magna. Mauris consectetur quam sed accumsan luctus. Quisque risus quam, pulvinar nec nunc non, ullamcorper viverra elit. Aliquam maximus tincidunt arcu, quis aliquam ipsum gravida eu. Sed tincidunt, sem ut porta commodo, mauris elit dapibus turpis, sit amet venenatis magna nulla vitae risus. Mauris fringilla dictum nisl, eu porttitor ex. Vestibulum vel libero ipsum. Nunc fermentum neque vel purus placerat laoreet. Maecenas fringilla sapien nec tristique porta. Etiam erat dui, tincidunt sed odio eget, condimentum blandit felis. Nunc sollicitudin aliquet quam condimentum lacinia. Nunc eget consectetur lectus. Nulla et mauris quis ipsum blandit dapibus non et nisl. Quisque vel velit purus.[/border][comment]
  228.  
  229. <------------------------- end of content -------------------------
  230.  
  231. [/comment][comment]
  232.  
  233. . start of section spacer .
  234.  
  235. [/comment][border=0; padding: 0; height: 25px;][/border][comment]
  236.  
  237. . end of section spacer .
  238.  
  239. [/comment][comment]
  240.  
  241. ------------------------- start of quote + header wrapper ------------------------->
  242.  
  243. [/comment][border=0; padding: 0; margin-left: -15px; width: calc(100% + 15px); display: flex; flex-flow: row-reverse wrap;][comment]
  244.  
  245. ------------------------------ start of RIGHT side/header ------------------------------>
  246.  
  247. [/comment][border=0; padding: 0; margin-left: 15px; margin-bottom: 25px; width: 100%; min-width: 175px; flex: 1; min-height: 250px; position: relative;][border=0; padding: 0; width: calc(100% - 35px); height: calc(100% - 25px); position: relative; top: 0; right: -35px;][border=1px solid var(--white); padding: 0; width: 100%; height: 100%; position: relative; top: 5px; left: -7px;][border=1px solid var(--white); padding: 0; width: 100%; height: 100%; position: relative; top: 5px; left: -7px;][border=1px solid var(--white); padding: 0; width: 100%; height: 100%; position: relative; top: 5px; left: -7px;][border=1px solid var(--white); padding: 0; width: 100%; height: 100%; position: relative; top: 5px; left: -7px;][/border][/border][/border][/border][border=0; padding: 0; background: var(--personalityIMG); width: 100%; height: 100%; position: absolute; top: 0; right: 0;][comment]
  248.  
  249. ----------------------------------- start of header title ----------------------------------->
  250.  
  251. [/comment][border=0; padding: 0; position: absolute; bottom: 15px; left: -35px;][border=0; padding: 0; margin: 0 2px 2px 0; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-transform: uppercase; text-align: right;]File:///C:/[/border][border=0; padding: 3px 10px 6px; background: var(--accent); font-family: var(--mainfont); font-size: 1em; font-weight: 700; line-height: 100%; color: var(--white); text-transform: uppercase;][comment]
  252.  
  253. ///// Type Header Title Below /////
  254.  
  255. [/comment]Personality[/border][/border][comment]
  256.  
  257. <----------------------------------- end of header title -----------------------------------
  258.  
  259. [/comment][/border][/border][/border][comment]
  260.  
  261. <------------------------------ end of RIGHT side/header ------------------------------
  262.  
  263. [/comment][comment]
  264.  
  265. ------------------------------ start of LEFT side/quote ------------------------------>
  266.  
  267. [/comment][border=0; padding: 0; margin-left: 15px; margin-bottom: 25px; width: 100%; min-width: 150px; flex: 2; position: relative; display: flex; justify-content: center; align-items: center;][comment]
  268.  
  269. ----------------------------------- start of quote ----------------------------------->
  270.  
  271. [/comment][border=0; padding: 25px 0; width: 75%; font-family: var(--mainfont); font-size: .9em; line-height: 130%; color: var(--white); text-align: center;]“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et velit et tortor rhoncus porttitor.”[/border][comment]
  272.  
  273. <----------------------------------- end of quote -----------------------------------
  274.  
  275. [/comment][comment]
  276.  
  277. . start of corner decor .
  278.  
  279. [/comment][border=0; border-top: 3px solid var(--accent); border-left: 3px solid var(--accent); padding: 0; width: 10px; height: 10px; position: absolute; top: 0; left: 0;][/border][border=0; border-top: 3px solid var(--accent); border-right: 3px solid var(--accent); padding: 0; width: 10px; height: 10px; position: absolute; top: 0; right: 0;][/border][border=0; border-bottom: 3px solid var(--accent); border-left: 3px solid var(--accent); padding: 0; width: 10px; height: 10px; position: absolute; bottom: 0; left: 0;][/border][border=0; border-bottom: 3px solid var(--accent); border-right: 3px solid var(--accent); padding: 0; width: 10px; height: 10px; position: absolute; bottom: 0; right: 0;][/border][comment]
  280.  
  281. . end of corner decor .
  282.  
  283. [/comment][/border][comment]
  284.  
  285. <------------------------------ end of LEFT side/quote ------------------------------
  286.  
  287. [/comment][/border][comment]
  288.  
  289. <------------------------- end of quote + header wrapper -------------------------
  290.  
  291. [/comment][comment]
  292.  
  293. ------------------------- start of content ------------------------->
  294.  
  295. [/comment][border=0; padding: 0; width: 100%; font-family: var(--mainfont); font-size: .9em; line-height: 130%; color: var(--white); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et velit et tortor rhoncus porttitor. Etiam odio dolor, tincidunt id accumsan vitae, lobortis ac metus. Nullam ac placerat eros. Duis id turpis porta sem commodo sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis suscipit magna a risus mattis, sit amet tincidunt tellus eleifend. Maecenas et tortor tortor.
  296.  
  297. In eros velit, rutrum sed elit sed, dignissim blandit magna. Mauris consectetur quam sed accumsan luctus. Quisque risus quam, pulvinar nec nunc non, ullamcorper viverra elit. Aliquam maximus tincidunt arcu, quis aliquam ipsum gravida eu. Sed tincidunt, sem ut porta commodo, mauris elit dapibus turpis, sit amet venenatis magna nulla vitae risus. Mauris fringilla dictum nisl, eu porttitor ex. Vestibulum vel libero ipsum. Nunc fermentum neque vel purus placerat laoreet. Maecenas fringilla sapien nec tristique porta. Etiam erat dui, tincidunt sed odio eget, condimentum blandit felis. Nunc sollicitudin aliquet quam condimentum lacinia. Nunc eget consectetur lectus. Nulla et mauris quis ipsum blandit dapibus non et nisl. Quisque vel velit purus.[/border][comment]
  298.  
  299. <------------------------- end of content -------------------------
  300.  
  301. [/comment][comment]
  302.  
  303. . start of section spacer .
  304.  
  305. [/comment][border=0; padding: 0; height: 25px;][/border][comment]
  306.  
  307. . end of section spacer .
  308.  
  309. [/comment][comment]
  310.  
  311. ------------------------- start of header title ------------------------->
  312.  
  313. [/comment][border=0; padding: 0; margin: 0 2px 2px 0; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-transform: uppercase; text-align: left;]File:///C:/[/border][border=0; padding: 3px 10px 6px; background: var(--accent); font-family: var(--mainfont); font-size: 1em; font-weight: 700; line-height: 100%; color: var(--white); text-transform: uppercase; display: inline-block;][comment]
  314.  
  315. ///// Type Header Title Below /////
  316.  
  317. [/comment]Likes[/border][comment]
  318.  
  319. <------------------------- end of header title -------------------------
  320.  
  321. [/comment][comment]
  322.  
  323. ------------------------- start of content ------------------------->
  324.  
  325. [/comment][border=0; padding: 0; width: 100%; font-family: var(--mainfont); font-size: .9em; line-height: 130%; color: var(--white); text-align: justify;]Lorem, ipsum, dolor sit amet, consectetur, adipiscing elit, fusce et velit, et tortor, rhoncus porttitor[/border][comment]
  326.  
  327. <------------------------- end of content -------------------------
  328.  
  329. [/comment][comment]
  330.  
  331. . start of section spacer .
  332.  
  333. [/comment][border=0; padding: 0; height: 25px;][/border][comment]
  334.  
  335. . end of section spacer .
  336.  
  337. [/comment][comment]
  338.  
  339. ------------------------- start of header title ------------------------->
  340.  
  341. [/comment][border=0; padding: 0; margin: 0 2px 2px 0; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-transform: uppercase; text-align: left;]File:///C:/[/border][border=0; padding: 3px 10px 6px; background: var(--accent); font-family: var(--mainfont); font-size: 1em; font-weight: 700; line-height: 100%; color: var(--white); text-transform: uppercase; display: inline-block;][comment]
  342.  
  343. ///// Type Header Title Below /////
  344.  
  345. [/comment]Dislikes[/border][comment]
  346.  
  347. <------------------------- end of header title -------------------------
  348.  
  349. [/comment][comment]
  350.  
  351. ------------------------- start of content ------------------------->
  352.  
  353. [/comment][border=0; padding: 0; width: 100%; font-family: var(--mainfont); font-size: .9em; line-height: 130%; color: var(--white); text-align: justify;]Lorem, ipsum, dolor sit amet, consectetur, adipiscing elit, fusce et velit, et tortor, rhoncus porttitor[/border][comment]
  354.  
  355. <------------------------- end of content -------------------------
  356.  
  357. [/comment][/border][/border][comment]
  358.  
  359. <-------------------- end of tab 01 scrollbox --------------------
  360.  
  361. [/comment][/border][/tab]
  362.  
  363.  
  364.  
  365.  
  366.  
  367.  
  368.  
  369.  
  370.  
  371.  
  372. [tab=0202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202][border=0; padding: 0; width: calc(100% - 55px); line-height: initial; position: absolute; top: 25px; right: 0; z-index: 3;][comment]
  373.  
  374. -------------------- start of tab 02 cover label -------------------->
  375.  
  376. [/comment][border=0; padding: 0 1px 1px 0; width: 24px; height: 24px; background: var(--accent); font-family: var(--mainfont); font-size: 11px; line-height: 0; font-weight: 700; color: var(--white); display: flex; justify-content: center; align-items: center; pointer-events: initial; position: absolute; top: 5px; left: -35px;]02[/border][comment]
  377.  
  378. <-------------------- end of tab 02 cover label --------------------
  379.  
  380. [/comment][comment]
  381.  
  382. -------------------- start of tab 02 scrollbox -------------------->
  383.  
  384. [/comment][border=0; padding: 0; width: 100%; height: 500px; overflow: hidden;][border=0; padding: 0 30px 0 0; width: 100%; height: 500px; overflow-x: hidden; overflow-y: scroll;][comment]
  385.  
  386. ------------------------- start of header ------------------------->
  387.  
  388. [/comment][border=0; padding: 0; margin-bottom: 25px; width: calc(100% - 52px); height: 198px; position: relative;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][/border][/border][/border][/border][/border][border=0; padding: 0; width: 100%; height: 198px; background: var(--backstoryIMG); position: absolute; top: 0; left: 0;][comment]
  389.  
  390. ------------------------------ start of header title ------------------------------>
  391.  
  392. [/comment][border=0; padding: 0; position: absolute; bottom: 15px; right: -52px;][border=0; padding: 0; margin: 0 0 2px 2px; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-transform: uppercase; text-align: left;]File:///C:/[/border][border=0; padding: 3px 10px 6px; background: var(--accent); font-family: var(--mainfont); font-size: 1em; font-weight: 700; line-height: 100%; color: var(--white); text-transform: uppercase;][comment]
  393.  
  394. ///// Type Header Title Below /////
  395.  
  396. [/comment]Backstory[/border][/border][comment]
  397.  
  398. <------------------------------ end of header title ------------------------------
  399.  
  400. [/comment][/border][/border][comment]
  401.  
  402. <------------------------- end of header -------------------------
  403.  
  404. [/comment][comment]
  405.  
  406. . start of header -> content spacer .
  407.  
  408. [/comment][border=0; padding: 0; height: 25px;][/border][comment]
  409.  
  410. . end of header -> content spacer .
  411.  
  412. [/comment][comment]
  413.  
  414. ------------------------- start of content ------------------------->
  415.  
  416. [/comment][border=0; padding: 0; width: 100%; font-family: var(--mainfont); font-size: .9em; line-height: 130%; color: var(--white); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et velit et tortor rhoncus porttitor. Etiam odio dolor, tincidunt id accumsan vitae, lobortis ac metus. Nullam ac placerat eros. Duis id turpis porta sem commodo sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis suscipit magna a risus mattis, sit amet tincidunt tellus eleifend. Maecenas et tortor tortor.
  417.  
  418. In eros velit, rutrum sed elit sed, dignissim blandit magna. Mauris consectetur quam sed accumsan luctus. Quisque risus quam, pulvinar nec nunc non, ullamcorper viverra elit. Aliquam maximus tincidunt arcu, quis aliquam ipsum gravida eu. Sed tincidunt, sem ut porta commodo, mauris elit dapibus turpis, sit amet venenatis magna nulla vitae risus. Mauris fringilla dictum nisl, eu porttitor ex. Vestibulum vel libero ipsum. Nunc fermentum neque vel purus placerat laoreet. Maecenas fringilla sapien nec tristique porta. Etiam erat dui, tincidunt sed odio eget, condimentum blandit felis. Nunc sollicitudin aliquet quam condimentum lacinia. Nunc eget consectetur lectus. Nulla et mauris quis ipsum blandit dapibus non et nisl. Quisque vel velit purus.[/border][comment]
  419.  
  420. <------------------------- end of content -------------------------
  421.  
  422. [/comment][/border][/border][comment]
  423.  
  424. <-------------------- end of tab 02 scrollbox --------------------
  425.  
  426. [/comment][/border][/tab]
  427.  
  428.  
  429.  
  430.  
  431.  
  432.  
  433.  
  434.  
  435.  
  436.  
  437. [tab=0303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303][border=0; padding: 0; width: calc(100% - 55px); line-height: initial; position: absolute; top: 25px; right: 0; z-index: 3;][comment]
  438.  
  439. -------------------- start of tab 03 cover label -------------------->
  440.  
  441. [/comment][border=0; padding: 0 1px 1px 0; width: 24px; height: 24px; background: var(--accent); font-family: var(--mainfont); font-size: 11px; line-height: 0; font-weight: 700; color: var(--white); display: flex; justify-content: center; align-items: center; pointer-events: initial; position: absolute; top: 35px; left: -35px;]03[/border][comment]
  442.  
  443. <-------------------- end of tab 03 cover label --------------------
  444.  
  445. [/comment][comment]
  446.  
  447. -------------------- start of tab 03 scrollbox -------------------->
  448.  
  449. [/comment][border=0; padding: 0; width: 100%; height: 500px; overflow: hidden;][border=0; padding: 0 30px 0 0; width: 100%; height: 500px; overflow-x: hidden; overflow-y: scroll;][comment]
  450.  
  451. ------------------------- start of relationship 01 wrapper ------------------------->
  452.  
  453. [/comment][border=0; padding: 0; margin-left: -10px; width: calc(100% + 10px); display: flex; flex-flow: row wrap;][comment]
  454.  
  455. ------------------------------ start of LEFT side ------------------------------>
  456.  
  457. [/comment][border=0; padding: 0; margin-left: 10px; margin-bottom: 12px; flex: 1; min-width: 175px;][comment]
  458.  
  459. ----------------------------------- start of header image ----------------------------------->
  460.  
  461. [/comment][border=0; padding: 0; margin-bottom: 25px; width: calc(100% - 35px); height: 198px; position: relative;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][/border][/border][/border][/border][border=0; padding: 0; width: 100%; height: 198px; background: var(--RS01); position: absolute; top: 0; left: 0;][comment]
  462.  
  463. ---------------------------------------- start of header title ---------------------------------------->
  464.  
  465. [/comment][border=0; padding: 0; position: absolute; bottom: 15px; right: -35px;][border=0; padding: 0; margin: 0 0 2px 2px; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-transform: uppercase; text-align: left;]File:///C:/[/border][border=0; padding: 3px 10px 6px; background: var(--accent); font-family: var(--mainfont); font-size: 1em; font-weight: 700; line-height: 100%; color: var(--white); text-transform: uppercase;][comment]
  466.  
  467. ///// Type Nickname Below /////
  468.  
  469. [/comment]Nickname[/border][/border][comment]
  470.  
  471. <---------------------------------------- end of header title ----------------------------------------
  472.  
  473. [/comment][/border][/border][comment]
  474.  
  475. <----------------------------------- end of header image -----------------------------------
  476.  
  477. [/comment][comment]
  478.  
  479. . start of spacer .
  480.  
  481. [/comment][border=0; padding: 0; height: 15px;][/border][comment]
  482.  
  483. . end of spacer .
  484.  
  485. [/comment][comment]
  486.  
  487. ----------------------------------- start of basic info ----------------------------------->
  488.  
  489. [/comment][border=0; padding: 0; width: calc(100% - 10px); font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--white); text-align: right;][border=0; padding: 0; font-size: .7em; font-weight: 700; color: var(--accent); text-transform: uppercase;]Full Name[/border]First Surname
  490. [border=0; padding: 0; margin-top: 15px; font-size: .7em; font-weight: 700; color: var(--accent); text-transform: uppercase;]Age[/border]Age (##)
  491. [border=0; padding: 0; margin-top: 15px; font-size: .7em; font-weight: 700; color: var(--accent); text-transform: uppercase;]Relationship[/border]Word[/border][comment]
  492.  
  493. <----------------------------------- end of basic info -----------------------------------
  494.  
  495. [/comment][/border][comment]
  496.  
  497. <------------------------------ end of LEFT side ------------------------------
  498.  
  499. [/comment][comment]
  500.  
  501. ------------------------------ start of RIGHT side ------------------------------>
  502.  
  503. [/comment][border=0; padding: 0; margin-left: 10px; margin-bottom: 12px; flex: 2; min-width: 200px; font-family: var(--mainfont); font-size: .9em; line-height: 130%; color: var(--white); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et velit et tortor rhoncus porttitor. Etiam odio dolor, tincidunt id accumsan vitae, lobortis ac metus. Nullam ac placerat eros. Duis id turpis porta sem commodo sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis suscipit magna a risus mattis, sit amet tincidunt tellus eleifend. Maecenas et tortor tortor.
  504.  
  505. In eros velit, rutrum sed elit sed, dignissim blandit magna. Mauris consectetur quam sed accumsan luctus. Quisque risus quam, pulvinar nec nunc non, ullamcorper viverra elit. Aliquam maximus tincidunt arcu, quis aliquam ipsum gravida eu.[/border][comment]
  506.  
  507. <------------------------------ end of RIGHT side ------------------------------
  508.  
  509. [/comment][/border][comment]
  510.  
  511. <------------------------- end of relationship 01 wrapper -------------------------
  512.  
  513. [/comment][comment]
  514.  
  515. . start of content spacer .
  516.  
  517. [/comment][border=0; padding: 0; margin-bottom: 12px; height: 1px; background: var(--white); opacity: .5;][/border][comment]
  518.  
  519. . end of content spacer .
  520.  
  521. [/comment][comment]
  522.  
  523. ------------------------- start of relationship 02 wrapper ------------------------->
  524.  
  525. [/comment][border=0; padding: 0; margin-left: -10px; width: calc(100% + 10px); display: flex; flex-flow: row-reverse wrap;][comment]
  526.  
  527. ------------------------------ start of RIGHT side ------------------------------>
  528.  
  529. [/comment][border=0; padding: 0; margin-left: 10px; margin-bottom: 12px; flex: 1; min-width: 175px;][comment]
  530.  
  531. ----------------------------------- start of header image ----------------------------------->
  532.  
  533. [/comment][border=0; padding: 0; margin-bottom: 25px; margin-left: 35px; width: calc(100% - 35px); height: 198px; position: relative;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: -7px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: -7px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: -7px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: -7px;][/border][/border][/border][/border][border=0; padding: 0; width: 100%; height: 198px; background: var(--RS02); position: absolute; top: 0; right: 0;][comment]
  534.  
  535. ---------------------------------------- start of header title ---------------------------------------->
  536.  
  537. [/comment][border=0; padding: 0; position: absolute; bottom: 15px; left: -35px;][border=0; padding: 0; margin: 0 0 2px 2px; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-transform: uppercase; text-align: right;]File:///C:/[/border][border=0; padding: 3px 10px 6px; background: var(--accent); font-family: var(--mainfont); font-size: 1em; font-weight: 700; line-height: 100%; color: var(--white); text-transform: uppercase;][comment]
  538.  
  539. ///// Type Nickname Below /////
  540.  
  541. [/comment]Nickname[/border][/border][comment]
  542.  
  543. <---------------------------------------- end of header title ----------------------------------------
  544.  
  545. [/comment][/border][/border][comment]
  546.  
  547. <----------------------------------- end of header image -----------------------------------
  548.  
  549. [/comment][comment]
  550.  
  551. . start of spacer .
  552.  
  553. [/comment][border=0; padding: 0; height: 15px;][/border][comment]
  554.  
  555. . end of spacer .
  556.  
  557. [/comment][comment]
  558.  
  559. ----------------------------------- start of basic info ----------------------------------->
  560.  
  561. [/comment][border=0; padding: 0; margin-left: 10px; width: calc(100% - 10px); font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--white); text-align: left;][border=0; padding: 0; font-size: .7em; font-weight: 700; color: var(--accent); text-transform: uppercase;]Full Name[/border]First Surname
  562. [border=0; padding: 0; margin-top: 15px; font-size: .7em; font-weight: 700; color: var(--accent); text-transform: uppercase;]Age[/border]Age (##)
  563. [border=0; padding: 0; margin-top: 15px; font-size: .7em; font-weight: 700; color: var(--accent); text-transform: uppercase;]Relationship[/border]Word[/border][comment]
  564.  
  565. <----------------------------------- end of basic info -----------------------------------
  566.  
  567. [/comment][/border][comment]
  568.  
  569. <------------------------------ end of RIGHT side ------------------------------
  570.  
  571. [/comment][comment]
  572.  
  573. ------------------------------ start of LEFT side ------------------------------>
  574.  
  575. [/comment][border=0; padding: 0; margin-left: 10px; margin-bottom: 12px; flex: 2; min-width: 200px; font-family: var(--mainfont); font-size: .9em; line-height: 130%; color: var(--white); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et velit et tortor rhoncus porttitor. Etiam odio dolor, tincidunt id accumsan vitae, lobortis ac metus. Nullam ac placerat eros. Duis id turpis porta sem commodo sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis suscipit magna a risus mattis, sit amet tincidunt tellus eleifend. Maecenas et tortor tortor.
  576.  
  577. In eros velit, rutrum sed elit sed, dignissim blandit magna. Mauris consectetur quam sed accumsan luctus. Quisque risus quam, pulvinar nec nunc non, ullamcorper viverra elit. Aliquam maximus tincidunt arcu, quis aliquam ipsum gravida eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis suscipit magna a risus mattis, sit amet tincidunt tellus eleifend. Maecenas et tortor tortor.[/border][comment]
  578.  
  579. <------------------------------ end of LEFT side ------------------------------
  580.  
  581. [/comment][/border][comment]
  582.  
  583. <------------------------- end of relationship 02 wrapper -------------------------
  584.  
  585. [/comment][comment]
  586.  
  587. . start of content spacer .
  588.  
  589. [/comment][border=0; padding: 0; margin-bottom: 12px; height: 1px; background: var(--white); opacity: .5;][/border][comment]
  590.  
  591. . end of content spacer .
  592.  
  593. [/comment][comment]
  594.  
  595. ------------------------- start of relationship 03 wrapper ------------------------->
  596.  
  597. [/comment][border=0; padding: 0; margin-left: -10px; width: calc(100% + 10px); display: flex; flex-flow: row wrap;][comment]
  598.  
  599. ------------------------------ start of LEFT side ------------------------------>
  600.  
  601. [/comment][border=0; padding: 0; margin-left: 10px; margin-bottom: 12px; flex: 1; min-width: 175px;][comment]
  602.  
  603. ----------------------------------- start of header image ----------------------------------->
  604.  
  605. [/comment][border=0; padding: 0; margin-bottom: 25px; width: calc(100% - 35px); height: 198px; position: relative;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][/border][/border][/border][/border][border=0; padding: 0; width: 100%; height: 198px; background: var(--RS03); position: absolute; top: 0; left: 0;][comment]
  606.  
  607. ---------------------------------------- start of header title ---------------------------------------->
  608.  
  609. [/comment][border=0; padding: 0; position: absolute; bottom: 15px; right: -35px;][border=0; padding: 0; margin: 0 0 2px 2px; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-transform: uppercase; text-align: left;]File:///C:/[/border][border=0; padding: 3px 10px 6px; background: var(--accent); font-family: var(--mainfont); font-size: 1em; font-weight: 700; line-height: 100%; color: var(--white); text-transform: uppercase;][comment]
  610.  
  611. ///// Type Nickname Below /////
  612.  
  613. [/comment]Nickname[/border][/border][comment]
  614.  
  615. <---------------------------------------- end of header title ----------------------------------------
  616.  
  617. [/comment][/border][/border][comment]
  618.  
  619. <----------------------------------- end of header image -----------------------------------
  620.  
  621. [/comment][comment]
  622.  
  623. . start of spacer .
  624.  
  625. [/comment][border=0; padding: 0; height: 15px;][/border][comment]
  626.  
  627. . end of spacer .
  628.  
  629. [/comment][comment]
  630.  
  631. ----------------------------------- start of basic info ----------------------------------->
  632.  
  633. [/comment][border=0; padding: 0; width: calc(100% - 10px); font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--white); text-align: right;][border=0; padding: 0; font-size: .7em; font-weight: 700; color: var(--accent); text-transform: uppercase;]Full Name[/border]First Surname
  634. [border=0; padding: 0; margin-top: 15px; font-size: .7em; font-weight: 700; color: var(--accent); text-transform: uppercase;]Age[/border]Age (##)
  635. [border=0; padding: 0; margin-top: 15px; font-size: .7em; font-weight: 700; color: var(--accent); text-transform: uppercase;]Relationship[/border]Word[/border][comment]
  636.  
  637. <----------------------------------- end of basic info -----------------------------------
  638.  
  639. [/comment][/border][comment]
  640.  
  641. <------------------------------ end of LEFT side ------------------------------
  642.  
  643. [/comment][comment]
  644.  
  645. ------------------------------ start of RIGHT side ------------------------------>
  646.  
  647. [/comment][border=0; padding: 0; margin-left: 10px; margin-bottom: 12px; flex: 2; min-width: 200px; font-family: var(--mainfont); font-size: .9em; line-height: 130%; color: var(--white); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et velit et tortor rhoncus porttitor. Etiam odio dolor, tincidunt id accumsan vitae, lobortis ac metus. Nullam ac placerat eros. Duis id turpis porta sem commodo sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis suscipit magna a risus mattis, sit amet tincidunt tellus eleifend. Maecenas et tortor tortor.
  648.  
  649. In eros velit, rutrum sed elit sed, dignissim blandit magna. Mauris consectetur quam sed accumsan luctus. Quisque risus quam, pulvinar nec nunc non, ullamcorper viverra elit. Aliquam maximus tincidunt arcu, quis aliquam ipsum gravida eu.[/border][comment]
  650.  
  651. <------------------------------ end of RIGHT side ------------------------------
  652.  
  653. [/comment][/border][comment]
  654.  
  655. <------------------------- end of relationship 03 wrapper -------------------------
  656.  
  657. [/comment][/border][/border][comment]
  658.  
  659. <-------------------- end of tab 03 scrollbox --------------------
  660.  
  661. [/comment][/border][/tab]
  662.  
  663.  
  664.  
  665.  
  666.  
  667.  
  668.  
  669.  
  670.  
  671.  
  672. [tab=0404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404][border=0; padding: 0; width: calc(100% - 55px); line-height: initial; position: absolute; top: 25px; right: 0; z-index: 3;][comment]
  673.  
  674. -------------------- start of tab 04 cover label -------------------->
  675.  
  676. [/comment][border=0; padding: 0 1px 1px 0; width: 24px; height: 24px; background: var(--accent); font-family: var(--mainfont); font-size: 11px; line-height: 0; font-weight: 700; color: var(--white); display: flex; justify-content: center; align-items: center; pointer-events: initial; position: absolute; top: 65px; left: -35px;]04[/border][comment]
  677.  
  678. <-------------------- end of tab 04 cover label --------------------
  679.  
  680. [/comment][comment]
  681.  
  682. -------------------- start of tab 04 scrollbox -------------------->
  683.  
  684. [/comment][border=0; padding: 0; width: 100%; height: 500px; overflow: hidden;][border=0; padding: 0 30px 0 0; width: 100%; height: 500px; overflow-x: hidden; overflow-y: scroll;][comment]
  685.  
  686. ------------------------- start of stats + header wrapper ------------------------->
  687.  
  688. [/comment][border=0; padding: 0; margin-left: -15px; width: calc(100% + 15px); display: flex; flex-flow: row-reverse wrap;][comment]
  689.  
  690. ------------------------------ start of RIGHT side/header ------------------------------>
  691.  
  692. [/comment][border=0; padding: 0; margin-left: 15px; margin-bottom: 25px; width: 100%; min-width: 175px; flex: 1; min-height: 175px; position: relative;][border=0; padding: 0; width: calc(100% - 35px); height: calc(100% - 25px); position: relative; top: 0; right: -35px;][border=1px solid var(--white); padding: 0; width: 100%; height: 100%; position: relative; top: 5px; left: -7px;][border=1px solid var(--white); padding: 0; width: 100%; height: 100%; position: relative; top: 5px; left: -7px;][border=1px solid var(--white); padding: 0; width: 100%; height: 100%; position: relative; top: 5px; left: -7px;][border=1px solid var(--white); padding: 0; width: 100%; height: 100%; position: relative; top: 5px; left: -7px;][/border][/border][/border][/border][border=0; padding: 0; background: var(--combatIMG); width: 100%; height: 100%; position: absolute; top: 0; right: 0;][comment]
  693.  
  694. ----------------------------------- start of header title ----------------------------------->
  695.  
  696. [/comment][border=0; padding: 0; position: absolute; bottom: 15px; left: -35px;][border=0; padding: 0; margin: 0 2px 2px 0; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-transform: uppercase; text-align: right;]File:///C:/[/border][border=0; padding: 3px 10px 6px; background: var(--accent); font-family: var(--mainfont); font-size: 1em; font-weight: 700; line-height: 100%; color: var(--white); text-transform: uppercase;][comment]
  697.  
  698. ///// Type Header Title Below /////
  699.  
  700. [/comment]Combat Data[/border][/border][comment]
  701.  
  702. <----------------------------------- end of header title -----------------------------------
  703.  
  704. [/comment][/border][/border][/border][comment]
  705.  
  706. <------------------------------ end of RIGHT side/header ------------------------------
  707.  
  708. [/comment][comment]
  709.  
  710. ------------------------------ start of LEFT side/stats ------------------------------>
  711.  
  712. [/comment][border=0; padding: 0; margin-left: 15px; margin-bottom: 25px; width: 100%; min-width: 150px; flex: 2; position: relative;][comment]
  713.  
  714. ----------------------------------- start of stats ----------------------------------->
  715.  
  716. [/comment][comment]
  717.  
  718. ---------------------------------------- start of stat 01 ---------------------------------------->
  719.  
  720. [/comment][border=0; padding: 0 7px 0 0; width: calc(100% - 7px); font-family: var(--mainfont); font-size: .6em; font-weight: 700; line-height: 130%; color: var(--white); text-align: right; text-transform: uppercase;][comment]
  721.  
  722. ///// Type Attribute Below /////
  723.  
  724. [/comment]Physical Strength[/border][border=2px solid var(--white); padding: 3px; margin-top: 3px; margin-bottom: 5px; width: calc(100% - 10px); border-radius: 4px;][comment]
  725.  
  726. ///// Adjust the Width % of the next [border] /////
  727.  
  728. [/comment][border=0; padding: 0; width: 80%; height: 4px; background: var(--accent); border-radius: 1px;][/border][/border][comment]
  729.  
  730. <---------------------------------------- end of stat 01 ----------------------------------------
  731.  
  732. [/comment][comment]
  733.  
  734. ---------------------------------------- start of stat 02 ---------------------------------------->
  735.  
  736. [/comment][border=0; padding: 0 7px 0 0; width: calc(100% - 7px); font-family: var(--mainfont); font-size: .6em; font-weight: 700; line-height: 130%; color: var(--white); text-align: right; text-transform: uppercase;][comment]
  737.  
  738. ///// Type Attribute Below /////
  739.  
  740. [/comment]Tactical Knowledge[/border][border=2px solid var(--white); padding: 3px; margin-top: 3px; margin-bottom: 5px; width: calc(100% - 10px); border-radius: 4px;][comment]
  741.  
  742. ///// Adjust the Width % of the next [border] /////
  743.  
  744. [/comment][border=0; padding: 0; width: 50%; height: 4px; background: var(--accent); border-radius: 1px;][/border][/border][comment]
  745.  
  746. <---------------------------------------- end of stat 02 ----------------------------------------
  747.  
  748. [/comment][comment]
  749.  
  750. ---------------------------------------- start of stat 03 ---------------------------------------->
  751.  
  752. [/comment][border=0; padding: 0 7px 0 0; width: calc(100% - 7px); font-family: var(--mainfont); font-size: .6em; font-weight: 700; line-height: 130%; color: var(--white); text-align: right; text-transform: uppercase;][comment]
  753.  
  754. ///// Type Attribute Below /////
  755.  
  756. [/comment]Endurance[/border][border=2px solid var(--white); padding: 3px; margin-top: 3px; margin-bottom: 5px; width: calc(100% - 10px); border-radius: 4px;][comment]
  757.  
  758. ///// Adjust the Width % of the next [border] /////
  759.  
  760. [/comment][border=0; padding: 0; width: 90%; height: 4px; background: var(--accent); border-radius: 1px;][/border][/border][comment]
  761.  
  762. <---------------------------------------- end of stat 03 ----------------------------------------
  763.  
  764. [/comment][comment]
  765.  
  766. ---------------------------------------- start of stat 04 ---------------------------------------->
  767.  
  768. [/comment][border=0; padding: 0 7px 0 0; width: calc(100% - 7px); font-family: var(--mainfont); font-size: .6em; font-weight: 700; line-height: 130%; color: var(--white); text-align: right; text-transform: uppercase;][comment]
  769.  
  770. ///// Type Attribute Below /////
  771.  
  772. [/comment]Magical Finesse[/border][border=2px solid var(--white); padding: 3px; margin-top: 3px; margin-bottom: 5px; width: calc(100% - 10px); border-radius: 4px;][comment]
  773.  
  774. ///// Adjust the Width % of the next [border] /////
  775.  
  776. [/comment][border=0; padding: 0; width: 40%; height: 4px; background: var(--accent); border-radius: 1px;][/border][/border][comment]
  777.  
  778. <---------------------------------------- end of stat 04 ----------------------------------------
  779.  
  780. [/comment][comment]
  781.  
  782. ---------------------------------------- start of stat 05 ---------------------------------------->
  783.  
  784. [/comment][border=0; padding: 0 7px 0 0; width: calc(100% - 7px); font-family: var(--mainfont); font-size: .6em; font-weight: 700; line-height: 130%; color: var(--white); text-align: right; text-transform: uppercase;][comment]
  785.  
  786. ///// Type Attribute Below /////
  787.  
  788. [/comment]Agility[/border][border=2px solid var(--white); padding: 3px; margin-top: 3px; margin-bottom: 5px; width: calc(100% - 10px); border-radius: 4px;][comment]
  789.  
  790. ///// Adjust the Width % of the next [border] /////
  791.  
  792. [/comment][border=0; padding: 0; width: 70%; height: 4px; background: var(--accent); border-radius: 1px;][/border][/border][comment]
  793.  
  794. <---------------------------------------- end of stat 05 ----------------------------------------
  795.  
  796. [/comment][comment]
  797.  
  798. <----------------------------------- end of stats -----------------------------------
  799.  
  800. [/comment][/border][comment]
  801.  
  802. <------------------------------ end of LEFT side/stats ------------------------------
  803.  
  804. [/comment][/border][comment]
  805.  
  806. <------------------------- end of stats + header wrapper -------------------------
  807.  
  808. [/comment][comment]
  809.  
  810. ------------------------- start of content wrapper ------------------------->
  811.  
  812. [/comment][border=0; padding: 0; margin-left: -15px; width: calc(100% + 15px); display: flex; flex-flow: row nowrap;][comment]
  813.  
  814. ------------------------------ start of right side/content ------------------------------>
  815.  
  816. [/comment][border=0; padding: 0; margin-left: 15px; width: 100%; flex: 2; font-family: var(--mainfont); font-size: .7em; font-weight: 700; line-height: 130%; color: var(--white); text-transform: uppercase; text-align: center;][border=0; padding: 3px 5px 6px; margin-top: 4px; margin-bottom: 5px; background: var(--accent); width: calc(100% - 10px);]Power[/border][/border][comment]
  817.  
  818. <------------------------------ end of right side/content ------------------------------
  819.  
  820. [/comment][comment]
  821.  
  822. ------------------------------ start of right side/content ------------------------------>
  823.  
  824. [/comment][border=0; padding: 0; margin-left: 15px; width: 100%; flex: 5; font-family: var(--mainfont); font-size: .9em; line-height: 130%; color: var(--white); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et velit et tortor rhoncus porttitor. Etiam odio dolor, tincidunt id accumsan vitae, lobortis ac metus. Nullam ac placerat eros. Duis id turpis porta sem commodo sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis suscipit magna a risus mattis, sit amet tincidunt tellus eleifend. Maecenas et tortor tortor.
  825.  
  826. In eros velit, rutrum sed elit sed, dignissim blandit magna. Mauris consectetur quam sed accumsan luctus. Quisque risus quam, pulvinar nec nunc non, ullamcorper viverra elit. Aliquam maximus tincidunt arcu, quis aliquam ipsum gravida eu. Sed tincidunt, sem ut porta commodo, mauris elit dapibus turpis, sit amet venenatis magna nulla vitae risus. Mauris fringilla dictum nisl, eu porttitor ex. Vestibulum vel libero ipsum. Nunc fermentum neque vel purus placerat laoreet. Maecenas fringilla sapien nec tristique porta. Etiam erat dui, tincidunt sed odio eget, condimentum blandit felis. Nunc sollicitudin aliquet quam condimentum lacinia. Nunc eget consectetur lectus. Nulla et mauris quis ipsum blandit dapibus non et nisl. Quisque vel velit purus.[/border][comment]
  827.  
  828. <------------------------------ end of right side/content ------------------------------
  829.  
  830. [/comment][/border][comment]
  831.  
  832. <------------------------- end of content wrapper -------------------------
  833.  
  834. [/comment][comment]
  835.  
  836. . start of section spacer .
  837.  
  838. [/comment][border=0; padding: 0; margin: 12px auto; width: 100%; height: 1px; background: var(--white); opacity: .5;][/border][comment]
  839.  
  840. . end of section spacer .
  841.  
  842. [/comment][comment]
  843.  
  844. ------------------------- start of content wrapper ------------------------->
  845.  
  846. [/comment][border=0; padding: 0; margin-left: -15px; width: calc(100% + 15px); display: flex; flex-flow: row nowrap;][comment]
  847.  
  848. ------------------------------ start of right side/content ------------------------------>
  849.  
  850. [/comment][border=0; padding: 0; margin-left: 15px; width: 100%; flex: 2; font-family: var(--mainfont); font-size: .7em; font-weight: 700; line-height: 130%; color: var(--white); text-transform: uppercase; text-align: center;][border=0; padding: 3px 5px 6px; margin-top: 4px; margin-bottom: 5px; background: var(--accent); width: calc(100% - 10px);]Weapon[/border][/border][comment]
  851.  
  852. <------------------------------ end of right side/content ------------------------------
  853.  
  854. [/comment][comment]
  855.  
  856. ------------------------------ start of right side/content ------------------------------>
  857.  
  858. [/comment][border=0; padding: 0; margin-left: 15px; width: 100%; flex: 5; font-family: var(--mainfont); font-size: .9em; line-height: 130%; color: var(--white); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et velit et tortor rhoncus porttitor. Etiam odio dolor, tincidunt id accumsan vitae, lobortis ac metus. Nullam ac placerat eros. Duis id turpis porta sem commodo sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis suscipit magna a risus mattis, sit amet tincidunt tellus eleifend. Maecenas et tortor tortor.
  859.  
  860. In eros velit, rutrum sed elit sed, dignissim blandit magna. Mauris consectetur quam sed accumsan luctus. Quisque risus quam, pulvinar nec nunc non, ullamcorper viverra elit. Aliquam maximus tincidunt arcu, quis aliquam ipsum gravida eu. Sed tincidunt, sem ut porta commodo, mauris elit dapibus turpis, sit amet venenatis magna nulla vitae risus. Mauris fringilla dictum nisl, eu porttitor ex. Vestibulum vel libero ipsum. Nunc fermentum neque vel purus placerat laoreet. Maecenas fringilla sapien nec tristique porta. Etiam erat dui, tincidunt sed odio eget, condimentum blandit felis. Nunc sollicitudin aliquet quam condimentum lacinia. Nunc eget consectetur lectus. Nulla et mauris quis ipsum blandit dapibus non et nisl. Quisque vel velit purus.[/border][comment]
  861.  
  862. <------------------------------ end of right side/content ------------------------------
  863.  
  864. [/comment][/border][comment]
  865.  
  866. <------------------------- end of content wrapper -------------------------
  867.  
  868. [/comment][/border][/border][comment]
  869.  
  870. <-------------------- end of tab 04 scrollbox --------------------
  871.  
  872. [/comment][/border][/tab]
  873.  
  874.  
  875.  
  876.  
  877.  
  878.  
  879.  
  880.  
  881.  
  882.  
  883. [tab=0505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505][border=0; padding: 0; width: calc(100% - 55px); line-height: initial; position: absolute; top: 25px; right: 0; z-index: 3;][comment]
  884.  
  885. -------------------- start of tab 05 cover label -------------------->
  886.  
  887. [/comment][border=0; padding: 0 1px 1px 0; width: 24px; height: 24px; background: var(--accent); font-family: var(--mainfont); font-size: 11px; line-height: 0; font-weight: 700; color: var(--white); display: flex; justify-content: center; align-items: center; pointer-events: initial; position: absolute; top: 95px; left: -35px;]05[/border][comment]
  888.  
  889. <-------------------- end of tab 05 cover label --------------------
  890.  
  891. [/comment][comment]
  892.  
  893. -------------------- start of tab 05 scrollbox -------------------->
  894.  
  895. [/comment][border=0; padding: 0; width: 100%; height: 500px; overflow: hidden;][border=0; padding: 0 30px 0 0; width: 100%; height: 500px; overflow-x: hidden; overflow-y: scroll;][comment]
  896.  
  897. ------------------------- start of header ------------------------->
  898.  
  899. [/comment][border=0; padding: 0; margin-bottom: 25px; width: calc(100% - 52px); height: 198px; position: relative;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][border=1px solid var(--white); padding: 0; width: 100%; height: 198px; position: relative; top: 5px; left: 5px;][/border][/border][/border][/border][/border][border=0; padding: 0; width: 100%; height: 198px; background: var(--notesIMG); position: absolute; top: 0; left: 0;][comment]
  900.  
  901. ------------------------------ start of header title ------------------------------>
  902.  
  903. [/comment][border=0; padding: 0; position: absolute; bottom: 15px; right: -52px;][border=0; padding: 0; margin: 0 0 2px 2px; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-transform: uppercase; text-align: left;]File:///C:/[/border][border=0; padding: 3px 10px 6px; background: var(--accent); font-family: var(--mainfont); font-size: 1em; font-weight: 700; line-height: 100%; color: var(--white); text-transform: uppercase;][comment]
  904.  
  905. ///// Type Header Title Below /////
  906.  
  907. [/comment]Notes[/border][/border][comment]
  908.  
  909. <------------------------------ end of header title ------------------------------
  910.  
  911. [/comment][/border][/border][comment]
  912.  
  913. <------------------------- end of header -------------------------
  914.  
  915. [/comment][comment]
  916.  
  917. . start of header -> content spacer .
  918.  
  919. [/comment][border=0; padding: 0; height: 25px;][/border][comment]
  920.  
  921. . end of header -> content spacer .
  922.  
  923. [/comment][comment]
  924.  
  925. ------------------------- start of content ------------------------->
  926.  
  927. [/comment][border=0; padding: 0; width: 100%; font-family: var(--mainfont); font-size: .9em; line-height: 130%; color: var(--white); text-align: justify;][comment]
  928.  
  929. ------------------------------ start of extra 1 ------------------------------>
  930.  
  931. [/comment][border=0; padding: 0; margin-left: -10px; width: calc(100% + 10px); display: flex; flex-flow: row nowrap;][border=0; margin-left: 10px; padding: 0; flex: 1; color: var(--accent); text-align: right;][comment]
  932.  
  933. ///// Type Number Below /////
  934.  
  935. [/comment]001.[/border][border=0; margin-left: 10px; padding: 0; flex: 15;][comment]
  936.  
  937. ///// Type Extra/Note Below /////
  938.  
  939. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et velit et tortor rhoncus porttitor. Etiam odio dolor, tincidunt id accumsan vitae, lobortis ac metus.[/border][/border][comment]
  940.  
  941. <------------------------------ end of extra 1 ------------------------------
  942.  
  943. [/comment][comment]
  944.  
  945. . start of extra -> extra spacer .
  946.  
  947. [/comment][border=0; padding: 0; height: 15px;][/border][comment]
  948.  
  949. . end of extra -> extra spacer .
  950.  
  951. [/comment][comment]
  952.  
  953. ------------------------------ start of extra 2 ------------------------------>
  954.  
  955. [/comment][border=0; padding: 0; margin-left: -10px; width: calc(100% + 10px); display: flex; flex-flow: row nowrap;][border=0; margin-left: 10px; padding: 0; flex: 1; color: var(--accent); text-align: right;][comment]
  956.  
  957. ///// Type Number Below /////
  958.  
  959. [/comment]002.[/border][border=0; margin-left: 10px; padding: 0; flex: 15;][comment]
  960.  
  961. ///// Type Extra/Note Below /////
  962.  
  963. [/comment]Nullam ac placerat eros. Duis id turpis porta sem commodo sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis suscipit magna a risus mattis, sit amet tincidunt tellus eleifend. Maecenas et tortor tortor.[/border][/border][comment]
  964.  
  965. <------------------------------ end of extra 2 ------------------------------
  966.  
  967. [/comment][comment]
  968.  
  969. . start of extra -> extra spacer .
  970.  
  971. [/comment][border=0; padding: 0; height: 15px;][/border][comment]
  972.  
  973. . end of extra -> extra spacer .
  974.  
  975. [/comment][comment]
  976.  
  977. ------------------------------ start of extra 3 ------------------------------>
  978.  
  979. [/comment][border=0; padding: 0; margin-left: -10px; width: calc(100% + 10px); display: flex; flex-flow: row nowrap;][border=0; margin-left: 10px; padding: 0; flex: 1; color: var(--accent); text-align: right;][comment]
  980.  
  981. ///// Type Number Below /////
  982.  
  983. [/comment]003.[/border][border=0; margin-left: 10px; padding: 0; flex: 15;][comment]
  984.  
  985. ///// Type Extra/Note Below /////
  986.  
  987. [/comment]In eros velit, rutrum sed elit sed, dignissim blandit magna. Mauris consectetur quam sed accumsan luctus. Quisque risus quam, pulvinar nec nunc non, ullamcorper viverra elit.[/border][/border][comment]
  988.  
  989. <------------------------------ end of extra 3 ------------------------------
  990.  
  991. [/comment][comment]
  992.  
  993. . start of extra -> extra spacer .
  994.  
  995. [/comment][border=0; padding: 0; height: 15px;][/border][comment]
  996.  
  997. . end of extra -> extra spacer .
  998.  
  999. [/comment][comment]
  1000.  
  1001. ------------------------------ start of extra 4 ------------------------------>
  1002.  
  1003. [/comment][border=0; padding: 0; margin-left: -10px; width: calc(100% + 10px); display: flex; flex-flow: row nowrap;][border=0; margin-left: 10px; padding: 0; flex: 1; color: var(--accent); text-align: right;][comment]
  1004.  
  1005. ///// Type Number Below /////
  1006.  
  1007. [/comment]004.[/border][border=0; margin-left: 10px; padding: 0; flex: 15;][comment]
  1008.  
  1009. ///// Type Extra/Note Below /////
  1010.  
  1011. [/comment]Aliquam maximus tincidunt arcu, quis aliquam ipsum gravida eu. Sed tincidunt, sem ut porta commodo, mauris elit dapibus turpis, sit amet venenatis magna nulla vitae risus.[/border][/border][comment]
  1012.  
  1013. <------------------------------ end of extra 4 ------------------------------
  1014.  
  1015. [/comment][/border][comment]
  1016.  
  1017. <------------------------- end of content -------------------------
  1018.  
  1019. [/comment][/border][/border][comment]
  1020.  
  1021. <-------------------- end of tab 05 scrollbox --------------------
  1022.  
  1023. [/comment][/border][/tab]
  1024.  
  1025.  
  1026.  
  1027.  
  1028.  
  1029.  
  1030.  
  1031.  
  1032.  
  1033.  
  1034. [/tabs][comment]
  1035.  
  1036. <--------------- end of tabs ---------------
  1037.  
  1038. [/comment][/border][/border][comment]
  1039.  
  1040. <---------- end of LEFT side ----------
  1041.  
  1042. [/comment][/border][/border][comment]
  1043.  
  1044. <----- end of wrapper -----
  1045.  
  1046. [/comment][/border][comment]
  1047.  
  1048. ----- start of credits ----->
  1049.  
  1050. [/comment][border=0; padding: 0; margin-top: 5px; width: 100%; font-family: var(--mainfont); font-size: .6em; line-height: 100%; text-align: center; text-transform: uppercase; opacity: .6;]Code by Nano[comment][USER=20950]@Nano[/USER][/comment][/border][comment]
  1051.  
  1052. <----- end of credits -----
  1053.  
  1054. [/comment]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!