API tools faq
paste
Advertisement
mochiroll

BtWC_Redux_Apps.Code

mochiroll
Jul 28th, 2022 (edited)
75
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 73.86 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. Art From: Project Sekai
  6.  
  7. [font=Play].[/font]
  8. [font=Poppins].[/font]
  9.  
  10. [/comment][comment]
  11.  
  12. // accents //
  13.  
  14. [/comment][border=0; padding: 0;
  15.  
  16. /* colors */
  17. --accent01: #a6060f;
  18. --black: #010101;
  19. --grey: #2a2a2a;
  20. --white: #fefefe;
  21.  
  22. /* textures */
  23. --digital: url('https://imgur.com/VwIRcA9.jpg') repeat;
  24. --noise: url('https://www.transparenttextures.com/patterns/60-lines.png') repeat;
  25.  
  26. /* misc images */
  27. --headerimg: url('https://i.imgur.com/qr7CNMV.jpg') 25% 25%/cover no-repeat;
  28. --mainbg: url('https://i.imgur.com/6T9vnCt.jpg') center/cover no-repeat;
  29. --wedges: url('https://i.imgur.com/Wnhltye.png') center/cover no-repeat;
  30. --titleicon: url('https://i.imgur.com/WVNLJ7Z.jpg') center/cover no-repeat;
  31.  
  32. /* tab (left side) images */
  33. --tab01img: url('https://i.imgur.com/mcZjALg.jpg') center/cover no-repeat;
  34. --tab02img: url('https://i.imgur.com/LwBYxMe.jpg') center/cover no-repeat;
  35. --tab03img: url('https://i.imgur.com/V7H6QgG.jpg') center/cover no-repeat;
  36.  
  37. /* roster icons */
  38. --Roster01: url('https://i.imgur.com/XUQ8yVY.jpg') center/cover no-repeat;
  39. --Roster02: url('https://i.imgur.com/bY9kbi0.jpg') center/cover no-repeat;
  40. --Roster03: url('https://i.imgur.com/FQNG9b7.jpg') center/cover no-repeat;
  41. --Roster04: url('https://i.imgur.com/jgvavBe.jpg') center/cover no-repeat;
  42.  
  43. --Roster05: url('https://i.imgur.com/TSeOS39.jpg') center/cover no-repeat;
  44. --Roster06: url('https://imgur.com/vgZxH8A.jpg') center/cover no-repeat;
  45. --Roster07: url('https://imgur.com/5zvSstU.jpg') center/cover no-repeat;
  46. --Roster08: url('https://imgur.com/PyvV2hE.jpg') center/cover no-repeat;
  47.  
  48. /* race icons */
  49. --npc01: url('https://i.imgur.com/KuL1hQj.jpg') top center/cover no-repeat;
  50. --npc01icon01: url('https://i.imgur.com/JA8nbEW.jpg') center/cover no-repeat;
  51. --npc01icon02: url('https://i.imgur.com/qfJESmQ.jpg') center/cover no-repeat;
  52. --npc01icon03: url('https://i.imgur.com/E59sLoS.jpg') center/cover no-repeat;
  53. --npc01icon04: url('https://i.imgur.com/4Td8LF4.jpg') center/cover no-repeat;
  54.  
  55. --npc02: url('https://i.imgur.com/nsAKOLh.jpg') top center/cover no-repeat;
  56. --npc02icon01: url('https://i.imgur.com/L1rHSzn.jpg') center/cover no-repeat;
  57. --npc02icon02: url('https://i.imgur.com/AHjqbAA.jpg') center/cover no-repeat;
  58. --npc02icon03: url('https://i.imgur.com/miCKyUR.jpg') center/cover no-repeat;
  59. --npc02icon04: url('https://i.imgur.com/zPh7gHp.jpg') center/cover no-repeat;
  60.  
  61. --npc03: url('https://i.imgur.com/AROjYWa.jpg') top center/cover no-repeat;
  62. --npc03icon01: url('https://i.imgur.com/r2WGsbc.jpg') center/cover no-repeat;
  63. --npc03icon02: url('https://i.imgur.com/T5rEat2.jpg') center/cover no-repeat;
  64. --npc03icon03: url('https://i.imgur.com/qqRmxiF.jpg') center/cover no-repeat;
  65. --npc03icon04: url('https://i.imgur.com/kS4t1yr.jpg') center/cover no-repeat;
  66.  
  67. /* fonts */
  68. --mainfont: 'Play', sans-serif;
  69. --titlefont: 'Poppins', sans-serif;
  70.  
  71. margin: 0 auto;
  72. padding: 0;
  73. width: 100%;
  74. min-width: 300px;
  75. font-size: initial;
  76. overflow: hidden;
  77. position: relative;][comment]
  78.  
  79. ---------- start of top bar ---------->
  80.  
  81. [/comment][border=0; padding: 0; background: var(--black);][border=0; padding: 20px 0 10px 20px; width: calc(100% - 20px); background: var(--noise);][comment]
  82.  
  83. -------------------- start of links -------------------->
  84.  
  85. [/comment][border=0; display: flex; flex-flow: row wrap; justify-content: flex-end; padding: 0; font-size: .7em; line-height: 100%; font-family: var(--mainfont); color: var(--white); font-weight: 700; text-transform: uppercase;][comment]
  86.  
  87. ------------------------------ link 1 ------------------------------>
  88.  
  89. [/comment][border=0; display: inline-block; padding: 0; margin-right: 20px; margin-bottom: 10px;][URL="google.com"][border=0; display: inline; padding: 0; color: var(--white);]Interest Check[/border][/URL][/border][comment]
  90.  
  91. <------------------------------ link 1 ------------------------------
  92.  
  93. [/comment][comment]
  94.  
  95. ------------------------------ link 1 ------------------------------>
  96.  
  97. [/comment][border=0; display: inline-block; padding: 0; margin-right: 20px; margin-bottom: 10px;][URL="google.com"][border=0; display: inline; padding: 0; color: var(--white);]Lore[/border][/URL][/border][comment]
  98.  
  99. <------------------------------ link 2 ------------------------------
  100.  
  101. [/comment][comment]
  102.  
  103. ------------------------------ link 3 ------------------------------>
  104.  
  105. [/comment][border=0; display: inline-block; padding: 0; margin-right: 20px; margin-bottom: 10px; color: var(--accent01); pointer-events: none;]Applications[/border][comment]
  106.  
  107. <------------------------------ link 3 ------------------------------
  108.  
  109. [/comment][comment]
  110.  
  111. ------------------------------ link 4 ------------------------------>
  112.  
  113. [/comment][border=0; display: inline-block; padding: 0; margin-right: 20px; margin-bottom: 10px;][URL="google.com"][border=0; display: inline; padding: 0; color: var(--white);]In Character[/border][/URL][/border][comment]
  114.  
  115. <------------------------------ link 4 ------------------------------
  116.  
  117. [/comment][/border][comment]
  118.  
  119. <-------------------- end of links --------------------
  120.  
  121. [/comment][/border][/border][comment]
  122.  
  123. <---------- end of top bar ----------
  124.  
  125. [/comment][comment]
  126.  
  127. ---------- start of header banner ---------->
  128.  
  129. [/comment][border=0; padding: 0; width: 100%; height: 300px; background: var(--headerimg); position: relative; pointer-events: none; z-index: 1;][border=0; padding: 0; width: 100%; height: 300px; background: var(--digital);][comment]
  130.  
  131. -------------------- start of song title -------------------->
  132.  
  133. [/comment][border=0; padding: 3px 4px 2px; background: var(--black); font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); position: absolute; bottom: 15px; right: 70px; pointer-events: initial; z-index: 5;]FUZI × Mili - Victim[/border][comment]
  134.  
  135. <-------------------- end of song title --------------------
  136.  
  137. [/comment][comment]
  138.  
  139. -------------------- start of music player -------------------->
  140.  
  141. [/comment][border=0; padding: 8px 4px; background: var(--black); position: absolute; bottom: 15px; right: 15px; pointer-events: initial; z-index: 5;][border=0; padding: 0; width: 38px; height: 30px; overflow: hidden;][border=0; padding: 0; margin-top: -335px; margin-left: -240px;][comment]
  142.  
  143. ------------------------------ gdoc ID ------------------------------>
  144.  
  145. [/comment][gdoc]1ELHfmNAaovtQxsaerYG4IjG9NOLg280h[/gdoc][comment]
  146.  
  147. <------------------------------ gdoc ID ------------------------------
  148.  
  149. [/comment][/border][/border][/border][comment]
  150.  
  151. <-------------------- end of music player --------------------
  152.  
  153. [/comment][comment]
  154.  
  155. -------------------- start of music player cover -------------------->
  156.  
  157. [/comment][border=0; display: flex; align-items: center; justify-content: center; padding: 0; width: 46px; height: 46px; background: var(--black); color: var(--white); font-size: 25px; line-height: 0; position: absolute; bottom: 15px; right: 15px; pointer-events: none; z-index: 5; opacity: 0;][border=0; padding: 0; margin-top: -3px; margin-left: 4px;]▶[/border][/border][comment]
  158.  
  159. <-------------------- end of music player cover --------------------
  160.  
  161. [/comment][/border][/border][comment]
  162.  
  163. <---------- end of header banner ----------
  164.  
  165. [/comment][comment]
  166.  
  167. ---------- start of lower half ---------->
  168.  
  169. [/comment][border=0; padding: 0; position: relative;][comment]
  170.  
  171. -------------------- start of tab covers -------------------->
  172.  
  173. [/comment][border=0; padding: 0; width: 100%; position: absolute; z-index: 6;][comment]
  174.  
  175. ------------------------------ start of RP title ------------------------------>
  176.  
  177. [/comment][border=0; display: flex; align-items: center; padding: 15px; background: var(--black); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); position: absolute; left: 10px; top: -90px;][border=0; padding: 0; width: calc(100% - 30px); line-height: 100%; text-transform: uppercase; text-align: center; letter-spacing: -1px; position: absolute; z-index: 3;][comment]
  178.  
  179. // title start //
  180.  
  181. [/comment][border=0; padding: 0; font-family: var(--mainfont); color: var(--white); font-size: .9em;]Beyond the Witch's[/border][border=0; padding: 0; margin-top: 3px; font-family var(--titlefont); color: var(--accent01); font-size: 1.6em; font-weight: 700;]Corridor[/border][comment]
  182.  
  183. // title end //
  184.  
  185. [/comment][/border][comment]
  186.  
  187. <------------------------------ end of RP title ------------------------------
  188.  
  189. [/comment][border=0; padding: 0; width: 150px; height: 150px; background: var(--titleicon); overflow: hidden; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); opacity: .5;][border=0; width: 160px; height: 160px; background: var(--digital);][/border][/border][/border][comment]
  190.  
  191. ------------------------------ start of tab titles ------------------------------>
  192.  
  193. [/comment][comment]
  194.  
  195. ---------------------------------------- tab title 01 ---------------------------------------->
  196.  
  197. [/comment][border=0; display: flex; padding: 0; position: absolute; top: -30px; left: 165px; pointer-events: none;][border=0; padding: 0; width: 27px; height: 27px; background: var(--black); clip-path: polygon(100% 0, 0 0, 100% 100%);][/border][border=0; display: flex; justify-content: right; align-items: center; padding: 0 7px 0 0; width: 125px; height: 27px; background: var(--black); font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-transform: uppercase;]App Details[/border][/border][comment]
  198.  
  199. <---------------------------------------- tab title 01 ----------------------------------------
  200.  
  201. [/comment][comment]
  202.  
  203. ---------------------------------------- tab title 02 ---------------------------------------->
  204.  
  205. [/comment][border=0; display: flex; padding: 0; position: absolute; top: 3px; left: 165px; pointer-events: none;][border=0; padding: 0; width: 27px; height: 27px; background: var(--black); clip-path: polygon(100% 0, 0 100%, 100% 100%);][/border][border=0; display: flex; justify-content: right; align-items: center; padding: 0 7px 0 0; width: 125px; height: 27px; background: var(--black); font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-transform: uppercase;]Roster[/border][/border][comment]
  206.  
  207. <---------------------------------------- tab title 02 ----------------------------------------
  208.  
  209. [/comment][comment]
  210.  
  211. ---------------------------------------- tab title 03 ---------------------------------------->
  212.  
  213. [/comment][border=0; display: flex; padding: 0; position: absolute; top: 36px; left: 132px; pointer-events: none;][border=0; padding: 0; width: 27px; height: 27px; background: var(--black); clip-path: polygon(100% 0, 0 100%, 100% 100%);][/border][border=0; display: flex; justify-content: right; align-items: center; padding: 0 7px 0 0; width: 158px; height: 27px; background: var(--black); font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-transform: uppercase;]NPC[/border][/border][comment]
  214.  
  215. <---------------------------------------- tab title 03 ----------------------------------------
  216.  
  217. [/comment][comment]
  218.  
  219. <------------------------------ end of tab titles ------------------------------
  220.  
  221. [/comment][/border][border=0; padding: 0; height: 93px; width: 100px; position: absolute; top: -30px; left: 0; z-index: 3;][/border][border=0; padding: 0; height: 93px; width: calc(100% - 325px); position: absolute; top: -30px; right: 0; z-index: 3;][/border][comment]
  222.  
  223. <-------------------- end of tab covers --------------------
  224.  
  225. [/comment][comment]
  226.  
  227. -------------------- start of tabs -------------------->
  228.  
  229. [/comment][comment]
  230.  
  231. ------------------------------ start of tab background ------------------------------>
  232.  
  233. [/comment][border=0; padding: 0; width: 100%; position: relative; z-index: 5; pointer-events: none;][border=0; padding: 0; background: var(--grey);][border=0; padding: 0; width: 100%; background: var(--mainbg); opacity: .1;][comment]
  234.  
  235. // start layout shell one //
  236.  
  237. [/comment][border=0; padding: 0; height: 40px;][/border][border=0; font-size: initial; line-height: initial; display: flex; flex-flow: row wrap; justify-content: center; padding: 0 25px; width: calc(100% - 25px);][border=0; padding: 0; margin-right: 25px; margin-bottom: 50px; flex: 1; width: calc(100% - 25px); max-width: 400px; min-width: 200px; height: 70vh; min-height: 400px; max-height: 600px;][/border][border=0; padding: 0; margin-right: 25px; margin-bottom: 50px; flex: 2; width: calc(100% - 25px); min-width: 200px; height: 70vh; min-height: 400px; max-height: 600px;][/border][/border][comment]
  238.  
  239. // end layout shell one //
  240.  
  241. [/comment][/border][border=0; padding: 0; width: 100%; background: var(--wedges); position: absolute; top: 0; left: 0;][comment]
  242.  
  243. // start layout shell two //
  244.  
  245. [/comment][border=0; padding: 0; height: 40px;][/border][border=0; font-size: initial; line-height: initial; display: flex; flex-flow: row wrap; justify-content: center; padding: 0 25px; width: calc(100% - 25px);][border=0; padding: 0; margin-right: 25px; margin-bottom: 50px; flex: 1; width: calc(100% - 25px); max-width: 400px; min-width: 200px; height: 70vh; min-height: 400px; max-height: 600px;][/border][border=0; padding: 0; margin-right: 25px; margin-bottom: 50px; flex: 2; width: calc(100% - 25px); min-width: 200px; height: 70vh; min-height: 400px; max-height: 600px;][/border][/border][comment]
  246.  
  247. // end layout shell two //
  248.  
  249. [/comment][/border][/border][/border][comment]
  250.  
  251. <------------------------------ end of tab background ------------------------------
  252.  
  253. [/comment][border=0; padding: 0; width: 100%; line-height: 29px; position: absolute; top: -32px; left:-20px;][tabs]
  254.  
  255.  
  256.  
  257.  
  258.  
  259.  
  260.  
  261.  
  262.  
  263.  
  264.  
  265. [tab=01010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101][comment]
  266.  
  267. // tab cover start //
  268.  
  269. [/comment][border=0; display: flex; padding: 0; position: absolute; top: 2px; left: 185px; z-index: 8; pointer-events: initial;][border=0; padding: 0; width: 27px; height: 27px; background: var(--black); clip-path: polygon(100% 0, 0 0, 100% 100%);][/border][border=0; display: flex; justify-content: right; align-items: center; padding: 0 7px 0 0; width: 125px; height: 27px; background: var(--black); font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--accent01); text-transform: uppercase;]App Details[/border][/border][comment]
  270.  
  271. // tab cover end //
  272.  
  273. [/comment][border=0; font-size: initial; line-height: initial; display: flex; flex-flow: row wrap; justify-content: center; padding: 0 25px; width: calc(100% - 25px); overflow: hidden; position: absolute; top: 101px; z-index: 6;][comment]
  274.  
  275. ------------------------------ start of left side ------------------------------>
  276.  
  277. [/comment][border=0; padding: 0; margin-right: 25px; margin-bottom: 50px; flex: 1; width: calc(100% - 25px); max-width: 400px; min-width: 200px; height: 70vh; min-height: 400px; max-height: 600px; background: var(--tab01img); clip-path: polygon(100px 0%, 100% 0, 100% calc(100% - 100px), calc(100% - 100px) 100%, 0 100%, 0 100px); overflow: hidden; position: relative;][border=0; padding: 0; background: var(--digital); position: absolute; top: 0; bottom: 0; left: 0; right: 0;][/border][comment]
  278.  
  279. ---------------------------------------- start of tab number ---------------------------------------->
  280.  
  281. [/comment][border=0; padding: 0; font-family: var(--mainfont); font-size: 150px; font-weight: 700; line-height: 100%; letter-spacing: -20px; color: var(--white); position: absolute; top: -48px; right: -10px; opacity: .5;]01[/border][comment]
  282.  
  283. <---------------------------------------- end tab number ----------------------------------------
  284.  
  285. [/comment][comment]
  286.  
  287. ---------------------------------------- start of tab label ---------------------------------------->
  288.  
  289. [/comment][border=0; padding: 0; width: calc(100% - 75px); position: absolute; bottom: 50px; left: 25px; opacity: .7;][comment]
  290.  
  291. -------------------------------------------------- start of tab title -------------------------------------------------->
  292.  
  293. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]App Details[/border][/border][comment]
  294.  
  295. <-------------------------------------------------- end of tab title --------------------------------------------------
  296.  
  297. [/comment][comment]
  298.  
  299. -------------------------------------------------- start of blurb under title -------------------------------------------------->
  300.  
  301. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]A warrior needs not concern themselves with matters within the purview of men[/border][/border][comment]
  302.  
  303. <-------------------------------------------------- end of blurb under title --------------------------------------------------
  304.  
  305. [/comment][/border][comment]
  306.  
  307. <---------------------------------------- end tab label ----------------------------------------
  308.  
  309. [/comment][/border][comment]
  310.  
  311. <------------------------------ end of left side ------------------------------
  312.  
  313. [/comment][comment]
  314.  
  315. ------------------------------ start of right side ------------------------------>
  316.  
  317. [/comment][border=0; padding: 0; margin-right: 25px; margin-bottom: 50px; flex: 2; width: calc(100% - 25px); min-width: 200px; height: 70vh; min-height: 400px; max-height: 600px; overflow: hidden;][border=0; padding: 0 30px 0 0; width: 100%; height: 70vh; min-height: 400px; max-height: 600px; overflow-y: scroll; overflow-x: hidden;][comment]
  318.  
  319. ---------------------------------------- start of tab 1 section 1 ---------------------------------------->
  320.  
  321. [/comment][border=0; display: flex; flex-flow: row nowrap; padding: 0; margin-right: -10px; width: calc(100% + 10px);][comment]
  322.  
  323. // title start //
  324.  
  325. [/comment][border=0; padding: 5px 0 5px 0; margin-right: 10px; flex: 1; max-width: 90px; min-width: 90px;][border=0; padding: 0; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--accent01); text-transform: uppercase; text-align: right;]Quick Note[/border][border=0; padding: 0; font-family: var(--mainfont); font-size: 2.1em; line-height: 100%; font-weight: 700; color: var(--white); text-transform: uppercase; text-align: right; letter-spacing: -2px;]001[/border][/border][comment]
  326.  
  327. // title end //
  328.  
  329. [/comment][comment]
  330.  
  331. // content start //
  332.  
  333. [/comment][border=0; border-left: 1px solid var(--accent01); padding: 5px 0 5px 10px; margin-right: 10px; flex: 9; width: calc(100% - 11px); font-family: var(--mainfont); font-size: calc(.9em + 1px); line-height: 125%; color: var(--white); text-align: justify;] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum congue volutpat. Aenean id lorem eu purus scelerisque iaculis vitae quis mauris. Suspendisse potenti. Ut lacinia metus a malesuada sodales. Quisque orci sapien, placerat ac porta ac, sollicitudin eu elit. Integer et diam est. Nullam feugiat mi metus, aliquet sodales tortor molestie quis. Nam fringilla volutpat erat, non porttitor turpis laoreet quis.
  334.  
  335. Pellentesque semper, dui at commodo consectetur, ante orci tincidunt lacus, id cursus turpis ex non risus. Nunc lacus erat, scelerisque in cursus ut, aliquam vitae purus. Nulla nec malesuada nisi. Vivamus at nisi eros. Duis non cursus metus. Donec a lorem sed lorem fermentum feugiat. Sed nec nisl purus.[/border][comment]
  336.  
  337. // content end //
  338.  
  339. [/comment][/border][comment]
  340.  
  341. <---------------------------------------- end of tab 1 section 1 ----------------------------------------
  342.  
  343. [/comment][comment]
  344.  
  345. // spacer start //
  346.  
  347. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  348.  
  349. // spacer end //
  350.  
  351. [/comment][comment]
  352.  
  353. ---------------------------------------- start of tab 1 section 2 ---------------------------------------->
  354.  
  355. [/comment][border=0; display: flex; flex-flow: row nowrap; padding: 0; margin-right: -10px; width: calc(100% + 10px);][comment]
  356.  
  357. // title start //
  358.  
  359. [/comment][border=0; padding: 5px 0 5px 0; margin-right: 10px; flex: 1; max-width: 90px; min-width: 90px;][border=0; padding: 0; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--accent01); text-transform: uppercase; text-align: right;]Reserved Roles[/border][border=0; padding: 0; font-family: var(--mainfont); font-size: 2.1em; line-height: 100%; font-weight: 700; color: var(--white); text-transform: uppercase; text-align: right; letter-spacing: -2px;]002[/border][/border][comment]
  360.  
  361. // title end //
  362.  
  363. [/comment][comment]
  364.  
  365. // content start //
  366.  
  367. [/comment][border=0; border-left: 1px solid var(--accent01); padding: 5px 0 5px 10px; margin-right: 10px; flex: 9; width: calc(100% - 11px); font-family: var(--mainfont); font-size: calc(.9em + 1px); line-height: 125%; color: var(--white); text-align: justify;]Role01 [2/2]
  368. Role02 [0/2]
  369. Role03 [0/2]
  370. Role04 [1/1]
  371. Role05 [1/2][/border][comment]
  372.  
  373. // content end //
  374.  
  375. [/comment][/border][comment]
  376.  
  377. <---------------------------------------- end of tab 1 section 2 ----------------------------------------
  378.  
  379. [/comment][comment]
  380.  
  381. // spacer start //
  382.  
  383. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  384.  
  385. // spacer end //
  386.  
  387. [/comment][comment]
  388.  
  389. ---------------------------------------- start of tab 1 section 3 ---------------------------------------->
  390.  
  391. [/comment][border=0; display: flex; flex-flow: row nowrap; padding: 0; margin-right: -10px; width: calc(100% + 10px);][comment]
  392.  
  393. // title start //
  394.  
  395. [/comment][border=0; padding: 5px 0 5px 0; margin-right: 10px; flex: 1; max-width: 90px; min-width: 90px;][border=0; padding: 0; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--accent01); text-transform: uppercase; text-align: right;]Basic Info[/border][border=0; padding: 0; font-family: var(--mainfont); font-size: 2.1em; line-height: 100%; font-weight: 700; color: var(--white); text-transform: uppercase; text-align: right; letter-spacing: -2px;]003[/border][/border][comment]
  396.  
  397. // title end //
  398.  
  399. [/comment][comment]
  400.  
  401. // content start //
  402.  
  403. [/comment][border=0; border-left: 1px solid var(--accent01); padding: 5px 0 5px 10px; margin-right: 10px; flex: 9; width: calc(100% - 11px); font-family: var(--mainfont); font-size: calc(.9em + 1px); line-height: 125%; color: var(--white); text-align: justify;]Basic
  404.  
  405. Information
  406.  
  407. And
  408.  
  409. Stuff
  410.  
  411. Goes
  412.  
  413. Here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum congue volutpat. Aenean id lorem eu purus scelerisque iaculis vitae quis mauris.[/border][comment]
  414.  
  415. // content end //
  416.  
  417. [/comment][/border][comment]
  418.  
  419. <---------------------------------------- end of tab 1 section 3 ----------------------------------------
  420.  
  421. [/comment][comment]
  422.  
  423. // spacer start //
  424.  
  425. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  426.  
  427. // spacer end //
  428.  
  429. [/comment][comment]
  430.  
  431. ---------------------------------------- start of tab 1 section 4 ---------------------------------------->
  432.  
  433. [/comment][border=0; display: flex; flex-flow: row nowrap; padding: 0; margin-right: -10px; width: calc(100% + 10px);][comment]
  434.  
  435. // title start //
  436.  
  437. [/comment][border=0; padding: 5px 0 5px 0; margin-right: 10px; flex: 1; max-width: 90px; min-width: 90px;][border=0; padding: 0; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--accent01); text-transform: uppercase; text-align: right;]Appearance[/border][border=0; padding: 0; font-family: var(--mainfont); font-size: 2.1em; line-height: 100%; font-weight: 700; color: var(--white); text-transform: uppercase; text-align: right; letter-spacing: -2px;]004[/border][/border][comment]
  438.  
  439. // title end //
  440.  
  441. [/comment][comment]
  442.  
  443. // content start //
  444.  
  445. [/comment][border=0; border-left: 1px solid var(--accent01); padding: 5px 0 5px 10px; margin-right: 10px; flex: 9; width: calc(100% - 11px); font-family: var(--mainfont); font-size: calc(.9em + 1px); line-height: 125%; color: var(--white); text-align: justify;]Height
  446.  
  447. Hair Color
  448.  
  449. Eye Color
  450.  
  451. Appearance: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum congue volutpat. Aenean id lorem eu purus scelerisque iaculis vitae quis mauris.[/border][comment]
  452.  
  453. // content end //
  454.  
  455. [/comment][/border][comment]
  456.  
  457. <---------------------------------------- end of tab 1 section 4 ----------------------------------------
  458.  
  459. [/comment][comment]
  460.  
  461. // spacer start //
  462.  
  463. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  464.  
  465. // spacer end //
  466.  
  467. [/comment][comment]
  468.  
  469. ---------------------------------------- start of tab 1 section 5 ---------------------------------------->
  470.  
  471. [/comment][border=0; display: flex; flex-flow: row nowrap; padding: 0; margin-right: -10px; width: calc(100% + 10px);][comment]
  472.  
  473. // title start //
  474.  
  475. [/comment][border=0; padding: 5px 0 5px 0; margin-right: 10px; flex: 1; max-width: 90px; min-width: 90px;][border=0; padding: 0; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--accent01); text-transform: uppercase; text-align: right;]In-Depth[/border][border=0; padding: 0; font-family: var(--mainfont); font-size: 2.1em; line-height: 100%; font-weight: 700; color: var(--white); text-transform: uppercase; text-align: right; letter-spacing: -2px;]005[/border][/border][comment]
  476.  
  477. // title end //
  478.  
  479. [/comment][comment]
  480.  
  481. // content start //
  482.  
  483. [/comment][border=0; border-left: 1px solid var(--accent01); padding: 5px 0 5px 10px; margin-right: 10px; flex: 9; width: calc(100% - 11px); font-family: var(--mainfont); font-size: calc(.9em + 1px); line-height: 125%; color: var(--white); text-align: justify;]Personality: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum congue volutpat. Aenean id lorem eu purus scelerisque iaculis vitae quis mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum congue volutpat. Aenean id lorem eu purus scelerisque iaculis vitae quis mauris.
  484.  
  485. Backstory: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum congue volutpat. Aenean id lorem eu purus scelerisque iaculis vitae quis mauris.
  486.  
  487. Relationships: Aenean congue neque eu massa sodales interdum. In vitae lacinia nisl. Duis suscipit maximus enim, at mattis mauris facilisis eget. Praesent sagittis orci odio, in molestie quam venenatis ac.[/border][comment]
  488.  
  489. // content end //
  490.  
  491. [/comment][/border][comment]
  492.  
  493. <---------------------------------------- end of tab 1 section 5 ----------------------------------------
  494.  
  495. [/comment][comment]
  496.  
  497. // spacer start //
  498.  
  499. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  500.  
  501. // spacer end //
  502.  
  503. [/comment][comment]
  504.  
  505. ---------------------------------------- start of tab 1 section 6 ---------------------------------------->
  506.  
  507. [/comment][border=0; display: flex; flex-flow: row nowrap; padding: 0; margin-right: -10px; width: calc(100% + 10px);][comment]
  508.  
  509. // title start //
  510.  
  511. [/comment][border=0; padding: 5px 0 5px 0; margin-right: 10px; flex: 1; max-width: 90px; min-width: 90px;][border=0; padding: 0; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--accent01); text-transform: uppercase; text-align: right;]Combat[/border][border=0; padding: 0; font-family: var(--mainfont); font-size: 2.1em; line-height: 100%; font-weight: 700; color: var(--white); text-transform: uppercase; text-align: right; letter-spacing: -2px;]006[/border][/border][comment]
  512.  
  513. // title end //
  514.  
  515. [/comment][comment]
  516.  
  517. // content start //
  518.  
  519. [/comment][border=0; border-left: 1px solid var(--accent01); padding: 5px 0 5px 10px; margin-right: 10px; flex: 9; width: calc(100% - 11px); font-family: var(--mainfont); font-size: calc(.9em + 1px); line-height: 125%; color: var(--white); text-align: justify;]Equipment: Sed nec mollis risus, eget ultricies tortor. Nulla at magna et tellus pharetra ornare. In eget fringilla ante, non laoreet diam. Maecenas non arcu auctor, volutpat arcu at, luctus nisi. Quisque semper semper dapibus.
  520.  
  521. Combat Data: Suspendisse sed arcu leo. In non viverra orci. Aenean sed congue nibh. Fusce malesuada varius gravida. Etiam vel orci a lorem sodales laoreet.[/border][comment]
  522.  
  523. // content end //
  524.  
  525. [/comment][/border][comment]
  526.  
  527. <---------------------------------------- end of tab 1 section 6 ----------------------------------------
  528.  
  529. [/comment][/border][/border][comment]
  530.  
  531. <------------------------------ end of right side ------------------------------
  532.  
  533. [/comment][/border][/tab]
  534.  
  535.  
  536.  
  537.  
  538.  
  539.  
  540.  
  541.  
  542.  
  543.  
  544.  
  545. [tab=02020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202][comment]
  546.  
  547. // tab cover start //
  548.  
  549. [/comment][border=0; display: flex; padding: 0; position: absolute; top: 35px; left: 185px; z-index: 8; pointer-events: initial;][border=0; padding: 0; width: 27px; height: 27px; background: var(--black); clip-path: polygon(100% 0, 0 100%, 100% 100%);][/border][border=0; display: flex; justify-content: right; align-items: center; padding: 0 7px 0 0; width: 125px; height: 27px; background: var(--black); font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--accent01); text-transform: uppercase;]Roster[/border][/border][comment]
  550.  
  551. // tab cover end //
  552.  
  553. [/comment][border=0; font-size: initial; line-height: initial; display: flex; flex-flow: row wrap; justify-content: center; padding: 0 25px; width: calc(100% - 25px); overflow: hidden; position: absolute; top: 101px; z-index: 6;][comment]
  554.  
  555. ------------------------------ start of left side ------------------------------>
  556.  
  557. [/comment][border=0; padding: 0; margin-right: 25px; margin-bottom: 50px; flex: 1; width: calc(100% - 25px); max-width: 400px; min-width: 200px; height: 70vh; min-height: 400px; max-height: 600px; background: var(--tab02img); clip-path: polygon(100px 0%, 100% 0, 100% calc(100% - 100px), calc(100% - 100px) 100%, 0 100%, 0 100px); overflow: hidden; position: relative;][border=0; padding: 0; background: var(--digital); position: absolute; top: 0; bottom: 0; left: 0; right: 0;][/border][comment]
  558.  
  559. ---------------------------------------- start of tab number ---------------------------------------->
  560.  
  561. [/comment][border=0; padding: 0; font-family: var(--mainfont); font-size: 150px; font-weight: 700; line-height: 100%; letter-spacing: -20px; color: var(--white); position: absolute; top: -48px; right: -10px; opacity: .5;]02[/border][comment]
  562.  
  563. <---------------------------------------- end tab number ----------------------------------------
  564.  
  565. [/comment][comment]
  566.  
  567. ---------------------------------------- start of tab label ---------------------------------------->
  568.  
  569. [/comment][border=0; padding: 0; width: calc(100% - 75px); position: absolute; bottom: 50px; left: 25px; opacity: .7;][comment]
  570.  
  571. -------------------------------------------------- start of tab title -------------------------------------------------->
  572.  
  573. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]Roster[/border][/border][comment]
  574.  
  575. <-------------------------------------------------- end of tab title --------------------------------------------------
  576.  
  577. [/comment][comment]
  578.  
  579. -------------------------------------------------- start of blurb under title -------------------------------------------------->
  580.  
  581. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]A warrior needs not concern themselves with matters within the purview of men[/border][/border][comment]
  582.  
  583. <-------------------------------------------------- end of blurb under title --------------------------------------------------
  584.  
  585. [/comment][/border][comment]
  586.  
  587. <---------------------------------------- end tab label ----------------------------------------
  588.  
  589. [/comment][/border][comment]
  590.  
  591. <------------------------------ end of left side ------------------------------
  592.  
  593. [/comment][comment]
  594.  
  595. ------------------------------ start of right side ------------------------------>
  596.  
  597. [/comment][border=0; padding: 0; margin-right: 25px; margin-bottom: 50px; flex: 2; width: calc(100% - 25px); min-width: 200px; height: 70vh; min-height: 400px; max-height: 600px; overflow: hidden;][border=0; padding: 0 30px 0 0; width: 100%; height: 70vh; min-height: 400px; max-height: 600px; overflow-y: scroll; overflow-x: hidden;][comment]
  598.  
  599. ---------------------------------------- start of tab 2 section 1 ---------------------------------------->
  600.  
  601. [/comment][comment]
  602.  
  603. // title start //
  604.  
  605. [/comment][border=0; border-bottom: 1px solid var(--accent01); padding: 0 0 5px 0; width: 100%; font-family: var(--mainfont); font-size: 1em; line-height: 100%; color: var(--accent01); text-transform: uppercase; text-align: right;]Squad Nu-8 [border=0; line-height: 100%; display: inline; padding: 0; font-size: 2.5em; font-weight: 700; color: var(--white); letter-spacing: -2px;]N8[/border][/border][comment]
  606.  
  607. // title end //
  608.  
  609. [/comment][comment]
  610.  
  611. // content start //
  612.  
  613. [/comment][border=0; display: flex; flex-flow: row wrap; padding: 0; margin-top: 10px; margin-right: -15px; width: calc(100% + 15px);][comment]
  614.  
  615. ... roster icon 1 start ...
  616.  
  617. [/comment][border=0; padding: 0; margin-right: 15px; margin-bottom: 25px; flex: 1; width: calc(100% - 15px); max-width: 200px; min-width: 200px; height: 300px; background: var(--Roster01); clip-path: polygon(50px 0%, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%, 0 50px); overflow: hidden; position: relative;][border=0; padding: 0; background: var(--digital); position: absolute; top: 0; bottom: 0; left: 0; right: 0;][/border][comment]
  618.  
  619. ---------------------------------------- start of roster 1 label ---------------------------------------->
  620.  
  621. [/comment][border=0; padding: 0; width: calc(100% - 35px); position: absolute; bottom: 25px; left: 15px; opacity: .7;][comment]
  622.  
  623. -------------------------------------------------- start of roster 1 title -------------------------------------------------->
  624.  
  625. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]Asanah[/border][/border][comment]
  626.  
  627. <-------------------------------------------------- end of roster 1 title --------------------------------------------------
  628.  
  629. [/comment][comment]
  630.  
  631. -------------------------------------------------- start of blurb under roster name -------------------------------------------------->
  632.  
  633. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]Skull[/border][/border][comment]
  634.  
  635. <-------------------------------------------------- end of blurb under roster name --------------------------------------------------
  636.  
  637. [/comment][/border][comment]
  638.  
  639. <---------------------------------------- end of roster 1 label ----------------------------------------
  640.  
  641. [/comment][/border][comment]
  642.  
  643. ... roster icon 1 end ...
  644.  
  645. [/comment][comment]
  646.  
  647. ... roster icon 2 start ...
  648.  
  649. [/comment][border=0; padding: 0; margin-right: 15px; margin-bottom: 25px; flex: 1; width: calc(100% - 15px); max-width: 200px; min-width: 200px; height: 300px; background: var(--Roster02); clip-path: polygon(50px 0%, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%, 0 50px); overflow: hidden; position: relative;][border=0; padding: 0; background: var(--digital); position: absolute; top: 0; bottom: 0; left: 0; right: 0;][/border][comment]
  650.  
  651. ---------------------------------------- start of roster 2 label ---------------------------------------->
  652.  
  653. [/comment][border=0; padding: 0; width: calc(100% - 35px); position: absolute; bottom: 25px; left: 15px; opacity: .7;][comment]
  654.  
  655. -------------------------------------------------- start of roster 2 title -------------------------------------------------->
  656.  
  657. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]Mirianne Elle Philios[/border][/border][comment]
  658.  
  659. <-------------------------------------------------- end of roster 2 title --------------------------------------------------
  660.  
  661. [/comment][comment]
  662.  
  663. -------------------------------------------------- start of blurb under roster name -------------------------------------------------->
  664.  
  665. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]Koschei[/border][/border][comment]
  666.  
  667. <-------------------------------------------------- end of blurb under roster name --------------------------------------------------
  668.  
  669. [/comment][/border][comment]
  670.  
  671. <---------------------------------------- end of roster 2 label ----------------------------------------
  672.  
  673. [/comment][/border][comment]
  674.  
  675. ... roster icon 2 end ...
  676.  
  677. [/comment][comment]
  678.  
  679. ... roster icon 3 start ...
  680.  
  681. [/comment][border=0; padding: 0; margin-right: 15px; margin-bottom: 25px; flex: 1; width: calc(100% - 15px); max-width: 200px; min-width: 200px; height: 300px; background: var(--Roster03); clip-path: polygon(50px 0%, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%, 0 50px); overflow: hidden; position: relative;][border=0; padding: 0; background: var(--digital); position: absolute; top: 0; bottom: 0; left: 0; right: 0;][/border][comment]
  682.  
  683. ---------------------------------------- start of roster 3 label ---------------------------------------->
  684.  
  685. [/comment][border=0; padding: 0; width: calc(100% - 35px); position: absolute; bottom: 25px; left: 15px; opacity: .7;][comment]
  686.  
  687. -------------------------------------------------- start of roster 3 title -------------------------------------------------->
  688.  
  689. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]Heathcliff Ikilen[/border][/border][comment]
  690.  
  691. <-------------------------------------------------- end of roster 3 title --------------------------------------------------
  692.  
  693. [/comment][comment]
  694.  
  695. -------------------------------------------------- start of blurb under roster name -------------------------------------------------->
  696.  
  697. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]Haze[/border][/border][comment]
  698.  
  699. <-------------------------------------------------- end of blurb under roster name --------------------------------------------------
  700.  
  701. [/comment][/border][comment]
  702.  
  703. <---------------------------------------- end of roster 3 label ----------------------------------------
  704.  
  705. [/comment][/border][comment]
  706.  
  707. ... roster icon 3 end ...
  708.  
  709. [/comment][comment]
  710.  
  711. ... roster icon 4 start ...
  712.  
  713. [/comment][border=0; padding: 0; margin-right: 15px; margin-bottom: 25px; flex: 1; width: calc(100% - 15px); max-width: 200px; min-width: 200px; height: 300px; background: var(--Roster04); clip-path: polygon(50px 0%, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%, 0 50px); overflow: hidden; position: relative;][border=0; padding: 0; background: var(--digital); position: absolute; top: 0; bottom: 0; left: 0; right: 0;][/border][comment]
  714.  
  715. ---------------------------------------- start of roster 4 label ---------------------------------------->
  716.  
  717. [/comment][border=0; padding: 0; width: calc(100% - 35px); position: absolute; bottom: 25px; left: 15px; opacity: .7;][comment]
  718.  
  719. -------------------------------------------------- start of roster 4 title -------------------------------------------------->
  720.  
  721. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]Regal[/border][/border][comment]
  722.  
  723. <-------------------------------------------------- end of roster 4 title --------------------------------------------------
  724.  
  725. [/comment][comment]
  726.  
  727. -------------------------------------------------- start of blurb under roster name -------------------------------------------------->
  728.  
  729. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]--[/border][/border][comment]
  730.  
  731. <-------------------------------------------------- end of blurb under roster name --------------------------------------------------
  732.  
  733. [/comment][/border][comment]
  734.  
  735. <---------------------------------------- end of roster 4 label ----------------------------------------
  736.  
  737. [/comment][/border][comment]
  738.  
  739. ... roster icon 4 end ...
  740.  
  741. [/comment][/border][comment]
  742.  
  743. // content end //
  744.  
  745. [/comment][comment]
  746.  
  747. <---------------------------------------- end of tab 2 section 1 ----------------------------------------
  748.  
  749. [/comment][comment]
  750.  
  751. // spacer start //
  752.  
  753. [/comment][border=0; padding: 0; height: 10px;][/border][comment]
  754.  
  755. // spacer end //
  756.  
  757. [/comment][comment]
  758.  
  759. ---------------------------------------- start of tab 2 section 2 ---------------------------------------->
  760.  
  761. [/comment][comment]
  762.  
  763. // title start //
  764.  
  765. [/comment][border=0; border-bottom: 1px solid var(--accent01); padding: 0 0 5px 0; width: 100%; font-family: var(--mainfont); font-size: 1em; line-height: 100%; color: var(--accent01); text-transform: uppercase; text-align: right;]Squad Lambda-59 [border=0; line-height: 100%; display: inline; padding: 0; font-size: 2.5em; font-weight: 700; color: var(--white); letter-spacing: -2px;]λ59[/border][/border][comment]
  766.  
  767. // title end //
  768.  
  769. [/comment][comment]
  770.  
  771. // content start //
  772.  
  773. [/comment][border=0; display: flex; flex-flow: row wrap; padding: 0; margin-top: 10px; margin-right: -15px; width: calc(100% + 15px);][comment]
  774.  
  775. ... roster icon 1 start ...
  776.  
  777. [/comment][border=0; padding: 0; margin-right: 15px; margin-bottom: 25px; flex: 1; width: calc(100% - 15px); max-width: 200px; min-width: 200px; height: 300px; background: var(--Roster05); clip-path: polygon(50px 0%, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%, 0 50px); overflow: hidden; position: relative;][border=0; padding: 0; background: var(--digital); position: absolute; top: 0; bottom: 0; left: 0; right: 0;][/border][comment]
  778.  
  779. ---------------------------------------- start of roster 1 label ---------------------------------------->
  780.  
  781. [/comment][border=0; padding: 0; width: calc(100% - 35px); position: absolute; bottom: 25px; left: 15px; opacity: .7;][comment]
  782.  
  783. -------------------------------------------------- start of roster 1 title -------------------------------------------------->
  784.  
  785. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]G02OD-I2032-S0419[/border][/border][comment]
  786.  
  787. <-------------------------------------------------- end of roster 1 title --------------------------------------------------
  788.  
  789. [/comment][comment]
  790.  
  791. -------------------------------------------------- start of blurb under roster name -------------------------------------------------->
  792.  
  793. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]Caiman[/border][/border][comment]
  794.  
  795. <-------------------------------------------------- end of blurb under roster name --------------------------------------------------
  796.  
  797. [/comment][/border][comment]
  798.  
  799. <---------------------------------------- end of roster 1 label ----------------------------------------
  800.  
  801. [/comment][/border][comment]
  802.  
  803. ... roster icon 1 end ...
  804.  
  805. [/comment][comment]
  806.  
  807. ... roster icon 2 start ...
  808.  
  809. [/comment][border=0; padding: 0; margin-right: 15px; margin-bottom: 25px; flex: 1; width: calc(100% - 15px); max-width: 200px; min-width: 200px; height: 300px; background: var(--Roster06); clip-path: polygon(50px 0%, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%, 0 50px); overflow: hidden; position: relative;][border=0; padding: 0; background: var(--digital); position: absolute; top: 0; bottom: 0; left: 0; right: 0;][/border][comment]
  810.  
  811. ---------------------------------------- start of roster 2 label ---------------------------------------->
  812.  
  813. [/comment][border=0; padding: 0; width: calc(100% - 35px); position: absolute; bottom: 25px; left: 15px; opacity: .7;][comment]
  814.  
  815. -------------------------------------------------- start of roster 2 title -------------------------------------------------->
  816.  
  817. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]G09OD-I1178-Z6172[/border][/border][comment]
  818.  
  819. <-------------------------------------------------- end of roster 2 title --------------------------------------------------
  820.  
  821. [/comment][comment]
  822.  
  823. -------------------------------------------------- start of blurb under roster name -------------------------------------------------->
  824.  
  825. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]Cobra[/border][/border][comment]
  826.  
  827. <-------------------------------------------------- end of blurb under roster name --------------------------------------------------
  828.  
  829. [/comment][/border][comment]
  830.  
  831. <---------------------------------------- end of roster 2 label ----------------------------------------
  832.  
  833. [/comment][/border][comment]
  834.  
  835. ... roster icon 2 end ...
  836.  
  837. [/comment][comment]
  838.  
  839. ... roster icon 3 start ...
  840.  
  841. [/comment][border=0; padding: 0; margin-right: 15px; margin-bottom: 25px; flex: 1; width: calc(100% - 15px); max-width: 200px; min-width: 200px; height: 300px; background: var(--Roster07); clip-path: polygon(50px 0%, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%, 0 50px); overflow: hidden; position: relative;][border=0; padding: 0; background: var(--digital); position: absolute; top: 0; bottom: 0; left: 0; right: 0;][/border][comment]
  842.  
  843. ---------------------------------------- start of roster 3 label ---------------------------------------->
  844.  
  845. [/comment][border=0; padding: 0; width: calc(100% - 35px); position: absolute; bottom: 25px; left: 15px; opacity: .7;][comment]
  846.  
  847. -------------------------------------------------- start of roster 3 title -------------------------------------------------->
  848.  
  849. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]Sage Smith[/border][/border][comment]
  850.  
  851. <-------------------------------------------------- end of roster 3 title --------------------------------------------------
  852.  
  853. [/comment][comment]
  854.  
  855. -------------------------------------------------- start of blurb under roster name -------------------------------------------------->
  856.  
  857. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]Evergreen[/border][/border][comment]
  858.  
  859. <-------------------------------------------------- end of blurb under roster name --------------------------------------------------
  860.  
  861. [/comment][/border][comment]
  862.  
  863. <---------------------------------------- end of roster 3 label ----------------------------------------
  864.  
  865. [/comment][/border][comment]
  866.  
  867. ... roster icon 3 end ...
  868.  
  869. [/comment][comment]
  870.  
  871. ... roster icon 4 start ...
  872.  
  873. [/comment][border=0; padding: 0; margin-right: 15px; margin-bottom: 25px; flex: 1; width: calc(100% - 15px); max-width: 200px; min-width: 200px; height: 300px; background: var(--Roster08); clip-path: polygon(50px 0%, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%, 0 50px); overflow: hidden; position: relative;][border=0; padding: 0; background: var(--digital); position: absolute; top: 0; bottom: 0; left: 0; right: 0;][/border][comment]
  874.  
  875. ---------------------------------------- start of roster 4 label ---------------------------------------->
  876.  
  877. [/comment][border=0; padding: 0; width: calc(100% - 35px); position: absolute; bottom: 25px; left: 15px; opacity: .7;][comment]
  878.  
  879. -------------------------------------------------- start of roster 4 title -------------------------------------------------->
  880.  
  881. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]E 204[/border][/border][comment]
  882.  
  883. <-------------------------------------------------- end of roster 4 title --------------------------------------------------
  884.  
  885. [/comment][comment]
  886.  
  887. -------------------------------------------------- start of blurb under roster name -------------------------------------------------->
  888.  
  889. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]Evander[/border][/border][comment]
  890.  
  891. <-------------------------------------------------- end of blurb under roster name --------------------------------------------------
  892.  
  893. [/comment][/border][comment]
  894.  
  895. <---------------------------------------- end of roster 4 label ----------------------------------------
  896.  
  897. [/comment][/border][comment]
  898.  
  899. ... roster icon 4 end ...
  900.  
  901. [/comment][/border][comment]
  902.  
  903. // content end //
  904.  
  905. [/comment][comment]
  906.  
  907. <---------------------------------------- end of tab 2 section 2 ----------------------------------------
  908.  
  909. [/comment][/border][/border][comment]
  910.  
  911. <------------------------------ end of right side ------------------------------
  912.  
  913. [/comment][/border][/tab]
  914.  
  915.  
  916.  
  917.  
  918.  
  919.  
  920.  
  921.  
  922.  
  923.  
  924.  
  925. [tab=03030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303][comment]
  926.  
  927. // tab cover start //
  928.  
  929. [/comment][border=0; display: flex; padding: 0; position: absolute; top: 68px; left: 152px; z-index: 8; pointer-events: initial;][border=0; padding: 0; width: 27px; height: 27px; background: var(--black); clip-path: polygon(100% 0, 0 100%, 100% 100%);][/border][border=0; display: flex; justify-content: right; align-items: center; padding: 0 7px 0 0; width: 158px; height: 27px; background: var(--black); font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--accent01); text-transform: uppercase;]NPC[/border][/border][comment]
  930.  
  931. // tab cover end //
  932.  
  933. [/comment][border=0; font-size: initial; line-height: initial; display: flex; flex-flow: row wrap; justify-content: center; padding: 0 25px; width: calc(100% - 25px); overflow: hidden; position: absolute; top: 101px; z-index: 6;][comment]
  934.  
  935. ------------------------------ start of left side ------------------------------>
  936.  
  937. [/comment][border=0; padding: 0; margin-right: 25px; margin-bottom: 50px; flex: 1; width: calc(100% - 25px); max-width: 400px; min-width: 200px; height: 70vh; min-height: 400px; max-height: 600px; background: var(--tab03img); clip-path: polygon(100px 0%, 100% 0, 100% calc(100% - 100px), calc(100% - 100px) 100%, 0 100%, 0 100px); overflow: hidden; position: relative;][border=0; padding: 0; background: var(--digital); position: absolute; top: 0; bottom: 0; left: 0; right: 0;][/border][comment]
  938.  
  939. ---------------------------------------- start of tab number ---------------------------------------->
  940.  
  941. [/comment][border=0; padding: 0; font-family: var(--mainfont); font-size: 150px; font-weight: 700; line-height: 100%; letter-spacing: -20px; color: var(--white); position: absolute; top: -48px; right: -10px; opacity: .5;]03[/border][comment]
  942.  
  943. <---------------------------------------- end tab number ----------------------------------------
  944.  
  945. [/comment][comment]
  946.  
  947. ---------------------------------------- start of tab label ---------------------------------------->
  948.  
  949. [/comment][border=0; padding: 0; width: calc(100% - 75px); position: absolute; bottom: 50px; left: 25px; opacity: .7;][comment]
  950.  
  951. -------------------------------------------------- start of tab title -------------------------------------------------->
  952.  
  953. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]NPC[/border][/border][comment]
  954.  
  955. <-------------------------------------------------- end of tab title --------------------------------------------------
  956.  
  957. [/comment][comment]
  958.  
  959. -------------------------------------------------- start of blurb under title -------------------------------------------------->
  960.  
  961. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]A warrior needs not concern themselves with matters within the purview of men[/border][/border][comment]
  962.  
  963. <-------------------------------------------------- end of blurb under title --------------------------------------------------
  964.  
  965. [/comment][/border][comment]
  966.  
  967. <---------------------------------------- end tab label ----------------------------------------
  968.  
  969. [/comment][/border][comment]
  970.  
  971. <------------------------------ end of left side ------------------------------
  972.  
  973. [/comment][comment]
  974.  
  975. ------------------------------ start of right side ------------------------------>
  976.  
  977. [/comment][border=0; padding: 0; margin-right: 25px; margin-bottom: 50px; flex: 2; width: calc(100% - 25px); min-width: 200px; height: 70vh; min-height: 400px; max-height: 600px; overflow: hidden;][border=0; padding: 0 30px 0 0; width: 100%; height: 70vh; min-height: 400px; max-height: 600px; overflow-y: scroll; overflow-x: hidden;][comment]
  978.  
  979. ---------------------------------------- start of tab 2 section 1 ---------------------------------------->
  980.  
  981. [/comment][comment]
  982.  
  983. -------------------------------------------------- start of tab 2 section 1 images -------------------------------------------------->
  984.  
  985. [/comment][border=0; display: flex; flex-flow: row wrap; justify-content: center; padding: 0; margin-right: -30px; width: calc(100% + 30px);][comment]
  986.  
  987. // left side image start //
  988.  
  989. [/comment][border=0; padding: 0; margin-right: 30px; margin-bottom: 25px; flex: 3; width: 100%; min-width: 300px; height: 300px; background: var(--npc01); overflow: hidden;][border=0; padding: 0; width: 100%; height: 300px; background: var(--digital);][/border][/border][comment]
  990.  
  991. // left side image end //
  992.  
  993. [/comment][comment]
  994.  
  995. // right side images start //
  996.  
  997. [/comment][border=0; padding: 0; margin-right: 30px; display: flex; justify-content: center; align-items: center; flex: 1; min-width: 225px; max-width: 225px; height: 300px; overflow: hidden;][border=0; padding: 0; width: 225px; height: 225px; position: relative;][comment]
  998.  
  999. ... icon 01 start ...
  1000.  
  1001. [/comment][border=0; padding: 0; width: 100px; height: 100px; background: var(--npc01icon01); position: absolute; top: 0; left: 0;][border=0; padding: 0; width: 100px; height: 100px; background: var(--digital);][/border][/border][comment]
  1002.  
  1003. ... icon 01 end ...
  1004.  
  1005. [/comment][comment]
  1006.  
  1007. ... icon 02 start ...
  1008.  
  1009. [/comment][border=0; padding: 0; width: 100px; height: 100px; background: var(--npc01icon02); position: absolute; top: 0; right: 0;][border=0; padding: 0; width: 100px; height: 100px; background: var(--digital);][/border][/border][comment]
  1010.  
  1011. ... icon 02 end ...
  1012.  
  1013. [/comment][comment]
  1014.  
  1015. ... icon 03 start ...
  1016.  
  1017. [/comment][border=0; padding: 0; width: 100px; height: 100px; background: var(--npc01icon03); position: absolute; bottom: 0; left: 0;][border=0; padding: 0; width: 100px; height: 100px; background: var(--digital);][/border][/border][comment]
  1018.  
  1019. ... icon 03 end ...
  1020.  
  1021. [/comment][comment]
  1022.  
  1023. ... icon 04 start ...
  1024.  
  1025. [/comment][border=0; padding: 0; width: 100px; height: 100px; background: var(--npc01icon04); position: absolute; bottom: 0; right: 0;][border=0; padding: 0; width: 100px; height: 100px; background: var(--digital);][/border][/border][comment]
  1026.  
  1027. ... icon 04 end ...
  1028.  
  1029. [/comment][/border][/border][comment]
  1030.  
  1031. // right side images end //
  1032.  
  1033. [/comment][/border][comment]
  1034.  
  1035. <-------------------------------------------------- end of tab 2 section 1 images --------------------------------------------------
  1036.  
  1037. [/comment][border=0; display: flex; flex-flow: row nowrap; padding: 0; margin-right: -10px; width: calc(100% + 10px);][comment]
  1038.  
  1039. // title start //
  1040.  
  1041. [/comment][border=0; padding: 5px 0 5px 0; margin-right: 10px; flex: 1; max-width: 90px; min-width: 90px;][border=0; padding: 0; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--accent01); text-transform: uppercase; text-align: right;]First Lastname[/border][border=0; padding: 0; font-family: var(--mainfont); font-size: 2.1em; line-height: 100%; font-weight: 700; color: var(--white); text-transform: uppercase; text-align: right; letter-spacing: -2px;]001[/border][/border][comment]
  1042.  
  1043. // title end //
  1044.  
  1045. [/comment][comment]
  1046.  
  1047. // content start //
  1048.  
  1049. [/comment][border=0; border-left: 1px solid var(--accent01); padding: 5px 0 5px 10px; margin-right: 10px; flex: 9; width: calc(100% - 11px); font-family: var(--mainfont); font-size: calc(.9em + 1px); line-height: 125%; color: var(--white); text-align: justify;]Race: --
  1050. Height: --
  1051. Affiliation: --
  1052. Role: --
  1053. Birthplace: --
  1054. Affinity: --
  1055.  
  1056. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum congue volutpat. Aenean id lorem eu purus scelerisque iaculis vitae quis mauris. Suspendisse potenti. Ut lacinia metus a malesuada sodales. Quisque orci sapien, placerat ac porta ac, sollicitudin eu elit. Integer et diam est. Nullam feugiat mi metus, aliquet sodales tortor molestie quis. Nam fringilla volutpat erat, non porttitor turpis laoreet quis.
  1057.  
  1058. Pellentesque semper, dui at commodo consectetur, ante orci tincidunt lacus, id cursus turpis ex non risus. Nunc lacus erat, scelerisque in cursus ut, aliquam vitae purus. Nulla nec malesuada nisi. Vivamus at nisi eros. Duis non cursus metus. Donec a lorem sed lorem fermentum feugiat. Sed nec nisl purus.
  1059.  
  1060. Aenean congue neque eu massa sodales interdum. In vitae lacinia nisl. Duis suscipit maximus enim, at mattis mauris facilisis eget. Praesent sagittis orci odio, in molestie quam venenatis ac. Integer at ante ut ligula gravida vulputate. Aliquam sagittis, ex ut mollis consequat, sem tellus ultrices eros, et consequat est erat id dolor. Cras dolor arcu, pharetra in tortor nec, finibus fringilla quam. Mauris a purus nec velit egestas condimentum. Phasellus cursus elementum tempus. Nulla et urna lacus.[/border][comment]
  1061.  
  1062. // content end //
  1063.  
  1064. [/comment][/border][comment]
  1065.  
  1066. <---------------------------------------- end of tab 2 section 1 ----------------------------------------
  1067.  
  1068. [/comment][comment]
  1069.  
  1070. // spacer start //
  1071.  
  1072. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  1073.  
  1074. // spacer end //
  1075.  
  1076. [/comment][comment]
  1077.  
  1078. ---------------------------------------- start of tab 2 section 2 ---------------------------------------->
  1079.  
  1080. [/comment][comment]
  1081.  
  1082. -------------------------------------------------- start of tab 2 section 2 images -------------------------------------------------->
  1083.  
  1084. [/comment][border=0; display: flex; flex-flow: row wrap; justify-content: center; padding: 0; margin-right: -30px; width: calc(100% + 30px);][comment]
  1085.  
  1086. // left side image start //
  1087.  
  1088. [/comment][border=0; padding: 0; margin-right: 30px; margin-bottom: 25px; flex: 3; width: 100%; min-width: 300px; height: 300px; background: var(--npc02); overflow: hidden;][border=0; padding: 0; width: 100%; height: 300px; background: var(--digital);][/border][/border][comment]
  1089.  
  1090. // left side image end //
  1091.  
  1092. [/comment][comment]
  1093.  
  1094. // right side images start //
  1095.  
  1096. [/comment][border=0; padding: 0; margin-right: 30px; display: flex; justify-content: center; align-items: center; flex: 1; min-width: 225px; max-width: 225px; height: 300px; overflow: hidden;][border=0; padding: 0; width: 225px; height: 225px; position: relative;][comment]
  1097.  
  1098. ... icon 01 start ...
  1099.  
  1100. [/comment][border=0; padding: 0; width: 100px; height: 100px; background: var(--npc02icon01); position: absolute; top: 0; left: 0;][border=0; padding: 0; width: 100px; height: 100px; background: var(--digital);][/border][/border][comment]
  1101.  
  1102. ... icon 01 end ...
  1103.  
  1104. [/comment][comment]
  1105.  
  1106. ... icon 02 start ...
  1107.  
  1108. [/comment][border=0; padding: 0; width: 100px; height: 100px; background: var(--npc02icon02); position: absolute; top: 0; right: 0;][border=0; padding: 0; width: 100px; height: 100px; background: var(--digital);][/border][/border][comment]
  1109.  
  1110. ... icon 02 end ...
  1111.  
  1112. [/comment][comment]
  1113.  
  1114. ... icon 03 start ...
  1115.  
  1116. [/comment][border=0; padding: 0; width: 100px; height: 100px; background: var(--npc02icon03); position: absolute; bottom: 0; left: 0;][border=0; padding: 0; width: 100px; height: 100px; background: var(--digital);][/border][/border][comment]
  1117.  
  1118. ... icon 03 end ...
  1119.  
  1120. [/comment][comment]
  1121.  
  1122. ... icon 04 start ...
  1123.  
  1124. [/comment][border=0; padding: 0; width: 100px; height: 100px; background: var(--npc02icon04); position: absolute; bottom: 0; right: 0;][border=0; padding: 0; width: 100px; height: 100px; background: var(--digital);][/border][/border][comment]
  1125.  
  1126. ... icon 04 end ...
  1127.  
  1128. [/comment][/border][/border][comment]
  1129.  
  1130. // right side images end //
  1131.  
  1132. [/comment][/border][comment]
  1133.  
  1134. <-------------------------------------------------- end of tab 2 section 2 images --------------------------------------------------
  1135.  
  1136. [/comment][border=0; display: flex; flex-flow: row nowrap; padding: 0; margin-right: -10px; width: calc(100% + 10px);][comment]
  1137.  
  1138. // title start //
  1139.  
  1140. [/comment][border=0; padding: 5px 0 5px 0; margin-right: 10px; flex: 1; max-width: 90px; min-width: 90px;][border=0; padding: 0; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--accent01); text-transform: uppercase; text-align: right;]First Lastname[/border][border=0; padding: 0; font-family: var(--mainfont); font-size: 2.1em; line-height: 100%; font-weight: 700; color: var(--white); text-transform: uppercase; text-align: right; letter-spacing: -2px;]002[/border][/border][comment]
  1141.  
  1142. // title end //
  1143.  
  1144. [/comment][comment]
  1145.  
  1146. // content start //
  1147.  
  1148. [/comment][border=0; border-left: 1px solid var(--accent01); padding: 5px 0 5px 10px; margin-right: 10px; flex: 9; width: calc(100% - 11px); font-family: var(--mainfont); font-size: calc(.9em + 1px); line-height: 125%; color: var(--white); text-align: justify;]Race: --
  1149. Height: --
  1150. Affiliation: --
  1151. Role: --
  1152. Birthplace: --
  1153. Affinity: --
  1154.  
  1155. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum congue volutpat. Aenean id lorem eu purus scelerisque iaculis vitae quis mauris. Suspendisse potenti. Ut lacinia metus a malesuada sodales. Quisque orci sapien, placerat ac porta ac, sollicitudin eu elit. Integer et diam est. Nullam feugiat mi metus, aliquet sodales tortor molestie quis. Nam fringilla volutpat erat, non porttitor turpis laoreet quis.
  1156.  
  1157. Pellentesque semper, dui at commodo consectetur, ante orci tincidunt lacus, id cursus turpis ex non risus. Nunc lacus erat, scelerisque in cursus ut, aliquam vitae purus. Nulla nec malesuada nisi. Vivamus at nisi eros. Duis non cursus metus. Donec a lorem sed lorem fermentum feugiat. Sed nec nisl purus.
  1158.  
  1159. Aenean congue neque eu massa sodales interdum. In vitae lacinia nisl. Duis suscipit maximus enim, at mattis mauris facilisis eget. Praesent sagittis orci odio, in molestie quam venenatis ac. Integer at ante ut ligula gravida vulputate. Aliquam sagittis, ex ut mollis consequat, sem tellus ultrices eros, et consequat est erat id dolor. Cras dolor arcu, pharetra in tortor nec, finibus fringilla quam. Mauris a purus nec velit egestas condimentum. Phasellus cursus elementum tempus. Nulla et urna lacus.[/border][comment]
  1160.  
  1161. // content end //
  1162.  
  1163. [/comment][/border][comment]
  1164.  
  1165. <---------------------------------------- end of tab 2 section 2 ----------------------------------------
  1166.  
  1167. [/comment][comment]
  1168.  
  1169. // spacer start //
  1170.  
  1171. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  1172.  
  1173. // spacer end //
  1174.  
  1175. [/comment][comment]
  1176.  
  1177. ---------------------------------------- start of tab 2 section 3 ---------------------------------------->
  1178.  
  1179. [/comment][comment]
  1180.  
  1181. -------------------------------------------------- start of tab 2 section 3 images -------------------------------------------------->
  1182.  
  1183. [/comment][border=0; display: flex; flex-flow: row wrap; justify-content: center; padding: 0; margin-right: -30px; width: calc(100% + 30px);][comment]
  1184.  
  1185. // left side image start //
  1186.  
  1187. [/comment][border=0; padding: 0; margin-right: 30px; margin-bottom: 25px; flex: 3; width: 100%; min-width: 300px; height: 300px; background: var(--npc03); overflow: hidden;][border=0; padding: 0; width: 100%; height: 300px; background: var(--digital);][/border][/border][comment]
  1188.  
  1189. // left side image end //
  1190.  
  1191. [/comment][comment]
  1192.  
  1193. // right side images start //
  1194.  
  1195. [/comment][border=0; padding: 0; margin-right: 30px; display: flex; justify-content: center; align-items: center; flex: 1; min-width: 225px; max-width: 225px; height: 300px; overflow: hidden;][border=0; padding: 0; width: 225px; height: 225px; position: relative;][comment]
  1196.  
  1197. ... icon 01 start ...
  1198.  
  1199. [/comment][border=0; padding: 0; width: 100px; height: 100px; background: var(--npc03icon01); position: absolute; top: 0; left: 0;][border=0; padding: 0; width: 100px; height: 100px; background: var(--digital);][/border][/border][comment]
  1200.  
  1201. ... icon 01 end ...
  1202.  
  1203. [/comment][comment]
  1204.  
  1205. ... icon 02 start ...
  1206.  
  1207. [/comment][border=0; padding: 0; width: 100px; height: 100px; background: var(--npc03icon02); position: absolute; top: 0; right: 0;][border=0; padding: 0; width: 100px; height: 100px; background: var(--digital);][/border][/border][comment]
  1208.  
  1209. ... icon 02 end ...
  1210.  
  1211. [/comment][comment]
  1212.  
  1213. ... icon 03 start ...
  1214.  
  1215. [/comment][border=0; padding: 0; width: 100px; height: 100px; background: var(--npc03icon03); position: absolute; bottom: 0; left: 0;][border=0; padding: 0; width: 100px; height: 100px; background: var(--digital);][/border][/border][comment]
  1216.  
  1217. ... icon 03 end ...
  1218.  
  1219. [/comment][comment]
  1220.  
  1221. ... icon 04 start ...
  1222.  
  1223. [/comment][border=0; padding: 0; width: 100px; height: 100px; background: var(--npc03icon04); position: absolute; bottom: 0; right: 0;][border=0; padding: 0; width: 100px; height: 100px; background: var(--digital);][/border][/border][comment]
  1224.  
  1225. ... icon 04 end ...
  1226.  
  1227. [/comment][/border][/border][comment]
  1228.  
  1229. // right side images end //
  1230.  
  1231. [/comment][/border][comment]
  1232.  
  1233. <-------------------------------------------------- end of tab 2 section 3 images --------------------------------------------------
  1234.  
  1235. [/comment][border=0; display: flex; flex-flow: row nowrap; padding: 0; margin-right: -10px; width: calc(100% + 10px);][comment]
  1236.  
  1237. // title start //
  1238.  
  1239. [/comment][border=0; padding: 5px 0 5px 0; margin-right: 10px; flex: 1; max-width: 90px; min-width: 90px;][border=0; padding: 0; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--accent01); text-transform: uppercase; text-align: right;]First Lastname[/border][border=0; padding: 0; font-family: var(--mainfont); font-size: 2.1em; line-height: 100%; font-weight: 700; color: var(--white); text-transform: uppercase; text-align: right; letter-spacing: -2px;]003[/border][/border][comment]
  1240.  
  1241. // title end //
  1242.  
  1243. [/comment][comment]
  1244.  
  1245. // content start //
  1246.  
  1247. [/comment][border=0; border-left: 1px solid var(--accent01); padding: 5px 0 5px 10px; margin-right: 10px; flex: 9; width: calc(100% - 11px); font-family: var(--mainfont); font-size: calc(.9em + 1px); line-height: 125%; color: var(--white); text-align: justify;]Race: --
  1248. Height: --
  1249. Affiliation: --
  1250. Role: --
  1251. Birthplace: --
  1252. Affinity: --
  1253.  
  1254. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum congue volutpat. Aenean id lorem eu purus scelerisque iaculis vitae quis mauris. Suspendisse potenti. Ut lacinia metus a malesuada sodales. Quisque orci sapien, placerat ac porta ac, sollicitudin eu elit. Integer et diam est. Nullam feugiat mi metus, aliquet sodales tortor molestie quis. Nam fringilla volutpat erat, non porttitor turpis laoreet quis.
  1255.  
  1256. Pellentesque semper, dui at commodo consectetur, ante orci tincidunt lacus, id cursus turpis ex non risus. Nunc lacus erat, scelerisque in cursus ut, aliquam vitae purus. Nulla nec malesuada nisi. Vivamus at nisi eros. Duis non cursus metus. Donec a lorem sed lorem fermentum feugiat. Sed nec nisl purus.
  1257.  
  1258. Aenean congue neque eu massa sodales interdum. In vitae lacinia nisl. Duis suscipit maximus enim, at mattis mauris facilisis eget. Praesent sagittis orci odio, in molestie quam venenatis ac. Integer at ante ut ligula gravida vulputate. Aliquam sagittis, ex ut mollis consequat, sem tellus ultrices eros, et consequat est erat id dolor. Cras dolor arcu, pharetra in tortor nec, finibus fringilla quam. Mauris a purus nec velit egestas condimentum. Phasellus cursus elementum tempus. Nulla et urna lacus.[/border][comment]
  1259.  
  1260. // content end //
  1261.  
  1262. [/comment][/border][comment]
  1263.  
  1264. <---------------------------------------- end of tab 2 section 3 ----------------------------------------
  1265.  
  1266. [/comment][/border][/border][comment]
  1267.  
  1268. <------------------------------ end of right side ------------------------------
  1269.  
  1270. [/comment][/border][/tab]
  1271.  
  1272.  
  1273.  
  1274.  
  1275.  
  1276.  
  1277.  
  1278.  
  1279.  
  1280.  
  1281.  
  1282. [/tabs][comment]
  1283.  
  1284. <-------------------- end of tabs --------------------
  1285.  
  1286. [/comment][/border][comment]
  1287.  
  1288. <---------- end of lower half ----------
  1289.  
  1290. [/comment][/border][comment]
  1291.  
  1292. ---------- start of credits ---------->
  1293.  
  1294. [/comment][border=0; padding: 10px 0; width: 100%; font-family: var(--mainfont); font-size: .6em; line-height: 100%; color: var(--white); background: var(--black); text-align: center; text-transform: uppercase;]Code by Nano[comment][USER=20950]@Nano[/USER][/comment][/border][comment]
  1295.  
  1296. <---------- end of credits ----------
  1297.  
  1298. [/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!