Advertisement
mochiroll

Vigilant_Yaksha.Code

Nov 21st, 2020
597
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.58 KB | None | 0 0
  1. [comment]
  2. Designed and coded by [USER=20950]@Nano[/USER].
  3. Please do not remove the credits or claim the code as your own work.
  4.  
  5. [font=Abril Fatface].[/font]
  6. [font=Changa One].[/font]
  7. [font=Lato].[/font]
  8. [font=Playfair Display].[/font]
  9. [/comment][comment]
  10.  
  11. // accents
  12.  
  13. [/comment][border=0; padding: 0;
  14. --bgpattern: url('https://i.imgur.com/zyPi4bJ.png') repeat;
  15. --bg2color: #fefefe;
  16. --maincolor: #66959b;
  17. --grey: #cccccc;
  18. --textcolor: #333333;
  19.  
  20. --img01: url('https://i.imgur.com/gPhdeUL.jpg') center/cover no-repeat;
  21. --img02: url('https://i.imgur.com/8fKQMia.jpg') center/cover no-repeat;
  22. --img03: url('https://i.imgur.com/0mBrzsF.jpg') center/cover no-repeat;
  23.  
  24. background: var(--bgpattern);
  25. padding: 75px 0;
  26. width: 100%;
  27. font-size: initial;
  28. ][border=0; display: flex; flex-flow: row wrap; justify-content: center; margin: 0 auto; padding: 0; width: 100%; max-width: 1000px; min-width: 250px;][comment]
  29.  
  30. // start of left side //
  31.  
  32. [/comment][border=0; padding: 0; flex: 2; width: 100%; max-width: 500px; min-width: 250px; height: 70vh; max-height: 600px; min-height: 400px; background: var(--img01); position: relative; overflow: hidden; pointer-events: none; z-index: 1;][comment]
  33.  
  34. // start of nameplate //
  35.  
  36. [/comment][border=0; bottom: 35px; left: 35px; padding: 0; width: calc(100% - 35px); position: absolute; pointer-events: auto;][border=0; padding: 0; font-family: 'Changa One', cursive; font-size: 1.0em; line-height: 80%; color: var(--textcolor); text-shadow: 1px 1px var(--maincolor); text-transform: uppercase;]Vigilant Yaksha[/border][border=0; padding: 0; font-family: 'Abril Fatface', cursive; font-size: 4.0em; line-height: 80%; color: var(--maincolor); text-shadow: 1px 1px var(--textcolor); text-transform: uppercase;]Xiao[/border][/border][comment]
  37.  
  38. // end of nameplate //
  39.  
  40. [/comment][/border][comment]
  41.  
  42. // end of left side --- start of right side //
  43.  
  44. [/comment][border=0; padding: 0; flex: 3; width: 100%; max-width: 600px; min-width: 250px; height: 70vh; max-height: 600px; min-height: 400px; background: var(--bg2color); position: relative;][comment]
  45.  
  46. // start of tab covers //
  47.  
  48. [/comment][border=0; left: -13px; top: 47px; padding: 0; position: absolute; pointer-events: none; z-index: 2;][border=2px solid var(--grey); display: flex; justify-content: center; align-items: center; padding: 0; height: 21px; width: 21px; background: var(--bg2color); transform: rotate(45deg);][border=0; padding: 0; height: 13px; width: 13px; background: var(--grey);][/border][/border][border=2px solid var(--grey); display: flex; justify-content: center; align-items: center; margin-top: 18px; padding: 0; height: 21px; width: 21px; background: var(--bg2color); transform: rotate(45deg);][border=0; padding: 0; height: 13px; width: 13px; background: var(--grey);][/border][/border][border=2px solid var(--grey); display: flex; justify-content: center; align-items: center; margin-top: 18px; padding: 0; height: 21px; width: 21px; background: var(--bg2color); transform: rotate(45deg);][border=0; padding: 0; height: 13px; width: 13px; background: var(--grey);][/border][/border][border=2px solid var(--grey); display: flex; justify-content: center; align-items: center; margin-top: 18px; padding: 0; height: 21px; width: 21px; background: var(--bg2color); transform: rotate(45deg);][border=0; padding: 0; height: 13px; width: 13px; background: var(--grey);][/border][/border][/border][comment]
  49.  
  50. ...
  51.  
  52. [/comment][border=0; padding: 0; width: 100%; height: 70vh; max-height: 600px; min-height: 400px; background: var(--bg2color); position: absolute; z-index: 1; pointer-events: none;][/border][comment]
  53.  
  54. // end of tab covers ------- start of tabs //
  55.  
  56. [/comment][border=0; margin-top: 40px; margin-left: -40px; padding: 0; width: 100%; height: 300px; line-height: 38px; overflow: hidden;][tabs]
  57.  
  58.  
  59.  
  60.  
  61.  
  62. [tab=xxxBASIC INFORMATIONxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx][border=2px solid var(--grey); top: 47px; left: -13px; display: flex; justify-content: center; align-items: center; padding: 0; height: 21px; width: 21px; background: var(--bg2color); transform: rotate(45deg); position: absolute; z-index: 2;][border=0; padding: 0; height: 13px; width: 13px; background: var(--maincolor);][/border][/border][border=0; left: 30px; top: 30px; padding: 0; width: calc(100% - 30px); height: calc(70vh - 60px); max-height: 540px; min-height: 340px; position: absolute; z-index: 2; overflow: hidden; line-height: initial;][border=0; padding: 0; padding-right: 50px; width: calc(100% - 15px); height: calc(70vh - 60px); max-height: 540px; min-height: 340px; overflow-y: scroll;][comment]
  63.  
  64. // start of profile icon + stat bars //
  65.  
  66. [/comment][border=0; display: flex; flex-flow: row-reverse wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][comment]
  67.  
  68. // start of profile icon //
  69.  
  70. [/comment][border=0px; margin-left: 15px; padding: 0; flex: 2; width: 100%; min-width: 150px;][border=1px solid var(--grey); box-sizing: border-box; margin-bottom: 15px; padding: 10px; width: 100%;][border=0; padding: 0; width: 100%; padding-top: 100%; background: var(--img02);][/border][/border][/border][comment]
  71.  
  72. // end of profile icon ------ start of stat bars //
  73.  
  74. [/comment][border=0; display: flex; flex-flow: column nowrap; justify-content: space-between; margin-left: 15px; margin-bottom: 15px; padding: 0; flex: 5; width: 100%; min-width: 200px;][comment]
  75.  
  76. --- stat one ---
  77.  
  78. [/comment][border=0; margin-top: 5px; padding: 0; width: 100%;][border=0; margin-bottom: 1px; padding: 0; padding-left: 10px; font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--maincolor); text-align: left; text-transform: lowercase;]attack[/border][border=1px solid var(--grey); box-sizing: border-box; padding: 4px; width: 100%;][border=0; padding: 0; width: 100%; height: 7px; background: var(--grey);][border=0; padding: 0; width: 70%; height: 7px; background: var(--maincolor);][comment]----------------------This border/box adjusts the stat value. Just change the % value of the width----------------------[/comment][/border][/border][/border][/border][comment]
  79.  
  80. --- stat two ---
  81.  
  82. [/comment][border=0; padding: 0; width: 100%;][border=0; margin-bottom: 1px; padding: 0; padding-left: 10px; font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--maincolor); text-align: left; text-transform: lowercase;]defense[/border][border=1px solid var(--grey); box-sizing: border-box; padding: 4px; width: 100%;][border=0; padding: 0; width: 100%; height: 7px; background: var(--grey);][border=0; padding: 0; width: 50%; height: 7px; background: var(--maincolor);][comment]----------------------This border/box adjusts the stat value. Just change the % value of the width----------------------[/comment][/border][/border][/border][/border][comment]
  83.  
  84. --- stat three ---
  85.  
  86. [/comment][border=0; padding: 0; width: 100%;][border=0; margin-bottom: 1px; padding: 0; padding-left: 10px; font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--maincolor); text-align: left; text-transform: lowercase;]speed[/border][border=1px solid var(--grey); box-sizing: border-box; padding: 4px; width: 100%;][border=0; padding: 0; width: 100%; height: 7px; background: var(--grey);][border=0; padding: 0; width: 80%; height: 7px; background: var(--maincolor);][comment]----------------------This border/box adjusts the stat value. Just change the % value of the width----------------------[/comment][/border][/border][/border][/border][comment]
  87.  
  88. --- stat four ---
  89.  
  90. [/comment][border=0; margin-bottom: 5px; padding: 0; width: 100%;][border=0; margin-bottom: 1px; padding: 0; padding-left: 10px; font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--maincolor); text-align: left; text-transform: lowercase;]utility[/border][border=1px solid var(--grey); box-sizing: border-box; padding: 4px; width: 100%;][border=0; padding: 0; width: 100%; height: 7px; background: var(--grey);][border=0; padding: 0; width: 60%; height: 7px; background: var(--maincolor);][comment]----------------------This border/box adjusts the stat value. Just change the % value of the width----------------------[/comment][/border][/border][/border][/border][comment]
  91.  
  92.  
  93. [/comment][/border][comment]
  94.  
  95. // end of stats //
  96.  
  97. [/comment][/border][comment]
  98.  
  99. // end of profile icon + stat bars ------ start of quote box //
  100.  
  101. [/comment][border=0; margin: 35px 0 25px; padding: 0; width: 100%; position: relative;][border=0; top: -22px; left: -5px; padding: 0; font-family: 'Playfair Display', serif; font-size: 185px; line-height: 70%; color: var(--grey); position: absolute;]“[/border][border=0; bottom: -80px; right: -5px; padding: 0; font-family: 'Playfair Display', serif; font-size: 185px; line-height: 70%; color: var(--grey); position: absolute;]”[/border][comment]
  102.  
  103. // quote //
  104.  
  105. [/comment][border=0; margin: 0 auto; padding: 0; width: calc(100% - 20px); font-family: 'Abril Fatface', cursive; font-size: 1.5em; line-height: 100%; color: var(--textcolor); text-align: center; position: relative;]I deal in death. If you cannot bring yourself to kill, speak my name.[/border][comment]
  106.  
  107. // end of quote //
  108.  
  109. [/comment][/border][comment]
  110.  
  111. // end of quote box ------ start of basic information //
  112.  
  113. [/comment][comment]
  114.  
  115. --- row 1 ---
  116.  
  117. [/comment][border=0; display: flex; flex-flow: row wrap; margin-left: -20px; padding: 0;][comment]
  118.  
  119. ------ stat 01 ------
  120.  
  121. [/comment][border=0; border-bottom: 1px solid var(--maincolor); margin-top: 30px; margin-left: 20px; padding: 0; flex: 1; min-width: 200px;][border=0; box-sizing: border-box; padding: 0; padding-left: 5px; font-family: 'Changa One', cursive; font-size: 0.9em; line-height: 100%; color: var(--maincolor); text-transform: uppercase;]Name[/border][border=0; box-sizing: border-box; margin: 9px 0 15px; padding: 0; padding-left: 20px; font-family: 'Lato', sans-serif; font-size: 0.8em; font-weight: 700; line-height: 100%; color: var(--textcolor); text-transform: uppercase;]XIAO (魈)[/border][/border][comment]
  122.  
  123. ------ stat 02 ------
  124.  
  125. [/comment][border=0; border-bottom: 1px solid var(--maincolor); margin-top: 30px; margin-left: 20px; padding: 0; flex: 1; min-width: 200px;][border=0; box-sizing: border-box; padding: 0; padding-left: 5px; font-family: 'Changa One', cursive; font-size: 0.9em; line-height: 100%; color: var(--maincolor); text-transform: uppercase;]Epithet[/border][border=0; box-sizing: border-box; margin: 9px 0 15px; padding: 0; padding-left: 20px; font-family: 'Lato', sans-serif; font-size: 0.8em; font-weight: 700; line-height: 100%; color: var(--textcolor); text-transform: uppercase;]Vigilant Yaksha[/border][/border][/border][comment]
  126.  
  127. --- row 2 ---
  128.  
  129. [/comment][border=0; display: flex; flex-flow: row wrap; margin-left: -20px; padding: 0;][comment]
  130.  
  131. ------ stat 03 ------
  132.  
  133. [/comment][border=0; border-bottom: 1px solid var(--maincolor); margin-top: 30px; margin-left: 20px; padding: 0; flex: 1; min-width: 200px;][border=0; box-sizing: border-box; padding: 0; padding-left: 5px; font-family: 'Changa One', cursive; font-size: 0.9em; line-height: 100%; color: var(--maincolor); text-transform: uppercase;]Gender[/border][border=0; box-sizing: border-box; margin: 9px 0 15px; padding: 0; padding-left: 20px; font-family: 'Lato', sans-serif; font-size: 0.8em; font-weight: 700; line-height: 100%; color: var(--textcolor); text-transform: uppercase;]Male[/border][/border][comment]
  134.  
  135. ------ stat 04 ------
  136.  
  137. [/comment][border=0; border-bottom: 1px solid var(--maincolor); margin-top: 30px; margin-left: 20px; padding: 0; flex: 1; min-width: 200px;][border=0; box-sizing: border-box; padding: 0; padding-left: 5px; font-family: 'Changa One', cursive; font-size: 0.9em; line-height: 100%; color: var(--maincolor); text-transform: uppercase;]Birthday[/border][border=0; box-sizing: border-box; margin: 9px 0 15px; padding: 0; padding-left: 20px; font-family: 'Lato', sans-serif; font-size: 0.8em; font-weight: 700; line-height: 100%; color: var(--textcolor); text-transform: uppercase;]April 17th[/border][/border][/border][comment]
  138.  
  139. --- row 3 ---
  140.  
  141. [/comment][border=0; display: flex; flex-flow: row wrap; margin-left: -20px; padding: 0;][comment]
  142.  
  143. ------ stat 05 ------
  144.  
  145. [/comment][border=0; border-bottom: 1px solid var(--maincolor); margin-top: 30px; margin-left: 20px; padding: 0; flex: 1; min-width: 200px;][border=0; box-sizing: border-box; padding: 0; padding-left: 5px; font-family: 'Changa One', cursive; font-size: 0.9em; line-height: 100%; color: var(--maincolor); text-transform: uppercase;]Constellation[/border][border=0; box-sizing: border-box; margin: 9px 0 15px; padding: 0; padding-left: 20px; font-family: 'Lato', sans-serif; font-size: 0.8em; font-weight: 700; line-height: 100%; color: var(--textcolor); text-transform: uppercase;]Alatus Nemeseos[/border][/border][comment]
  146.  
  147. ------ stat 06 ------
  148.  
  149. [/comment][border=0; border-bottom: 1px solid var(--maincolor); margin-top: 30px; margin-left: 20px; padding: 0; flex: 1; min-width: 200px;][border=0; box-sizing: border-box; padding: 0; padding-left: 5px; font-family: 'Changa One', cursive; font-size: 0.9em; line-height: 100%; color: var(--maincolor); text-transform: uppercase;]Region[/border][border=0; box-sizing: border-box; margin: 9px 0 15px; padding: 0; padding-left: 20px; font-family: 'Lato', sans-serif; font-size: 0.8em; font-weight: 700; line-height: 100%; color: var(--textcolor); text-transform: uppercase;]Liyue[/border][/border][/border][comment]
  150.  
  151. --- row 4 ---
  152.  
  153. [/comment][border=0; display: flex; flex-flow: row wrap; margin-left: -20px; padding: 0;][comment]
  154.  
  155. ------ stat 07 ------
  156.  
  157. [/comment][border=0; border-bottom: 1px solid var(--maincolor); margin-top: 30px; margin-left: 20px; padding: 0; flex: 1; min-width: 200px;][border=0; box-sizing: border-box; padding: 0; padding-left: 5px; font-family: 'Changa One', cursive; font-size: 0.9em; line-height: 100%; color: var(--maincolor); text-transform: uppercase;]Residence[/border][border=0; box-sizing: border-box; margin: 9px 0 15px; padding: 0; padding-left: 20px; font-family: 'Lato', sans-serif; font-size: 0.8em; font-weight: 700; line-height: 100%; color: var(--textcolor); text-transform: uppercase;]Wangshu Inn[/border][/border][/border][comment]
  158.  
  159. // end of basic information ------ start of appearance //
  160.  
  161. [/comment][border=0; border-bottom: 1px solid var(--grey); margin-top: 60px; padding: 0 0 3px 0;][border=0; display: inline; border-bottom: 3px solid var(--maincolor); box-sizing: border-box; padding: 0 5px; font-family: 'Abril Fatface', cursive; font-size: 1.5em; line-height: 100%; color: var(--maincolor); text-transform: uppercase;]Appearance[/border][/border][border=0; margin-top: 25px; padding: 0; font-family: 'Lato', sans-serif; font-size: 0.95em; line-height: 140%; color: var(--textcolor); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a risus malesuada, interdum odio ut, ultrices sapien. Quisque vitae tristique purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc tristique turpis ut massa scelerisque, ac porttitor leo congue. Morbi eget ullamcorper nunc. Fusce volutpat erat in pretium efficitur. Curabitur a dui a dolor efficitur cursus. Fusce faucibus nulla vitae orci sodales molestie.[/border][comment]
  162.  
  163. // end of appearance ------ start of personality //
  164.  
  165. [/comment][border=0; border-bottom: 1px solid var(--grey); margin-top: 60px; padding: 0 0 3px 0;][border=0; display: inline; border-bottom: 3px solid var(--maincolor); box-sizing: border-box; padding: 0 5px; font-family: 'Abril Fatface', cursive; font-size: 1.5em; line-height: 100%; color: var(--maincolor); text-transform: uppercase;]Personality[/border][/border][border=0; margin-top: 25px; padding: 0; font-family: 'Lato', sans-serif; font-size: 0.95em; line-height: 140%; color: var(--textcolor); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet volutpat sem, vitae interdum lorem euismod pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In et interdum enim. Fusce placerat tristique tortor. Nulla laoreet quam dui, eget pharetra justo fermentum vel. In elit neque, mollis eu auctor ut, commodo non orci. Phasellus urna leo, pretium non ante vel, sollicitudin euismod dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel arcu tincidunt, sollicitudin libero posuere, luctus nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  166.  
  167. Nam in vestibulum ligula. Proin quis enim ut purus porta malesuada. Sed lectus enim, accumsan ut dignissim ut, elementum vel arcu. Vestibulum finibus, tellus sit amet convallis rutrum, risus nunc suscipit massa, quis bibendum orci massa et nibh. Nulla vel nisl suscipit, vehicula dui sit amet, sodales quam. Aliquam tempor, ex in lobortis convallis, lorem erat gravida justo, semper euismod nibh tellus in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed ligula aliquet, viverra libero ut, elementum ipsum.[/border][comment]
  168.  
  169. // end of personality //
  170.  
  171. [/comment][/border][/border][/tab]
  172.  
  173.  
  174.  
  175.  
  176.  
  177. [tab=xxxBACKSTORYxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx][border=2px solid var(--grey); top: 90px; left: -13px; display: flex; justify-content: center; align-items: center; padding: 0; height: 21px; width: 21px; background: var(--bg2color); transform: rotate(45deg); position: absolute; z-index: 2;][border=0; padding: 0; height: 13px; width: 13px; background: var(--maincolor);][/border][/border][border=0; left: 30px; top: 30px; padding: 0; width: calc(100% - 30px); height: calc(70vh - 60px); max-height: 540px; min-height: 340px; position: absolute; z-index: 2; overflow: hidden; line-height: initial;][border=0; padding: 0; padding-right: 50px; width: calc(100% - 15px); height: calc(70vh - 60px); max-height: 540px; min-height: 340px; overflow-y: scroll;][comment]
  178.  
  179. // start of backstory //
  180.  
  181. [/comment][border=0; border-bottom: 1px solid var(--grey); padding: 0 0 3px 0;][border=0; display: inline; border-bottom: 3px solid var(--maincolor); box-sizing: border-box; padding: 0 5px; font-family: 'Abril Fatface', cursive; font-size: 1.5em; line-height: 100%; color: var(--maincolor); text-transform: uppercase;]Backstory[/border][/border][border=0; margin-top: 25px; padding: 0; font-family: 'Lato', sans-serif; font-size: 0.95em; line-height: 140%; color: var(--textcolor); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet volutpat sem, vitae interdum lorem euismod pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In et interdum enim. Fusce placerat tristique tortor. Nulla laoreet quam dui, eget pharetra justo fermentum vel. In elit neque, mollis eu auctor ut, commodo non orci. Phasellus urna leo, pretium non ante vel, sollicitudin euismod dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel arcu tincidunt, sollicitudin libero posuere, luctus nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  182.  
  183. Nam in vestibulum ligula. Proin quis enim ut purus porta malesuada. Sed lectus enim, accumsan ut dignissim ut, elementum vel arcu. Vestibulum finibus, tellus sit amet convallis rutrum, risus nunc suscipit massa, quis bibendum orci massa et nibh. Nulla vel nisl suscipit, vehicula dui sit amet, sodales quam. Aliquam tempor, ex in lobortis convallis, lorem erat gravida justo, semper euismod nibh tellus in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed ligula aliquet, viverra libero ut, elementum ipsum.[/border][comment]
  184.  
  185. // end of backstory ------ start of filler image //
  186.  
  187. [/comment][border=1px solid var(--grey); margin-top: 25px; margin-bottom: 25px; padding: 10px; box-sizing: border-box;][border=0; padding: 0; width: 100%; height: 175px; background: var(--img03);][/border][/border][comment]
  188.  
  189. // end of filler image ------ start of relationships //
  190.  
  191. [/comment][border=0; border-bottom: 1px solid var(--grey); padding: 0 0 3px 0;][border=0; display: inline; border-bottom: 3px solid var(--maincolor); box-sizing: border-box; padding: 0 5px; font-family: 'Abril Fatface', cursive; font-size: 1.5em; line-height: 100%; color: var(--maincolor); text-transform: uppercase;]Relationships[/border][/border][border=0; margin-top: 25px; padding: 0; font-family: 'Lato', sans-serif; font-size: 0.95em; line-height: 140%; color: var(--textcolor); text-align: justify;][border=0; margin-left: 10px; margin-bottom: 10px; padding: 0; font-family: 'Changa One', cursive; font-size: 0.9em; line-height: 100%; color: var(--maincolor); text-align: left; text-transform: uppercase;]surname, given[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet volutpat sem, vitae interdum lorem euismod pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  192.  
  193.  
  194. [border=0; margin-left: 10px; margin-bottom: 10px; padding: 0; font-family: 'Changa One', cursive; font-size: 0.9em; line-height: 100%; color: var(--maincolor); text-align: left; text-transform: uppercase;]surname, given[/border]In et interdum enim. Fusce placerat tristique tortor. Nulla laoreet quam dui, eget pharetra justo fermentum vel. In elit neque, mollis eu auctor ut, commodo non orci. Phasellus urna leo, pretium non ante vel, sollicitudin euismod dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel arcu tincidunt, sollicitudin libero posuere, luctus nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  195.  
  196.  
  197. [border=0; margin-left: 10px; margin-bottom: 10px; padding: 0; font-family: 'Changa One', cursive; font-size: 0.9em; line-height: 100%; color: var(--maincolor); text-align: left; text-transform: uppercase;]surname, given[/border]Nam in vestibulum ligula. Proin quis enim ut purus porta malesuada. Sed lectus enim, accumsan ut dignissim ut, elementum vel arcu. Vestibulum finibus, tellus sit amet convallis rutrum, risus nunc suscipit massa, quis bibendum orci massa et nibh. Nulla vel nisl suscipit, vehicula dui sit amet, sodales quam. Aliquam tempor, ex in lobortis convallis, lorem erat gravida justo, semper euismod nibh tellus in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed ligula aliquet, viverra libero ut, elementum ipsum.[/border][comment]
  198.  
  199. // end of relationships //
  200.  
  201. [/comment][/border][/border][/tab]
  202.  
  203.  
  204.  
  205.  
  206.  
  207. [tab=xxxABILITIESxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx][border=2px solid var(--grey); top: 133px; left: -13px; display: flex; justify-content: center; align-items: center; padding: 0; height: 21px; width: 21px; background: var(--bg2color); transform: rotate(45deg); position: absolute; z-index: 2;][border=0; padding: 0; height: 13px; width: 13px; background: var(--maincolor);][/border][/border][border=0; left: 30px; top: 30px; padding: 0; width: calc(100% - 30px); height: calc(70vh - 60px); max-height: 540px; min-height: 340px; position: absolute; z-index: 2; overflow: hidden; line-height: initial;][border=0; padding: 0; padding-right: 50px; width: calc(100% - 15px); height: calc(70vh - 60px); max-height: 540px; min-height: 340px; overflow-y: scroll;][comment]
  208.  
  209. // start of abilities //
  210.  
  211. [/comment][border=0; border-bottom: 1px solid var(--grey); padding: 0 0 3px 0;][border=0; display: inline; border-bottom: 3px solid var(--maincolor); box-sizing: border-box; padding: 0 5px; font-family: 'Abril Fatface', cursive; font-size: 1.5em; line-height: 100%; color: var(--maincolor); text-transform: uppercase;]Abilities[/border][/border][border=0; margin-top: 25px; padding: 0; font-family: 'Lato', sans-serif; font-size: 0.95em; line-height: 140%; color: var(--textcolor); text-align: justify;][border=0; margin-left: 10px; margin-bottom: 10px; padding: 0; font-family: 'Changa One', cursive; font-size: 0.9em; line-height: 100%; color: var(--maincolor); text-align: left; text-transform: uppercase;]Whirlwind Thrust[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet volutpat sem, vitae interdum lorem euismod pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  212.  
  213.  
  214. [border=0; margin-left: 10px; margin-bottom: 10px; padding: 0; font-family: 'Changa One', cursive; font-size: 0.9em; line-height: 100%; color: var(--maincolor); text-align: left; text-transform: uppercase;]Lemniscatic Wind Cycling[/border]In et interdum enim. Fusce placerat tristique tortor. Nulla laoreet quam dui, eget pharetra justo fermentum vel. In elit neque, mollis eu auctor ut, commodo non orci. Phasellus urna leo, pretium non ante vel, sollicitudin euismod dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel arcu tincidunt, sollicitudin libero posuere, luctus nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  215.  
  216.  
  217. [border=0; margin-left: 10px; margin-bottom: 10px; padding: 0; font-family: 'Changa One', cursive; font-size: 0.9em; line-height: 100%; color: var(--maincolor); text-align: left; text-transform: uppercase;]Bane of All Evil[/border]Nam in vestibulum ligula. Proin quis enim ut purus porta malesuada. Sed lectus enim, accumsan ut dignissim ut, elementum vel arcu. Vestibulum finibus, tellus sit amet convallis rutrum, risus nunc suscipit massa, quis bibendum orci massa et nibh. Nulla vel nisl suscipit, vehicula dui sit amet, sodales quam. Aliquam tempor, ex in lobortis convallis, lorem erat gravida justo, semper euismod nibh tellus in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed ligula aliquet, viverra libero ut, elementum ipsum.[/border][comment]
  218.  
  219. // end of abilities //
  220.  
  221. [/comment][/border][/border][/tab]
  222.  
  223.  
  224.  
  225.  
  226.  
  227. [tab=xxxEXTRA NOTESxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx][border=2px solid var(--grey); top: 176px; left: -13px; display: flex; justify-content: center; align-items: center; padding: 0; height: 21px; width: 21px; background: var(--bg2color); transform: rotate(45deg); position: absolute; z-index: 2;][border=0; padding: 0; height: 13px; width: 13px; background: var(--maincolor);][/border][/border][border=0; left: 30px; top: 30px; padding: 0; width: calc(100% - 30px); height: calc(70vh - 60px); max-height: 540px; min-height: 340px; position: absolute; z-index: 2; overflow: hidden; line-height: initial;][border=0; padding: 0; padding-right: 50px; width: calc(100% - 15px); height: calc(70vh - 60px); max-height: 540px; min-height: 340px; overflow-y: scroll;][comment]
  228.  
  229. // start of extras //
  230.  
  231. [/comment][border=0; border-bottom: 1px solid var(--grey); padding: 0 0 3px 0;][border=0; display: inline; border-bottom: 3px solid var(--maincolor); box-sizing: border-box; padding: 0 5px; font-family: 'Abril Fatface', cursive; font-size: 1.5em; line-height: 100%; color: var(--maincolor); text-transform: uppercase;]Extras[/border][/border][border=0; margin-top: 25px; padding: 0; font-family: 'Lato', sans-serif; font-size: 0.95em; line-height: 140%; color: var(--textcolor); text-align: justify;][border=0; margin-left: 10px; margin-bottom: 10px; padding: 0; font-family: 'Changa One', cursive; font-size: 0.9em; line-height: 100%; color: var(--maincolor); text-align: left; text-transform: uppercase;]Note 01[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet volutpat sem, vitae interdum lorem euismod pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  232.  
  233.  
  234. [border=0; margin-left: 10px; margin-bottom: 10px; padding: 0; font-family: 'Changa One', cursive; font-size: 0.9em; line-height: 100%; color: var(--maincolor); text-align: left; text-transform: uppercase;]Note 02[/border]In et interdum enim. Fusce placerat tristique tortor. Nulla laoreet quam dui, eget pharetra justo fermentum vel. In elit neque, mollis eu auctor ut, commodo non orci. Phasellus urna leo, pretium non ante vel, sollicitudin euismod dolor.
  235.  
  236.  
  237. [border=0; margin-left: 10px; margin-bottom: 10px; padding: 0; font-family: 'Changa One', cursive; font-size: 0.9em; line-height: 100%; color: var(--maincolor); text-align: left; text-transform: uppercase;]Note 03[/border]Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel arcu tincidunt, sollicitudin libero posuere, luctus nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam in vestibulum ligula.
  238.  
  239.  
  240. [border=0; margin-left: 10px; margin-bottom: 10px; padding: 0; font-family: 'Changa One', cursive; font-size: 0.9em; line-height: 100%; color: var(--maincolor); text-align: left; text-transform: uppercase;]Note 04[/border]Proin quis enim ut purus porta malesuada. Sed lectus enim, accumsan ut dignissim ut, elementum vel arcu. Vestibulum finibus, tellus sit amet convallis rutrum, risus nunc suscipit massa, quis bibendum orci massa et nibh. Nulla vel nisl suscipit, vehicula dui sit amet, sodales quam. Aliquam tempor, ex in lobortis convallis, lorem erat gravida justo, semper euismod nibh tellus in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed ligula aliquet, viverra libero ut, elementum ipsum.[/border][comment]
  241.  
  242. // end of extras //
  243.  
  244. [/comment][/border][/border][/tab]
  245.  
  246.  
  247.  
  248. [/tabs][/border][comment]
  249.  
  250. // end of tabs //
  251.  
  252. [/comment][/border][comment]
  253.  
  254. // end of right side //
  255.  
  256. [/comment][/border][comment]
  257.  
  258. // visible credit -- please don't remove!!! //
  259.  
  260. [/comment][border=0px; margin: 8px auto 0; padding: 0; width: 100%; max-width: 1000px; height: 0; font-size: .6em; text-align: center; color: var(--textcolor); text-transform: uppercase; opacity: .5;]code by Nano[comment][USER=20950]@Nano[/USER][/comment][/border][/border]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement