API tools faq
paste
Advertisement
mochiroll

Edge_Of_The_World.Code

mochiroll
Jul 29th, 2022 (edited)
213
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 73.67 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: Gladiia (Arknights)
  6.  
  7. [font=Yeseva One].[/font]
  8. [font=Rubik].[/font]
  9.  
  10. [/comment][comment]
  11.  
  12. // accents //
  13.  
  14. [/comment][border=0; padding: 0;
  15.  
  16. /* colors */
  17. --accent01: rgba(166, 6, 15, 1);
  18. --leftbgcolor: rgba(166, 6, 15, 0.3);
  19. --lightener: rgba(255, 255, 255, 0.3);
  20. --black: #222222;
  21. --black2: #000000;
  22. --grey: #777777;
  23. --white: #fefefe;
  24.  
  25. /* main images */
  26. --mainicon: url('https://i.imgur.com/RpVvcAb.jpg') center/cover no-repeat;
  27. --appicon: url('https://i.imgur.com/Pgy6bze.jpg') top center/cover no-repeat;
  28. --bgimg: url('https://i.imgur.com/B5wDAAi.jpg') center/cover no-repeat;
  29.  
  30. /* relationship images */
  31. --rs01main: url('https://i.imgur.com/iol9gxy.jpg') center/cover no-repeat;
  32. --rs01left: url('https://i.imgur.com/xfhtOms.jpg') left center/cover no-repeat;
  33. --rs01right: url('https://i.imgur.com/SSPKwlv.jpg') right center/cover no-repeat;
  34.  
  35. --rs02main: url('https://i.imgur.com/DWZkGHG.jpg') center/cover no-repeat;
  36. --rs02left: url('https://i.imgur.com/b7EqBS5.jpg') left center/cover no-repeat;
  37. --rs02right: url('https://i.imgur.com/HBfKCWD.jpg') right center/cover no-repeat;
  38.  
  39. --rs03main: url('https://i.imgur.com/BscpiP8.jpg') center/cover no-repeat;
  40. --rs03left: url('https://i.imgur.com/7ZGlO3q.jpg') left center/cover no-repeat;
  41. --rs03right: url('https://i.imgur.com/2EcuFlR.jpg') right center/cover no-repeat;
  42.  
  43. /* fonts */
  44. --namefont: 'Yeseva One', cursive;
  45. --mainfont: 'Rubik', sans-serif;
  46.  
  47. margin: 75px auto;
  48. padding: 0;
  49. width: 100%;
  50. min-width: 300px;
  51. font-size: initial;
  52. overflow: hidden;
  53. position: relative;][border=0; display: flex; flex-flow: row wrap; justify-content: center; padding: 0; margin: 0 auto; width: 100%; max-width: 800px;][comment]
  54.  
  55. ---------- start of left side ---------->
  56.  
  57. [/comment][border=0; padding: 0; flex: 1; width: 100%; min-width: 300px; height: 500px; overflow: hidden;][border=0; padding: 0; visibility: hidden; position: relative;][accordion=100%]{slide=open|[border=0; padding: 0; width: calc(100% + 2px); height: 500px; background: var(--accent01); position: absolute; top: -17px; left: -1px; visibility: visible; overflow: hidden;][border=0; padding: 0; width: 1px; height: 500px; background: var(--white); position: absolute; top: 0; left: 20px;][/border][comment]
  58.  
  59. -------------------- start of basic info -------------------->
  60.  
  61. [/comment][border=0; padding: 0; padding-right: 30px; margin-top: 30px; width: 100%; height: 440px; overflow-y: scroll; overflow-x: hidden;][comment]
  62.  
  63. ------------------------------ start of Q&A 01 ------------------------------>
  64.  
  65. [/comment][border=0; padding: 10px; margin-left: 40px; width: calc(100% - 70px);][border=0; padding: 0; font-family: var(--mainfont); font-size: 1em; line-height: 100%; color: var(--white); font-weight: 700; text-transform: uppercase; position: relative;][comment]
  66.  
  67. // Q01 start //
  68.  
  69. [/comment]Full Name[comment]
  70.  
  71. // Q01 end //
  72.  
  73. [/comment][border=1px solid var(--white); padding: 0; width: 11px; height: 11px; background: var(--accent01); transform: rotate(45deg); position: absolute; bottom: -7px; left: -36px;][/border][/border][border=0; padding: 0; margin-top: 3px; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--white); font-weight: 400; text-transform: uppercase; position: relative;][comment]
  74.  
  75. // A01 start //
  76.  
  77. [/comment]First Middle Lastname[comment]
  78.  
  79. // A01 end //
  80.  
  81. [/comment][/border][/border][comment]
  82.  
  83. <------------------------------ end of Q&A 01 ------------------------------
  84.  
  85. [/comment][comment]
  86.  
  87. ------------------------------ start of Q&A 02 ------------------------------>
  88.  
  89. [/comment][border=0; padding: 10px; margin-left: 40px; width: calc(100% - 70px); background: var(--lightener);][border=0; padding: 0; font-family: var(--mainfont); font-size: 1em; line-height: 100%; color: var(--white); font-weight: 700; text-transform: uppercase; position: relative;][comment]
  90.  
  91. // Q02 start //
  92.  
  93. [/comment]Code Name[comment]
  94.  
  95. // Q02 end //
  96.  
  97. [/comment][border=1px solid var(--white); padding: 0; width: 11px; height: 11px; background: var(--accent01); transform: rotate(45deg); position: absolute; bottom: -7px; left: -36px;][/border][/border][border=0; padding: 0; margin-top: 3px; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--white); font-weight: 400; text-transform: uppercase; position: relative;][comment]
  98.  
  99. // A02 start //
  100.  
  101. [/comment]Designation[comment]
  102.  
  103. // A02 end //
  104.  
  105. [/comment][/border][/border][comment]
  106.  
  107. <------------------------------ end of Q&A 02 ------------------------------
  108.  
  109. [/comment][comment]
  110.  
  111. ------------------------------ start of Q&A 03 ------------------------------>
  112.  
  113. [/comment][border=0; padding: 10px; margin-left: 40px; width: calc(100% - 70px);][border=0; padding: 0; font-family: var(--mainfont); font-size: 1em; line-height: 100%; color: var(--white); font-weight: 700; text-transform: uppercase; position: relative;][comment]
  114.  
  115. // Q03 start //
  116.  
  117. [/comment]Gender[comment]
  118.  
  119. // Q03 end //
  120.  
  121. [/comment][border=1px solid var(--white); padding: 0; width: 11px; height: 11px; background: var(--accent01); transform: rotate(45deg); position: absolute; bottom: -7px; left: -36px;][/border][/border][border=0; padding: 0; margin-top: 3px; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--white); font-weight: 400; text-transform: uppercase; position: relative;][comment]
  122.  
  123. // A03 start //
  124.  
  125. [/comment]Male/Female/Etc[comment]
  126.  
  127. // A03 end //
  128.  
  129. [/comment][/border][/border][comment]
  130.  
  131. <------------------------------ end of Q&A 03 ------------------------------
  132.  
  133. [/comment][comment]
  134.  
  135. ------------------------------ start of Q&A 04 ------------------------------>
  136.  
  137. [/comment][border=0; padding: 10px; margin-left: 40px; width: calc(100% - 70px); background: var(--lightener);][border=0; padding: 0; font-family: var(--mainfont); font-size: 1em; line-height: 100%; color: var(--white); font-weight: 700; text-transform: uppercase; position: relative;][comment]
  138.  
  139. // Q04 start //
  140.  
  141. [/comment]Age[comment]
  142.  
  143. // Q04 end //
  144.  
  145. [/comment][border=1px solid var(--white); padding: 0; width: 11px; height: 11px; background: var(--accent01); transform: rotate(45deg); position: absolute; bottom: -7px; left: -36px;][/border][/border][border=0; padding: 0; margin-top: 3px; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--white); font-weight: 400; text-transform: uppercase; position: relative;][comment]
  146.  
  147. // A04 start //
  148.  
  149. [/comment]Number (##)[comment]
  150.  
  151. // A04 end //
  152.  
  153. [/comment][/border][/border][comment]
  154.  
  155. <------------------------------ end of Q&A 04 ------------------------------
  156.  
  157. [/comment][comment]
  158.  
  159. ------------------------------ start of Q&A 05 ------------------------------>
  160.  
  161. [/comment][border=0; padding: 10px; margin-left: 40px; width: calc(100% - 70px);][border=0; padding: 0; font-family: var(--mainfont); font-size: 1em; line-height: 100%; color: var(--white); font-weight: 700; text-transform: uppercase; position: relative;][comment]
  162.  
  163. // Q05 start //
  164.  
  165. [/comment]Date Of Birth[comment]
  166.  
  167. // Q05 end //
  168.  
  169. [/comment][border=1px solid var(--white); padding: 0; width: 11px; height: 11px; background: var(--accent01); transform: rotate(45deg); position: absolute; bottom: -7px; left: -36px;][/border][/border][border=0; padding: 0; margin-top: 3px; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--white); font-weight: 400; text-transform: uppercase; position: relative;][comment]
  170.  
  171. // A05 start //
  172.  
  173. [/comment]Month nth[comment]
  174.  
  175. // A05 end //
  176.  
  177. [/comment][/border][/border][comment]
  178.  
  179. <------------------------------ end of Q&A 05 ------------------------------
  180.  
  181. [/comment][comment]
  182.  
  183. ------------------------------ start of Q&A 06 ------------------------------>
  184.  
  185. [/comment][border=0; padding: 10px; margin-left: 40px; width: calc(100% - 70px); background: var(--lightener);][border=0; padding: 0; font-family: var(--mainfont); font-size: 1em; line-height: 100%; color: var(--white); font-weight: 700; text-transform: uppercase; position: relative;][comment]
  186.  
  187. // Q06 start //
  188.  
  189. [/comment]Birthplace[comment]
  190.  
  191. // Q06 end //
  192.  
  193. [/comment][border=1px solid var(--white); padding: 0; width: 11px; height: 11px; background: var(--accent01); transform: rotate(45deg); position: absolute; bottom: -7px; left: -36px;][/border][/border][border=0; padding: 0; margin-top: 3px; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--white); font-weight: 400; text-transform: uppercase; position: relative;][comment]
  194.  
  195. // A06 start //
  196.  
  197. [/comment]Region[comment]
  198.  
  199. // A06 end //
  200.  
  201. [/comment][/border][/border][comment]
  202.  
  203. <------------------------------ end of Q&A 06 ------------------------------
  204.  
  205. [/comment][comment]
  206.  
  207. ------------------------------ start of Q&A 07 ------------------------------>
  208.  
  209. [/comment][border=0; padding: 10px; margin-left: 40px; width: calc(100% - 70px);][border=0; padding: 0; font-family: var(--mainfont); font-size: 1em; line-height: 100%; color: var(--white); font-weight: 700; text-transform: uppercase; position: relative;][comment]
  210.  
  211. // Q07 start //
  212.  
  213. [/comment]Race[comment]
  214.  
  215. // Q07 end //
  216.  
  217. [/comment][border=1px solid var(--white); padding: 0; width: 11px; height: 11px; background: var(--accent01); transform: rotate(45deg); position: absolute; bottom: -7px; left: -36px;][/border][/border][border=0; padding: 0; margin-top: 3px; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--white); font-weight: 400; text-transform: uppercase; position: relative;][comment]
  218.  
  219. // A07 start //
  220.  
  221. [/comment]Here[comment]
  222.  
  223. // A07 end //
  224.  
  225. [/comment][/border][/border][comment]
  226.  
  227. <------------------------------ end of Q&A 07 ------------------------------
  228.  
  229. [/comment][comment]
  230.  
  231. ------------------------------ start of Q&A 08 ------------------------------>
  232.  
  233. [/comment][border=0; padding: 10px; margin-left: 40px; width: calc(100% - 70px); background: var(--lightener);][border=0; padding: 0; font-family: var(--mainfont); font-size: 1em; line-height: 100%; color: var(--white); font-weight: 700; text-transform: uppercase; position: relative;][comment]
  234.  
  235. // Q08 start //
  236.  
  237. [/comment]Elemental Affinity[comment]
  238.  
  239. // Q08 end //
  240.  
  241. [/comment][border=1px solid var(--white); padding: 0; width: 11px; height: 11px; background: var(--accent01); transform: rotate(45deg); position: absolute; bottom: -7px; left: -36px;][/border][/border][border=0; padding: 0; margin-top: 3px; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--white); font-weight: 400; text-transform: uppercase; position: relative;][comment]
  242.  
  243. // A08 start //
  244.  
  245. [/comment]Element[comment]
  246.  
  247. // A08 end //
  248.  
  249. [/comment][/border][/border][comment]
  250.  
  251. <------------------------------ end of Q&A 08 ------------------------------
  252.  
  253. [/comment][comment]
  254.  
  255. ------------------------------ start of Q&A 09 ------------------------------>
  256.  
  257. [/comment][border=0; padding: 10px; margin-left: 40px; width: calc(100% - 70px);][border=0; padding: 0; font-family: var(--mainfont); font-size: 1em; line-height: 100%; color: var(--white); font-weight: 700; text-transform: uppercase; position: relative;][comment]
  258.  
  259. // Q09 start //
  260.  
  261. [/comment]Rank[comment]
  262.  
  263. // Q09 end //
  264.  
  265. [/comment][border=1px solid var(--white); padding: 0; width: 11px; height: 11px; background: var(--accent01); transform: rotate(45deg); position: absolute; bottom: -7px; left: -36px;][/border][/border][border=0; padding: 0; margin-top: 3px; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--white); font-weight: 400; text-transform: uppercase; position: relative;][comment]
  266.  
  267. // A09 start //
  268.  
  269. [/comment]Rank[comment]
  270.  
  271. // A09 end //
  272.  
  273. [/comment][/border][/border][comment]
  274.  
  275. <------------------------------ end of Q&A 09 ------------------------------
  276.  
  277. [/comment][comment]
  278.  
  279. ------------------------------ start of Q&A 10 ------------------------------>
  280.  
  281. [/comment][border=0; padding: 10px; margin-left: 40px; width: calc(100% - 70px); background: var(--lightener);][border=0; padding: 0; font-family: var(--mainfont); font-size: 1em; line-height: 100%; color: var(--white); font-weight: 700; text-transform: uppercase; position: relative;][comment]
  282.  
  283. // Q10 start //
  284.  
  285. [/comment]Squad[comment]
  286.  
  287. // Q10 end //
  288.  
  289. [/comment][border=1px solid var(--white); padding: 0; width: 11px; height: 11px; background: var(--accent01); transform: rotate(45deg); position: absolute; bottom: -7px; left: -36px;][/border][/border][border=0; padding: 0; margin-top: 3px; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--white); font-weight: 400; text-transform: uppercase; position: relative;][comment]
  290.  
  291. // A10 start //
  292.  
  293. [/comment]Title[comment]
  294.  
  295. // A10 end //
  296.  
  297. [/comment][/border][/border][comment]
  298.  
  299. <------------------------------ end of Q&A 10 ------------------------------
  300.  
  301. [/comment][/border][comment]
  302.  
  303. <-------------------- end of basic info --------------------
  304.  
  305. [/comment][/border]}[border=0; padding: 0; height: 500px; pointer-events: none;][/border]{/slide}{slide=[border=0; padding: 0; width: calc(100% + 2px); height: 500px; position: absolute; top: -542px; left: -1px; visibility: visible; pointer-events: none;][comment]
  306.  
  307. -------------------- start of left bg + filters -------------------->
  308.  
  309. [/comment][border=0; padding: 0; background: var(--mainicon); filter: grayscale(1); position: absolute; top: 0; bottom: 0; left: 0; right: 0;][/border][border=0; padding: 0; background: var(--leftbgcolor); position: absolute; top: 0; bottom: 0; left: 0; right: 0;][/border][comment]
  310.  
  311. <-------------------- end of left bg + filters --------------------
  312.  
  313. [/comment][comment]
  314.  
  315. -------------------- start of name + details -------------------->
  316.  
  317. [/comment][border=0; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; padding: 0; height: 500px;][border=0; padding: 0; position: relative;][border=0; display: inline-block; padding: 0; position: relative; z-index: 1;][border=0; display: inline-block; padding: 0; font-family: var(--namefont); font-size: 2.7em; line-height: 100%; color: var(--white); font-weight: 700; text-transform: uppercase; position: relative;][comment]
  318.  
  319. // name here - start //
  320.  
  321. [/comment]Firstname[comment]
  322.  
  323. // name here - end //
  324.  
  325. [/comment][/border][border=0; padding: 5px 0; background: var(--black2); font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--accent01); font-weight: 400; text-align: center; text-transform: uppercase; position: absolute; left: 0; right: 0;][comment]
  326.  
  327. // nickname here - start //
  328.  
  329. [/comment]Nickname/Alt Name[comment]
  330.  
  331. // nickname here - end //
  332.  
  333. [/comment][/border][border=0; padding: 5px 0; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: transparent; text-transform: uppercase;]I[/border][border=0; padding: 0; margin-top: 3px; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--white); font-weight: 400; text-align: center; text-transform: lowercase; position: relative;]< click for info >[/border][/border][/border][/border][comment]
  334.  
  335. <-------------------- end of name + details --------------------
  336.  
  337. [/comment][/border]}{/slide}[/accordion][/border][/border][comment]
  338.  
  339. <---------- end of left side ----------
  340.  
  341. [/comment][comment]
  342.  
  343. ---------- start of right side ---------->
  344.  
  345. [/comment][border=0; padding: 0; flex: 2; width: 100%; min-width: 300px; height: 500px; position: relative; overflow: hidden;][comment]
  346.  
  347. -------------------- start of right side bg -------------------->
  348.  
  349. [/comment][border=0; padding: 0; background: var(--black); position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; z-index: 1;][border=0; padding: 0; background: var(--bgimg); position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: .05;][/border][/border][comment]
  350.  
  351. <-------------------- end of right side bg --------------------
  352.  
  353. [/comment][comment]
  354.  
  355. -------------------- start of tab covers -------------------->
  356.  
  357. [/comment][border=0; padding: 0; position: absolute; pointer-events: none;][comment]
  358.  
  359. // cover 01 start //
  360.  
  361. [/comment][border=0; padding: 0; position: relative; z-index: 6;][border=0; display: flex; align-items: end; justify-content: center; padding: 0; width: 25px; height: 100px; background: var(--black2); font-family: var(--mainfont); font-size: .8em; line-height: 100%; color: var(--white); text-align: center;]01[/border][border=0; padding: 0; width: 25px; height: 25px; background: var(--black2); clip-path: polygon(100% 0, 0 0, 50% 100%);][/border][/border][comment]
  362.  
  363. // cover 01 end //
  364.  
  365. [/comment][comment]
  366.  
  367. // cover 02 start //
  368.  
  369. [/comment][border=0; padding: 0; margin-top: -75px; position: relative; z-index: 5;][border=0; display: flex; align-items: end; justify-content: center; padding: 0; width: 25px; height: 100px; background: var(--accent01); font-family: var(--mainfont); font-size: .8em; line-height: 100%; color: var(--white); text-align: center;]02[/border][border=0; padding: 0; width: 25px; height: 25px; background: var(--accent01); clip-path: polygon(100% 0, 0 0, 50% 100%);][/border][/border][comment]
  370.  
  371. // cover 02 end //
  372.  
  373. [/comment][comment]
  374.  
  375. // cover 03 start //
  376.  
  377. [/comment][border=0; padding: 0; margin-top: -75px; position: relative; z-index: 4;][border=0; display: flex; align-items: end; justify-content: center; padding: 0; width: 25px; height: 100px; background: var(--black2); font-family: var(--mainfont); font-size: .8em; line-height: 100%; color: var(--white); text-align: center;]03[/border][border=0; padding: 0; width: 25px; height: 25px; background: var(--black2); clip-path: polygon(100% 0, 0 0, 50% 100%);][/border][/border][comment]
  378.  
  379. // cover 03 end //
  380.  
  381. [/comment][comment]
  382.  
  383. // cover 04 start //
  384.  
  385. [/comment][border=0; padding: 0; margin-top: -75px; position: relative; z-index: 3;][border=0; display: flex; align-items: end; justify-content: center; padding: 0; width: 25px; height: 100px; background: var(--accent01); font-family: var(--mainfont); font-size: .8em; line-height: 100%; color: var(--white); text-align: center;]04[/border][border=0; padding: 0; width: 25px; height: 25px; background: var(--accent01); clip-path: polygon(100% 0, 0 0, 50% 100%);][/border][/border][comment]
  386.  
  387. // cover 04 end //
  388.  
  389. [/comment][comment]
  390.  
  391. // cover 05 start //
  392.  
  393. [/comment][border=0; padding: 0; margin-top: -75px; position: relative; z-index: 2;][border=0; display: flex; align-items: end; justify-content: center; padding: 0; width: 25px; height: 100px; background: var(--black2); font-family: var(--mainfont); font-size: .8em; line-height: 100%; color: var(--white); text-align: center;]05[/border][border=0; padding: 0; width: 25px; height: 25px; background: var(--black2); clip-path: polygon(100% 0, 0 0, 50% 100%);][/border][/border][comment]
  394.  
  395. // cover 05 end //
  396.  
  397. [/comment][/border][comment]
  398.  
  399. <-------------------- end of tab covers --------------------
  400.  
  401. [/comment][comment]
  402.  
  403. -------------------- start of tabs -------------------->
  404.  
  405. [/comment][border=0; padding: 0; margin-top: 75px; margin-left: -23px; line-height: 44px; position: relative;][tabs]
  406.  
  407.  
  408.  
  409.  
  410.  
  411.  
  412.  
  413.  
  414.  
  415.  
  416.  
  417. [tab=01010101010101010101010101010101010101010101010101010101010101010101][border=0; padding: 0; width: calc(100% - 60px); height: 470px; overflow: hidden; position: absolute; top: -60px; left: 50px; z-index: 2;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 470px; overflow-y: scroll; overflow-x: hidden;][comment]
  418.  
  419. ------------------------------ start of appearance pt1 ------------------------------>
  420.  
  421. [/comment][border=0; display: flex; flex-flow: row wrap; justify-content: center; padding: 0; margin-left: -10px; width: calc(100% + 10px);][comment]
  422.  
  423. ---------------------------------------- start of app pt1 left ---------------------------------------->
  424.  
  425. [/comment][border=0; padding: 0; margin-left: 10px; flex: 2; width: 100%; min-width: 200px;][comment]
  426.  
  427. ------------------------------ start of Q&A 01 ------------------------------>
  428.  
  429. [/comment][border=0; padding: 10px; calc(100% - 20px);][border=0; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 100%; color: var(--white); font-weight: 700; text-transform: uppercase; position: relative;][comment]
  430.  
  431. // Q01 start //
  432.  
  433. [/comment]Height[comment]
  434.  
  435. // Q01 end //
  436.  
  437. [/comment][/border][border=0; padding: 0; margin-top: 3px; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); font-weight: 400; text-transform: uppercase; position: relative;][comment]
  438.  
  439. // A01 start //
  440.  
  441. [/comment]#’#” | #M[comment]
  442.  
  443. // A01 end //
  444.  
  445. [/comment][/border][/border][comment]
  446.  
  447. <------------------------------ end of Q&A 01 ------------------------------
  448.  
  449. [/comment][comment]
  450.  
  451. ------------------------------ start of Q&A 02 ------------------------------>
  452.  
  453. [/comment][border=0; padding: 10px; width: calc(100% - 20px); background: var(--lightener);][border=0; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 100%; color: var(--white); font-weight: 700; text-transform: uppercase; position: relative;][comment]
  454.  
  455. // Q02 start //
  456.  
  457. [/comment]Weight[comment]
  458.  
  459. // Q02 end //
  460.  
  461. [/comment][/border][border=0; padding: 0; margin-top: 3px; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); font-weight: 400; text-transform: uppercase; position: relative;][comment]
  462.  
  463. // A02 start //
  464.  
  465. [/comment]#lbs | #kg[comment]
  466.  
  467. // A02 end //
  468.  
  469. [/comment][/border][/border][comment]
  470.  
  471. <------------------------------ end of Q&A 02 ------------------------------
  472.  
  473. [/comment][comment]
  474.  
  475. ------------------------------ start of Q&A 03 ------------------------------>
  476.  
  477. [/comment][border=0; padding: 10px; calc(100% - 20px);][border=0; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 100%; color: var(--white); font-weight: 700; text-transform: uppercase; position: relative;][comment]
  478.  
  479. // Q03 start //
  480.  
  481. [/comment]Hair Color[comment]
  482.  
  483. // Q03 end //
  484.  
  485. [/comment][/border][border=0; padding: 0; margin-top: 3px; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); font-weight: 400; text-transform: uppercase; position: relative;][comment]
  486.  
  487. // A03 start //
  488.  
  489. [/comment]Color[comment]
  490.  
  491. // A03 end //
  492.  
  493. [/comment][/border][/border][comment]
  494.  
  495. <------------------------------ end of Q&A 03 ------------------------------
  496.  
  497. [/comment][comment]
  498.  
  499. ------------------------------ start of Q&A 04 ------------------------------>
  500.  
  501. [/comment][border=0; padding: 10px; width: calc(100% - 20px); background: var(--lightener);][border=0; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 100%; color: var(--white); font-weight: 700; text-transform: uppercase; position: relative;][comment]
  502.  
  503. // Q04 start //
  504.  
  505. [/comment]Eye Color[comment]
  506.  
  507. // Q04 end //
  508.  
  509. [/comment][/border][border=0; padding: 0; margin-top: 3px; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); font-weight: 400; text-transform: uppercase; position: relative;][comment]
  510.  
  511. // A04 start //
  512.  
  513. [/comment]Color[comment]
  514.  
  515. // A04 end //
  516.  
  517. [/comment][/border][/border][comment]
  518.  
  519. <------------------------------ end of Q&A 04 ------------------------------
  520.  
  521. [/comment][comment]
  522.  
  523. ------------------------------ start of Q&A 05 ------------------------------>
  524.  
  525. [/comment][border=0; padding: 10px; calc(100% - 20px);][border=0; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 100%; color: var(--white); font-weight: 700; text-transform: uppercase; position: relative;][comment]
  526.  
  527. // Q05 start //
  528.  
  529. [/comment]Faceclaim[comment]
  530.  
  531. // Q05 end //
  532.  
  533. [/comment][/border][border=0; padding: 0; margin-top: 3px; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); font-weight: 400; text-transform: uppercase; position: relative;][comment]
  534.  
  535. // A05 start //
  536.  
  537. [/comment]Name (Source)[comment]
  538.  
  539. // A05 end //
  540.  
  541. [/comment][/border][/border][comment]
  542.  
  543. <------------------------------ end of Q&A 05 ------------------------------
  544.  
  545. [/comment][/border][comment]
  546.  
  547. <---------------------------------------- end of app pt1 left ----------------------------------------
  548.  
  549. [/comment][comment]
  550.  
  551. ---------------------------------------- start of app pt1 right ---------------------------------------->
  552.  
  553. [/comment][border=0; padding: 0; margin-left: 10px; min-height: 150px; flex: 1; width: 100%; min-width: 150px; background: var(--appicon); position: relative;][comment]
  554.  
  555. ------------------------------------------------------------ start of music player ------------------------------------------------------------>
  556.  
  557. [/comment][border=0; padding: 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; background: #3a3a3a; position: absolute; bottom: 0; overflow: hidden;][border=0; padding: 0; min-width: 30px; max-width: 30px; height: 30px; overflow: hidden;][border=0; padding: 0; margin-top: -520px; margin-left: -245px;][comment]
  558.  
  559. ---------------------------------------------------------------------- gdoc ID ---------------------------------------------------------------------->
  560.  
  561. [/comment][gdoc]1owTO3A348syGR0IzioNccUZfdBlUHsfR[/gdoc][comment]
  562.  
  563. <---------------------------------------------------------------------- gdoc ID ----------------------------------------------------------------------
  564.  
  565. [/comment][/border][/border][comment]
  566.  
  567. ---------------------------------------------------------------------- start of song title ---------------------------------------------------------------------->
  568.  
  569. [/comment][border=0; padding: 0; min-width: 200%; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white);]At the Edge of the World - Hyouri[/border][comment]
  570.  
  571. <---------------------------------------------------------------------- end of song title ----------------------------------------------------------------------
  572.  
  573. [/comment][/border][comment]
  574.  
  575. <------------------------------------------------------------ end of music player ------------------------------------------------------------
  576.  
  577. [/comment][/border][comment]
  578.  
  579. <---------------------------------------- end of app pt1 right ----------------------------------------
  580.  
  581. [/comment][/border][comment]
  582.  
  583. <------------------------------ end of appearance pt1 ------------------------------
  584.  
  585. [/comment][comment]
  586.  
  587. // spacer start //
  588.  
  589. [/comment][border=0; padding: 0; height: 30px;][/border][comment]
  590.  
  591. // spacer end //
  592.  
  593. [/comment][comment]
  594.  
  595. ------------------------------ start of tab 01 section 01 ------------------------------>
  596.  
  597. [/comment][border=0; padding: 0; min-height: 100px; position: relative;][border=0; padding: 0; width: 100px; height: 100px; background: var(--accent01); clip-path: polygon(100% 0, 0 0, 0 100%); position: absolute;][/border][border=0; border-right: 1px solid var(--grey); padding: 15px; width: calc(100% - 36px); font-family: var(--mainfont); font-size: calc(.9em - 1px); line-height: 130%; color: var(--white); text-align: justify; position: relative; z-index: 1;][comment]
  598.  
  599. ---------------------------------------- start of tab 01 section 01 label ---------------------------------------->
  600.  
  601. [/comment][border=0; padding: 0 0 10px 0; width: 1px; background: var(--black); position: absolute; top: 0; right: -1px;][border=0; padding: 0; margin-left: -5px; width: 10px; height: 10px; background: var(--white); clip-path: polygon(100% 0, 0 50%, 100% 100%);][/border][border=0; padding: 0; margin-top: 5px; margin-left: -4px; font-family: var(--mainfont); font-size: 9px; line-height: 100%; color: var(--white); text-align: left; text-transform: uppercase; writing-mode: vertical-rl;]Appearance[/border][/border][comment]
  602.  
  603. <---------------------------------------- end of tab 01 section 01 label ----------------------------------------
  604.  
  605. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a dapibus magna, in scelerisque mi. Suspendisse ex lacus, aliquam sed gravida ac, suscipit elementum justo. Praesent dolor lacus, tincidunt convallis dapibus et, malesuada sit amet dolor. Cras odio justo, rhoncus eu euismod sit amet, tempor at metus. Pellentesque ligula nisi, aliquet elementum volutpat sed, aliquam at tellus. Duis urna ante, ullamcorper vel nisl a, consequat fermentum nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum tristique rutrum orci, a facilisis metus rhoncus suscipit. Cras dapibus ullamcorper ante, ut lobortis eros faucibus sit amet. Nullam in lacus ante. Aenean id commodo risus, et blandit leo. Curabitur luctus accumsan sem ac ullamcorper. Vivamus volutpat scelerisque pellentesque. Aliquam erat volutpat. Nulla id diam sed nibh feugiat tempor. Aliquam scelerisque sagittis lorem, eget gravida nisl venenatis sed.
  606.  
  607. Suspendisse potenti. Aenean eu ante massa. Vestibulum consequat ipsum sed nisi varius scelerisque. Aliquam dui neque, vulputate quis facilisis in, posuere at sapien. Maecenas elementum nisl non mollis sagittis. Suspendisse potenti. Pellentesque accumsan eros eget faucibus convallis. Vivamus a eros sagittis dolor consequat semper rutrum ac dolor. Curabitur varius, risus a vehicula molestie, leo quam rhoncus nisl, at ultrices elit orci eget augue. Etiam vitae odio a nisi dignissim vestibulum et eget ante.[/border][/border][comment]
  608.  
  609. <------------------------------ end of tab 01 section 01 ------------------------------
  610.  
  611. [/comment][comment]
  612.  
  613. // spacer start //
  614.  
  615. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  616.  
  617. // spacer end //
  618.  
  619. [/comment][comment]
  620.  
  621. ------------------------------ start of tab 01 section 02 ------------------------------>
  622.  
  623. [/comment][border=0; padding: 0; min-height: 100px; position: relative;][border=0; padding: 0; width: 100px; height: 100px; background: var(--accent01); clip-path: polygon(100% 0, 0 0, 0 100%); position: absolute;][/border][border=0; border-right: 1px solid var(--grey); padding: 15px; width: calc(100% - 36px); font-family: var(--mainfont); font-size: calc(.9em - 1px); line-height: 130%; color: var(--white); text-align: justify; position: relative; z-index: 1;][comment]
  624.  
  625. ---------------------------------------- start of tab 01 section 02 label ---------------------------------------->
  626.  
  627. [/comment][border=0; padding: 0 0 10px 0; width: 1px; background: var(--black); position: absolute; top: 0; right: -1px;][border=0; padding: 0; margin-left: -5px; width: 10px; height: 10px; background: var(--white); clip-path: polygon(100% 0, 0 50%, 100% 100%);][/border][border=0; padding: 0; margin-top: 5px; margin-left: -4px; font-family: var(--mainfont); font-size: 9px; line-height: 100%; color: var(--white); text-align: left; text-transform: uppercase; writing-mode: vertical-rl;]Personality[/border][/border][comment]
  628.  
  629. <---------------------------------------- end of tab 01 section 02 label ----------------------------------------
  630.  
  631. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a dapibus magna, in scelerisque mi. Suspendisse ex lacus, aliquam sed gravida ac, suscipit elementum justo. Praesent dolor lacus, tincidunt convallis dapibus et, malesuada sit amet dolor. Cras odio justo, rhoncus eu euismod sit amet, tempor at metus. Pellentesque ligula nisi, aliquet elementum volutpat sed, aliquam at tellus. Duis urna ante, ullamcorper vel nisl a, consequat fermentum nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum tristique rutrum orci, a facilisis metus rhoncus suscipit. Cras dapibus ullamcorper ante, ut lobortis eros faucibus sit amet. Nullam in lacus ante. Aenean id commodo risus, et blandit leo. Curabitur luctus accumsan sem ac ullamcorper. Vivamus volutpat scelerisque pellentesque. Aliquam erat volutpat. Nulla id diam sed nibh feugiat tempor. Aliquam scelerisque sagittis lorem, eget gravida nisl venenatis sed.
  632.  
  633. Suspendisse potenti. Aenean eu ante massa. Vestibulum consequat ipsum sed nisi varius scelerisque. Aliquam dui neque, vulputate quis facilisis in, posuere at sapien. Maecenas elementum nisl non mollis sagittis. Suspendisse potenti. Pellentesque accumsan eros eget faucibus convallis. Vivamus a eros sagittis dolor consequat semper rutrum ac dolor. Curabitur varius, risus a vehicula molestie, leo quam rhoncus nisl, at ultrices elit orci eget augue. Etiam vitae odio a nisi dignissim vestibulum et eget ante.
  634.  
  635. Aliquam bibendum ante mauris, vel pulvinar ligula ornare vitae. Mauris et purus sodales, iaculis dolor et, pharetra tellus. Donec eget quam magna. In auctor risus metus, a venenatis mi finibus vel. Vivamus tincidunt magna eu leo condimentum, vel rhoncus eros tincidunt. Maecenas ut mauris tempor, interdum ligula et, vulputate neque. Quisque ornare nibh enim, efficitur blandit lacus porttitor non. Cras nunc nulla, feugiat ut nibh at, aliquam pellentesque purus. Integer eleifend in lorem pretium ornare. Sed tincidunt interdum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed non scelerisque lorem, nec luctus enim. Nulla rutrum lectus a pretium faucibus. Sed vel enim non enim tempor pulvinar vel ut sem. Aenean eget risus ut orci congue dignissim id id odio.[/border][/border][comment]
  636.  
  637. <------------------------------ end of tab 01 section 02 ------------------------------
  638.  
  639. [/comment][/border][/border][/tab]
  640.  
  641.  
  642.  
  643.  
  644.  
  645.  
  646.  
  647.  
  648.  
  649.  
  650. [tab=02020202020202020202020202020202020202020202020202020202020202020202][border=0; padding: 0; width: calc(100% - 60px); height: 470px; overflow: hidden; position: absolute; top: -60px; left: 50px; z-index: 2;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 470px; overflow-y: scroll; overflow-x: hidden;][comment]
  651.  
  652. ------------------------------ start of tab 02 section 01 ------------------------------>
  653.  
  654. [/comment][border=0; padding: 0; min-height: 100px; position: relative;][border=0; padding: 0; width: 100px; height: 100px; background: var(--accent01); clip-path: polygon(100% 0, 0 0, 0 100%); position: absolute;][/border][border=0; border-right: 1px solid var(--grey); padding: 15px; width: calc(100% - 36px); font-family: var(--mainfont); font-size: calc(.9em - 1px); line-height: 130%; color: var(--white); text-align: justify; position: relative; z-index: 1;][comment]
  655.  
  656. ---------------------------------------- start of tab 02 section 01 label ---------------------------------------->
  657.  
  658. [/comment][border=0; padding: 0 0 10px 0; width: 1px; background: var(--black); position: absolute; top: 0; right: -1px;][border=0; padding: 0; margin-left: -5px; width: 10px; height: 10px; background: var(--white); clip-path: polygon(100% 0, 0 50%, 100% 100%);][/border][border=0; padding: 0; margin-top: 5px; margin-left: -4px; font-family: var(--mainfont); font-size: 9px; line-height: 100%; color: var(--white); text-align: left; text-transform: uppercase; writing-mode: vertical-rl;]Backstory I[/border][/border][comment]
  659.  
  660. <---------------------------------------- end of tab 02 section 01 label ----------------------------------------
  661.  
  662. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a dapibus magna, in scelerisque mi. Suspendisse ex lacus, aliquam sed gravida ac, suscipit elementum justo. Praesent dolor lacus, tincidunt convallis dapibus et, malesuada sit amet dolor. Cras odio justo, rhoncus eu euismod sit amet, tempor at metus. Pellentesque ligula nisi, aliquet elementum volutpat sed, aliquam at tellus. Duis urna ante, ullamcorper vel nisl a, consequat fermentum nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum tristique rutrum orci, a facilisis metus rhoncus suscipit. Cras dapibus ullamcorper ante, ut lobortis eros faucibus sit amet. Nullam in lacus ante. Aenean id commodo risus, et blandit leo. Curabitur luctus accumsan sem ac ullamcorper. Vivamus volutpat scelerisque pellentesque. Aliquam erat volutpat. Nulla id diam sed nibh feugiat tempor. Aliquam scelerisque sagittis lorem, eget gravida nisl venenatis sed.
  663.  
  664. Suspendisse potenti. Aenean eu ante massa. Vestibulum consequat ipsum sed nisi varius scelerisque. Aliquam dui neque, vulputate quis facilisis in, posuere at sapien. Maecenas elementum nisl non mollis sagittis. Suspendisse potenti. Pellentesque accumsan eros eget faucibus convallis. Vivamus a eros sagittis dolor consequat semper rutrum ac dolor. Curabitur varius, risus a vehicula molestie, leo quam rhoncus nisl, at ultrices elit orci eget augue. Etiam vitae odio a nisi dignissim vestibulum et eget ante.
  665.  
  666. Aliquam bibendum ante mauris, vel pulvinar ligula ornare vitae. Mauris et purus sodales, iaculis dolor et, pharetra tellus. Donec eget quam magna. In auctor risus metus, a venenatis mi finibus vel. Vivamus tincidunt magna eu leo condimentum, vel rhoncus eros tincidunt. Maecenas ut mauris tempor, interdum ligula et, vulputate neque. Quisque ornare nibh enim, efficitur blandit lacus porttitor non. Cras nunc nulla, feugiat ut nibh at, aliquam pellentesque purus. Integer eleifend in lorem pretium ornare. Sed tincidunt interdum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed non scelerisque lorem, nec luctus enim. Nulla rutrum lectus a pretium faucibus. Sed vel enim non enim tempor pulvinar vel ut sem. Aenean eget risus ut orci congue dignissim id id odio.[/border][/border][comment]
  667.  
  668. <------------------------------ end of tab 02 section 01 ------------------------------
  669.  
  670. [/comment][comment]
  671.  
  672. // spacer start //
  673.  
  674. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  675.  
  676. // spacer end //
  677.  
  678. [/comment][comment]
  679.  
  680. ------------------------------ start of tab 02 section 02 ------------------------------>
  681.  
  682. [/comment][border=0; padding: 0; min-height: 100px; position: relative;][border=0; padding: 0; width: 100px; height: 100px; background: var(--accent01); clip-path: polygon(100% 0, 0 0, 0 100%); position: absolute;][/border][border=0; border-right: 1px solid var(--grey); padding: 15px; width: calc(100% - 36px); font-family: var(--mainfont); font-size: calc(.9em - 1px); line-height: 130%; color: var(--white); text-align: justify; position: relative; z-index: 1;][comment]
  683.  
  684. ---------------------------------------- start of tab 02 section 02 label ---------------------------------------->
  685.  
  686. [/comment][border=0; padding: 0 0 10px 0; width: 1px; background: var(--black); position: absolute; top: 0; right: -1px;][border=0; padding: 0; margin-left: -5px; width: 10px; height: 10px; background: var(--white); clip-path: polygon(100% 0, 0 50%, 100% 100%);][/border][border=0; padding: 0; margin-top: 5px; margin-left: -4px; font-family: var(--mainfont); font-size: 9px; line-height: 100%; color: var(--white); text-align: left; text-transform: uppercase; writing-mode: vertical-rl;]Backstory II[/border][/border][comment]
  687.  
  688. <---------------------------------------- end of tab 02 section 02 label ----------------------------------------
  689.  
  690. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a dapibus magna, in scelerisque mi. Suspendisse ex lacus, aliquam sed gravida ac, suscipit elementum justo. Praesent dolor lacus, tincidunt convallis dapibus et, malesuada sit amet dolor. Cras odio justo, rhoncus eu euismod sit amet, tempor at metus. Pellentesque ligula nisi, aliquet elementum volutpat sed, aliquam at tellus. Duis urna ante, ullamcorper vel nisl a, consequat fermentum nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum tristique rutrum orci, a facilisis metus rhoncus suscipit. Cras dapibus ullamcorper ante, ut lobortis eros faucibus sit amet. Nullam in lacus ante. Aenean id commodo risus, et blandit leo. Curabitur luctus accumsan sem ac ullamcorper. Vivamus volutpat scelerisque pellentesque. Aliquam erat volutpat. Nulla id diam sed nibh feugiat tempor. Aliquam scelerisque sagittis lorem, eget gravida nisl venenatis sed.
  691.  
  692. Suspendisse potenti. Aenean eu ante massa. Vestibulum consequat ipsum sed nisi varius scelerisque. Aliquam dui neque, vulputate quis facilisis in, posuere at sapien. Maecenas elementum nisl non mollis sagittis. Suspendisse potenti. Pellentesque accumsan eros eget faucibus convallis. Vivamus a eros sagittis dolor consequat semper rutrum ac dolor. Curabitur varius, risus a vehicula molestie, leo quam rhoncus nisl, at ultrices elit orci eget augue. Etiam vitae odio a nisi dignissim vestibulum et eget ante.
  693.  
  694. Aliquam bibendum ante mauris, vel pulvinar ligula ornare vitae. Mauris et purus sodales, iaculis dolor et, pharetra tellus. Donec eget quam magna. In auctor risus metus, a venenatis mi finibus vel. Vivamus tincidunt magna eu leo condimentum, vel rhoncus eros tincidunt. Maecenas ut mauris tempor, interdum ligula et, vulputate neque. Quisque ornare nibh enim, efficitur blandit lacus porttitor non. Cras nunc nulla, feugiat ut nibh at, aliquam pellentesque purus. Integer eleifend in lorem pretium ornare. Sed tincidunt interdum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed non scelerisque lorem, nec luctus enim. Nulla rutrum lectus a pretium faucibus. Sed vel enim non enim tempor pulvinar vel ut sem. Aenean eget risus ut orci congue dignissim id id odio.
  695.  
  696. Aenean non lorem id risus tristique semper vel ac nulla. Nulla at risus mi. Nullam in tempor ex, ac luctus urna. Fusce sed tincidunt turpis. Nullam tortor nulla, sagittis commodo tempor id, porttitor vel tortor. Suspendisse metus massa, accumsan at justo facilisis, finibus imperdiet nulla. Donec quis arcu eget nulla maximus egestas eget fringilla est. Maecenas tellus nibh, tincidunt non mauris ut, vehicula hendrerit mauris. Proin ac dapibus dui, at ultrices dui. In in nunc ante. Sed efficitur, neque feugiat suscipit commodo, odio nunc lobortis nibh, ac pharetra velit mauris sit amet nisl. Maecenas auctor erat erat, nec congue diam vehicula a. Fusce dictum molestie malesuada.
  697.  
  698. Integer vel rhoncus mi. Morbi semper aliquam accumsan. Nulla efficitur fermentum enim non pretium. Fusce sed sem est. Nunc id est pellentesque, rhoncus dolor non, dictum nisi. Vestibulum vestibulum suscipit ex et placerat. Ut mattis est ac dui blandit, gravida tristique eros tempor.[/border][/border][comment]
  699.  
  700. <------------------------------ end of tab 02 section 02 ------------------------------
  701.  
  702. [/comment][/border][/border][/tab]
  703.  
  704.  
  705.  
  706.  
  707.  
  708.  
  709.  
  710.  
  711.  
  712.  
  713. [tab=03030303030303030303030303030303030303030303030303030303030303030303][border=0; padding: 0; width: calc(100% - 60px); height: 470px; overflow: hidden; position: absolute; top: -60px; left: 50px; z-index: 2;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 470px; overflow-y: scroll; overflow-x: hidden;][comment]
  714.  
  715. ------------------------------ start of tab 03 section 01 ------------------------------>
  716.  
  717. [/comment][border=0; padding: 0; min-height: 100px; position: relative;][border=0; padding: 0; width: 100px; height: 100px; background: var(--accent01); clip-path: polygon(100% 0, 0 0, 0 100%); position: absolute;][/border][border=0; border-right: 1px solid var(--grey); padding: 15px; width: calc(100% - 36px); font-family: var(--mainfont); font-size: calc(.9em - 1px); line-height: 130%; color: var(--white); text-align: justify; position: relative; z-index: 1;][comment]
  718.  
  719. ---------------------------------------- start of tab 03 section 01 label ---------------------------------------->
  720.  
  721. [/comment][border=0; padding: 0 0 10px 0; width: 1px; background: var(--black); position: absolute; top: 0; right: -1px;][border=0; padding: 0; margin-left: -5px; width: 10px; height: 10px; background: var(--white); clip-path: polygon(100% 0, 0 50%, 100% 100%);][/border][border=0; padding: 0; margin-top: 5px; margin-left: -4px; font-family: var(--mainfont); font-size: 9px; line-height: 100%; color: var(--white); text-align: left; text-transform: uppercase; writing-mode: vertical-rl;]Equipment I[/border][/border][comment]
  722.  
  723. <---------------------------------------- end of tab 03 section 01 label ----------------------------------------
  724.  
  725. [/comment][b]Title:[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a dapibus magna, in scelerisque mi. Suspendisse ex lacus, aliquam sed gravida ac, suscipit elementum justo. Praesent dolor lacus, tincidunt convallis dapibus et, malesuada sit amet dolor. Cras odio justo, rhoncus eu euismod sit amet, tempor at metus.[/border][/border][comment]
  726.  
  727. <------------------------------ end of tab 03 section 01 ------------------------------
  728.  
  729. [/comment][comment]
  730.  
  731. // spacer start //
  732.  
  733. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  734.  
  735. // spacer end //
  736.  
  737. [/comment][comment]
  738.  
  739. ------------------------------ start of tab 03 section 02 ------------------------------>
  740.  
  741. [/comment][border=0; padding: 0; min-height: 100px; position: relative;][border=0; padding: 0; width: 100px; height: 100px; background: var(--accent01); clip-path: polygon(100% 0, 0 0, 0 100%); position: absolute;][/border][border=0; border-right: 1px solid var(--grey); padding: 15px; width: calc(100% - 36px); font-family: var(--mainfont); font-size: calc(.9em - 1px); line-height: 130%; color: var(--white); text-align: justify; position: relative; z-index: 1;][comment]
  742.  
  743. ---------------------------------------- start of tab 03 section 02 label ---------------------------------------->
  744.  
  745. [/comment][border=0; padding: 0 0 10px 0; width: 1px; background: var(--black); position: absolute; top: 0; right: -1px;][border=0; padding: 0; margin-left: -5px; width: 10px; height: 10px; background: var(--white); clip-path: polygon(100% 0, 0 50%, 100% 100%);][/border][border=0; padding: 0; margin-top: 5px; margin-left: -4px; font-family: var(--mainfont); font-size: 9px; line-height: 100%; color: var(--white); text-align: left; text-transform: uppercase; writing-mode: vertical-rl;]Equipment II[/border][/border][comment]
  746.  
  747. <---------------------------------------- end of tab 03 section 02 label ----------------------------------------
  748.  
  749. [/comment][b]Title:[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a dapibus magna, in scelerisque mi. Suspendisse ex lacus, aliquam sed gravida ac, suscipit elementum justo. Praesent dolor lacus, tincidunt convallis dapibus et, malesuada sit amet dolor. Cras odio justo, rhoncus eu euismod sit amet, tempor at metus.
  750.  
  751. Suspendisse potenti. Aenean eu ante massa. Vestibulum consequat ipsum sed nisi varius scelerisque. Aliquam dui neque, vulputate quis facilisis in, posuere at sapien. Maecenas elementum nisl non mollis sagittis. Suspendisse potenti. Pellentesque accumsan eros eget faucibus convallis.[/border][/border][comment]
  752.  
  753. <------------------------------ end of tab 03 section 02 ------------------------------
  754.  
  755. [/comment][comment]
  756.  
  757. // spacer start //
  758.  
  759. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  760.  
  761. // spacer end //
  762.  
  763. [/comment][comment]
  764.  
  765. ------------------------------ start of tab 03 section 03 ------------------------------>
  766.  
  767. [/comment][border=0; padding: 0; min-height: 100px; position: relative;][border=0; padding: 0; width: 100px; height: 100px; background: var(--accent01); clip-path: polygon(100% 0, 0 0, 0 100%); position: absolute;][/border][border=0; border-right: 1px solid var(--grey); padding: 15px; width: calc(100% - 36px); font-family: var(--mainfont); font-size: calc(.9em - 1px); line-height: 130%; color: var(--white); text-align: justify; position: relative; z-index: 1;][comment]
  768.  
  769. ---------------------------------------- start of tab 03 section 03 label ---------------------------------------->
  770.  
  771. [/comment][border=0; padding: 0 0 10px 0; width: 1px; background: var(--black); position: absolute; top: 0; right: -1px;][border=0; padding: 0; margin-left: -5px; width: 10px; height: 10px; background: var(--white); clip-path: polygon(100% 0, 0 50%, 100% 100%);][/border][border=0; padding: 0; margin-top: 5px; margin-left: -4px; font-family: var(--mainfont); font-size: 9px; line-height: 100%; color: var(--white); text-align: left; text-transform: uppercase; writing-mode: vertical-rl;]Equipment III[/border][/border][comment]
  772.  
  773. <---------------------------------------- end of tab 03 section 03 label ----------------------------------------
  774.  
  775. [/comment][b]Title:[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border][/border][comment]
  776.  
  777. <------------------------------ end of tab 03 section 03 ------------------------------
  778.  
  779. [/comment][comment]
  780.  
  781. // spacer start //
  782.  
  783. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  784.  
  785. // spacer end //
  786.  
  787. [/comment][comment]
  788.  
  789. ------------------------------ start of tab 03 section 04 ------------------------------>
  790.  
  791. [/comment][border=0; padding: 0; min-height: 100px; position: relative;][border=0; padding: 0; width: 100px; height: 100px; background: var(--accent01); clip-path: polygon(100% 0, 0 0, 0 100%); position: absolute;][/border][border=0; border-right: 1px solid var(--grey); padding: 15px; width: calc(100% - 36px); font-family: var(--mainfont); font-size: calc(.9em - 1px); line-height: 130%; color: var(--white); text-align: justify; position: relative; z-index: 1;][comment]
  792.  
  793. ---------------------------------------- start of tab 03 section 04 label ---------------------------------------->
  794.  
  795. [/comment][border=0; padding: 0 0 10px 0; width: 1px; background: var(--black); position: absolute; top: 0; right: -1px;][border=0; padding: 0; margin-left: -5px; width: 10px; height: 10px; background: var(--white); clip-path: polygon(100% 0, 0 50%, 100% 100%);][/border][border=0; padding: 0; margin-top: 5px; margin-left: -4px; font-family: var(--mainfont); font-size: 9px; line-height: 100%; color: var(--white); text-align: left; text-transform: uppercase; writing-mode: vertical-rl;]Ability I[/border][/border][comment]
  796.  
  797. <---------------------------------------- end of tab 03 section 04 label ----------------------------------------
  798.  
  799. [/comment][b]Title:[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a dapibus magna, in scelerisque mi. Suspendisse ex lacus, aliquam sed gravida ac, suscipit elementum justo. Praesent dolor lacus, tincidunt convallis dapibus et, malesuada sit amet dolor. Cras odio justo, rhoncus eu euismod sit amet, tempor at metus. Pellentesque ligula nisi, aliquet elementum volutpat sed, aliquam at tellus. Duis urna ante, ullamcorper vel nisl a, consequat fermentum nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum tristique rutrum orci, a facilisis metus rhoncus suscipit. Cras dapibus ullamcorper ante, ut lobortis eros faucibus sit amet. Nullam in lacus ante. Aenean id commodo risus, et blandit leo. Curabitur luctus accumsan sem ac ullamcorper. Vivamus volutpat scelerisque pellentesque. Aliquam erat volutpat. Nulla id diam sed nibh feugiat tempor. Aliquam scelerisque sagittis lorem, eget gravida nisl venenatis sed.
  800.  
  801. Suspendisse potenti. Aenean eu ante massa. Vestibulum consequat ipsum sed nisi varius scelerisque. Aliquam dui neque, vulputate quis facilisis in, posuere at sapien. Maecenas elementum nisl non mollis sagittis. Suspendisse potenti. Pellentesque accumsan eros eget faucibus convallis. Vivamus a eros sagittis dolor consequat semper rutrum ac dolor. Curabitur varius, risus a vehicula molestie, leo quam rhoncus nisl, at ultrices elit orci eget augue. Etiam vitae odio a nisi dignissim vestibulum et eget ante.[/border][/border][comment]
  802.  
  803. <------------------------------ end of tab 03 section 04 ------------------------------
  804.  
  805. [/comment][comment]
  806.  
  807. // spacer start //
  808.  
  809. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  810.  
  811. // spacer end //
  812.  
  813. [/comment][comment]
  814.  
  815. ------------------------------ start of tab 03 section 05 ------------------------------>
  816.  
  817. [/comment][border=0; padding: 0; min-height: 100px; position: relative;][border=0; padding: 0; width: 100px; height: 100px; background: var(--accent01); clip-path: polygon(100% 0, 0 0, 0 100%); position: absolute;][/border][border=0; border-right: 1px solid var(--grey); padding: 15px; width: calc(100% - 36px); font-family: var(--mainfont); font-size: calc(.9em - 1px); line-height: 130%; color: var(--white); text-align: justify; position: relative; z-index: 1;][comment]
  818.  
  819. ---------------------------------------- start of tab 03 section 05 label ---------------------------------------->
  820.  
  821. [/comment][border=0; padding: 0 0 10px 0; width: 1px; background: var(--black); position: absolute; top: 0; right: -1px;][border=0; padding: 0; margin-left: -5px; width: 10px; height: 10px; background: var(--white); clip-path: polygon(100% 0, 0 50%, 100% 100%);][/border][border=0; padding: 0; margin-top: 5px; margin-left: -4px; font-family: var(--mainfont); font-size: 9px; line-height: 100%; color: var(--white); text-align: left; text-transform: uppercase; writing-mode: vertical-rl;]Ability II[/border][/border][comment]
  822.  
  823. <---------------------------------------- end of tab 03 section 05 label ----------------------------------------
  824.  
  825. [/comment][b]Title:[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a dapibus magna, in scelerisque mi. Suspendisse ex lacus, aliquam sed gravida ac, suscipit elementum justo. Praesent dolor lacus, tincidunt convallis dapibus et, malesuada sit amet dolor. Cras odio justo, rhoncus eu euismod sit amet, tempor at metus. Pellentesque ligula nisi, aliquet elementum volutpat sed, aliquam at tellus. Duis urna ante, ullamcorper vel nisl a, consequat fermentum nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum tristique rutrum orci, a facilisis metus rhoncus suscipit. Cras dapibus ullamcorper ante, ut lobortis eros faucibus sit amet. Nullam in lacus ante. Aenean id commodo risus, et blandit leo. Curabitur luctus accumsan sem ac ullamcorper. Vivamus volutpat scelerisque pellentesque. Aliquam erat volutpat. Nulla id diam sed nibh feugiat tempor. Aliquam scelerisque sagittis lorem, eget gravida nisl venenatis sed.[/border][/border][comment]
  826.  
  827. <------------------------------ end of tab 03 section 05 ------------------------------
  828.  
  829. [/comment][comment]
  830.  
  831. // spacer start //
  832.  
  833. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  834.  
  835. // spacer end //
  836.  
  837. [/comment][comment]
  838.  
  839. ------------------------------ start of tab 03 section 06 ------------------------------>
  840.  
  841. [/comment][border=0; padding: 0; min-height: 100px; position: relative;][border=0; padding: 0; width: 100px; height: 100px; background: var(--accent01); clip-path: polygon(100% 0, 0 0, 0 100%); position: absolute;][/border][border=0; border-right: 1px solid var(--grey); padding: 15px; width: calc(100% - 36px); font-family: var(--mainfont); font-size: calc(.9em - 1px); line-height: 130%; color: var(--white); text-align: justify; position: relative; z-index: 1;][comment]
  842.  
  843. ---------------------------------------- start of tab 03 section 06 label ---------------------------------------->
  844.  
  845. [/comment][border=0; padding: 0 0 10px 0; width: 1px; background: var(--black); position: absolute; top: 0; right: -1px;][border=0; padding: 0; margin-left: -5px; width: 10px; height: 10px; background: var(--white); clip-path: polygon(100% 0, 0 50%, 100% 100%);][/border][border=0; padding: 0; margin-top: 5px; margin-left: -4px; font-family: var(--mainfont); font-size: 9px; line-height: 100%; color: var(--white); text-align: left; text-transform: uppercase; writing-mode: vertical-rl;]Ability III[/border][/border][comment]
  846.  
  847. <---------------------------------------- end of tab 03 section 06 label ----------------------------------------
  848.  
  849. [/comment][b]Title:[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a dapibus magna, in scelerisque mi. Suspendisse ex lacus, aliquam sed gravida ac, suscipit elementum justo. Praesent dolor lacus, tincidunt convallis dapibus et, malesuada sit amet dolor. Cras odio justo, rhoncus eu euismod sit amet, tempor at metus. Pellentesque ligula nisi, aliquet elementum volutpat sed, aliquam at tellus. Duis urna ante, ullamcorper vel nisl a, consequat fermentum nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum tristique rutrum orci, a facilisis metus rhoncus suscipit. Cras dapibus ullamcorper ante, ut lobortis eros faucibus sit amet. Nullam in lacus ante. Aenean id commodo risus, et blandit leo. Curabitur luctus accumsan sem ac ullamcorper. Vivamus volutpat scelerisque pellentesque. Aliquam erat volutpat. Nulla id diam sed nibh feugiat tempor. Aliquam scelerisque sagittis lorem, eget gravida nisl venenatis sed.
  850.  
  851. Suspendisse potenti. Aenean eu ante massa. Vestibulum consequat ipsum sed nisi varius scelerisque. Aliquam dui neque, vulputate quis facilisis in, posuere at sapien. Maecenas elementum nisl non mollis sagittis.[/border][/border][comment]
  852.  
  853. <------------------------------ end of tab 03 section 06 ------------------------------
  854.  
  855. [/comment][/border][/border][/tab]
  856.  
  857.  
  858.  
  859.  
  860.  
  861.  
  862.  
  863.  
  864.  
  865.  
  866. [tab=04040404040404040404040404040404040404040404040404040404040404040404][border=0; padding: 0; width: calc(100% - 60px); height: 470px; overflow: hidden; position: absolute; top: -60px; left: 50px; z-index: 2;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 470px; overflow-y: scroll; overflow-x: hidden;][comment]
  867.  
  868. ------------------------------ start of tab 04 section 01 ------------------------------>
  869.  
  870. [/comment][comment]
  871.  
  872. ---------------------------------------- start of rs 01 images ---------------------------------------->
  873.  
  874. [/comment][border=0; display: flex; flex-flow: row nowrap; padding: 0; width: 100%; height: 195px; overflow: hidden;][border=0; padding: 0; flex: 1; height: 195px; background: var(--rs01left);][/border][comment]
  875.  
  876. // rs name label start //
  877.  
  878. [/comment][border=0; display: inline-block; padding: 5px 3px; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-align: left; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg);]First Lastname[/border][comment]
  879.  
  880. // rs name label end //
  881.  
  882. [/comment][border=0; padding: 0; flex: 3; height: 195px; background: var(--rs01main);][/border][comment]
  883.  
  884. // rs type label start //
  885.  
  886. [/comment][border=0; display: inline-block; padding: 5px 3px; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-align: left; text-transform: uppercase; writing-mode: vertical-rl;]Relationship Title[/border][comment]
  887.  
  888. // rs type label end //
  889.  
  890. [/comment][border=0; padding: 0; flex: 1; height: 195px; background: var(--rs01right);][/border][/border][comment]
  891.  
  892. <---------------------------------------- end of rs 01 images ----------------------------------------
  893.  
  894. [/comment][comment]
  895.  
  896. ---------------------------------------- start of rs 01 quote ---------------------------------------->
  897.  
  898. [/comment][border=0; display: flex; flex-flow: row nowrap; align-items: center; padding: 0; margin: 25px auto 0; width: calc(100% - 40px); position: relative;][border=0; display: flex; justify-content: center; align-items: center; padding: 0; min-width: 50px; max-width: 50px; height: 50px; background: var(--accent01); font-family: var(--mainfont); font-size: 2em; line-height: 100%; color: var(--white);][fa]fas fa-quote-left[/fa][/border][border=0; padding: 0; margin-left: 20px; width: calc(100% - 20px); font-family: var(--mainfont); font-size: calc(.9em - 1px); line-height: 130%; color: var(--white); text-align: justify; font-style: italic;]Quote of your character speaking about the other character. Can be as long or short as you need it to be.[/border][/border][comment]
  899.  
  900. <---------------------------------------- end of rs 01 quote ----------------------------------------
  901.  
  902. [/comment][comment]
  903.  
  904. ---------------------------------------- start of rs 01 description ---------------------------------------->
  905.  
  906. [/comment][border=0; padding: 0; margin-top: 20px; font-family: var(--mainfont); font-size: calc(.9em - 1px); line-height: 130%; color: var(--white); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a dapibus magna, in scelerisque mi. Suspendisse ex lacus, aliquam sed gravida ac, suscipit elementum justo. Praesent dolor lacus, tincidunt convallis dapibus et, malesuada sit amet dolor. Cras odio justo, rhoncus eu euismod sit amet, tempor at metus. Pellentesque ligula nisi, aliquet elementum volutpat sed, aliquam at tellus. Duis urna ante, ullamcorper vel nisl a, consequat fermentum nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum tristique rutrum orci, a facilisis metus rhoncus suscipit. Cras dapibus ullamcorper ante, ut lobortis eros faucibus sit amet. Nullam in lacus ante. Aenean id commodo risus, et blandit leo. Curabitur luctus accumsan sem ac ullamcorper. Vivamus volutpat scelerisque pellentesque. Aliquam erat volutpat. Nulla id diam sed nibh feugiat tempor. Aliquam scelerisque sagittis lorem, eget gravida nisl venenatis sed.
  907.  
  908. Suspendisse potenti. Aenean eu ante massa. Vestibulum consequat ipsum sed nisi varius scelerisque. Aliquam dui neque, vulputate quis facilisis in, posuere at sapien. Maecenas elementum nisl non mollis sagittis. Suspendisse potenti. Pellentesque accumsan eros eget faucibus convallis. Vivamus a eros sagittis dolor consequat semper rutrum ac dolor. Curabitur varius, risus a vehicula molestie, leo quam rhoncus nisl, at ultrices elit orci eget augue. Etiam vitae odio a nisi dignissim vestibulum et eget ante.[/border][comment]
  909.  
  910. <---------------------------------------- end of rs 01 description ----------------------------------------
  911.  
  912. [/comment][comment]
  913.  
  914. <------------------------------ end of tab 04 section 01 ------------------------------
  915.  
  916. [/comment][comment]
  917.  
  918. // spacer start //
  919.  
  920. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  921.  
  922. // spacer end //
  923.  
  924. [/comment][comment]
  925.  
  926. ------------------------------ start of tab 04 section 02 ------------------------------>
  927.  
  928. [/comment][comment]
  929.  
  930. ---------------------------------------- start of rs 02 images ---------------------------------------->
  931.  
  932. [/comment][border=0; display: flex; flex-flow: row nowrap; padding: 0; width: 100%; height: 195px; overflow: hidden;][border=0; padding: 0; flex: 1; height: 195px; background: var(--rs02left);][/border][comment]
  933.  
  934. // rs name label start //
  935.  
  936. [/comment][border=0; display: inline-block; padding: 5px 3px; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-align: left; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg);]First Surname[/border][comment]
  937.  
  938. // rs name label end //
  939.  
  940. [/comment][border=0; padding: 0; flex: 3; height: 195px; background: var(--rs02main);][/border][comment]
  941.  
  942. // rs type label start //
  943.  
  944. [/comment][border=0; display: inline-block; padding: 5px 3px; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-align: left; text-transform: uppercase; writing-mode: vertical-rl;]Relationship Title[/border][comment]
  945.  
  946. // rs type label end //
  947.  
  948. [/comment][border=0; padding: 0; flex: 1; height: 195px; background: var(--rs02right);][/border][/border][comment]
  949.  
  950. <---------------------------------------- end of rs 02 images ----------------------------------------
  951.  
  952. [/comment][comment]
  953.  
  954. ---------------------------------------- start of rs 02 quote ---------------------------------------->
  955.  
  956. [/comment][border=0; display: flex; flex-flow: row nowrap; align-items: center; padding: 0; margin: 25px auto 0; width: calc(100% - 40px); position: relative;][border=0; display: flex; justify-content: center; align-items: center; padding: 0; min-width: 50px; max-width: 50px; height: 50px; background: var(--accent01); font-family: var(--mainfont); font-size: 2em; line-height: 100%; color: var(--white);][fa]fas fa-quote-left[/fa][/border][border=0; padding: 0; margin-left: 20px; width: calc(100% - 20px); font-family: var(--mainfont); font-size: calc(.9em - 1px); line-height: 130%; color: var(--white); text-align: justify; font-style: italic;]Aliquam bibendum ante mauris, vel pulvinar ligula ornare vitae. Mauris et purus sodales, iaculis dolor et, pharetra tellus. Donec eget quam magna. In auctor risus metus, a venenatis mi finibus vel.[/border][/border][comment]
  957.  
  958. <---------------------------------------- end of rs 02 quote ----------------------------------------
  959.  
  960. [/comment][comment]
  961.  
  962. ---------------------------------------- start of rs 02 description ---------------------------------------->
  963.  
  964. [/comment][border=0; padding: 0; margin-top: 20px; font-family: var(--mainfont); font-size: calc(.9em - 1px); line-height: 130%; color: var(--white); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a dapibus magna, in scelerisque mi. Suspendisse ex lacus, aliquam sed gravida ac, suscipit elementum justo. Praesent dolor lacus, tincidunt convallis dapibus et, malesuada sit amet dolor. Cras odio justo, rhoncus eu euismod sit amet, tempor at metus. Pellentesque ligula nisi, aliquet elementum volutpat sed, aliquam at tellus. Duis urna ante, ullamcorper vel nisl a, consequat fermentum nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum tristique rutrum orci, a facilisis metus rhoncus suscipit. Cras dapibus ullamcorper ante, ut lobortis eros faucibus sit amet. Nullam in lacus ante. Aenean id commodo risus, et blandit leo. Curabitur luctus accumsan sem ac ullamcorper. Vivamus volutpat scelerisque pellentesque. Aliquam erat volutpat. Nulla id diam sed nibh feugiat tempor. Aliquam scelerisque sagittis lorem, eget gravida nisl venenatis sed.[/border][comment]
  965.  
  966. <---------------------------------------- end of rs 02 description ----------------------------------------
  967.  
  968. [/comment][comment]
  969.  
  970. <------------------------------ end of tab 04 section 02 ------------------------------
  971.  
  972. [/comment][comment]
  973.  
  974. // spacer start //
  975.  
  976. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  977.  
  978. // spacer end //
  979.  
  980. [/comment][comment]
  981.  
  982. ------------------------------ start of tab 04 section 03 ------------------------------>
  983.  
  984. [/comment][comment]
  985.  
  986. ---------------------------------------- start of rs 03 images ---------------------------------------->
  987.  
  988. [/comment][border=0; display: flex; flex-flow: row nowrap; padding: 0; width: 100%; height: 195px; overflow: hidden;][border=0; padding: 0; flex: 1; height: 195px; background: var(--rs03left);][/border][comment]
  989.  
  990. // rs name label start //
  991.  
  992. [/comment][border=0; display: inline-block; padding: 5px 3px; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-align: left; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg);]First Surname[/border][comment]
  993.  
  994. // rs name label end //
  995.  
  996. [/comment][border=0; padding: 0; flex: 3; height: 195px; background: var(--rs03main);][/border][comment]
  997.  
  998. // rs type label start //
  999.  
  1000. [/comment][border=0; display: inline-block; padding: 5px 3px; font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); text-align: left; text-transform: uppercase; writing-mode: vertical-rl;]Relationship Title[/border][comment]
  1001.  
  1002. // rs type label end //
  1003.  
  1004. [/comment][border=0; padding: 0; flex: 1; height: 195px; background: var(--rs03right);][/border][/border][comment]
  1005.  
  1006. <---------------------------------------- end of rs 03 images ----------------------------------------
  1007.  
  1008. [/comment][comment]
  1009.  
  1010. ---------------------------------------- start of rs 03 quote ---------------------------------------->
  1011.  
  1012. [/comment][border=0; display: flex; flex-flow: row nowrap; align-items: center; padding: 0; margin: 25px auto 0; width: calc(100% - 40px); position: relative;][border=0; display: flex; justify-content: center; align-items: center; padding: 0; min-width: 50px; max-width: 50px; height: 50px; background: var(--accent01); font-family: var(--mainfont); font-size: 2em; line-height: 100%; color: var(--white);][fa]fas fa-quote-left[/fa][/border][border=0; padding: 0; margin-left: 20px; width: calc(100% - 20px); font-family: var(--mainfont); font-size: calc(.9em - 1px); line-height: 130%; color: var(--white); text-align: justify; font-style: italic;]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border][/border][comment]
  1013.  
  1014. <---------------------------------------- end of rs 03 quote ----------------------------------------
  1015.  
  1016. [/comment][comment]
  1017.  
  1018. ---------------------------------------- start of rs 03 description ---------------------------------------->
  1019.  
  1020. [/comment][border=0; padding: 0; margin-top: 20px; font-family: var(--mainfont); font-size: calc(.9em - 1px); line-height: 130%; color: var(--white); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a dapibus magna, in scelerisque mi. Suspendisse ex lacus, aliquam sed gravida ac, suscipit elementum justo. Praesent dolor lacus, tincidunt convallis dapibus et, malesuada sit amet dolor. Cras odio justo, rhoncus eu euismod sit amet, tempor at metus. Pellentesque ligula nisi, aliquet elementum volutpat sed, aliquam at tellus. Duis urna ante, ullamcorper vel nisl a, consequat fermentum nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum tristique rutrum orci, a facilisis metus rhoncus suscipit. Cras dapibus ullamcorper ante, ut lobortis eros faucibus sit amet. Nullam in lacus ante. Aenean id commodo risus, et blandit leo. Curabitur luctus accumsan sem ac ullamcorper. Vivamus volutpat scelerisque pellentesque. Aliquam erat volutpat. Nulla id diam sed nibh feugiat tempor. Aliquam scelerisque sagittis lorem, eget gravida nisl venenatis sed.
  1021.  
  1022. Suspendisse potenti. Aenean eu ante massa. Vestibulum consequat ipsum sed nisi varius scelerisque. Aliquam dui neque, vulputate quis facilisis in, posuere at sapien. Maecenas elementum nisl non mollis sagittis. Suspendisse potenti. Pellentesque accumsan eros eget faucibus convallis. Vivamus a eros sagittis dolor consequat semper rutrum ac dolor. Curabitur varius, risus a vehicula molestie, leo quam rhoncus nisl, at ultrices elit orci eget augue. Etiam vitae odio a nisi dignissim vestibulum et eget ante.
  1023.  
  1024. Aliquam bibendum ante mauris, vel pulvinar ligula ornare vitae. Mauris et purus sodales, iaculis dolor et, pharetra tellus. Donec eget quam magna. In auctor risus metus, a venenatis mi finibus vel. Vivamus tincidunt magna eu leo condimentum, vel rhoncus eros tincidunt. Maecenas ut mauris tempor, interdum ligula et, vulputate neque. Quisque ornare nibh enim, efficitur blandit lacus porttitor non. Cras nunc nulla, feugiat ut nibh at, aliquam pellentesque purus. Integer eleifend in lorem pretium ornare. Sed tincidunt interdum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed non scelerisque lorem, nec luctus enim. Nulla rutrum lectus a pretium faucibus. Sed vel enim non enim tempor pulvinar vel ut sem. Aenean eget risus ut orci congue dignissim id id odio.[/border][comment]
  1025.  
  1026. <---------------------------------------- end of rs 03 description ----------------------------------------
  1027.  
  1028. [/comment][comment]
  1029.  
  1030. <------------------------------ end of tab 04 section 03 ------------------------------
  1031.  
  1032. [/comment][/border][/border][/tab]
  1033.  
  1034.  
  1035.  
  1036.  
  1037.  
  1038.  
  1039.  
  1040.  
  1041.  
  1042.  
  1043. [tab=05050505050505050505050505050505050505050505050505050505050505050505][border=0; padding: 0; width: calc(100% - 60px); height: 470px; overflow: hidden; position: absolute; top: -60px; left: 50px; z-index: 2;][border=0; padding: 0; padding-right: 30px; width: 100%; height: 470px; overflow-y: scroll; overflow-x: hidden;][comment]
  1044.  
  1045. ------------------------------ start of tab 05 section 01 ------------------------------>
  1046.  
  1047. [/comment][border=0; padding: 0; min-height: 100px; position: relative;][border=0; padding: 0; width: 100px; height: 100px; background: var(--accent01); clip-path: polygon(100% 0, 0 0, 0 100%); position: absolute;][/border][border=0; border-right: 1px solid var(--grey); padding: 15px; width: calc(100% - 36px); font-family: var(--mainfont); font-size: calc(.9em - 1px); line-height: 130%; color: var(--white); text-align: justify; position: relative; z-index: 1;][comment]
  1048.  
  1049. ---------------------------------------- start of tab 05 section 01 label ---------------------------------------->
  1050.  
  1051. [/comment][border=0; padding: 0 0 10px 0; width: 1px; background: var(--black); position: absolute; top: 0; right: -1px;][border=0; padding: 0; margin-left: -5px; width: 10px; height: 10px; background: var(--white); clip-path: polygon(100% 0, 0 50%, 100% 100%);][/border][border=0; padding: 0; margin-top: 5px; margin-left: -4px; font-family: var(--mainfont); font-size: 9px; line-height: 100%; color: var(--white); text-align: left; text-transform: uppercase; writing-mode: vertical-rl;]Notes[/border][/border][comment]
  1052.  
  1053. <---------------------------------------- end of tab 05 section 01 label ----------------------------------------
  1054.  
  1055. [/comment][1] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a dapibus magna, in scelerisque mi. Suspendisse ex lacus, aliquam sed gravida ac, suscipit elementum justo. Praesent dolor lacus, tincidunt convallis dapibus et, malesuada sit amet dolor. Cras odio justo, rhoncus eu euismod sit amet, tempor at metus. Pellentesque ligula nisi, aliquet elementum volutpat sed, aliquam at tellus. Duis urna ante, ullamcorper vel nisl a, consequat fermentum nibh.
  1056.  
  1057. [2] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a dapibus magna, in scelerisque mi. Suspendisse ex lacus, aliquam sed gravida ac, suscipit elementum justo.
  1058.  
  1059. [3] Aliquam bibendum ante mauris, vel pulvinar ligula ornare vitae. Mauris et purus sodales, iaculis dolor et, pharetra tellus. Donec eget quam magna. In auctor risus metus, a venenatis mi finibus vel.
  1060.  
  1061. [4] Maecenas ut mauris tempor, interdum ligula et, vulputate neque. Quisque ornare nibh enim, efficitur blandit lacus porttitor non. Cras nunc nulla, feugiat ut nibh at, aliquam pellentesque purus. Integer eleifend in lorem pretium ornare. Sed tincidunt interdum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.[/border][/border][comment]
  1062.  
  1063. <------------------------------ end of tab 05 section 01 ------------------------------
  1064.  
  1065. [/comment][/border][/border][/tab]
  1066.  
  1067.  
  1068.  
  1069.  
  1070.  
  1071.  
  1072.  
  1073.  
  1074.  
  1075.  
  1076.  
  1077. [/tabs][/border][comment]
  1078.  
  1079. <-------------------- end of tabs --------------------
  1080.  
  1081. [/comment][/border][comment]
  1082.  
  1083. <---------- end of right side ----------
  1084.  
  1085. [/comment][/border][comment]
  1086.  
  1087. ---------- start of credits ---------->
  1088.  
  1089. [/comment][border=0; padding: 5px 0; 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]
  1090.  
  1091. <---------- end of credits ----------
  1092.  
  1093. [/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!