mochiroll

Witch's_Corridor.Code.v1

Aug 1st, 2021
62
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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=STIX Two Text].[/font]
  6. [font=Hind].[/font]
  7. [font=Exo 2].[/font]
  8.  
  9. [/comment][comment]
  10.  
  11. // accents
  12.  
  13. [/comment][border=0; padding: 0;
  14.  
  15. --accent: #aa1f1f;
  16. --offwhite: #dddddd;
  17. --black: #111111;
  18. --bgcolor: #333333;
  19.  
  20. --leftimg: url('https://i.imgur.com/ny02157.png') center/cover no-repeat;
  21. --leftimgtint: rgba(51, 51, 51, .8);
  22.  
  23. --mainheaderfont: 'STIX Two Text', serif;
  24. --blurbfont: 'Hind', sans-serif;
  25. --headerfont: 'Hind', sans-serif;
  26. --textfont: 'STIX Two Text', serif;
  27.  
  28. border=0;
  29. display: flex;
  30. flex-flow: row wrap;
  31. margin: 75px auto 0;
  32. padding: 0;
  33. width: 100%;
  34. max-width: 700px;
  35. min-width: 300px;
  36. font-size: initial;
  37. overflow: hidden;
  38. position: relative;][comment]
  39.  
  40. ---------- start of left side ---------->
  41.  
  42. [/comment][border=0; padding: 0; flex: 4; width: 100%; max-width: 450px; min-width: 300px; height: 70vh; max-height: 600px; min-height: 400px; background: var(--bgcolor); position: relative;][comment]
  43.  
  44. -------------------- start of tabs -------------------->
  45.  
  46. [/comment][border=0; margin-top: 25px; padding: 0; width: 100%; line-height: 24px;][tabs]
  47.  
  48.  
  49.  
  50.  
  51.  
  52.  
  53. [tab=010101010101010101010101010101010101010101010101010101010101010101][border=0; padding: 0; width: 100%; height: calc(70vh - 150px); max-height: 450px; min-height: 250px; position: absolute; left: 0; right: 0; top: 125px; z-index: 2; overflow: hidden;][border=0; padding: 0; padding-right: 30px; width: 100%; height: calc(70vh - 150px); max-height: 450px; min-height: 250px; overflow-y: scroll;][comment]
  54.  
  55. ------------------------------ start of header 01 ------------------------------>
  56.  
  57. [/comment][border=0; display: flex; padding: 0; width: calc(100% + 20px); background: var(--black); position: sticky; top: 0;][border=0; padding: 0; flex: 1; background: var(--accent); clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 100%, 0% 100%);][/border][border=0; box-sizing: border-box; padding: 7px 15px 3px; flex: 4; font-family: var(--headerfont); font-size: .8em; line-height: 100%; color: var(--offwhite); text-transform: uppercase;][comment]
  58.  
  59. // header title //
  60.  
  61. [/comment]Prelude[/border][border=0; padding: 0; flex: 4; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 25px 100%);][/border][/border][comment]
  62.  
  63. <------------------------------ end of header 01 ------------------------------
  64.  
  65. [/comment][comment]
  66.  
  67. ------------------------------ start of content 01 ------------------------------>
  68.  
  69. [/comment][border=0; box-sizing: border-box; padding: 35px 5px 0 25px; font-family: var(--textfont); font-size: calc(.9em + 1px); line-height: 140%; color: var(--offwhite); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis scelerisque eros enim, ut imperdiet ligula dictum vel. Nunc vel enim lacinia ante fermentum egestas eget et velit. Cras luctus ipsum quis massa gravida, nec luctus elit viverra. Maecenas pellentesque gravida tempus. Maecenas pellentesque malesuada tortor vitae tincidunt. Donec vulputate lacus urna, id tempor dui consectetur eget. Etiam lobortis interdum ornare. Nam ut nisl dignissim, scelerisque arcu et, efficitur ante.
  70.  
  71. Duis venenatis elementum ante. Suspendisse lobortis sagittis enim. Cras rutrum ligula nulla, vel tincidunt felis sollicitudin id. Suspendisse aliquam, turpis et cursus pulvinar, arcu justo posuere nunc, nec vestibulum ligula diam at tellus. Aliquam pulvinar eleifend dolor, nec mattis dolor suscipit sed. Proin eros velit, dapibus et sagittis semper, accumsan ut nisi. Integer feugiat risus sed mattis malesuada. Nulla rutrum dui quis fermentum aliquam.
  72.  
  73. Mauris elementum lacinia semper. Fusce pretium dolor non convallis dictum. Morbi vel nisi tincidunt, posuere mi quis, lobortis quam. Nulla viverra porta commodo. Sed placerat in turpis non placerat. Aenean scelerisque in sapien in venenatis. Vivamus vitae ex non erat tristique dictum. Morbi sodales, ante at lobortis efficitur, lacus ante aliquet ex, et iaculis orci dui vitae quam. Aenean a ultrices risus. Pellentesque ut ante nisl. Duis egestas elementum semper. Vivamus mollis est eget magna dignissim eleifend. Sed elementum lacinia sem, ac convallis eros malesuada at.[/border][comment]
  74.  
  75. <------------------------------ end of content 01 ------------------------------
  76.  
  77. [/comment][comment]
  78.  
  79. // spacer //
  80.  
  81. [/comment][border=0; padding: 0; height: 35px;][/border][comment]
  82.  
  83. ------------------------------ start of header 02 ------------------------------>
  84.  
  85. [/comment][border=0; display: flex; padding: 0; width: calc(100% + 20px); background: var(--black); position: sticky; top: 0;][border=0; padding: 0; flex: 1; background: var(--accent); clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 100%, 0% 100%);][/border][border=0; box-sizing: border-box; padding: 7px 15px 3px; flex: 4; font-family: var(--headerfont); font-size: .8em; line-height: 100%; color: var(--offwhite); text-transform: uppercase;][comment]
  86.  
  87. // header title //
  88.  
  89. [/comment]Overview[/border][border=0; padding: 0; flex: 4; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 25px 100%);][/border][/border][comment]
  90.  
  91. <------------------------------ end of header 02 ------------------------------
  92.  
  93. [/comment][comment]
  94.  
  95. ------------------------------ start of content 02 ------------------------------>
  96.  
  97. [/comment][border=0; box-sizing: border-box; padding: 35px 5px 0 25px; font-family: var(--textfont); font-size: calc(.9em + 1px); line-height: 140%; color: var(--offwhite); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis scelerisque eros enim, ut imperdiet ligula dictum vel. Nunc vel enim lacinia ante fermentum egestas eget et velit. Cras luctus ipsum quis massa gravida, nec luctus elit viverra. Maecenas pellentesque gravida tempus. Maecenas pellentesque malesuada tortor vitae tincidunt. Donec vulputate lacus urna, id tempor dui consectetur eget. Etiam lobortis interdum ornare. Nam ut nisl dignissim, scelerisque arcu et, efficitur ante.
  98.  
  99. Duis venenatis elementum ante. Suspendisse lobortis sagittis enim. Cras rutrum ligula nulla, vel tincidunt felis sollicitudin id. Suspendisse aliquam, turpis et cursus pulvinar, arcu justo posuere nunc, nec vestibulum ligula diam at tellus. Aliquam pulvinar eleifend dolor, nec mattis dolor suscipit sed. Proin eros velit, dapibus et sagittis semper, accumsan ut nisi. Integer feugiat risus sed mattis malesuada. Nulla rutrum dui quis fermentum aliquam.[/border][comment]
  100.  
  101. <------------------------------ end of content 02 ------------------------------
  102.  
  103. [/comment][/border][/border][comment]
  104.  
  105. // asterisk //
  106.  
  107. [/comment][border=0; padding: 0; font-family: var(--headerfont); font-size: 14px; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute; top: 30px; z-index: 2;][color=transparent]Story[/color] *[/border][/tab]
  108.  
  109.  
  110.  
  111.  
  112.  
  113.  
  114. [tab=020202020202020202020202020202020202020202020202020202020202020202][border=0; padding: 0; width: 100%; height: calc(70vh - 150px); max-height: 450px; min-height: 250px; position: absolute; left: 0; right: 0; top: 125px; z-index: 2; overflow: hidden;][border=0; padding: 0; padding-right: 30px; width: 100%; height: calc(70vh - 150px); max-height: 450px; min-height: 250px; overflow-y: scroll;][comment]
  115.  
  116. ------------------------------ start of header 01 ------------------------------>
  117.  
  118. [/comment][border=0; display: flex; padding: 0; width: calc(100% + 20px); background: var(--black); position: sticky; top: 0;][border=0; padding: 0; flex: 1; background: var(--accent); clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 100%, 0% 100%);][/border][border=0; box-sizing: border-box; padding: 7px 15px 3px; flex: 4; font-family: var(--headerfont); font-size: .8em; line-height: 100%; color: var(--offwhite); text-transform: uppercase;][comment]
  119.  
  120. // header title //
  121.  
  122. [/comment]OOC[/border][border=0; padding: 0; flex: 4; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 25px 100%);][/border][/border][comment]
  123.  
  124. <------------------------------ end of header 01 ------------------------------
  125.  
  126. [/comment][comment]
  127.  
  128. ------------------------------ start of content 01 ------------------------------>
  129.  
  130. [/comment][border=0; box-sizing: border-box; padding: 35px 5px 0 25px; font-family: var(--textfont); font-size: calc(.9em + 1px); line-height: 140%; color: var(--offwhite); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis scelerisque eros enim, ut imperdiet ligula dictum vel. Nunc vel enim lacinia ante fermentum egestas eget et velit. Cras luctus ipsum quis massa gravida, nec luctus elit viverra. Maecenas pellentesque gravida tempus. Maecenas pellentesque malesuada tortor vitae tincidunt. Donec vulputate lacus urna, id tempor dui consectetur eget. Etiam lobortis interdum ornare. Nam ut nisl dignissim, scelerisque arcu et, efficitur ante.[/border][comment]
  131.  
  132. <------------------------------ end of content 01 ------------------------------
  133.  
  134. [/comment][comment]
  135.  
  136. // spacer //
  137.  
  138. [/comment][border=0; padding: 0; height: 35px;][/border][comment]
  139.  
  140. ------------------------------ start of header 02 ------------------------------>
  141.  
  142. [/comment][border=0; display: flex; padding: 0; width: calc(100% + 20px); background: var(--black); position: sticky; top: 0;][border=0; padding: 0; flex: 1; background: var(--accent); clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 100%, 0% 100%);][/border][border=0; box-sizing: border-box; padding: 7px 15px 3px; flex: 4; font-family: var(--headerfont); font-size: .8em; line-height: 100%; color: var(--offwhite); text-transform: uppercase;][comment]
  143.  
  144. // header title //
  145.  
  146. [/comment]Rules[/border][border=0; padding: 0; flex: 4; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 25px 100%);][/border][/border][comment]
  147.  
  148. <------------------------------ end of header 02 ------------------------------
  149.  
  150. [/comment][comment]
  151.  
  152. ------------------------------ start of content 02 ------------------------------>
  153.  
  154. [/comment][border=0; box-sizing: border-box; padding: 35px 5px 0 25px; font-family: var(--textfont); font-size: calc(.9em + 1px); line-height: 140%; color: var(--offwhite); text-align: justify;][border=0; padding: 0; display: inline; color: var(--accent); font-weight: 700;]1. [/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  155.  
  156. [border=0; padding: 0; display: inline; color: var(--accent); font-weight: 700;]2. [/border]Duis scelerisque eros enim, ut imperdiet ligula dictum vel. Nunc vel enim lacinia ante fermentum egestas eget et velit. Cras luctus ipsum quis massa gravida, nec luctus elit viverra. Maecenas pellentesque gravida tempus. Maecenas pellentesque malesuada tortor vitae tincidunt.
  157.  
  158. [border=0; padding: 0; display: inline; color: var(--accent); font-weight: 700;]3. [/border]Donec vulputate lacus urna, id tempor dui consectetur eget. Etiam lobortis interdum ornare. Nam ut nisl dignissim, scelerisque arcu et, efficitur ante.
  159.  
  160. [border=0; padding: 0; display: inline; color: var(--accent); font-weight: 700;]4. [/border]Duis venenatis elementum ante. Suspendisse lobortis sagittis enim. Cras rutrum ligula nulla, vel tincidunt felis sollicitudin id.
  161.  
  162. [border=0; padding: 0; display: inline; color: var(--accent); font-weight: 700;]5. [/border]Suspendisse aliquam, turpis et cursus pulvinar, arcu justo posuere nunc, nec vestibulum ligula diam at tellus.[/border][comment]
  163.  
  164. <------------------------------ end of content 02 ------------------------------
  165.  
  166. [/comment][/border][/border][comment]
  167.  
  168. // asterisk //
  169.  
  170. [/comment][border=0; padding: 0; font-family: var(--headerfont); font-size: 14px; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute; top: 59px; z-index: 2;][color=transparent]Rules[/color] *[/border][/tab]
  171.  
  172.  
  173.  
  174.  
  175.  
  176.  
  177. [tab=030303030303030303030303030303030303030303030303030303030303030303][border=0; padding: 0; width: 100%; height: calc(70vh - 150px); max-height: 450px; min-height: 250px; position: absolute; left: 0; right: 0; top: 125px; z-index: 2; overflow: hidden;][border=0; padding: 0; padding-right: 30px; width: 100%; height: calc(70vh - 150px); max-height: 450px; min-height: 250px; overflow-y: scroll;][comment]
  178.  
  179. ------------------------------ start of header 01 ------------------------------>
  180.  
  181. [/comment][border=0; display: flex; padding: 0; width: calc(100% + 20px); background: var(--black); position: sticky; top: 0;][border=0; padding: 0; flex: 1; background: var(--accent); clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 100%, 0% 100%);][/border][border=0; box-sizing: border-box; padding: 7px 15px 3px; flex: 4; font-family: var(--headerfont); font-size: .8em; line-height: 100%; color: var(--offwhite); text-transform: uppercase;][comment]
  182.  
  183. // header title //
  184.  
  185. [/comment]Links[/border][border=0; padding: 0; flex: 4; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 25px 100%);][/border][/border][comment]
  186.  
  187. <------------------------------ end of header 01 ------------------------------
  188.  
  189. [/comment][comment]
  190.  
  191. ------------------------------ start of content 01 ------------------------------>
  192.  
  193. [/comment][border=0; box-sizing: border-box; padding: 35px 5px 0 25px; font-family: var(--textfont); font-size: calc(.9em + 1px); line-height: 140%; color: var(--offwhite); text-align: justify;][border=0; padding: 0; display: inline; color: var(--accent); font-weight: 700;]x. [/border][URL="google.com"]In Character[/URL]
  194.  
  195. [border=0; padding: 0; display: inline; color: var(--accent); font-weight: 700;]x. [/border][URL="google.com"]Character Sheets[/URL]
  196.  
  197. [border=0; padding: 0; display: inline; color: var(--accent); font-weight: 700;]x. [/border][URL="google.com"]OOC[/URL][/border][comment]
  198.  
  199. <------------------------------ end of content 01 ------------------------------
  200.  
  201. [/comment][/border][/border][comment]
  202.  
  203. // asterisk //
  204.  
  205. [/comment][border=0; padding: 0; font-family: var(--headerfont); font-size: 14px; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute; top: 88px; z-index: 2;][color=transparent]Links[/color] *[/border][/tab]
  206.  
  207.  
  208.  
  209.  
  210.  
  211.  
  212. [/tabs][comment]
  213.  
  214. ------------------------------ start of tab covers ------------------------------>
  215.  
  216. [/comment][border=0; padding: 0; width: 100%; height: 70vh; max-height: 600px; min-height: 400px; background: var(--bgcolor); pointer-events: none; position: absolute; top: 0;][/border]
  217.  
  218. [border=0; margin-top: 0; margin-left: 20px; padding: 0; position: absolute; top: 25px; left: 0; right: 0; pointer-events: none;][comment]
  219.  
  220. ---------------------------------------- start of cover section 01 ---------------------------------------->
  221.  
  222. [/comment][border=0; display: flex; padding: 0;][border=0; display: inline-block; padding: 5px 0; font-family: var(--headerfont); font-size: 14px; line-height: 100%; color: var(--offwhite); font-weight: 700; text-transform: uppercase;][comment]
  223.  
  224. // tab cover 01 //
  225.  
  226. [/comment]Story[/border][border=0; padding: 0; flex: 1; width: 100%; pointer-events: auto;][/border][/border][comment]
  227.  
  228. <---------------------------------------- end of cover section 01 ----------------------------------------
  229.  
  230. [/comment][comment]
  231.  
  232. ---------------------------------------- start of cover section 02 ---------------------------------------->
  233.  
  234. [/comment][border=0; display: flex; margin-top: 5px; padding: 0;][border=0; display: inline-block; padding: 5px 0; font-family: var(--headerfont); font-size: 14px; line-height: 100%; color: var(--offwhite); font-weight: 700; text-transform: uppercase;][comment]
  235.  
  236. // tab cover 02 //
  237.  
  238. [/comment]Rules[/border][border=0; padding: 0; flex: 1; width: 100%; pointer-events: auto;][/border][/border][comment]
  239.  
  240. <---------------------------------------- end of cover section 02 ----------------------------------------
  241.  
  242. [/comment][comment]
  243.  
  244. ---------------------------------------- start of cover section 03 ---------------------------------------->
  245.  
  246. [/comment][border=0; display: flex; margin-top: 5px; padding: 0;][border=0; display: inline-block; padding: 5px 0; font-family: var(--headerfont); font-size: 14px; line-height: 100%; color: var(--offwhite); font-weight: 700; text-transform: uppercase;][comment]
  247.  
  248. // tab cover 03 //
  249.  
  250. [/comment]Links[/border][border=0; padding: 0; flex: 1; width: 100%; pointer-events: auto;][/border][/border][comment]
  251.  
  252. <---------------------------------------- end of cover section 03 ----------------------------------------
  253.  
  254. [/comment][/border][comment]
  255.  
  256. <------------------------------ end of tab covers ------------------------------
  257.  
  258. [/comment][/border][comment]
  259.  
  260. <-------------------- end of tabs --------------------
  261.  
  262. [/comment][/border][comment]
  263.  
  264. <---------- end of left side ----------
  265.  
  266. [/comment][comment]
  267.  
  268. ---------- start of right side ---------->
  269.  
  270. [/comment][border=0; padding: 0; flex: 3; width: 100%; max-width: 450px; min-width: 150px; height: 70vh; max-height: 600px; min-height: 400px; background: linear-gradient(var(--leftimgtint), var(--leftimgtint)), var(--leftimg); position: relative; overflow: hidden;][comment]
  271.  
  272. -------------------- start of header -------------------->
  273.  
  274. [/comment][border=0; padding: 0; writing-mode: vertical-rl; transform: rotate(-180deg); position: absolute; top: 50px; bottom: 20px; right: 15px;][comment]
  275.  
  276. ------------------------------ start of title ------------------------------>
  277.  
  278. [/comment][border=0; margin-top: -2px; margin-left: 5px; padding: 0; color: var(--accent); font-size: 1.7em; line-height: 100%; font-family: var(--mainheaderfont); font-weight: 700; text-transform: uppercase;]Beyond The Witch's Corridor[/border][comment]
  279.  
  280. <------------------------------ end of title ------------------------------
  281.  
  282. [/comment][comment]
  283.  
  284. ------------------------------ start of blurb ------------------------------>
  285.  
  286. [/comment][border=0; padding: 0; color: var(--offwhite); font-size: .8em; line-height: 115%; font-family: var(--blurbfont); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam egestas ante in commodo. Sed molestie dui vitae euismod tempus. Nunc euismod diam dui, eget finibus sapien consectetur ut.[/border][comment]
  287.  
  288. <------------------------------ end of blurb ------------------------------
  289.  
  290. [/comment][/border][comment]
  291.  
  292. <-------------------- end of header --------------------
  293.  
  294. [/comment][/border][comment]
  295.  
  296. <---------- end of right side ----------
  297.  
  298. [/comment][/border][comment]
  299.  
  300. // visible credit -- please don't remove!!! //
  301.  
  302. [/comment][border=0px; margin: 5px auto 75px; padding: 0; width: 100%; max-width: 1000px; font-size: .6em; text-align: center; text-transform: uppercase; opacity: .5;]code by Nano[comment][USER=20950]@Nano[/USER][/comment][/border]
RAW Paste Data