API tools faq
paste
mochiroll

Beyond.Code

mochiroll
Aug 19th, 2021 (edited)
127
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 43.88 KB | None | 0 0
raw download clone embed print report
  1. [comment]
  2. Designed and coded by [USER=20950]@Nano[/USER].
  3. Please do not remove the credits or claim the code as your own work.
  4.  
  5. [font=Play].[/font]
  6. [font=IBM Plex Mono].[/font]
  7.  
  8. [/comment][comment]
  9.  
  10. // accents
  11.  
  12. [/comment][border=0; padding: 0;
  13.  
  14. /* colors */
  15. --accent01: #0bdab1;
  16. --accent02: #ffae2e;
  17. --black: #222222;
  18. --white: #dddddd;
  19.  
  20. /* main background */
  21. --bgpattern: url('https://i.imgur.com/fA8CmOR.png') repeat;
  22.  
  23. /* fonts */
  24. --headerfont: 'Play', sans-serif;
  25. --textfont: 'IBM Plex Mono', monospace;
  26.  
  27. /* header images */
  28. --imgLeft: url('https://i.imgur.com/O0qejh6.jpg') top center/cover no-repeat;
  29. --imgMiddle: url('https://i.imgur.com/tD3RpQi.jpg') top right/cover no-repeat;
  30. --imgRight: url('https://i.imgur.com/vHWXaIv.jpg') top center/cover no-repeat;
  31.  
  32. /* content/loading wheel images */
  33. --imgtint: rgba(30, 30, 30, .7);
  34. --char01: url('https://i.imgur.com/UDzNEKw.jpg') center/cover no-repeat;
  35. --char02: url('https://i.imgur.com/jkuhIQg.jpg') center/cover no-repeat;
  36. --char03: url('https://i.imgur.com/OcJXh7m.jpg') top center/cover no-repeat;
  37.  
  38. padding: 0;
  39. width: 100%;
  40. min-width: 300px;
  41. background: var(--bgpattern);
  42. font-size: initial;
  43. overflow: hidden;
  44. position: relative;][comment]
  45.  
  46. ---------- start of top banner ---------->
  47.  
  48. [/comment][border=0; display: flex; flex-flow: row nowrap; padding: 0;][comment]
  49.  
  50. -------------------- start of title section -------------------->
  51.  
  52. [/comment][border=0; box-sizing: border-box; padding: calc(2% + 5px); flex: 8; min-width: 300px; background: var(--black);][comment]
  53.  
  54. ------------------------------ start title ------------------------------>
  55.  
  56. [/comment][border=0; padding: 0; font-family: var(--headerfont); font-size: 2.2em; line-height: 100%; color: var(--accent01); font-weight: 700; text-align: left; text-transform: uppercase;]Beyond The Witch's Corridor[border=0; display: inline; padding: 0; color: var(--accent02);].[/border][/border][comment]
  57.  
  58. <------------------------------ end title ------------------------------
  59.  
  60. [/comment][comment]
  61.  
  62. ------------------------------ start binary ------------------------------>
  63.  
  64. [/comment][border=0; box-sizing: content-box; margin-top: 10px; padding: 0; width: 100%; height: 100px; overflow: hidden;][border=0; padding: 0 30px 0 0; width: 100%; height: 100px; font-family: var(--textfont); font-size: .7em; line-height: 125%; color: var(--white); overflow-y: scroll; overflow-x: hidden;]01000001 00100000 01110111 [border=0; display: inline; padding: 0; color: var(--accent02);]01100001[/border] 01110010 01110010 01101001 01101111 [border=0; display: inline; padding: 0; color: var(--accent02);]01110010[/border] 00100000 01101110 01100101 01100101 01100100 01110011 00100000 01101110 01101111 01110100 00100000 [border=0; display: inline; padding: 0; color: var(--accent02);]01100011[/border] 01101111 01101110 01100011 01100101 01110010 01101110 00100000 01110100 01101000 01100101 01101101 01110011 01100101 01101100 01110110 01100101 01110011 00100000 01110111 01101001 01110100 01101000 00100000 01101101 [border=0; display: inline; padding: 0; color: var(--accent02);]01100001[/border] 01110100 01110100 01100101 [border=0; display: inline; padding: 0; color: var(--accent02);]01110010[/border] 01110011 00100000 01110111 01101001 01110100 01101000 01101001 01101110 00100000 01110100 01101000 01100101 00100000 01110000 [border=0; display: inline; padding: 0; color: var(--accent02);]01110101[/border] 01110010 01110110 01101001 01100101 01110111 00100000 01101111 01100110 00100000 [border=0; display: inline; padding: 0; color: var(--accent02);]01101101[/border] 01100101 01101110[/border][/border][comment]
  65.  
  66. <------------------------------ end binary ------------------------------
  67.  
  68. [/comment][/border][comment]
  69.  
  70. <-------------------- end of title section --------------------
  71.  
  72. [/comment][comment]
  73.  
  74. -------------------- start of image/subtitle section -------------------->
  75.  
  76. [/comment][border=0; display: flex; flex-flow: row nowrap; margin-left: -50px; padding: 0; flex: 7;][comment]
  77.  
  78. ------------------------------ start of images ------------------------------>
  79.  
  80. [/comment][border=0; display: flex; flex-flow: row nowrap; padding: 0; flex: 3;][comment]
  81.  
  82. // image - left //
  83.  
  84. [/comment][border=0; padding: 0; flex: 1; width: 100px; background: var(--imgLeft); clip-path: polygon(calc(100% - 40px) 0%, 100% 50%, calc(100% - 40px) 100%, 0% 100%, 40px 50%, 0% 0%); filter: grayscale(50%);][/border][comment]
  85.  
  86. // image - middle //
  87.  
  88. [/comment][border=0; margin-left: -30px; padding: 0; flex: 2; width: 200px; background: var(--imgMiddle); clip-path: polygon(calc(100% - 40px) 0%, 100% 50%, calc(100% - 40px) 100%, 0% 100%, 40px 50%, 0% 0%); filter: grayscale(50%);][/border][comment]
  89.  
  90. // image - right //
  91.  
  92. [/comment][border=0; margin-left: -30px; padding: 0; flex: 1; width: 100px; background: var(--imgRight); clip-path: polygon(calc(100% - 40px) 0%, 100% 50%, calc(100% - 40px) 100%, 0% 100%, 40px 50%, 0% 0%); filter: grayscale(50%);][/border][/border][comment]
  93.  
  94. <------------------------------ end of images ------------------------------
  95.  
  96. [/comment][comment]
  97.  
  98. ------------------------------ start of subtitle ------------------------------>
  99.  
  100. [/comment][border=0; box-sizing: border-box; display: flex; justify-content: center; align-items: center; margin-left: -50px; padding: 0 10px 0 60px; flex: 4; width: 100%; background: var(--accent01); font-family: var(--headerfont); font-size: 1.4em; line-height: 100%; font-weight: 700; color: var(--white); text-transform: uppercase;]Interest[border=0; display: inline; padding: 0; color: var(--accent02);]Check[/border].[/border][comment]
  101.  
  102. <------------------------------ end of subtitle ------------------------------
  103.  
  104. [/comment][/border][comment]
  105.  
  106. <-------------------- end of image/subtitle section --------------------
  107.  
  108. [/comment][/border][comment]
  109.  
  110. <---------- end of top banner ----------
  111.  
  112. [/comment][comment]
  113.  
  114. ---------- start of tabs ---------->
  115.  
  116. [/comment][border=0; padding: 0; margin-top: 25px; line-height: 42px; width: 100%; position: relative;][tabs]
  117.  
  118.  
  119.  
  120.  
  121.  
  122.  
  123. [tab=01010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101][border=0; display: flex; flex-flow: row wrap; margin-left: -15px; padding: 0; line-height: initial; position: absolute; z-index: 3; top: 10px; right: 4%; left: 49px; pointer-events: auto;][comment]
  124.  
  125. -------------------- start of left side -------------------->
  126.  
  127. [/comment][border=0; margin-left: 15px; margin-bottom: 25px; padding: 0; flex: 2; min-width: 250px; height: 60vh; max-height: 675px; min-height: 300px; overflow: hidden;][border=0; padding: 0 30px 0 0; width: 100%; height: 60vh; max-height: 675px; min-height: 300px; overflow-y: scroll; overflow-x: hidden;][comment]
  128.  
  129. ------------------------------ start of header 01 ------------------------------>
  130.  
  131. [/comment][border=0; display: flex; align-items: center; padding: 0; position: relative;][border=0; padding: 0; font-family: var(--headerfont); font-size: 2.2em; line-height: 100%; color: var(--accent02); text-transform: uppercase; font-weight: 700;]File[border=0; display: inline-block; padding: 0; color: var(--accent01);]001[/border][/border][comment]
  132.  
  133. ---------------------------------------- start of header 01 title ---------------------------------------->
  134.  
  135. [/comment][border=0; margin-top: 3px; padding: 4px 5px 3px 5px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--white); background: var(--black); text-transform: uppercase; position: absolute; left: 23px;]Prelude[/border][comment]
  136.  
  137. <---------------------------------------- end of header 01 title ----------------------------------------
  138.  
  139. [/comment][/border][comment]
  140.  
  141. <------------------------------ end of header 01 ------------------------------
  142.  
  143. [/comment][comment]
  144.  
  145. ------------------------------ start of content 01 ------------------------------>
  146.  
  147. [/comment][border=0; margin-top: 5px; padding: 3%; width: 94%; font-family: var(--textfont); font-size: calc(.8em + 1px); line-height: 135%; color: var(--white); text-align: justify; background: var(--black); position: relative;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse orci ex, pharetra id magna maximus, tempor condimentum dui. Donec dignissim erat eget enim placerat pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras cursus dapibus mi, id consectetur quam feugiat in. Morbi molestie nisi tortor, ut tincidunt sem faucibus non. Quisque consequat sapien id tincidunt tincidunt. Nulla eu dolor nec nisi bibendum dapibus eget quis velit. Nunc at purus imperdiet sapien porttitor consectetur at in mi. Pellentesque euismod mi et mollis gravida. Praesent nec maximus justo, porttitor posuere quam. Etiam sed lectus sem. Quisque eu ultrices quam, sed tincidunt dui. Integer sit amet gravida massa.
  148.  
  149. Nunc ac blandit tortor. Nullam eu tempor mi. Pellentesque aliquam sem risus, non posuere nisl laoreet nec. Sed at laoreet erat. Duis dictum lacinia justo vel semper. Maecenas efficitur sit amet quam at ullamcorper. Donec lacus augue, pulvinar sed volutpat eget, aliquet quis arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas eros justo, lobortis ac ligula elementum, porttitor ornare magna. Donec pulvinar vel nisl at lobortis. Pellentesque vitae libero lectus.[comment]
  150.  
  151. ---------------------------------------- start of borders/edges ---------------------------------------->
  152.  
  153. [/comment][border=0; border-left: 1px solid var(--white); border-top: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; top: 0; left: 0; opacity: .5;][/border][border=0; border-right: 1px solid var(--white); border-top: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; top: 0; right: 0; opacity: .5;][/border][border=0; border-left: 1px solid var(--white); border-bottom: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; bottom: 0; left: 0; opacity: .5;][/border][border=0; border-right: 1px solid var(--white); border-bottom: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; bottom: 0; right: 0; opacity: .5;][/border][comment]
  154.  
  155. <---------------------------------------- end of borders/edges ----------------------------------------
  156.  
  157. [/comment][/border][comment]
  158.  
  159. <------------------------------ end of content 01 ------------------------------
  160.  
  161. [/comment][comment]
  162.  
  163. -------------------------------- start of spacer ------------------------------>
  164.  
  165. [/comment][border=0; padding: 0; height: 40px;][/border][comment]
  166.  
  167. <-------------------------------- end of spacer ------------------------------
  168.  
  169. [/comment][comment]
  170.  
  171. ------------------------------ start of header 02 ------------------------------>
  172.  
  173. [/comment][border=0; display: flex; align-items: center; padding: 0; position: relative;][border=0; padding: 0; font-family: var(--headerfont); font-size: 2.2em; line-height: 100%; color: var(--accent02); text-transform: uppercase; font-weight: 700;]File[border=0; display: inline-block; padding: 0; color: var(--accent01);]002[/border][/border][comment]
  174.  
  175. ---------------------------------------- start of header 02 title ---------------------------------------->
  176.  
  177. [/comment][border=0; margin-top: 3px; padding: 4px 5px 3px 5px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--white); background: var(--black); text-transform: uppercase; position: absolute; left: 23px;]The First Cataclysm[/border][comment]
  178.  
  179. <---------------------------------------- end of header 02 title ----------------------------------------
  180.  
  181. [/comment][/border][comment]
  182.  
  183. <------------------------------ end of header 02 ------------------------------
  184.  
  185. [/comment][comment]
  186.  
  187. ------------------------------ start of content 02 ------------------------------>
  188.  
  189. [/comment][border=0; margin-top: 5px; padding: 3%; width: 94%; font-family: var(--textfont); font-size: calc(.8em + 1px); line-height: 135%; color: var(--white); text-align: justify; background: var(--black); position: relative;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse orci ex, pharetra id magna maximus, tempor condimentum dui. Donec dignissim erat eget enim placerat pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras cursus dapibus mi, id consectetur quam feugiat in. Morbi molestie nisi tortor, ut tincidunt sem faucibus non. Quisque consequat sapien id tincidunt tincidunt. Nulla eu dolor nec nisi bibendum dapibus eget quis velit. Nunc at purus imperdiet sapien porttitor consectetur at in mi. Pellentesque euismod mi et mollis gravida. Praesent nec maximus justo, porttitor posuere quam. Etiam sed lectus sem. Quisque eu ultrices quam, sed tincidunt dui. Integer sit amet gravida massa.
  190.  
  191. Nunc ac blandit tortor. Nullam eu tempor mi. Pellentesque aliquam sem risus, non posuere nisl laoreet nec. Sed at laoreet erat. Duis dictum lacinia justo vel semper. Maecenas efficitur sit amet quam at ullamcorper. Donec lacus augue, pulvinar sed volutpat eget, aliquet quis arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas eros justo, lobortis ac ligula elementum, porttitor ornare magna. Donec pulvinar vel nisl at lobortis. Pellentesque vitae libero lectus.[comment]
  192.  
  193. ---------------------------------------- start of borders/edges ---------------------------------------->
  194.  
  195. [/comment][border=0; border-left: 1px solid var(--white); border-top: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; top: 0; left: 0; opacity: .5;][/border][border=0; border-right: 1px solid var(--white); border-top: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; top: 0; right: 0; opacity: .5;][/border][border=0; border-left: 1px solid var(--white); border-bottom: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; bottom: 0; left: 0; opacity: .5;][/border][border=0; border-right: 1px solid var(--white); border-bottom: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; bottom: 0; right: 0; opacity: .5;][/border][comment]
  196.  
  197. <---------------------------------------- end of borders/edges ----------------------------------------
  198.  
  199. [/comment][/border][comment]
  200.  
  201. <------------------------------ end of content 02 ------------------------------
  202.  
  203. [/comment][/border][/border][comment]
  204.  
  205. <-------------------- end of left side --------------------
  206.  
  207. [/comment][comment]
  208.  
  209. -------------------- start of right side -------------------->
  210.  
  211. [/comment][border=0; display: flex; justify-content: center; align-items: center; margin-left: 15px; margin-bottom: 25px; padding: 0; flex: 1; min-width: 250px; height: 60vh; max-height: 675px; min-height: 300px; position: relative;][comment]
  212.  
  213. ------------------------------ start of img ------------------------------>
  214.  
  215. [/comment][border=0; padding: 0; width: 100%; height: 60vh; max-height: 675px; min-height: 300px; background: linear-gradient(var(--imgtint), var(--imgtint)), var(--char01); filter: grayscale(95%);][/border][comment]
  216.  
  217. <------------------------------ end of img ------------------------------
  218.  
  219. [/comment][comment]
  220.  
  221. ------------------------------ start of wheel ------------------------------>
  222.  
  223. [/comment][border=0; display: flex; justify-content: center; align-items: center; padding: 0; width: 90%; max-width: 250px; position: absolute;][border=25px solid var(--black); border-radius: 50%; padding: 0; padding-top: calc(100% - 50px); width: calc(100% - 50px); position: relative;][/border][border=0; padding: 0; position: absolute;][border=0; padding: 0; font-family: var(--headerfont); font-size: 2.2em; line-height: 100%; color: var(--accent01); font-weight: 700; text-align: center; text-transform: uppercase;]60%[/border][border=0; padding: 0; font-family: var(--headerfont); font-size: .7em; line-height: 100%; color: var(--accent02); font-weight: 700; text-align: center; text-transform: uppercase;]Story...[/border][/border][/border]
  224.  
  225. [border=0; display: flex; justify-content: center; align-items: center; padding: 0; width: 90%; max-width: 250px; position: absolute; clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 100%, 50% 50%);][border=25px solid var(--accent01); border-radius: 50%; padding: 0; padding-top: calc(100% - 50px); width: calc(100% - 50px); position: relative;][/border][/border][comment]
  226.  
  227. <------------------------------ end of wheel ------------------------------
  228.  
  229. [/comment][/border][comment]
  230.  
  231. <-------------------- end of right side --------------------
  232.  
  233. [/comment][/border][comment]
  234.  
  235. -------------------- start of tab cover -------------------->
  236.  
  237. [/comment][border=1px solid var(--white); padding: 8px; background: var(--bgpattern); border-radius: 50%; position: absolute; z-index: 4; top: 8px; left: 15px; pointer-events: auto;][border=0; padding: 0; width: 7px; height: 7px; background: var(--accent01); border-radius: 50%;][/border][/border][comment]
  238.  
  239. <-------------------- end of tab cover --------------------
  240.  
  241. [/comment][/tab]
  242.  
  243.  
  244.  
  245.  
  246.  
  247. [tab=02020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202][border=0; display: flex; flex-flow: row wrap; margin-left: -15px; padding: 0; line-height: initial; position: absolute; z-index: 3; top: 10px; right: 4%; left: 49px; pointer-events: auto;][comment]
  248.  
  249. -------------------- start of left side -------------------->
  250.  
  251. [/comment][border=0; margin-left: 15px; margin-bottom: 25px; padding: 0; flex: 2; min-width: 250px; height: 60vh; max-height: 675px; min-height: 300px; overflow: hidden;][border=0; padding: 0 30px 0 0; width: 100%; height: 60vh; max-height: 675px; min-height: 300px; overflow-y: scroll; overflow-x: hidden;][comment]
  252.  
  253. ------------------------------ start of header 03 ------------------------------>
  254.  
  255. [/comment][border=0; display: flex; align-items: center; padding: 0; position: relative;][border=0; padding: 0; font-family: var(--headerfont); font-size: 2.2em; line-height: 100%; color: var(--accent02); text-transform: uppercase; font-weight: 700;]File[border=0; display: inline-block; padding: 0; color: var(--accent01);]003[/border][/border][comment]
  256.  
  257. ---------------------------------------- start of header 03 title ---------------------------------------->
  258.  
  259. [/comment][border=0; margin-top: 3px; padding: 4px 5px 3px 5px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--white); background: var(--black); text-transform: uppercase; position: absolute; left: 23px;]Aegir[/border][comment]
  260.  
  261. <---------------------------------------- end of header 03 title ----------------------------------------
  262.  
  263. [/comment][/border][comment]
  264.  
  265. <------------------------------ end of header 03 ------------------------------
  266.  
  267. [/comment][comment]
  268.  
  269. ------------------------------ start of content 03 ------------------------------>
  270.  
  271. [/comment][border=0; margin-top: 5px; padding: 3%; width: 94%; font-family: var(--textfont); font-size: calc(.8em + 1px); line-height: 135%; color: var(--white); text-align: justify; background: var(--black); position: relative;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu urna a quam venenatis luctus. Pellentesque egestas congue rhoncus. Proin facilisis, lectus in faucibus tristique, lacus felis pretium erat, ac pulvinar erat diam eu dolor. Phasellus fermentum velit nec odio rutrum, nec tincidunt dolor porta. Praesent porttitor lectus sed diam tincidunt pellentesque. Donec vel leo metus. Pellentesque rhoncus tortor id finibus tristique. Etiam tincidunt neque eget enim pulvinar, quis vestibulum urna congue. Ut orci odio, ornare eget velit at, ornare iaculis arcu. Morbi mauris augue, volutpat ut ultricies a, tincidunt eget odio. Phasellus aliquet, ligula in sagittis porttitor, elit diam lobortis neque, eu fermentum justo urna et diam. Mauris quis purus ac est mollis suscipit a nec est.
  272.  
  273. Ut tempus velit a ligula mattis egestas. Nam laoreet enim nec dolor vulputate feugiat. Nunc sed pretium ligula, id suscipit felis. Pellentesque dignissim ultricies viverra. Maecenas dapibus id neque vitae finibus. Curabitur sodales libero sit amet arcu laoreet pretium. Nam nec vulputate tellus. Fusce a dignissim nibh. Nam condimentum hendrerit pretium.[comment]
  274.  
  275. ---------------------------------------- start of borders/edges ---------------------------------------->
  276.  
  277. [/comment][border=0; border-left: 1px solid var(--white); border-top: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; top: 0; left: 0; opacity: .5;][/border][border=0; border-right: 1px solid var(--white); border-top: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; top: 0; right: 0; opacity: .5;][/border][border=0; border-left: 1px solid var(--white); border-bottom: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; bottom: 0; left: 0; opacity: .5;][/border][border=0; border-right: 1px solid var(--white); border-bottom: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; bottom: 0; right: 0; opacity: .5;][/border][comment]
  278.  
  279. <---------------------------------------- end of borders/edges ----------------------------------------
  280.  
  281. [/comment][/border][comment]
  282.  
  283. <------------------------------ end of content 03 ------------------------------
  284.  
  285. [/comment][comment]
  286.  
  287. -------------------------------- start of spacer ------------------------------>
  288.  
  289. [/comment][border=0; padding: 0; height: 40px;][/border][comment]
  290.  
  291. <-------------------------------- end of spacer ------------------------------
  292.  
  293. [/comment][comment]
  294.  
  295. ------------------------------ start of header 04 ------------------------------>
  296.  
  297. [/comment][border=0; display: flex; align-items: center; padding: 0; position: relative;][border=0; padding: 0; font-family: var(--headerfont); font-size: 2.2em; line-height: 100%; color: var(--accent02); text-transform: uppercase; font-weight: 700;]File[border=0; display: inline-block; padding: 0; color: var(--accent01);]004[/border][/border][comment]
  298.  
  299. ---------------------------------------- start of header 04 title ---------------------------------------->
  300.  
  301. [/comment][border=0; margin-top: 3px; padding: 4px 5px 3px 5px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--white); background: var(--black); text-transform: uppercase; position: absolute; left: 23px;]Anima[/border][comment]
  302.  
  303. <---------------------------------------- end of header 04 title ----------------------------------------
  304.  
  305. [/comment][/border][comment]
  306.  
  307. <------------------------------ end of header 04 ------------------------------
  308.  
  309. [/comment][comment]
  310.  
  311. ------------------------------ start of content 04 ------------------------------>
  312.  
  313. [/comment][border=0; margin-top: 5px; padding: 3%; width: 94%; font-family: var(--textfont); font-size: calc(.8em + 1px); line-height: 135%; color: var(--white); text-align: justify; background: var(--black); position: relative;]Nulla facilisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque erat nunc, tincidunt nec leo at, congue vehicula neque. Donec placerat nunc sed ante vulputate porttitor. Etiam venenatis laoreet tellus nec fermentum. Quisque ultricies odio quis arcu vulputate, ac tincidunt libero imperdiet. Suspendisse sagittis maximus ex, eget semper purus vulputate sit amet. Praesent lorem velit, tincidunt in sem eget, ultrices egestas dui. Suspendisse rutrum vulputate eros, vitae porttitor magna volutpat nec. Integer eu posuere libero. Pellentesque sit amet dictum libero, eu lacinia enim.
  314.  
  315. Ut maximus est faucibus, porta quam sit amet, accumsan magna. Integer pharetra ac massa nec tempor. Donec maximus finibus turpis id laoreet. Praesent convallis odio eget ex condimentum sagittis. Phasellus vestibulum magna non faucibus fringilla. Sed tincidunt volutpat elit, sit amet ultricies dui hendrerit ut. Donec lobortis purus at odio imperdiet convallis et in enim. Nulla euismod tempor felis, a gravida arcu feugiat quis. Morbi finibus aliquam turpis, ut sodales est porta ac. Praesent imperdiet nibh sapien, ac venenatis nibh porttitor sit amet. Duis tristique, ipsum sit amet placerat scelerisque, dolor orci rutrum dolor, vel pharetra ex tortor sit amet felis. Sed id hendrerit mauris. Aenean at orci at tortor sollicitudin ullamcorper. Pellentesque venenatis velit et ante dapibus, sed ultricies ante vehicula. Fusce volutpat augue magna, at ornare mi faucibus eu.[comment]
  316.  
  317. ---------------------------------------- start of borders/edges ---------------------------------------->
  318.  
  319. [/comment][border=0; border-left: 1px solid var(--white); border-top: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; top: 0; left: 0; opacity: .5;][/border][border=0; border-right: 1px solid var(--white); border-top: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; top: 0; right: 0; opacity: .5;][/border][border=0; border-left: 1px solid var(--white); border-bottom: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; bottom: 0; left: 0; opacity: .5;][/border][border=0; border-right: 1px solid var(--white); border-bottom: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; bottom: 0; right: 0; opacity: .5;][/border][comment]
  320.  
  321. <---------------------------------------- end of borders/edges ----------------------------------------
  322.  
  323. [/comment][/border][comment]
  324.  
  325. <------------------------------ end of content 04 ------------------------------
  326.  
  327. [/comment][/border][/border][comment]
  328.  
  329. <-------------------- end of left side --------------------
  330.  
  331. [/comment][comment]
  332.  
  333. -------------------- start of right side -------------------->
  334.  
  335. [/comment][border=0; display: flex; justify-content: center; align-items: center; margin-left: 15px; margin-bottom: 25px; padding: 0; flex: 1; min-width: 250px; height: 60vh; max-height: 675px; min-height: 300px; position: relative;][comment]
  336.  
  337. ------------------------------ start of img ------------------------------>
  338.  
  339. [/comment][border=0; padding: 0; width: 100%; height: 60vh; max-height: 675px; min-height: 300px; background: linear-gradient(var(--imgtint), var(--imgtint)), var(--char02); filter: grayscale(95%);][/border][comment]
  340.  
  341. <------------------------------ end of img ------------------------------
  342.  
  343. [/comment][comment]
  344.  
  345. ------------------------------ start of wheel ------------------------------>
  346.  
  347. [/comment][border=0; display: flex; justify-content: center; align-items: center; padding: 0; width: 90%; max-width: 250px; position: absolute;][border=25px solid var(--black); border-radius: 50%; padding: 0; padding-top: calc(100% - 50px); width: calc(100% - 50px); position: relative;][/border][border=0; padding: 0; position: absolute;][border=0; padding: 0; font-family: var(--headerfont); font-size: 2.2em; line-height: 100%; color: var(--accent01); font-weight: 700; text-align: center; text-transform: uppercase;]45%[/border][border=0; padding: 0; font-family: var(--headerfont); font-size: .7em; line-height: 100%; color: var(--accent02); font-weight: 700; text-align: center; text-transform: uppercase;]Races...[/border][/border][/border]
  348.  
  349. [border=0; display: flex; justify-content: center; align-items: center; padding: 0; width: 90%; max-width: 250px; position: absolute; clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 56% 100%, 50% 50%);][border=25px solid var(--accent01); border-radius: 50%; padding: 0; padding-top: calc(100% - 50px); width: calc(100% - 50px); position: relative;][/border][/border][comment]
  350.  
  351. <------------------------------ end of wheel ------------------------------
  352.  
  353. [/comment][/border][comment]
  354.  
  355. <-------------------- end of right side --------------------
  356.  
  357. [/comment][/border][comment]
  358.  
  359. -------------------- start of tab cover -------------------->
  360.  
  361. [/comment][border=1px solid var(--white); padding: 8px; background: var(--bgpattern); border-radius: 50%; position: absolute; z-index: 4; top: 55px; left: 15px; pointer-events: auto;][border=0; padding: 0; width: 7px; height: 7px; background: var(--accent01); border-radius: 50%;][/border][/border][comment]
  362.  
  363. <-------------------- end of tab cover --------------------
  364.  
  365. [/comment][/tab]
  366.  
  367.  
  368.  
  369.  
  370.  
  371. [tab=03030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303][border=0; display: flex; flex-flow: row wrap; margin-left: -15px; padding: 0; line-height: initial; position: absolute; z-index: 3; top: 10px; right: 4%; left: 49px; pointer-events: auto;][comment]
  372.  
  373. -------------------- start of left side -------------------->
  374.  
  375. [/comment][border=0; margin-left: 15px; margin-bottom: 25px; padding: 0; flex: 2; min-width: 250px; height: 60vh; max-height: 675px; min-height: 300px; overflow: hidden;][border=0; padding: 0 30px 0 0; width: 100%; height: 60vh; max-height: 675px; min-height: 300px; overflow-y: scroll; overflow-x: hidden;][comment]
  376.  
  377. ------------------------------ start of header 05 ------------------------------>
  378.  
  379. [/comment][border=0; display: flex; align-items: center; padding: 0; position: relative;][border=0; padding: 0; font-family: var(--headerfont); font-size: 2.2em; line-height: 100%; color: var(--accent02); text-transform: uppercase; font-weight: 700;]File[border=0; display: inline-block; padding: 0; color: var(--accent01);]005[/border][/border][comment]
  380.  
  381. ---------------------------------------- start of header 05 title ---------------------------------------->
  382.  
  383. [/comment][border=0; margin-top: 3px; padding: 4px 5px 3px 5px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--white); background: var(--black); text-transform: uppercase; position: absolute; left: 23px;]OOC Message[/border][comment]
  384.  
  385. <---------------------------------------- end of header 05 title ----------------------------------------
  386.  
  387. [/comment][/border][comment]
  388.  
  389. <------------------------------ end of header 05 ------------------------------
  390.  
  391. [/comment][comment]
  392.  
  393. ------------------------------ start of content 05 ------------------------------>
  394.  
  395. [/comment][border=0; margin-top: 5px; padding: 3%; width: 94%; font-family: var(--textfont); font-size: calc(.8em + 1px); line-height: 135%; color: var(--white); text-align: justify; background: var(--black); position: relative;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus risus, gravida eget leo nec, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec urna eleifend, semper ligula eu, euismod elit. Fusce imperdiet lacinia justo, ut interdum nisi sodales in. Sed euismod porttitor pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam porttitor sapien eu arcu tempor consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent in diam sit amet mi dignissim interdum sed id felis. Pellentesque tincidunt quam quis est pulvinar vehicula. Integer ullamcorper aliquet orci, a hendrerit libero tempus hendrerit. Donec nec diam quam. Nam ullamcorper mattis rutrum.
  396.  
  397. Donec sit amet lacus ut tellus ornare cursus. Aliquam erat volutpat. Aliquam non augue tellus. Praesent elementum sapien in vehicula convallis. Aliquam est odio, consequat a nisi quis, pharetra ultricies massa. Nullam vulputate tortor quis eros dictum efficitur. Integer sodales sit amet est accumsan scelerisque. Donec mollis consequat convallis.[comment]
  398.  
  399. ---------------------------------------- start of borders/edges ---------------------------------------->
  400.  
  401. [/comment][border=0; border-left: 1px solid var(--white); border-top: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; top: 0; left: 0; opacity: .5;][/border][border=0; border-right: 1px solid var(--white); border-top: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; top: 0; right: 0; opacity: .5;][/border][border=0; border-left: 1px solid var(--white); border-bottom: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; bottom: 0; left: 0; opacity: .5;][/border][border=0; border-right: 1px solid var(--white); border-bottom: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; bottom: 0; right: 0; opacity: .5;][/border][comment]
  402.  
  403. <---------------------------------------- end of borders/edges ----------------------------------------
  404.  
  405. [/comment][/border][comment]
  406.  
  407. <------------------------------ end of content 05 ------------------------------
  408.  
  409. [/comment][comment]
  410.  
  411. -------------------------------- start of spacer ------------------------------>
  412.  
  413. [/comment][border=0; padding: 0; height: 40px;][/border][comment]
  414.  
  415. <-------------------------------- end of spacer ------------------------------
  416.  
  417. [/comment][comment]
  418.  
  419. ------------------------------ start of header 06 ------------------------------>
  420.  
  421. [/comment][border=0; display: flex; align-items: center; padding: 0; position: relative;][border=0; padding: 0; font-family: var(--headerfont); font-size: 2.2em; line-height: 100%; color: var(--accent02); text-transform: uppercase; font-weight: 700;]File[border=0; display: inline-block; padding: 0; color: var(--accent01);]006[/border][/border][comment]
  422.  
  423. ---------------------------------------- start of header 06 title ---------------------------------------->
  424.  
  425. [/comment][border=0; margin-top: 3px; padding: 4px 5px 3px 5px; font-family: var(--textfont); font-size: .8em; line-height: 100%; color: var(--white); background: var(--black); text-transform: uppercase; position: absolute; left: 23px;]Rules[/border][comment]
  426.  
  427. <---------------------------------------- end of header 06 title ----------------------------------------
  428.  
  429. [/comment][/border][comment]
  430.  
  431. <------------------------------ end of header 06 ------------------------------
  432.  
  433. [/comment][comment]
  434.  
  435. ------------------------------ start of content 06 ------------------------------>
  436.  
  437. [/comment][border=0; margin-top: 5px; padding: 3%; width: 94%; font-family: var(--textfont); font-size: calc(.8em + 1px); line-height: 135%; color: var(--accent02); text-align: justify; background: var(--black); position: relative;][LIST=1][*][border=0; display: inline; padding: 0; color: var(--white);]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu magna, condimentum non iaculis at, imperdiet sed tortor. Morbi quis sem non felis malesuada sollicitudin.[/border]
  438. [*][border=0; display: inline; padding: 0; color: var(--white);]Cras odio ante, malesuada sit amet consectetur vitae, cursus vel ipsum. Sed non felis augue. Vestibulum ut elit id odio pulvinar imperdiet in a metus.[/border]
  439. [*][border=0; display: inline; padding: 0; color: var(--white);]Mauris id lectus eu tellus porta bibendum. Suspendisse urna diam, ultrices tristique pulvinar sit amet, tempus et lectus.[/border]
  440. [*][border=0; display: inline; padding: 0; color: var(--white);]Nulla facilisi. Nulla vel dignissim nulla. Quisque eros nisi, hendrerit ac condimentum sit amet, pellentesque eu ligula.[/border]
  441. [*][border=0; display: inline; padding: 0; color: var(--white);]Etiam malesuada posuere ipsum, id cursus justo convallis id. Nullam dictum turpis in nisi venenatis mattis. Aenean at viverra augue, vel gravida nisi. Vestibulum aliquet nunc non ligula pretium, eu commodo quam tincidunt.[/border][/LIST][comment]
  442.  
  443. ---------------------------------------- start of borders/edges ---------------------------------------->
  444.  
  445. [/comment][border=0; border-left: 1px solid var(--white); border-top: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; top: 0; left: 0; opacity: .5;][/border][border=0; border-right: 1px solid var(--white); border-top: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; top: 0; right: 0; opacity: .5;][/border][border=0; border-left: 1px solid var(--white); border-bottom: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; bottom: 0; left: 0; opacity: .5;][/border][border=0; border-right: 1px solid var(--white); border-bottom: 1px solid var(--white); padding: 0; width: 10px; height: 10px; position: absolute; bottom: 0; right: 0; opacity: .5;][/border][comment]
  446.  
  447. <---------------------------------------- end of borders/edges ----------------------------------------
  448.  
  449. [/comment][/border][comment]
  450.  
  451. <------------------------------ end of content 06 ------------------------------
  452.  
  453. [/comment][/border][/border][comment]
  454.  
  455. <-------------------- end of left side --------------------
  456.  
  457. [/comment][comment]
  458.  
  459. -------------------- start of right side -------------------->
  460.  
  461. [/comment][border=0; display: flex; justify-content: center; align-items: center; margin-left: 15px; margin-bottom: 25px; padding: 0; flex: 1; min-width: 250px; height: 60vh; max-height: 675px; min-height: 300px; position: relative;][comment]
  462.  
  463. ------------------------------ start of img ------------------------------>
  464.  
  465. [/comment][border=0; padding: 0; width: 100%; height: 60vh; max-height: 675px; min-height: 300px; background: linear-gradient(var(--imgtint), var(--imgtint)), var(--char03); filter: grayscale(95%);][/border][comment]
  466.  
  467. <------------------------------ end of img ------------------------------
  468.  
  469. [/comment][comment]
  470.  
  471. ------------------------------ start of wheel ------------------------------>
  472.  
  473. [/comment][border=0; display: flex; justify-content: center; align-items: center; padding: 0; width: 90%; max-width: 250px; position: absolute;][border=25px solid var(--black); border-radius: 50%; padding: 0; padding-top: calc(100% - 50px); width: calc(100% - 50px); position: relative;][/border][border=0; padding: 0; position: absolute;][border=0; padding: 0; font-family: var(--headerfont); font-size: 2.2em; line-height: 100%; color: var(--accent01); font-weight: 700; text-align: center; text-transform: uppercase;]83%[/border][border=0; padding: 0; font-family: var(--headerfont); font-size: .7em; line-height: 100%; color: var(--accent02); font-weight: 700; text-align: center; text-transform: uppercase;]Rules...[/border][/border][/border]
  474.  
  475. [border=0; display: flex; justify-content: center; align-items: center; padding: 0; width: 90%; max-width: 250px; position: absolute; clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 35%, 50% 50%);][border=25px solid var(--accent01); border-radius: 50%; padding: 0; padding-top: calc(100% - 50px); width: calc(100% - 50px); position: relative;][/border][/border][comment]
  476.  
  477. <------------------------------ end of wheel ------------------------------
  478.  
  479. [/comment][/border][comment]
  480.  
  481. <-------------------- end of right side --------------------
  482.  
  483. [/comment][/border][comment]
  484.  
  485. -------------------- start of tab cover -------------------->
  486.  
  487. [/comment][border=1px solid var(--white); padding: 8px; background: var(--bgpattern); border-radius: 50%; position: absolute; z-index: 4; top: 102px; left: 15px; pointer-events: auto;][border=0; padding: 0; width: 7px; height: 7px; background: var(--accent01); border-radius: 50%;][/border][/border][comment]
  488.  
  489. <-------------------- end of tab cover --------------------
  490.  
  491. [/comment][/tab]
  492.  
  493.  
  494.  
  495.  
  496.  
  497.  
  498. [/tabs][comment]
  499.  
  500. -------------------- start of tab covers -------------------->
  501.  
  502. [/comment][border=0; padding: 0; position: absolute; z-index: 3; top: 8px; left: 15px; pointer-events: none;][border=1px solid var(--white); padding: 8px; background: var(--bgpattern); border-radius: 50%;][border=0; padding: 0; width: 7px; height: 7px; background: var(--accent02); border-radius: 50%;][/border][/border][border=1px solid var(--white); margin-top: 22px; padding: 8px; background: var(--bgpattern); border-radius: 50%;][border=0; padding: 0; width: 7px; height: 7px; background: var(--accent02); border-radius: 50%;][/border][/border][border=1px solid var(--white); margin-top: 22px; padding: 8px; background: var(--bgpattern); border-radius: 50%;][border=0; padding: 0; width: 7px; height: 7px; background: var(--accent02); border-radius: 50%;][/border][/border][/border][border=0; padding: 0; height: 130px; position: absolute; top: 0; right: 0; left: 39px;][/border][comment]
  503.  
  504. <-------------------- end of tab covers --------------------
  505.  
  506. [/comment][/border][comment]
  507.  
  508. <---------- end of tabs ----------
  509.  
  510. [/comment][comment]
  511.  
  512. --------- start of bg + tab line --------->
  513.  
  514. [/comment][border=0; box-sizing: border-box; display: flex; flex-flow: row wrap; margin-top: -205px; margin-left: -15px; padding: 35px 4% 0 49px; width: calc(100% + 15px); background: var(--bgpattern); position: relative; z-index: 2; pointer-events: none;][border=0; margin-left: 15px; margin-bottom: 25px; padding: 0; flex: 2; min-width: 250px; height: 60vh; max-height: 675px; min-height: 300px;][/border][border=0; margin-left: 15px; margin-bottom: 75px; padding: 0; flex: 1; min-width: 250px; height: 60vh; max-height: 675px; min-height: 300px;][/border][border=0; padding: 0; width: 1px; background: var(--white); position: absolute; z-index: 3; top: 35px; bottom: 75px; left: 42px;][/border][/border][comment]
  515.  
  516. <--------- end of bg ---------
  517.  
  518. [/comment][comment]
  519.  
  520. --------- start of footer --------->
  521.  
  522. [/comment][border=0; padding: 0; height: 75px; position: absolute; bottom: -1px; left: 0; right: 0; z-index: 5;][border=0; padding: 0; width: 50px; height: 75px; background: var(--accent01); clip-path: polygon(0 0, 0% 100%, 100% 100%); position: absolute; left: 0;][/border][border=0; padding: 0; width: 40px; height: 30px; background: var(--accent01); clip-path: polygon(0 0, 20px 0, 100% 100%, 20px 100%); position: absolute; left: 45px; bottom: 0;][/border][border=0; padding: 0; width: 40px; height: 30px; background: var(--accent01); clip-path: polygon(0 0, 20px 0, 100% 100%, 20px 100%); position: absolute; left: 80px; bottom: 0;][/border][border=0; padding: 0; width: 40px; height: 30px; background: var(--accent01); clip-path: polygon(0 0, 20px 0, 100% 100%, 20px 100%); position: absolute; left: 115px; bottom: 0;][/border][border=0; padding: 0; width: 40px; height: 30px; background: var(--accent01); clip-path: polygon(0 0, 20px 0, 100% 100%, 20px 100%); position: absolute; left: 150px; bottom: 0;][/border][border=0; padding: 0; width: 40px; height: 30px; background: var(--accent01); clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%); position: absolute; left: 185px; right: 0; bottom: 0; width: calc(100% - 180px);][/border][comment]
  523.  
  524. ------------------ start of links ------------------>
  525.  
  526. [/comment][border=0; display: flex; flex-flow: row nowrap; align-items: center; padding: 0; height: 1px; background: var(--white); position: absolute; top: 21px; left: 50px; right: 3%;][comment]
  527.  
  528. vvv link 01 vvv
  529.  
  530. [/comment][URL="google.com"][border=0; padding: 0 5px; margin-left: 25px; font-family: var(--headerfont); font-size: .8em; line-height: 100%; color: var(--accent02); text-transform: uppercase; font-weight: 700; background: var(--bgpattern);]Lore[/border][/URL][comment]
  531.  
  532. vvv link 02 vvv
  533.  
  534. [/comment][URL="google.com"][border=0; padding: 0 5px; margin-left: 15px; font-family: var(--headerfont); font-size: .8em; line-height: 100%; color: var(--accent02); text-transform: uppercase; font-weight: 700; background: var(--bgpattern);]Characters[/border][/URL][comment]
  535.  
  536. vvv link 03 vvv
  537.  
  538. [/comment][URL="google.com"][border=0; padding: 0 5px; margin-left: 15px; font-family: var(--headerfont); font-size: .8em; line-height: 100%; color: var(--accent02); text-transform: uppercase; font-weight: 700; background: var(--bgpattern);]IC[/border][/URL][/border][comment]
  539.  
  540. <------------------ end of links ------------------
  541.  
  542. [/comment][/border][comment]
  543.  
  544. <--------- end of footer ---------
  545.  
  546. [/comment][comment]
  547.  
  548. // visible credit -- please don't remove!!! //
  549.  
  550. [/comment][border=0px; padding: 0; width: 100%; font-family: var(--headerfont); font-size: .6em; text-align: center; text-transform: uppercase; position: absolute; bottom: 6px; color: var(--white); font-weight: 700; z-index: 6; filter: brightness(1.75);]code by Nano[comment][USER=20950]@Nano[/USER][/comment][/border][/border]
Add Comment
Please, Sign In to add comment
Public Pastes
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!