mochiroll

Protocol.Code

Jul 12th, 2020 (edited)
77
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [comment]
  2. Designed and coded by Nano.
  3. Please do not remove the credits or claim the code as your own work.
  4.  
  5. [font=Changa One].[/font]
  6. [font=Abel].[/font][/comment][comment]
  7.  
  8. // accents
  9.  
  10. [/comment][border=0; padding: 0;
  11. --bgcolor: #111111;
  12. --accent: #a9000d;
  13. --grey: #666666;
  14. --text: #fefefe;
  15. --mainimg: url('https://i.imgur.com/G5eIzVj.jpg') center/cover no-repeat;
  16. --profileicon: url('https://i.imgur.com/ePTJWE9.jpg') center/cover no-repeat;
  17.  
  18. width: 100%;
  19. font-size: initial;
  20. ][border=0px; margin: 0 auto; padding: 20px; width: calc(100% - 40px); max-width: 700px; background: var(--bgcolor); font-size: initial; position: relative; overflow: hidden;][comment]
  21.  
  22. // [triangle] red border + bg image //
  23.  
  24. [/comment][border=0px; top: -1px; left: -1px; padding: 0; width: 400px; height: 400px; clip-path: polygon(0 0, 0% 100%, 100% 0); background: var(--accent); position: absolute; z-index: 1; pointer-events: none;][border=0px; padding: 0; width: 380px; height: 380px; clip-path: polygon(0 0, 0% 100%, 100% 0); background: var(--mainimg);][/border][/border][comment]
  25.  
  26. // start of content //
  27.  
  28. [/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -5px; padding: 0; width: calc(100% + 5px); position: relative;][comment]
  29.  
  30. // start of left side (quote) //
  31.  
  32. [/comment][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 150px; min-height: 450px; position: relative; overflow: hidden; z-index: 2;][border=0px; bottom: 20px; padding: 0; width: 100%; position: absolute;][border=0px; margin: 0 auto 10px; padding: 0; width: 50px; height: 5px; background: var(--accent);][/border][comment]
  33.  
  34. // quote //
  35.  
  36. [/comment][border=0px; padding: 0; width: 100%; font-family: 'Changa One', cursive; font-size: 1.8em; line-height: 115%; color: var(--text); text-align: center;]some kind of quote or blurb goes here, but try to keep it relatively short[/border][border=0px; margin: 12px auto 0; padding: 0; width: 50px; height: 5px; background: var(--accent);][/border][/border][/border][comment]
  37.  
  38. // start of right side //
  39.  
  40. [/comment][border=0px; margin-left: 5px; padding: 0; flex: 2; width: 100%; min-width: 250px;][border=0px; border-right: 5px solid var(--accent); padding: 2px 5px 5px 0; width: calc(100% - 10px); position: relative; z-index: 2;][comment]
  41.  
  42. // name + title //
  43.  
  44. [/comment][border=0px; padding: 0; font-family: 'Changa One', cursive; font-size: 2.2em; line-height: 100%; color: var(--text); text-align: right; text-transform: capitalize;]Name Here[/border][border=0px; margin-top: -3px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 100%; color: var(--accent); font-weight: 700; text-align: right; text-transform: lowercase;]title/role here[/border][/border][comment]
  45.  
  46. // start of tabs + CS details //
  47.  
  48. [/comment][border=0px; margin-top: 10px; margin-left: -10px; padding: 0; width: calc(100% + 10px); height: 70vh; min-height: 450px; max-height: 500px; position: relative;][border=0px; display: flex; flex-flow: row wrap; left: 20px; margin-left: -10px; padding: 0; width: 240px; height: 24px; position: absolute; z-index: 2; pointer-events: none;][border=0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center;]001[/border][border=0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center;]002[/border][border=0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center;]003[/border][border=0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center;]004[/border][/border][border=0px; padding: 0; width: 100%; height: 70vh; min-height: 450px; max-height: 500px; background: var(--bgcolor); position: absolute; pointer-events: none; ][/border][tabs]
  49.  
  50.  
  51. [comment]tab one[/comment]
  52. [tab=.][border=0px; left: 20px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--accent); text-align: center; position: absolute; z-index: 3; cursor: default;]001[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]
  53.  
  54. // content box 1 - basic information //
  55.  
  56. [/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]basics[/border][border=0px; display: flex; flex-flow: row-reverse wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 100px;][comment]
  57.  
  58. // profile image //
  59.  
  60. [/comment][border=0px; border-radius: 3px; margin-bottom: 15px; padding: 0; width: 100%; padding-top: 100%; background: var(--profileicon);][/border][/border][comment]
  61.  
  62. // stat bars //
  63.  
  64. [/comment][border=0px; margin-left: 15px; margin-bottom: 15px; padding: 0; flex: 2; width: 100%; min-width: 150px;][comment]
  65.  
  66. // stat one //
  67.  
  68. [/comment][border=0px; padding: 0; padding-right: 5px; font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-align: right; text-transform: uppercase;]attack[/border][border=0px; margin-top: -1px; padding: 0; width: 100%; height: 7px; background: var(--grey);][border=0px; padding: 0; width: 80%; height: 7px; background: var(--accent);][/border][/border][comment]
  69.  
  70. // stat two //
  71.  
  72. [/comment][border=0px; margin-top: 10px; padding: 0; padding-right: 5px; font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-align: right; text-transform: uppercase;]defense[/border][border=0px; margin-top: -1px; padding: 0; width: 100%; height: 7px; background: var(--grey);][border=0px; padding: 0; width: 60%; height: 7px; background: var(--accent);][/border][/border][comment]
  73.  
  74. // stat three //
  75.  
  76. [/comment][border=0px; margin-top: 10px; padding: 0; padding-right: 5px; font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-align: right; text-transform: uppercase;]mobility[/border][border=0px; margin-top: -1px; padding: 0; width: 100%; height: 7px; background: var(--grey);][border=0px; padding: 0; width: 50%; height: 7px; background: var(--accent);][/border][/border][comment]
  77.  
  78. // stat four //
  79.  
  80. [/comment][border=0px; margin-top: 10px; padding: 0; padding-right: 5px; font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-align: right; text-transform: uppercase;]stamina[/border][border=0px; margin-top: -1px; padding: 0; width: 100%; height: 7px; background: var(--grey);][border=0px; padding: 0; width: 65%; height: 7px; background: var(--accent);][/border][/border][comment]
  81.  
  82. // stat five //
  83.  
  84. [/comment][border=0px; margin-top: 10px; padding: 0; padding-right: 5px; font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-align: right; text-transform: uppercase;]tactics[/border][border=0px; margin-top: -1px; padding: 0; width: 100%; height: 7px; background: var(--grey);][border=0px; padding: 0; width: 35%; height: 7px; background: var(--accent);][/border][/border][comment]
  85.  
  86. // end of stats //
  87.  
  88. [/comment][/border][/border][comment]
  89.  
  90. // basic profile //
  91.  
  92. [/comment][comment]
  93.  
  94. // question one //
  95.  
  96. [/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]name[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]Firstname Surname[/border][/border][comment]
  97.  
  98. // question two //
  99.  
  100. [/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]gender[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);]Gender Here[/border][/border][comment]
  101.  
  102. // question three //
  103.  
  104. [/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]nickname[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);]Nickname/Alias[/border][/border][comment]
  105.  
  106. // question four //
  107.  
  108. [/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]age[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]Number (##)[/border][/border][comment]
  109.  
  110. // question five //
  111.  
  112. [/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]role[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]Whatever Else[/border][/border][comment]
  113.  
  114. // question six //
  115.  
  116. [/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]subject[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]Something[/border][/border][/border][comment]
  117.  
  118. // content box 2 - appearance //
  119.  
  120. [/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]appearance[/border][comment]
  121.  
  122. // appearance basics //
  123.  
  124. [/comment][comment]
  125.  
  126. // question one //
  127.  
  128. [/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]height[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]#'##" (###cm)[/border][/border][comment]
  129.  
  130. // question two //
  131.  
  132. [/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]weight[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);]###lbs (##kg)[/border][/border][comment]
  133.  
  134. // appearance description //
  135.  
  136. [/comment][border=0px; margin-top: 15px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.
  137.  
  138. Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]
  139.  
  140. // content box 3 - personality //
  141.  
  142. [/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]personality[/border][comment]
  143.  
  144. // personality description //
  145.  
  146. [/comment][border=0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.
  147.  
  148. Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]
  149.  
  150.  
  151. [comment]tab two[/comment]
  152. [tab=.][border=0px; left: 80px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--accent); text-align: center; position: absolute; z-index: 3; cursor: default;]002[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]
  153.  
  154. // content box 4 - history //
  155.  
  156. [/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]background[/border][comment]
  157.  
  158. // backstory //
  159.  
  160. [/comment][border=0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.
  161.  
  162. Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]
  163.  
  164.  
  165. [comment]tab three[/comment]
  166. [tab=.][border=0px; left: 140px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--accent); text-align: center; position: absolute; z-index: 3; cursor: default;]003[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]
  167.  
  168. // content box 5 - powers/abilities //
  169.  
  170. [/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]supernatural powers[/border][comment]
  171.  
  172. // power descriptions //
  173.  
  174. [/comment][border=0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;][comment]
  175.  
  176. // ability 1 //
  177.  
  178. [/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Ability One[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.
  179.  
  180. Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]
  181.  
  182. // ability 2 //
  183.  
  184. [/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 25px; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Ability Two[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.
  185.  
  186. Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra abilities here//[/comment][/border][/border][comment]
  187.  
  188. // content box 5 - powers/abilities //
  189.  
  190. [/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]weapons[/border][comment]
  191.  
  192. // equipment descriptions //
  193.  
  194. [/comment][border=0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;][comment]
  195.  
  196. // equip 1 //
  197.  
  198. [/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Equip 1[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.
  199.  
  200. Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra weapons/equips here//[/comment][/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]
  201.  
  202.  
  203. [comment]tab four[/comment]
  204. [tab=.][border=0px; left: 200px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--accent); text-align: center; position: absolute; z-index: 3; cursor: default;]004[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]
  205.  
  206. // content box 7 - extras/notes //
  207.  
  208. [/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]extra[/border][comment]
  209.  
  210. // extras //
  211.  
  212. [/comment][border=0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;][comment]
  213.  
  214. // likes //
  215.  
  216. [/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 60px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Likes[/border][border=0px; margin-left: 5px; padding: 0; flex: 9; width: 100%; min-width: 150px;]Item one, Item two, Item three, Item four, Etc[/border][/border][comment]
  217.  
  218. // dislikes //
  219.  
  220. [/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 60px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Dislikes[/border][border=0px; margin-left: 5px; padding: 0; flex: 9; width: 100%; min-width: 150px;]Item one, Item two, Item three, Item four, Etc[/border][/border][comment]
  221.  
  222. // note 1 //
  223.  
  224. [/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]001.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed.[/border][/border][comment]
  225.  
  226. // note 2 //
  227.  
  228. [/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]002.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed.[/border][/border][comment]
  229.  
  230. // note 3 //
  231.  
  232. [/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]003.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed.[/border][/border][comment] // extra notes here //[/comment][/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]
  233.  
  234. [/tabs][/border][/border][/border][border=0px; right: -1px; bottom: -1px; padding: 0; width: 150px; height: 150px; clip-path: polygon(100% 0, 0% 100%, 100% 100%); background: var(--accent); position: absolute; z-index: 1; pointer-events: none;][/border][/border][comment]//end of code//[/comment][border=0px; margin: 5px auto 0; padding: 0; width: 100%; max-width: 700px; font-size: .6em; text-align: center; text-transform: uppercase; opacity: .7;]code by [USER=20950]@Nano[/USER][/border][/border]
RAW Paste Data