API tools faq
paste
Advertisement
fluticasone

umbrella 1.2

fluticasone
Jun 26th, 2023 (edited)
72
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 52.99 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2. [div=display: none;]
  3. [font=Inconsolata]font call[/font]
  4. [font=VT323]font call[/font]
  5. [font=Nanum Gothic]font call[/font]
  6. [font=Cherish]font call[/font]
  7. [/div]
  8. [div=
  9. --bgcolor: #1C1C1C;
  10. --mainTextC: #E8E8E8;
  11. --accent: #FBAF00;
  12. --circle: #D62828;
  13. --titleTextC: #3891A6;
  14. --titleTextShad: #FCFCFC;
  15. --imgShad: #003049;
  16. --mainIMG: url(https://placehold.co/300x400?text=3:4);
  17. --fontMono: 'Inconsolata', monospace;
  18. --fontDisplay1: 'VT323', monospace;
  19. --fontDisplay2: 'Cherish', serif;
  20. --fontMain: 'Nanum Gothic', sans-serif;
  21. display: block;
  22. position: relative;
  23. overflow: hidden;
  24. width: calc(100% - 2rem);
  25. margin: 1rem auto;
  26. height: clamp(400px, 80vh, 950px);
  27. background: var(--bgcolor);]
  28. [div=
  29. position: absolute;
  30. right: -27%;
  31. bottom: -19%;
  32. width: 60%;
  33. border-radius: 50%;
  34. background: var(--circle)]
  35. [div=width: 100%; padding-top: 100%;]circle[/div]
  36. [/div]
  37. [div=
  38. position: absolute;
  39. left: 10%;
  40. top: 0px;
  41. font-size: 0px;
  42. width: clamp(200px, 33%, 500px);
  43. padding-top: 50%;
  44. box-sizing: border-box;
  45. box-shadow: 2rem 2rem var(--imgShad);
  46. background: var(--imgShad) var(--mainIMG) no-repeat center center/cover;]
  47. img
  48. [/div]
  49. [div=
  50. position: absolute;
  51. background: radial-gradient(circle, var(--accent) 16%, rgba(0,0,0,0) 17%, rgba(0,0,0,0) 100%) repeat top left/32px 32px;
  52. top: 0px;
  53. left: 5%;
  54. width: clamp(100px, 15%, 300px);
  55. height: 100%;
  56. font-size: 0px;]
  57. dots
  58. [/div]
  59. [div=
  60. position: absolute;
  61. width: 5rem;
  62. height: 100%;
  63. bottom: 0px;
  64. right: 4%;
  65. font-size: 0px;
  66. box-sizing: border-box;
  67. display: column nowrap;
  68. align-items: center;
  69. pointer-events: none;]
  70. [div=
  71. flex: 3 auto;
  72. text-align: center;
  73. display: row nowrap;
  74. align-items: center;
  75. align-content: center;
  76. justify-content: center;
  77. font-family: var(--fontDisplay1);
  78. color: var(--titleTextShad);
  79. font-size: 5rem;
  80. width: 5rem;
  81. padding: 8rem 0px 1rem 0px;]
  82. 01
  83. [/div]
  84. [div=
  85. flex: 3;
  86. height: 100%;
  87. background: var(--accent);
  88. width: 3rem;
  89. margin: 0px 1rem;]
  90. border
  91. [/div]
  92. [/div]
  93. [div=
  94. pointer-events: none;
  95. position: absolute;
  96. transform: translate(-50%,-50%);
  97. top: 50%;
  98. left: 50%;
  99. font-family: var(--fontDisplay1);
  100. text-transform: uppercase;
  101. color: var(--titleTextC);
  102. text-shadow: 5px 5px var(--titleTextShad);
  103. font-size: clamp(14px,10vh,300px);]
  104. titletext
  105. [/div]
  106. [div=
  107. pointer-events: none;
  108. position: absolute;
  109. transform: translate(-50%,-50%);
  110. top: 50%;
  111. left: 50%;
  112. font-family: var(--fontDisplay2);
  113. text-stroke: 1px var(--accent);
  114. text-fill-color: rgba(0,0,0,0);
  115. -webkit-text-stroke: 1px var(--accent);
  116. -webkit-text-fill-color: rgba(0,0,0,0);
  117. text-transform: lowercase;
  118. letter-spacing: -.03em;
  119. color: rgba(0,0,0,0);
  120. font-size: clamp(14px,18vh,400px);]
  121. titletext
  122. [/div]
  123. [div=
  124. position: absolute;
  125. top: 50%;
  126. left: 50%;
  127. transform: translate(-50%,-50%);
  128. width: clamp(275px, 70%, 600px);
  129. box-sizing: border-box;
  130. padding-left: 20%;
  131. padding-bottom: 20%;
  132. font-family: var(--fontMono);
  133. color: var(--bgcolor);
  134. filter: invert(1);
  135. pointer-events: none;
  136. text-shadow: 1px 1px var(--titleTextShad);]
  137. basic info here[br][/br]
  138. use breaks using [plain][br][/br][/plain][br][/br]
  139. for more info, click the [fa]fas fa-comment-alt-exclamation[/fa]
  140. [/div]
  141. [div=
  142. position: absolute;
  143. height: 100%;
  144. width: clamp(300px,70%,70%);
  145. transform: translateX(-50%);
  146. top: 0px;
  147. left: 50%;
  148. overflow: hidden;]
  149. [div=
  150. display: block;
  151. width: calc(100% + 50px);
  152. height: 100%;
  153. padding-right: 50px;
  154. padding-left: 10%;
  155. box-sizing: border-box;
  156. overflow-x: hidden;
  157. overflow-y: scroll;]
  158. [div=height: 75%; width: 1px; display: block;] [/div]
  159. [div=--bgIMG: url(https://placehold.co/700x400?text=7:4);
  160. display: flex;
  161. flex-flow: row wrap;
  162. align-items: flex-start;
  163. gap: 10px;
  164. position: relative;
  165. box-sizing: border-box;
  166. margin: 2rem 0px;]
  167. [div=
  168. flex: 1 100px;
  169. display: flex;
  170. box-sizing: border-box;
  171. padding: 3rem 0px 0px 0px;
  172. flex-flow: row wrap-reverse;
  173. justify-content: flex-end;
  174. align-content: flex-start;
  175. align-content: flex-start;
  176. gap: 5px;
  177. font-size: .8rem;
  178. line-height: .8rem;
  179. font-family: var(--fontMono);
  180. color: var(--mainTextC);
  181. text-transform: uppercase;]
  182. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag one[/div]
  183. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag two[/div]
  184. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag three[/div]
  185. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag four[/div]
  186. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]keep going[/div]
  187. [/div]
  188. [div=
  189. flex: 4 200px;
  190. background: rgba(0,0,0,.6);
  191. box-sizing: border-box;
  192. padding: 10px 10px 0px 10px;
  193. position: relative;]
  194. [div=
  195. width: 100%;
  196. padding-top: clamp(250px,60%,60%);
  197. position: relative;
  198. background-color: var(--accent);
  199. background-image: var(--bgIMG),
  200. linear-gradient(0deg, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%);
  201. background-repeat: repeat;
  202. background-position: center center, top left;
  203. background-size: cover, 100% 2px;
  204. background-blend-mode: multiply, soft-light;]
  205. [div=
  206. position: absolute;
  207. top: 10px;
  208. left: 10px;
  209. width: calc(100% - 20px);
  210. height: calc(100% - 10px);
  211. display: flex;
  212. flex-flow: row nowrap;
  213. align-items: flex-end;
  214. overflow: hidden;
  215. visibility: hidden;]
  216. [div=
  217. transform: rotateX(180deg);
  218. width: 100%;
  219. font-size: 0px;]
  220. [accordion=100%]
  221. {slide=[div=height: 100%; visibility: visible; width: 100%; font-size: 0px; height: 2rem;]empty[/div]}
  222. [div=
  223. position: relative;
  224. transform: rotateX(180deg);
  225. font-size: initial;
  226. width: 100%;
  227. padding-top: clamp(150px, 42%, 42%);]
  228. [div=
  229. position: absolute;
  230. visibility: visible;
  231. width: 100%;
  232. height: 100%;
  233. top: 0px;
  234. left: 0px;
  235. overflow: hidden;
  236. padding: 1.5rem;
  237. box-sizing: border-box;
  238. overflow: hidden;
  239. color: var(--mainTextC);
  240. font-family: var(--fontMain);
  241. background: rgba(0,0,0,.6);
  242. backdrop-filter: contrast(.8) brightness(.8);
  243. line-height: 0px;
  244. white-space: nowrap;
  245. font-size: 0px;]
  246. [div=
  247. width: calc(100% + 50px);
  248. padding-right: 50px;
  249. box-sizing: border-box;
  250. height: 100%;
  251. overflow-x: hidden;
  252. overflow-y: scroll;
  253. line-height: 0px;
  254. white-space: nowrap;
  255. font-size: 0px;]
  256. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lectus et erat finibus ultricies. Quisque ornare fringilla leo ac maximus. Duis feugiat, orci sit amet mattis consequat, ipsum enim fringilla metus, ac sodales felis felis vel sapien. Sed ut mollis risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus non lorem et leo placerat volutpat. Vestibulum sed erat mollis, posuere sem et, consectetur velit. Nullam nec purus tortor. Integer in pellentesque metus, interdum ornare mauris. Aliquam erat volutpat. Curabitur non consequat lectus. Proin rutrum aliquet aliquet. [/div]
  257. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Sed ac dui id turpis tempor tincidunt maximus id sapien. Phasellus tincidunt, sapien quis ultrices lobortis, arcu tellus aliquet enim, ac lacinia est ligula non justo. Integer interdum mauris eu dui suscipit egestas. Mauris euismod placerat leo, sit amet mattis erat efficitur ut. Nulla laoreet est arcu, eget tempus metus commodo mollis. Nam imperdiet hendrerit erat. Nulla sed mi non erat blandit luctus eu a turpis. Donec nec tellus in sem cursus tincidunt. Aliquam quis leo in urna bibendum aliquam sit amet in erat.[/div]
  258. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue suscipit luctus. Mauris id nibh lectus. Quisque tempus elit orci, sit amet iaculis erat iaculis eget. Mauris et semper neque. Etiam id vestibulum quam. Cras urna nibh, posuere id nisi sed, iaculis tincidunt neque. Donec volutpat est nec orci mattis suscipit.[/div]
  259. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Ut convallis massa fringilla dui tristique tempus. Fusce ut dictum dui. Donec urna augue, iaculis a neque eget, dignissim laoreet libero. Vivamus tempor enim dolor, mattis porttitor neque consectetur in. Aliquam tincidunt tincidunt suscipit. Vestibulum rhoncus sed felis vel faucibus. Cras at eleifend magna. Cras at convallis tortor. Fusce ornare interdum nisi vulputate interdum. Nullam pharetra lobortis libero, ut blandit augue porttitor id.[/div]
  260. [/div]
  261. [/div]
  262. [/div]
  263. {/slide}
  264. [/accordion]
  265. [/div]
  266. [/div]
  267. [/div]
  268. [div=
  269. pointer-events: none;
  270. position: absolute;
  271. font-size: 0px;
  272. overflow: hidden;
  273. width: 100%;
  274. left: 0px;
  275. bottom: 0px;
  276. height: 1.5rem;
  277. background: var(--bgcolor);]
  278. monster hunter
  279. [/div]
  280. [div=
  281. pointer-events: none;
  282. position: absolute;
  283. width: auto;
  284. left: 0px;
  285. bottom: 0px;
  286. box-sizing: border-box;
  287. clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0% 100%);
  288. background: var(--bgcolor);
  289. font-family: var(--fontDisplay1);
  290. color: var(--titleTextShad);
  291. text-transform: uppercase;
  292. font-size: 2.5rem;
  293. line-height: 2.5rem;
  294. padding: 8px calc(1.5rem + 5px) 8px 1.5rem;]
  295. tab title here
  296. [/div]
  297. [div=
  298. pointer-events: none;
  299. position: absolute;
  300. gap: .5rem;
  301. bottom: 1.85rem;
  302. right: 0px;
  303. box-sizing: border-box;
  304. display: flex;
  305. flex-flow: row nowrap;
  306. justify-content: flex-end;
  307. justify-items: flex-end;
  308. align-items: stretch;
  309. width: 100%;
  310. font-size: 0px;
  311. padding: 0px 20px; ]
  312. [div=box-sizing: border-box; flex: 0 1.5rem; height: 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%; background: var(--bgcolor); overflow: hidden;]filled[/div]
  313. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%; background: var(--bgcolor); overflow: hidden;]filled[/div]
  314. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%; background: var(--bgcolor); overflow: hidden;]filled[/div]
  315. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%;]empty[/div]
  316. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%;]empty[/div]
  317. [/div]
  318. [/div]
  319. [/div]
  320. [comment]start of copy paste[/comment][div=--bgIMG: url(https://placehold.co/700x400?text=7:4);
  321. display: flex;
  322. flex-flow: row wrap;
  323. align-items: flex-start;
  324. gap: 10px;
  325. position: relative;
  326. box-sizing: border-box;
  327. margin: 2rem 0px;]
  328. [div=
  329. flex: 1 100px;
  330. display: flex;
  331. box-sizing: border-box;
  332. padding: 3rem 0px 0px 0px;
  333. flex-flow: row wrap-reverse;
  334. justify-content: flex-end;
  335. align-content: flex-start;
  336. align-content: flex-start;
  337. gap: 5px;
  338. font-size: .8rem;
  339. line-height: .8rem;
  340. font-family: var(--fontMono);
  341. color: var(--mainTextC);
  342. text-transform: uppercase;]
  343. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag one[/div]
  344. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag two[/div]
  345. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag three[/div]
  346. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag four[/div]
  347. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]keep going[/div]
  348. [/div]
  349. [div=
  350. flex: 4 200px;
  351. background: rgba(0,0,0,.6);
  352. box-sizing: border-box;
  353. padding: 10px 10px 0px 10px;
  354. position: relative;]
  355. [div=
  356. width: 100%;
  357. padding-top: clamp(250px,60%,60%);
  358. position: relative;
  359. background-color: var(--accent);
  360. background-image: var(--bgIMG),
  361. linear-gradient(0deg, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%);
  362. background-repeat: repeat;
  363. background-position: center center, top left;
  364. background-size: cover, 100% 2px;
  365. background-blend-mode: multiply, soft-light;]
  366. [div=
  367. position: absolute;
  368. top: 10px;
  369. left: 10px;
  370. width: calc(100% - 20px);
  371. height: calc(100% - 10px);
  372. display: flex;
  373. flex-flow: row nowrap;
  374. align-items: flex-end;
  375. overflow: hidden;
  376. visibility: hidden;]
  377. [div=
  378. transform: rotateX(180deg);
  379. width: 100%;
  380. font-size: 0px;]
  381. [accordion=100%]
  382. {slide=[div=height: 100%; visibility: visible; width: 100%; font-size: 0px; height: 2rem;]empty[/div]}
  383. [div=
  384. position: relative;
  385. transform: rotateX(180deg);
  386. font-size: initial;
  387. width: 100%;
  388. padding-top: clamp(150px, 42%, 42%);]
  389. [div=
  390. position: absolute;
  391. visibility: visible;
  392. width: 100%;
  393. height: 100%;
  394. top: 0px;
  395. left: 0px;
  396. overflow: hidden;
  397. padding: 1.5rem;
  398. box-sizing: border-box;
  399. overflow: hidden;
  400. color: var(--mainTextC);
  401. font-family: var(--fontMain);
  402. background: rgba(0,0,0,.6);
  403. backdrop-filter: contrast(.8) brightness(.8);
  404. line-height: 0px;
  405. white-space: nowrap;
  406. font-size: 0px;]
  407. [div=
  408. width: calc(100% + 50px);
  409. padding-right: 50px;
  410. box-sizing: border-box;
  411. height: 100%;
  412. overflow-x: hidden;
  413. overflow-y: scroll;
  414. line-height: 0px;
  415. white-space: nowrap;
  416. font-size: 0px;]
  417. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lectus et erat finibus ultricies. Quisque ornare fringilla leo ac maximus. Duis feugiat, orci sit amet mattis consequat, ipsum enim fringilla metus, ac sodales felis felis vel sapien. Sed ut mollis risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus non lorem et leo placerat volutpat. Vestibulum sed erat mollis, posuere sem et, consectetur velit. Nullam nec purus tortor. Integer in pellentesque metus, interdum ornare mauris. Aliquam erat volutpat. Curabitur non consequat lectus. Proin rutrum aliquet aliquet. [/div]
  418. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Sed ac dui id turpis tempor tincidunt maximus id sapien. Phasellus tincidunt, sapien quis ultrices lobortis, arcu tellus aliquet enim, ac lacinia est ligula non justo. Integer interdum mauris eu dui suscipit egestas. Mauris euismod placerat leo, sit amet mattis erat efficitur ut. Nulla laoreet est arcu, eget tempus metus commodo mollis. Nam imperdiet hendrerit erat. Nulla sed mi non erat blandit luctus eu a turpis. Donec nec tellus in sem cursus tincidunt. Aliquam quis leo in urna bibendum aliquam sit amet in erat.[/div]
  419. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue suscipit luctus. Mauris id nibh lectus. Quisque tempus elit orci, sit amet iaculis erat iaculis eget. Mauris et semper neque. Etiam id vestibulum quam. Cras urna nibh, posuere id nisi sed, iaculis tincidunt neque. Donec volutpat est nec orci mattis suscipit.[/div]
  420. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Ut convallis massa fringilla dui tristique tempus. Fusce ut dictum dui. Donec urna augue, iaculis a neque eget, dignissim laoreet libero. Vivamus tempor enim dolor, mattis porttitor neque consectetur in. Aliquam tincidunt tincidunt suscipit. Vestibulum rhoncus sed felis vel faucibus. Cras at eleifend magna. Cras at convallis tortor. Fusce ornare interdum nisi vulputate interdum. Nullam pharetra lobortis libero, ut blandit augue porttitor id.[/div]
  421. [/div]
  422. [/div]
  423. [/div]
  424. {/slide}
  425. [/accordion]
  426. [/div]
  427. [/div]
  428. [/div]
  429. [div=
  430. pointer-events: none;
  431. position: absolute;
  432. font-size: 0px;
  433. overflow: hidden;
  434. width: 100%;
  435. left: 0px;
  436. bottom: 0px;
  437. height: 1.5rem;
  438. background: var(--bgcolor);]
  439. monster hunter
  440. [/div]
  441. [div=
  442. pointer-events: none;
  443. position: absolute;
  444. width: auto;
  445. left: 0px;
  446. bottom: 0px;
  447. box-sizing: border-box;
  448. clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0% 100%);
  449. background: var(--bgcolor);
  450. font-family: var(--fontDisplay1);
  451. color: var(--titleTextShad);
  452. text-transform: uppercase;
  453. font-size: 2.5rem;
  454. line-height: 2.5rem;
  455. padding: 8px calc(1.5rem + 5px) 8px 1.5rem;]
  456. tab title here
  457. [/div]
  458. [div=
  459. pointer-events: none;
  460. position: absolute;
  461. gap: .5rem;
  462. bottom: 1.85rem;
  463. right: 0px;
  464. box-sizing: border-box;
  465. display: flex;
  466. flex-flow: row nowrap;
  467. justify-content: flex-end;
  468. justify-items: flex-end;
  469. align-items: stretch;
  470. width: 100%;
  471. font-size: 0px;
  472. padding: 0px 20px; ]
  473. [div=box-sizing: border-box; flex: 0 1.5rem; height: 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%; background: var(--bgcolor); overflow: hidden;]filled[/div]
  474. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%; background: var(--bgcolor); overflow: hidden;]filled[/div]
  475. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%; background: var(--bgcolor); overflow: hidden;]filled[/div]
  476. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%;]empty[/div]
  477. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%;]empty[/div]
  478. [/div]
  479. [/div]
  480. [/div][comment]end of copypaste[/comment]
  481. [div=--bgIMG: url(https://placehold.co/700x400?text=7:4);
  482. display: flex;
  483. flex-flow: row wrap;
  484. align-items: flex-start;
  485. gap: 10px;
  486. position: relative;
  487. box-sizing: border-box;
  488. margin: 2rem 0px;]
  489. [div=
  490. flex: 1 100px;
  491. display: flex;
  492. box-sizing: border-box;
  493. padding: 3rem 0px 0px 0px;
  494. flex-flow: row wrap-reverse;
  495. justify-content: flex-end;
  496. align-content: flex-start;
  497. align-content: flex-start;
  498. gap: 5px;
  499. font-size: .8rem;
  500. line-height: .8rem;
  501. font-family: var(--fontMono);
  502. color: var(--mainTextC);
  503. text-transform: uppercase;]
  504. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag one[/div]
  505. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag two[/div]
  506. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag three[/div]
  507. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag four[/div]
  508. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]keep going[/div]
  509. [/div]
  510. [div=
  511. flex: 4 200px;
  512. background: rgba(0,0,0,.6);
  513. box-sizing: border-box;
  514. padding: 10px 10px 0px 10px;
  515. position: relative;]
  516. [div=
  517. width: 100%;
  518. padding-top: clamp(250px,60%,60%);
  519. position: relative;
  520. background-color: var(--accent);
  521. background-image: var(--bgIMG),
  522. linear-gradient(0deg, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%);
  523. background-repeat: repeat;
  524. background-position: center center, top left;
  525. background-size: cover, 100% 2px;
  526. background-blend-mode: multiply, soft-light;]
  527. [div=
  528. position: absolute;
  529. top: 10px;
  530. left: 10px;
  531. width: calc(100% - 20px);
  532. height: calc(100% - 10px);
  533. display: flex;
  534. flex-flow: row nowrap;
  535. align-items: flex-end;
  536. overflow: hidden;
  537. visibility: hidden;]
  538. [div=
  539. transform: rotateX(180deg);
  540. width: 100%;
  541. font-size: 0px;]
  542. [accordion=100%]
  543. {slide=[div=height: 100%; visibility: visible; width: 100%; font-size: 0px; height: 2rem;]empty[/div]}
  544. [div=
  545. position: relative;
  546. transform: rotateX(180deg);
  547. font-size: initial;
  548. width: 100%;
  549. padding-top: clamp(150px, 42%, 42%);]
  550. [div=
  551. position: absolute;
  552. visibility: visible;
  553. width: 100%;
  554. height: 100%;
  555. top: 0px;
  556. left: 0px;
  557. overflow: hidden;
  558. padding: 1.5rem;
  559. box-sizing: border-box;
  560. overflow: hidden;
  561. color: var(--mainTextC);
  562. font-family: var(--fontMain);
  563. background: rgba(0,0,0,.6);
  564. backdrop-filter: contrast(.8) brightness(.8);
  565. line-height: 0px;
  566. white-space: nowrap;
  567. font-size: 0px;]
  568. [div=
  569. width: calc(100% + 50px);
  570. padding-right: 50px;
  571. box-sizing: border-box;
  572. height: 100%;
  573. overflow-x: hidden;
  574. overflow-y: scroll;
  575. line-height: 0px;
  576. white-space: nowrap;
  577. font-size: 0px;]
  578. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lectus et erat finibus ultricies. Quisque ornare fringilla leo ac maximus. Duis feugiat, orci sit amet mattis consequat, ipsum enim fringilla metus, ac sodales felis felis vel sapien. Sed ut mollis risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus non lorem et leo placerat volutpat. Vestibulum sed erat mollis, posuere sem et, consectetur velit. Nullam nec purus tortor. Integer in pellentesque metus, interdum ornare mauris. Aliquam erat volutpat. Curabitur non consequat lectus. Proin rutrum aliquet aliquet. [/div]
  579. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Sed ac dui id turpis tempor tincidunt maximus id sapien. Phasellus tincidunt, sapien quis ultrices lobortis, arcu tellus aliquet enim, ac lacinia est ligula non justo. Integer interdum mauris eu dui suscipit egestas. Mauris euismod placerat leo, sit amet mattis erat efficitur ut. Nulla laoreet est arcu, eget tempus metus commodo mollis. Nam imperdiet hendrerit erat. Nulla sed mi non erat blandit luctus eu a turpis. Donec nec tellus in sem cursus tincidunt. Aliquam quis leo in urna bibendum aliquam sit amet in erat.[/div]
  580. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue suscipit luctus. Mauris id nibh lectus. Quisque tempus elit orci, sit amet iaculis erat iaculis eget. Mauris et semper neque. Etiam id vestibulum quam. Cras urna nibh, posuere id nisi sed, iaculis tincidunt neque. Donec volutpat est nec orci mattis suscipit.[/div]
  581. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Ut convallis massa fringilla dui tristique tempus. Fusce ut dictum dui. Donec urna augue, iaculis a neque eget, dignissim laoreet libero. Vivamus tempor enim dolor, mattis porttitor neque consectetur in. Aliquam tincidunt tincidunt suscipit. Vestibulum rhoncus sed felis vel faucibus. Cras at eleifend magna. Cras at convallis tortor. Fusce ornare interdum nisi vulputate interdum. Nullam pharetra lobortis libero, ut blandit augue porttitor id.[/div]
  582. [/div]
  583. [/div]
  584. [/div]
  585. {/slide}
  586. [/accordion]
  587. [/div]
  588. [/div]
  589. [/div]
  590. [div=
  591. pointer-events: none;
  592. position: absolute;
  593. font-size: 0px;
  594. overflow: hidden;
  595. width: 100%;
  596. left: 0px;
  597. bottom: 0px;
  598. height: 1.5rem;
  599. background: var(--bgcolor);]
  600. monster hunter
  601. [/div]
  602. [div=
  603. pointer-events: none;
  604. position: absolute;
  605. width: auto;
  606. left: 0px;
  607. bottom: 0px;
  608. box-sizing: border-box;
  609. clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0% 100%);
  610. background: var(--bgcolor);
  611. font-family: var(--fontDisplay1);
  612. color: var(--titleTextShad);
  613. text-transform: uppercase;
  614. font-size: 2.5rem;
  615. line-height: 2.5rem;
  616. padding: 8px calc(1.5rem + 5px) 8px 1.5rem;]
  617. tab title here
  618. [/div]
  619. [div=
  620. pointer-events: none;
  621. position: absolute;
  622. gap: .5rem;
  623. bottom: 1.85rem;
  624. right: 0px;
  625. box-sizing: border-box;
  626. display: flex;
  627. flex-flow: row nowrap;
  628. justify-content: flex-end;
  629. justify-items: flex-end;
  630. align-items: stretch;
  631. width: 100%;
  632. font-size: 0px;
  633. padding: 0px 20px; ]
  634. [div=box-sizing: border-box; flex: 0 1.5rem; height: 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%; background: var(--bgcolor); overflow: hidden;]filled[/div]
  635. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%; background: var(--bgcolor); overflow: hidden;]filled[/div]
  636. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%; background: var(--bgcolor); overflow: hidden;]filled[/div]
  637. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%;]empty[/div]
  638. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%;]empty[/div]
  639. [/div]
  640. [/div]
  641. [/div]
  642. [div=--bgIMG: url(https://placehold.co/700x400?text=7:4);
  643. display: flex;
  644. flex-flow: row wrap;
  645. align-items: flex-start;
  646. gap: 10px;
  647. position: relative;
  648. box-sizing: border-box;
  649. margin: 2rem 0px;]
  650. [div=
  651. flex: 1 100px;
  652. display: flex;
  653. box-sizing: border-box;
  654. padding: 3rem 0px 0px 0px;
  655. flex-flow: row wrap-reverse;
  656. justify-content: flex-end;
  657. align-content: flex-start;
  658. align-content: flex-start;
  659. gap: 5px;
  660. font-size: .8rem;
  661. line-height: .8rem;
  662. font-family: var(--fontMono);
  663. color: var(--mainTextC);
  664. text-transform: uppercase;]
  665. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag one[/div]
  666. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag two[/div]
  667. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag three[/div]
  668. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag four[/div]
  669. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]keep going[/div]
  670. [/div]
  671. [div=
  672. flex: 4 200px;
  673. background: rgba(0,0,0,.6);
  674. box-sizing: border-box;
  675. padding: 10px 10px 0px 10px;
  676. position: relative;]
  677. [div=
  678. width: 100%;
  679. padding-top: clamp(250px,60%,60%);
  680. position: relative;
  681. background-color: var(--accent);
  682. background-image: var(--bgIMG),
  683. linear-gradient(0deg, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%);
  684. background-repeat: repeat;
  685. background-position: center center, top left;
  686. background-size: cover, 100% 2px;
  687. background-blend-mode: multiply, soft-light;]
  688. [div=
  689. position: absolute;
  690. top: 10px;
  691. left: 10px;
  692. width: calc(100% - 20px);
  693. height: calc(100% - 10px);
  694. display: flex;
  695. flex-flow: row nowrap;
  696. align-items: flex-end;
  697. overflow: hidden;
  698. visibility: hidden;]
  699. [div=
  700. transform: rotateX(180deg);
  701. width: 100%;
  702. font-size: 0px;]
  703. [accordion=100%]
  704. {slide=[div=height: 100%; visibility: visible; width: 100%; font-size: 0px; height: 2rem;]empty[/div]}
  705. [div=
  706. position: relative;
  707. transform: rotateX(180deg);
  708. font-size: initial;
  709. width: 100%;
  710. padding-top: clamp(150px, 42%, 42%);]
  711. [div=
  712. position: absolute;
  713. visibility: visible;
  714. width: 100%;
  715. height: 100%;
  716. top: 0px;
  717. left: 0px;
  718. overflow: hidden;
  719. padding: 1.5rem;
  720. box-sizing: border-box;
  721. overflow: hidden;
  722. color: var(--mainTextC);
  723. font-family: var(--fontMain);
  724. background: rgba(0,0,0,.6);
  725. backdrop-filter: contrast(.8) brightness(.8);
  726. line-height: 0px;
  727. white-space: nowrap;
  728. font-size: 0px;]
  729. [div=
  730. width: calc(100% + 50px);
  731. padding-right: 50px;
  732. box-sizing: border-box;
  733. height: 100%;
  734. overflow-x: hidden;
  735. overflow-y: scroll;
  736. line-height: 0px;
  737. white-space: nowrap;
  738. font-size: 0px;]
  739. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lectus et erat finibus ultricies. Quisque ornare fringilla leo ac maximus. Duis feugiat, orci sit amet mattis consequat, ipsum enim fringilla metus, ac sodales felis felis vel sapien. Sed ut mollis risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus non lorem et leo placerat volutpat. Vestibulum sed erat mollis, posuere sem et, consectetur velit. Nullam nec purus tortor. Integer in pellentesque metus, interdum ornare mauris. Aliquam erat volutpat. Curabitur non consequat lectus. Proin rutrum aliquet aliquet. [/div]
  740. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Sed ac dui id turpis tempor tincidunt maximus id sapien. Phasellus tincidunt, sapien quis ultrices lobortis, arcu tellus aliquet enim, ac lacinia est ligula non justo. Integer interdum mauris eu dui suscipit egestas. Mauris euismod placerat leo, sit amet mattis erat efficitur ut. Nulla laoreet est arcu, eget tempus metus commodo mollis. Nam imperdiet hendrerit erat. Nulla sed mi non erat blandit luctus eu a turpis. Donec nec tellus in sem cursus tincidunt. Aliquam quis leo in urna bibendum aliquam sit amet in erat.[/div]
  741. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue suscipit luctus. Mauris id nibh lectus. Quisque tempus elit orci, sit amet iaculis erat iaculis eget. Mauris et semper neque. Etiam id vestibulum quam. Cras urna nibh, posuere id nisi sed, iaculis tincidunt neque. Donec volutpat est nec orci mattis suscipit.[/div]
  742. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Ut convallis massa fringilla dui tristique tempus. Fusce ut dictum dui. Donec urna augue, iaculis a neque eget, dignissim laoreet libero. Vivamus tempor enim dolor, mattis porttitor neque consectetur in. Aliquam tincidunt tincidunt suscipit. Vestibulum rhoncus sed felis vel faucibus. Cras at eleifend magna. Cras at convallis tortor. Fusce ornare interdum nisi vulputate interdum. Nullam pharetra lobortis libero, ut blandit augue porttitor id.[/div]
  743. [/div]
  744. [/div]
  745. [/div]
  746. {/slide}
  747. [/accordion]
  748. [/div]
  749. [/div]
  750. [/div]
  751. [div=
  752. pointer-events: none;
  753. position: absolute;
  754. font-size: 0px;
  755. overflow: hidden;
  756. width: 100%;
  757. left: 0px;
  758. bottom: 0px;
  759. height: 1.5rem;
  760. background: var(--bgcolor);]
  761. monster hunter
  762. [/div]
  763. [div=
  764. pointer-events: none;
  765. position: absolute;
  766. width: auto;
  767. left: 0px;
  768. bottom: 0px;
  769. box-sizing: border-box;
  770. clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0% 100%);
  771. background: var(--bgcolor);
  772. font-family: var(--fontDisplay1);
  773. color: var(--titleTextShad);
  774. text-transform: uppercase;
  775. font-size: 2.5rem;
  776. line-height: 2.5rem;
  777. padding: 8px calc(1.5rem + 5px) 8px 1.5rem;]
  778. tab title here
  779. [/div]
  780. [div=
  781. pointer-events: none;
  782. position: absolute;
  783. gap: .5rem;
  784. bottom: 1.85rem;
  785. right: 0px;
  786. box-sizing: border-box;
  787. display: flex;
  788. flex-flow: row nowrap;
  789. justify-content: flex-end;
  790. justify-items: flex-end;
  791. align-items: stretch;
  792. width: 100%;
  793. font-size: 0px;
  794. padding: 0px 20px; ]
  795. [div=box-sizing: border-box; flex: 0 1.5rem; height: 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%; background: var(--bgcolor); overflow: hidden;]filled[/div]
  796. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%; background: var(--bgcolor); overflow: hidden;]filled[/div]
  797. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%; background: var(--bgcolor); overflow: hidden;]filled[/div]
  798. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%;]empty[/div]
  799. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%;]empty[/div]
  800. [/div]
  801. [/div]
  802. [/div]
  803. [div=--bgIMG: url(https://placehold.co/700x400?text=7:4);
  804. display: flex;
  805. flex-flow: row wrap;
  806. align-items: flex-start;
  807. gap: 10px;
  808. position: relative;
  809. box-sizing: border-box;
  810. margin: 2rem 0px;]
  811. [div=
  812. flex: 1 100px;
  813. display: flex;
  814. box-sizing: border-box;
  815. padding: 3rem 0px 0px 0px;
  816. flex-flow: row wrap-reverse;
  817. justify-content: flex-end;
  818. align-content: flex-start;
  819. align-content: flex-start;
  820. gap: 5px;
  821. font-size: .8rem;
  822. line-height: .8rem;
  823. font-family: var(--fontMono);
  824. color: var(--mainTextC);
  825. text-transform: uppercase;]
  826. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag one[/div]
  827. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag two[/div]
  828. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag three[/div]
  829. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]tag four[/div]
  830. [div=flex: 0 auto; padding: 2px 5px; background: var(--titleTextC);]keep going[/div]
  831. [/div]
  832. [div=
  833. flex: 4 200px;
  834. background: rgba(0,0,0,.6);
  835. box-sizing: border-box;
  836. padding: 10px 10px 0px 10px;
  837. position: relative;]
  838. [div=
  839. width: 100%;
  840. padding-top: clamp(250px,60%,60%);
  841. position: relative;
  842. background-color: var(--accent);
  843. background-image: var(--bgIMG),
  844. linear-gradient(0deg, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%);
  845. background-repeat: repeat;
  846. background-position: center center, top left;
  847. background-size: cover, 100% 2px;
  848. background-blend-mode: multiply, soft-light;]
  849. [div=
  850. position: absolute;
  851. top: 10px;
  852. left: 10px;
  853. width: calc(100% - 20px);
  854. height: calc(100% - 10px);
  855. display: flex;
  856. flex-flow: row nowrap;
  857. align-items: flex-end;
  858. overflow: hidden;
  859. visibility: hidden;]
  860. [div=
  861. transform: rotateX(180deg);
  862. width: 100%;
  863. font-size: 0px;]
  864. [accordion=100%]
  865. {slide=[div=height: 100%; visibility: visible; width: 100%; font-size: 0px; height: 2rem;]empty[/div]}
  866. [div=
  867. position: relative;
  868. transform: rotateX(180deg);
  869. font-size: initial;
  870. width: 100%;
  871. padding-top: clamp(150px, 42%, 42%);]
  872. [div=
  873. position: absolute;
  874. visibility: visible;
  875. width: 100%;
  876. height: 100%;
  877. top: 0px;
  878. left: 0px;
  879. overflow: hidden;
  880. padding: 1.5rem;
  881. box-sizing: border-box;
  882. overflow: hidden;
  883. color: var(--mainTextC);
  884. font-family: var(--fontMain);
  885. background: rgba(0,0,0,.6);
  886. backdrop-filter: contrast(.8) brightness(.8);
  887. line-height: 0px;
  888. white-space: nowrap;
  889. font-size: 0px;]
  890. [div=
  891. width: calc(100% + 50px);
  892. padding-right: 50px;
  893. box-sizing: border-box;
  894. height: 100%;
  895. overflow-x: hidden;
  896. overflow-y: scroll;
  897. line-height: 0px;
  898. white-space: nowrap;
  899. font-size: 0px;]
  900. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lectus et erat finibus ultricies. Quisque ornare fringilla leo ac maximus. Duis feugiat, orci sit amet mattis consequat, ipsum enim fringilla metus, ac sodales felis felis vel sapien. Sed ut mollis risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus non lorem et leo placerat volutpat. Vestibulum sed erat mollis, posuere sem et, consectetur velit. Nullam nec purus tortor. Integer in pellentesque metus, interdum ornare mauris. Aliquam erat volutpat. Curabitur non consequat lectus. Proin rutrum aliquet aliquet. [/div]
  901. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Sed ac dui id turpis tempor tincidunt maximus id sapien. Phasellus tincidunt, sapien quis ultrices lobortis, arcu tellus aliquet enim, ac lacinia est ligula non justo. Integer interdum mauris eu dui suscipit egestas. Mauris euismod placerat leo, sit amet mattis erat efficitur ut. Nulla laoreet est arcu, eget tempus metus commodo mollis. Nam imperdiet hendrerit erat. Nulla sed mi non erat blandit luctus eu a turpis. Donec nec tellus in sem cursus tincidunt. Aliquam quis leo in urna bibendum aliquam sit amet in erat.[/div]
  902. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue suscipit luctus. Mauris id nibh lectus. Quisque tempus elit orci, sit amet iaculis erat iaculis eget. Mauris et semper neque. Etiam id vestibulum quam. Cras urna nibh, posuere id nisi sed, iaculis tincidunt neque. Donec volutpat est nec orci mattis suscipit.[/div]
  903. [div=display: block; white-space: normal; box-sizing: border-box; font-size: .9rem; line-height: 1.2; margin-bottom: .65rem;]Ut convallis massa fringilla dui tristique tempus. Fusce ut dictum dui. Donec urna augue, iaculis a neque eget, dignissim laoreet libero. Vivamus tempor enim dolor, mattis porttitor neque consectetur in. Aliquam tincidunt tincidunt suscipit. Vestibulum rhoncus sed felis vel faucibus. Cras at eleifend magna. Cras at convallis tortor. Fusce ornare interdum nisi vulputate interdum. Nullam pharetra lobortis libero, ut blandit augue porttitor id.[/div]
  904. [/div]
  905. [/div]
  906. [/div]
  907. {/slide}
  908. [/accordion]
  909. [/div]
  910. [/div]
  911. [/div]
  912. [div=
  913. pointer-events: none;
  914. position: absolute;
  915. font-size: 0px;
  916. overflow: hidden;
  917. width: 100%;
  918. left: 0px;
  919. bottom: 0px;
  920. height: 1.5rem;
  921. background: var(--bgcolor);]
  922. monster hunter
  923. [/div]
  924. [div=
  925. pointer-events: none;
  926. position: absolute;
  927. width: auto;
  928. left: 0px;
  929. bottom: 0px;
  930. box-sizing: border-box;
  931. clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0% 100%);
  932. background: var(--bgcolor);
  933. font-family: var(--fontDisplay1);
  934. color: var(--titleTextShad);
  935. text-transform: uppercase;
  936. font-size: 2.5rem;
  937. line-height: 2.5rem;
  938. padding: 8px calc(1.5rem + 5px) 8px 1.5rem;]
  939. tab title here
  940. [/div]
  941. [div=
  942. pointer-events: none;
  943. position: absolute;
  944. gap: .5rem;
  945. bottom: 1.85rem;
  946. right: 0px;
  947. box-sizing: border-box;
  948. display: flex;
  949. flex-flow: row nowrap;
  950. justify-content: flex-end;
  951. justify-items: flex-end;
  952. align-items: stretch;
  953. width: 100%;
  954. font-size: 0px;
  955. padding: 0px 20px; ]
  956. [div=box-sizing: border-box; flex: 0 1.5rem; height: 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%; background: var(--bgcolor); overflow: hidden;]filled[/div]
  957. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%; background: var(--bgcolor); overflow: hidden;]filled[/div]
  958. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%; background: var(--bgcolor); overflow: hidden;]filled[/div]
  959. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%;]empty[/div]
  960. [div=box-sizing: border-box; flex: 0 1.5rem; border: 1px solid var(--bgcolor); border-radius: 50%;]empty[/div]
  961. [/div]
  962. [/div]
  963. [/div]
  964. [div=height: 40px; width: 1px;] [/div]
  965. [/div]
  966. [/div]
  967. [div=
  968. position: absolute;
  969. pointer-events: none;
  970. right: calc(13% + 5px);
  971. width: calc(87% - 5px);
  972. height: calc(70% - 20px);
  973. top: 10px;
  974. display: flex;
  975. visibility: hidden;
  976. font-size: 0px;
  977. flex-flow: row nowrap;
  978. align-items: center;]
  979. [accordion=100%]
  980. {slide=[div=height: 0px; width: 0px; margin: -7px; pointer-events: none;line-height: 0px; white-space: nowrap; z-index: 3;][div=position: absolute; width: 100%; height: 15rem; top: -7.5rem; left: 0px; font-size: initial;][div=display: inline-block; width: auto; color: var(--circle); pointer-events: auto; z-index: 7; font-size: clamp(14px,12vh,100px); line-height: 1; padding: 0px 5%; visibility: visible; filter: drop-shadow(10px 5px 0px var(--titleTextShad));][fa]fas fa-comment-alt-exclamation[/fa][/div][/div]}[div=height: 0px; width: 0px; white-space: nowrap; margin: -7px; z-index: 1; visibility: visibile;][div=position: absolute; width: clamp(100px,100%,275px); height: 15rem; overflow: hidden; top: calc(-5.5rem - 13px); pointer-events: none; z-index: 2; left: calc(5% + 14px); visibility: visible; font-size: initial;][div=display: block; position: relative; height: 100%; width: calc(100% + 15px); padding-right: 15px; box-sizing: border-box; overflow-x: hidden; overflow-y: scroll; font-size: .95rem; white-space: nowrap; color: white; pointer-events: none; color: var(--bgcolor); pointer-events: auto; font-famiy: var(--fontMain); line-height: 0px;]
  981. [div=display: block; margin: 2rem 0px .5rem 0px; background: var(--accent); box-sizing: border-box; padding: 1rem; text-align: justify; border-radius: 8px; white-space: normal; line-height: 1rem;]Mauris laoreet commodo arcu et faucibus. Maecenas non mattis dui. Phasellus mi felis, vulputate quis justo sed, pulvinar tincidunt est. Quisque fermentum lorem ut magna aliquet, non finibus nisi porttitor. [/div]
  982. [div=display: block; margin: .5rem 0px; background: var(--accent); box-sizing: border-box; padding: 1rem; text-align: justify; border-radius: 8px; white-space: normal; line-height: 1rem;]Vivamus nec lacinia nunc, eget egestas tortor. Nam leo dui, pulvinar eget erat id, ornare suscipit nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus ut ultricies augue. Duis eget dolor consectetur, imperdiet risus at, iaculis orci.[/div]
  983. [div=display: block; margin: .5rem 0px; background: var(--accent); box-sizing: border-box; padding: 1rem; text-align: justify; border-radius: 8px; white-space: normal; line-height: 1rem;][div=display: inline-flex; flex-flow: row nowrap; gap: 2px;]
  984. [div=flex: 0 .95rem; width: .95rem; height: .95rem; box-sizing: border-box; border-radius: 50%; background: var(--bgcolor); border: 1px solid var(--bgcolor);][/div]
  985. [div=flex: 0 .95rem; width: .95rem; height: .95rem; box-sizing: border-box; border-radius: 50%; background: var(--bgcolor); border: 1px solid var(--bgcolor);][/div]
  986. [div=flex: 0 .95rem; width: .95rem; height: .95rem; box-sizing: border-box; border-radius: 50%; background: var(--bgcolor); border: 1px solid var(--bgcolor);][/div]
  987. [div=flex: 0 .95rem; width: .95rem; height: .95rem; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--bgcolor);][/div]
  988. [div=flex: 0 .95rem; width: .95rem; height: .95rem; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--bgcolor);][/div]
  989. [/div] filled in circles indicate my level of excitement. more blackened circles, the more hyped I would be to do the story.[/div]
  990. [/div][/div][/div]{/slide}
  991. [/accordion]
  992. [/div]
  993. [/div]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!