Advertisement
mochiroll

BtWC_Redux_IC.Code

Jul 28th, 2022 (edited)
92
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.22 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. Art From: Project Sekai
  6.  
  7. [font=Play].[/font]
  8. [font=Poppins].[/font]
  9.  
  10. [/comment][comment]
  11.  
  12. // accents //
  13.  
  14. [/comment][border=0; padding: 0;
  15.  
  16. /* colors */
  17. --accent01: #a6060f;
  18. --black: #010101;
  19. --grey: #2a2a2a;
  20. --white: #fefefe;
  21.  
  22. /* textures */
  23. --digital: url('https://imgur.com/VwIRcA9.jpg') repeat;
  24. --noise: url('https://www.transparenttextures.com/patterns/60-lines.png') repeat;
  25.  
  26. /* misc images */
  27. --headerimg: url('https://i.imgur.com/qr7CNMV.jpg') 25% 25%/cover no-repeat;
  28. --mainbg: url('https://i.imgur.com/6T9vnCt.jpg') center/cover no-repeat;
  29. --wedges: url('https://i.imgur.com/Wnhltye.png') center/cover no-repeat;
  30. --titleicon: url('https://i.imgur.com/WVNLJ7Z.jpg') center/cover no-repeat;
  31.  
  32. /* tab (left side) images */
  33. --tab01img: url('https://i.imgur.com/j3OJ1am.jpg') center/cover no-repeat;
  34.  
  35. /* fonts */
  36. --mainfont: 'Play', sans-serif;
  37. --titlefont: 'Poppins', sans-serif;
  38.  
  39. margin: 0 auto;
  40. padding: 0;
  41. width: 100%;
  42. min-width: 300px;
  43. font-size: initial;
  44. overflow: hidden;
  45. position: relative;][comment]
  46.  
  47. ---------- start of top bar ---------->
  48.  
  49. [/comment][border=0; padding: 0; background: var(--black);][border=0; padding: 20px 0 10px 20px; width: calc(100% - 20px); background: var(--noise);][comment]
  50.  
  51. -------------------- start of links -------------------->
  52.  
  53. [/comment][border=0; display: flex; flex-flow: row wrap; justify-content: flex-end; padding: 0; font-size: .7em; line-height: 100%; font-family: var(--mainfont); color: var(--white); font-weight: 700; text-transform: uppercase;][comment]
  54.  
  55. ------------------------------ link 1 ------------------------------>
  56.  
  57. [/comment][border=0; display: inline-block; padding: 0; margin-right: 20px; margin-bottom: 10px;][URL="google.com"][border=0; display: inline; padding: 0; color: var(--white);]Interest Check[/border][/URL][/border][comment]
  58.  
  59. <------------------------------ link 1 ------------------------------
  60.  
  61. [/comment][comment]
  62.  
  63. ------------------------------ link 1 ------------------------------>
  64.  
  65. [/comment][border=0; display: inline-block; padding: 0; margin-right: 20px; margin-bottom: 10px;][URL="google.com"][border=0; display: inline; padding: 0; color: var(--white);]Lore[/border][/URL][/border][comment]
  66.  
  67. <------------------------------ link 2 ------------------------------
  68.  
  69. [/comment][comment]
  70.  
  71. ------------------------------ link 3 ------------------------------>
  72.  
  73. [/comment][border=0; display: inline-block; padding: 0; margin-right: 20px; margin-bottom: 10px;][URL="google.com"][border=0; display: inline; padding: 0; color: var(--white);]Applications[/border][/URL][/border][comment]
  74.  
  75. <------------------------------ link 3 ------------------------------
  76.  
  77. [/comment][comment]
  78.  
  79. ------------------------------ link 4 ------------------------------>
  80.  
  81. [/comment][border=0; display: inline-block; padding: 0; margin-right: 20px; margin-bottom: 10px; color: var(--accent01); pointer-events: none;]In Character[/border][comment]
  82.  
  83. <------------------------------ link 4 ------------------------------
  84.  
  85. [/comment][/border][comment]
  86.  
  87. <-------------------- end of links --------------------
  88.  
  89. [/comment][/border][/border][comment]
  90.  
  91. <---------- end of top bar ----------
  92.  
  93. [/comment][comment]
  94.  
  95. ---------- start of header banner ---------->
  96.  
  97. [/comment][border=0; padding: 0; width: 100%; height: 300px; background: var(--headerimg); position: relative; pointer-events: none; z-index: 1;][border=0; padding: 0; width: 100%; height: 300px; background: var(--digital);][comment]
  98.  
  99. -------------------- start of song title -------------------->
  100.  
  101. [/comment][border=0; padding: 3px 4px 2px; background: var(--black); font-family: var(--mainfont); font-size: .7em; line-height: 100%; color: var(--white); position: absolute; bottom: 15px; right: 70px; pointer-events: initial; z-index: 5;]FUZI × Mili - Victim[/border][comment]
  102.  
  103. <-------------------- end of song title --------------------
  104.  
  105. [/comment][comment]
  106.  
  107. -------------------- start of music player -------------------->
  108.  
  109. [/comment][border=0; padding: 8px 4px; background: var(--black); position: absolute; bottom: 15px; right: 15px; pointer-events: initial; z-index: 5;][border=0; padding: 0; width: 38px; height: 30px; overflow: hidden;][border=0; padding: 0; margin-top: -335px; margin-left: -240px;][comment]
  110.  
  111. ------------------------------ gdoc ID ------------------------------>
  112.  
  113. [/comment][gdoc]1ELHfmNAaovtQxsaerYG4IjG9NOLg280h[/gdoc][comment]
  114.  
  115. <------------------------------ gdoc ID ------------------------------
  116.  
  117. [/comment][/border][/border][/border][comment]
  118.  
  119. <-------------------- end of music player --------------------
  120.  
  121. [/comment][comment]
  122.  
  123. -------------------- start of music player cover -------------------->
  124.  
  125. [/comment][border=0; display: flex; align-items: center; justify-content: center; padding: 0; width: 46px; height: 46px; background: var(--black); color: var(--white); font-size: 25px; line-height: 0; position: absolute; bottom: 15px; right: 15px; pointer-events: none; z-index: 5; opacity: 0;][border=0; padding: 0; margin-top: -3px; margin-left: 4px;]▶[/border][/border][comment]
  126.  
  127. <-------------------- end of music player cover --------------------
  128.  
  129. [/comment][/border][/border][comment]
  130.  
  131. <---------- end of header banner ----------
  132.  
  133. [/comment][comment]
  134.  
  135. ---------- start of lower half ---------->
  136.  
  137. [/comment][border=0; padding: 0; position: relative;][comment]
  138.  
  139. -------------------- start of tab covers -------------------->
  140.  
  141. [/comment][border=0; padding: 0; width: 100%; position: absolute; z-index: 6;][comment]
  142.  
  143. ------------------------------ start of RP title ------------------------------>
  144.  
  145. [/comment][border=0; display: flex; align-items: center; padding: 15px; background: var(--black); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); position: absolute; left: 10px; top: -90px;][border=0; padding: 0; width: calc(100% - 30px); line-height: 100%; text-transform: uppercase; text-align: center; letter-spacing: -1px; position: absolute; z-index: 3;][comment]
  146.  
  147. // title start //
  148.  
  149. [/comment][border=0; padding: 0; font-family: var(--mainfont); color: var(--white); font-size: .9em;]Beyond the Witch's[/border][border=0; padding: 0; margin-top: 3px; font-family var(--titlefont); color: var(--accent01); font-size: 1.6em; font-weight: 700;]Corridor[/border][comment]
  150.  
  151. // title end //
  152.  
  153. [/comment][/border][border=0; padding: 0; width: 150px; height: 150px; background: var(--titleicon); overflow: hidden; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); opacity: .5;][border=0; width: 160px; height: 160px; background: var(--digital);][/border][/border][/border][comment]
  154.  
  155. <------------------------------ end of RP title ------------------------------
  156.  
  157. [/comment][/border][comment]
  158.  
  159. <-------------------- end of tab covers --------------------
  160.  
  161. [/comment][comment]
  162.  
  163. ------------------------------ start of tab background ------------------------------>
  164.  
  165. [/comment][border=0; padding: 0; width: 100%; position: relative; z-index: 5; pointer-events: none;][border=0; padding: 0; background: var(--grey);][border=0; padding: 0; width: 100%; background: var(--mainbg); opacity: .1;][comment]
  166.  
  167. // start layout shell one //
  168.  
  169. [/comment][border=0; padding: 0; height: 70px;][/border][border=0; font-size: initial; line-height: initial; display: flex; flex-flow: row wrap; justify-content: center; padding: 0 25px; width: calc(100% - 25px);][border=0; padding: 0; margin-right: 25px; margin-bottom: 50px; flex: 1; width: calc(100% - 25px); max-width: 400px; min-width: 200px; height: 70vh; min-height: 400px; max-height: 600px;][/border][border=0; padding: 0; margin-right: 25px; margin-bottom: 50px; flex: 2; width: calc(100% - 25px); min-width: 200px; height: 70vh; min-height: 400px; max-height: 600px;][/border][/border][comment]
  170.  
  171. // end layout shell one //
  172.  
  173. [/comment][/border][border=0; padding: 0; width: 100%; background: var(--wedges); position: absolute; top: 0; left: 0;][comment]
  174.  
  175. // start layout shell two //
  176.  
  177. [/comment][border=0; font-size: initial; line-height: initial; display: flex; flex-flow: row wrap; justify-content: center; padding: 0 25px; margin-top: 70px; width: calc(100% - 25px); overflow: hidden; pointer-events: initial;][comment]
  178.  
  179. ------------------------------ start of left side ------------------------------>
  180.  
  181. [/comment][border=0; padding: 0; margin-right: 25px; margin-bottom: 50px; flex: 1; width: calc(100% - 25px); max-width: 400px; min-width: 200px; height: 70vh; min-height: 400px; max-height: 600px; background: var(--tab01img); clip-path: polygon(100px 0%, 100% 0, 100% calc(100% - 100px), calc(100% - 100px) 100%, 0 100%, 0 100px); overflow: hidden; position: relative;][border=0; padding: 0; background: var(--digital); position: absolute; top: 0; bottom: 0; left: 0; right: 0;][/border][comment]
  182.  
  183. ---------------------------------------- start of tab number ---------------------------------------->
  184.  
  185. [/comment][border=0; padding: 0; font-family: var(--mainfont); font-size: 150px; font-weight: 700; line-height: 100%; letter-spacing: -20px; color: var(--white); position: absolute; top: -48px; right: -10px; opacity: .5;]01[/border][comment]
  186.  
  187. <---------------------------------------- end tab number ----------------------------------------
  188.  
  189. [/comment][comment]
  190.  
  191. ---------------------------------------- start of tab label ---------------------------------------->
  192.  
  193. [/comment][border=0; padding: 0; width: calc(100% - 75px); position: absolute; bottom: 50px; left: 25px; opacity: .7;][comment]
  194.  
  195. -------------------------------------------------- start of tab title -------------------------------------------------->
  196.  
  197. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]In Character[/border][/border][comment]
  198.  
  199. <-------------------------------------------------- end of tab title --------------------------------------------------
  200.  
  201. [/comment][comment]
  202.  
  203. -------------------------------------------------- start of blurb under title -------------------------------------------------->
  204.  
  205. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 0; margin-top: 1px; margin-right: 10px; max-width: 10px; min-width: 10px; height: 10px; background: var(--white);][/border][border=0; display: inline-block; padding: 0; font-family: var(--mainfont); font-size: .8em; line-height: 120%; color: var(--white); text-transform: uppercase;]A warrior needs not concern themselves with matters within the purview of men[/border][/border][comment]
  206.  
  207. <-------------------------------------------------- end of blurb under title --------------------------------------------------
  208.  
  209. [/comment][/border][comment]
  210.  
  211. <---------------------------------------- end tab label ----------------------------------------
  212.  
  213. [/comment][/border][comment]
  214.  
  215. <------------------------------ end of left side ------------------------------
  216.  
  217. [/comment][comment]
  218.  
  219. ------------------------------ start of right side ------------------------------>
  220.  
  221. [/comment][border=0; padding: 0; margin-right: 25px; margin-bottom: 50px; flex: 2; width: calc(100% - 25px); min-width: 200px; height: 70vh; min-height: 400px; max-height: 600px; overflow: hidden;][border=0; padding: 0 30px 0 0; width: 100%; height: 70vh; min-height: 400px; max-height: 600px; overflow-y: scroll; overflow-x: hidden;][comment]
  222.  
  223. ---------------------------------------- start of tab 1 section 1 ---------------------------------------->
  224.  
  225. [/comment][border=0; display: flex; flex-flow: row nowrap; padding: 0; margin-right: -10px; width: calc(100% + 10px);][comment]
  226.  
  227. // title start //
  228.  
  229. [/comment][border=0; padding: 5px 0 5px 0; margin-right: 10px; flex: 1; max-width: 90px; min-width: 90px;][border=0; padding: 0; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--accent01); text-transform: uppercase; text-align: right;]Prelude[/border][border=0; padding: 0; font-family: var(--mainfont); font-size: 2.1em; line-height: 100%; font-weight: 700; color: var(--white); text-transform: uppercase; text-align: right; letter-spacing: -2px;]N/A[/border][/border][comment]
  230.  
  231. // title end //
  232.  
  233. [/comment][comment]
  234.  
  235. // content start //
  236.  
  237. [/comment][border=0; border-left: 1px solid var(--accent01); padding: 5px 0 5px 10px; margin-right: 10px; flex: 9; width: calc(100% - 11px); font-family: var(--mainfont); font-size: calc(.9em + 1px); line-height: 125%; color: var(--white); text-align: justify;] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus feugiat luctus. Curabitur finibus magna vitae risus aliquet, nec aliquet ligula sodales. Ut pretium urna non suscipit varius. Praesent consectetur ante felis, ut eleifend sapien lacinia nec. Pellentesque sodales ornare quam ut bibendum. Vivamus tristique fringilla orci, sit amet ultrices dui sagittis a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  238.  
  239. Etiam at ullamcorper est. Etiam non magna sit amet lectus finibus commodo. Suspendisse posuere id purus sit amet elementum. Sed id erat viverra odio congue volutpat at vitae urna. Sed et volutpat urna, in fermentum quam. Suspendisse dui justo, sollicitudin at gravida non, cursus sed ligula. Sed id tellus in eros finibus dignissim vitae vitae nibh. Fusce tincidunt vel nisi vel vulputate. Aliquam sodales ex in ligula aliquam, eget congue metus vestibulum. Aliquam ac nisl tristique, dictum justo vel, efficitur velit. Donec accumsan nisi odio, ac vehicula purus maximus sit amet. Pellentesque vel tellus lacinia, bibendum ligula a, iaculis lectus. Nunc et bibendum nunc. Pellentesque accumsan suscipit imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.[/border][comment]
  240.  
  241. // content end //
  242.  
  243. [/comment][/border][comment]
  244.  
  245. <---------------------------------------- end of tab 1 section 1 ----------------------------------------
  246.  
  247. [/comment][comment]
  248.  
  249. // spacer start //
  250.  
  251. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  252.  
  253. // spacer end //
  254.  
  255. [/comment][comment]
  256.  
  257. ---------------------------------------- start of tab 1 section 2 ---------------------------------------->
  258.  
  259. [/comment][border=0; display: flex; flex-flow: row nowrap; padding: 0; margin-right: -10px; width: calc(100% + 10px);][comment]
  260.  
  261. // title start //
  262.  
  263. [/comment][border=0; padding: 5px 0 5px 0; margin-right: 10px; flex: 1; max-width: 90px; min-width: 90px;][border=0; padding: 0; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--accent01); text-transform: uppercase; text-align: right;]The First Cataclysm[/border][border=0; padding: 0; font-family: var(--mainfont); font-size: 2.1em; line-height: 100%; font-weight: 700; color: var(--white); text-transform: uppercase; text-align: right; letter-spacing: -2px;]1999[/border][/border][comment]
  264.  
  265. // title end //
  266.  
  267. [/comment][comment]
  268.  
  269. // content start //
  270.  
  271. [/comment][border=0; border-left: 1px solid var(--accent01); padding: 5px 0 5px 10px; margin-right: 10px; flex: 9; width: calc(100% - 11px); font-family: var(--mainfont); font-size: calc(.9em + 1px); line-height: 125%; color: var(--white); text-align: justify;] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus feugiat luctus. Curabitur finibus magna vitae risus aliquet, nec aliquet ligula sodales. Ut pretium urna non suscipit varius. Praesent consectetur ante felis, ut eleifend sapien lacinia nec. Pellentesque sodales ornare quam ut bibendum. Vivamus tristique fringilla orci, sit amet ultrices dui sagittis a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  272.  
  273. Etiam at ullamcorper est. Etiam non magna sit amet lectus finibus commodo. Suspendisse posuere id purus sit amet elementum. Sed id erat viverra odio congue volutpat at vitae urna. Sed et volutpat urna, in fermentum quam. Suspendisse dui justo, sollicitudin at gravida non, cursus sed ligula. Sed id tellus in eros finibus dignissim vitae vitae nibh. Fusce tincidunt vel nisi vel vulputate. Aliquam sodales ex in ligula aliquam, eget congue metus vestibulum. Aliquam ac nisl tristique, dictum justo vel, efficitur velit. Donec accumsan nisi odio, ac vehicula purus maximus sit amet. Pellentesque vel tellus lacinia, bibendum ligula a, iaculis lectus. Nunc et bibendum nunc. Pellentesque accumsan suscipit imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  274.  
  275. Fusce quis consequat ligula. Duis condimentum consequat odio vel pretium. Nulla tincidunt nulla mi, et gravida nunc bibendum accumsan. Fusce nibh velit, commodo nec viverra sit amet, ultrices a est. Nullam id tristique diam, aliquam lacinia diam. In auctor eget elit vel ullamcorper. Curabitur ex diam, malesuada et interdum quis, mollis vitae urna. Etiam euismod nisi a urna finibus bibendum at ac purus. Donec sed dui hendrerit, viverra tortor sed, facilisis quam. Proin bibendum risus quis nisi tincidunt, eu sagittis erat tempus. Suspendisse potenti. Suspendisse tincidunt imperdiet magna et vulputate. Sed id neque elit. Duis mollis lobortis mi eget hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras arcu velit, cursus ac turpis sit amet, dictum mattis urna.[/border][comment]
  276.  
  277. // content end //
  278.  
  279. [/comment][/border][comment]
  280.  
  281. <---------------------------------------- end of tab 1 section 2 ----------------------------------------
  282.  
  283. [/comment][comment]
  284.  
  285. // spacer start //
  286.  
  287. [/comment][border=0; padding: 0; height: 50px;][/border][comment]
  288.  
  289. // spacer end //
  290.  
  291. [/comment][comment]
  292.  
  293. ---------------------------------------- start of tab 1 section 3 ---------------------------------------->
  294.  
  295. [/comment][border=0; display: flex; flex-flow: row nowrap; padding: 0; margin-right: -10px; width: calc(100% + 10px);][comment]
  296.  
  297. // title start //
  298.  
  299. [/comment][border=0; padding: 5px 0 5px 0; margin-right: 10px; flex: 1; max-width: 90px; min-width: 90px;][border=0; padding: 0; font-family: var(--mainfont); font-size: .9em; line-height: 100%; color: var(--accent01); text-transform: uppercase; text-align: right;]The Second Cataclysm[/border][border=0; padding: 0; font-family: var(--mainfont); font-size: 2.1em; line-height: 100%; font-weight: 700; color: var(--white); text-transform: uppercase; text-align: right; letter-spacing: -2px;]2011[/border][/border][comment]
  300.  
  301. // title end //
  302.  
  303. [/comment][comment]
  304.  
  305. // content start //
  306.  
  307. [/comment][border=0; border-left: 1px solid var(--accent01); padding: 5px 0 5px 10px; margin-right: 10px; flex: 9; width: calc(100% - 11px); font-family: var(--mainfont); font-size: calc(.9em + 1px); line-height: 125%; color: var(--white); text-align: justify;] Mauris in vestibulum orci. Etiam nec sodales dui. Nulla facilisi. Suspendisse scelerisque augue eu nisi commodo, eget blandit leo consequat. In volutpat ante sit amet lorem posuere facilisis. Integer lorem diam, fringilla a tellus aliquet, lobortis vestibulum velit. Sed nec metus vel lacus pharetra eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean non molestie arcu. Morbi vulputate tempus nulla, eu ornare libero porttitor sed. Nullam eros orci, imperdiet quis sodales nec, feugiat eget nulla. Maecenas neque lorem, rhoncus in libero imperdiet, semper pulvinar lacus.
  308.  
  309. Ut at euismod dui, sed posuere ex. Nunc ut ante ut felis ultricies porta quis et justo. Nunc aliquet pharetra tellus et euismod. Nullam interdum fringilla leo, vel luctus metus molestie nec. Aliquam faucibus pharetra arcu, sed porta nisl volutpat nec. Aenean et felis quis tortor accumsan consequat. Donec tempus, massa eget fermentum sagittis, mauris nisi mollis nisi, et ultricies ligula dui ac urna. Maecenas placerat, eros eget mattis pellentesque, massa mauris dapibus odio, non sollicitudin orci sapien vel nulla. Mauris et ipsum blandit, laoreet felis pharetra, imperdiet justo. Nunc in accumsan nisl. Praesent laoreet pellentesque ligula at efficitur. Donec risus justo, bibendum quis leo ut, molestie tristique enim. Vivamus nec tempor lacus. Curabitur ac placerat nulla. Nullam sed felis a ipsum dapibus vestibulum congue dictum ipsum. Vivamus ullamcorper erat at nisl condimentum, nec dictum velit volutpat.[/border][comment]
  310.  
  311. // content end //
  312.  
  313. [/comment][/border][comment]
  314.  
  315. <---------------------------------------- end of tab 1 section 3 ----------------------------------------
  316.  
  317. [/comment][/border][/border][comment]
  318.  
  319. <------------------------------ end of right side ------------------------------
  320.  
  321. [/comment][/border][comment]
  322.  
  323. // end layout shell two //
  324.  
  325. [/comment][/border][/border][/border][comment]
  326.  
  327. <------------------------------ end of tab background ------------------------------
  328.  
  329. [/comment][comment]
  330.  
  331. <---------- end of lower half ----------
  332.  
  333. [/comment][/border][comment]
  334.  
  335. ---------- start of credits ---------->
  336.  
  337. [/comment][border=0; padding: 10px 0; width: 100%; font-family: var(--mainfont); font-size: .6em; line-height: 100%; color: var(--white); background: var(--black); text-align: center; text-transform: uppercase;]Code by Nano[comment][USER=20950]@Nano[/USER][/comment][/border][comment]
  338.  
  339. <---------- end of credits ----------
  340.  
  341. [/comment][/border]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement