API tools faq
paste
Advertisement
glucoseguardian

venus flytrap 1.0

glucoseguardian
Nov 9th, 2023
167
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 35.80 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2. [div=display: none;]
  3. [font=DM Serif Display]fontcall[/font]
  4. [font=Inter]fontcall[/font]
  5. [font=Pixelify Sans]fontcall[/font]
  6. [/div]
  7. [div=
  8. --color1: #f8f8f8; /* main text bgcolor */
  9. --color2: #111215; /* nav bar bgcolor */
  10. display: block;
  11. position: relative;
  12. width: 100%;
  13. box-sizing: border-box;
  14. border-radius: 5px;
  15. overflow: hidden;
  16. isolation: isolate;
  17. --titleFont: 'DM Serif Display', display;
  18. --textFont: 'Inter', sans-serif;
  19. --accentFont: 'Pixelify Sans', sans-serif;
  20. pointer-events: none;]
  21. [div=
  22. display: flex;
  23. flex-flow: row wrap-reverse;
  24. align-items: stretch;
  25. justify-content: center;
  26. font-family: 'Courier New', monospace;]
  27. [div=background: var(--color1);
  28. flex: 2 300px;
  29. width: 100%;
  30. height: clamp(600px,60vh,1000px);
  31. font-size: 0px;]
  32. spacer
  33. [/div]
  34. [div=
  35. flex: 1 150px;
  36. width: 100%;
  37. display: flex;
  38. flex-flow: column nowrap;
  39. align-items: flex-start;
  40. justify-content: flex-end;
  41. box-sizing: border-box;
  42. padding-bottom: 2rem;
  43. overflow: hidden;]
  44. [div=
  45. width: 100%;
  46. position: absolute;
  47. text-transform: uppercase;
  48. opacity: .6;
  49. font-size: 11px;
  50. z-index: 6;
  51. font-family: var(--accentFont);
  52. color: var(--color1);
  53. padding-left: 1rem;]
  54. venus flytrap
  55. [/div]
  56. [div=
  57. width: 200px;
  58. overflow: hidden;
  59. flex: 0 auto;
  60. margin-bottom: -1.75rem;
  61. line-height: 1.8rem;
  62. pointer-events: auto;
  63. padding-top: 2rem;]
  64. [tabs]
  65. [tab=TAB01HEREXXXXXXXX]
  66. [div=--color3: olive; /* accent color */
  67. --img1: url(https://placehold.co/800x1000/olive/white?text=LARGE+IMAGE) no-repeat center center/cover;
  68. position: absolute;
  69. top: 0px;
  70. left: 0px;
  71. width: 100%;
  72. display: flex;
  73. flex-flow: row wrap-reverse;
  74. align-items: stretch;
  75. justify-content: center;
  76. box-sizing: border-box;
  77. pointer-events: none;
  78. line-height: normal;
  79. font-family: var(--textFont);
  80. color: var(--color2);]
  81. [div=background: var(--color1) var(--img1);
  82. flex: 2 300px;
  83. width: 100%;
  84. height: clamp(600px,60vh,1000px);
  85. position: relative;
  86. overflow: hidden;
  87. pointer-events: auto;]
  88. [div=
  89. position: absolute;
  90. top: 10%;
  91. left: 10%;
  92. height: 80%;
  93. width: 80%;
  94. overflow: hidden;
  95. box-sizing: border-box;
  96. position: relative;]
  97. [div=
  98. display: block;
  99. width: calc(100% + 125px);
  100. padding-right: 125px;
  101. box-sizing: border-box;
  102. height: 100%;
  103. overflow: hidden;]
  104. [div=
  105. height: 100%;
  106. width: 100%;
  107. display: flex;
  108. flex-flow: column nowrap;
  109. align-items: flex-end;
  110. justify-content: flex-end;
  111. box-sizing: border-box;
  112. padding: .5rem;]
  113. [div=
  114. flex: 0 auto;
  115. width: 100%;
  116. color: var(--color1);
  117. text-align: right;
  118. text-shadow: -.05em 0px var(--color2);
  119. font-family: var(--titleFont);
  120. font-size: clamp(16px,5vh,200px);
  121. font-size: 6cqh;
  122. line-height: 1.25em;]
  123. venus flytrap.
  124. [/div]
  125. [div=flex: 0 auto;
  126. color: var(--color1);
  127. font-size: 1rem;
  128. text-align: right;
  129. font-family: var(--textFont);
  130. display: flex;
  131. flex-flow: row wrap;
  132. align-items: flex-end;
  133. gap: 5px;
  134. box-sizing: border-box;]
  135. [url=https://i.imgur.com/tsQ1SEd.jpg][div=flex: 0 auto; line-height: .95em; background: var(--color2); color: var(--color1); padding: 2px 4px; text-decoration: underline solid var(--color2); outline: 1px solid var(--color2);] out of character [/div][/url]
  136. [url=https://i.imgur.com/tsQ1SEd.jpg][div=flex: 0 auto; line-height: .95em; background: var(--color2); color: var(--color1); padding: 2px 4px; text-decoration: underline solid var(--color2); outline: 1px solid var(--color2);] in-character [/div][/url]
  137. [url=https://i.imgur.com/tsQ1SEd.jpg][div=flex: 0 auto; line-height: .95em; background: var(--color2); color: var(--color1); padding: 2px 4px; text-decoration: underline solid var(--color2); outline: 1px solid var(--color2);]character sheets [/div][/url]
  138. [/div]
  139. [/div]
  140. [/div]
  141. [/div]
  142. [/div]
  143. [div=background: var(--color2);
  144. flex: 1 150px;
  145. width: 100%;
  146. display: flex;
  147. flex-flow: column nowrap;
  148. align-items: flex-start;
  149. justify-content: flex-end;
  150. box-sizing: border-box;
  151. padding: 1rem;
  152. padding-bottom: 3.25rem;
  153. font-family: var(--titleFont);
  154. color: var(--color1);]
  155. [div=
  156. flex: 0 auto;
  157. font-size: 2.2rem;
  158. line-height: 2.1rem;
  159. white-space: nowrap;
  160. box-sizing: border-box;
  161. z-index: 3;]
  162. [div=display: inline; color: var(--color3);]tab01.[/div][br][/br]
  163. tab02.[br][/br]
  164. tab03.[br][/br]
  165. tab04.
  166. [/div]
  167. [/div]
  168. [/div]
  169. [/tab]
  170. [tab=TAB02HEREXXXXXXXX]
  171. [div=--color3: mediumturquoise; /* accent color */
  172. --img1: url(https://placehold.co/1600x900/mediumturquoise/white?text=Tab+02+Image) no-repeat center center/cover; /* bg img */
  173. --img2: url(https://placehold.co/300/turquoise/white?text=Square) no-repeat center center/cover; /* square img */
  174. --img3: url(https://placehold.co/200x500/mediumturquoise/white?text=back\nimg) no-repeat center center/cover; /* smaller back bg img */
  175. --img4: url(https://placehold.co/200x500/turquoise/white?text=front\nimg) no-repeat center center/cover; /* front bottom img */
  176. position: absolute;
  177. top: 0px;
  178. left: 0px;
  179. width: 100%;
  180. display: flex;
  181. flex-flow: row wrap-reverse;
  182. align-items: stretch;
  183. justify-content: center;
  184. box-sizing: border-box;
  185. pointer-events: none;
  186. line-height: normal;
  187. font-family: var(--textFont);
  188. color: var(--color2);]
  189. [div=background: var(--color1);
  190. flex: 2 300px;
  191. width: 100%;
  192. height: clamp(600px,60vh,1000px);
  193. position: relative;
  194. overflow: hidden;
  195. pointer-events: auto;]
  196. [div=
  197. position: absolute;
  198. top: 0%;
  199. left: 0%;
  200. height: 100%;
  201. width: 100%;
  202. overflow: hidden;
  203. box-sizing: border-box;
  204. position: relative;]
  205. [div=
  206. display: block;
  207. width: calc(100% + 125px);
  208. padding-right: 125px;
  209. box-sizing: border-box;
  210. height: 100%;
  211. overflow-x: visible;
  212. overflow-y: scroll;
  213. scroll-snap-type: y proximity;
  214. scroll-padding-top: 1.75rem;]
  215. [div=scroll-snap-align: start; position: relative; width: calc(85% + 75px); left: 15%; aspect-ratio: 16/9; background: var(--img1);] [/div]
  216. [div=display: flex;
  217. flex-flow: row wrap;
  218. align-items: flex-start:
  219. justify-content: center;
  220. position: relative;
  221. width: 95%;
  222. margin: auto;
  223. position: relative;
  224. gap: 0rem 2.5%;
  225. box-sizing: border-box;]
  226. [div=flex: 1 200px; position: relative; margin-bottom: -1rem;]
  227. [div=position: absolute; aspect-ratio: 1; left: 0%; top: 0%; width: clamp(200px,100%,600px); background: var(--img2); transform: translateY(-50%); z-index: 1;] [/div]
  228. [div=display: block; width: 100%; aspect-ratio: 2/1;] [/div]
  229. [div=display: block;
  230. box-sizing: border-box;
  231. width: 100%;
  232. text-align: right;
  233. font-size: 11px;
  234. padding: .75rem;
  235. line-height: 12px;
  236. text-transform: uppercase;
  237. color: var(--color2);
  238. font-family: var(--accentFont);]
  239. art by Konya Karasue
  240. [/div]
  241. [/div]
  242. [div=flex: 4 300px;
  243. box-sizing: border-box;
  244. width: 100%;
  245. padding: 0px 1.25rem;
  246. z-index: 2;
  247. text-align: justify;
  248. font-size: .9rem;
  249. scroll-snap-align: start;
  250. position: relative;]
  251. [div=display: block;
  252. font-size: 2rem;
  253. font-family: var(--titleFont);
  254. margin: 1rem 0px .5rem 0px;]
  255. info.
  256. [/div]
  257. [div=display: block; width: 100%; margin-bottom: .5em;]
  258. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at tempor neque. Sed iaculis placerat quam, ut malesuada ligula semper in. Pellentesque non est et nisl ultricies porttitor ut a magna. Donec quis lorem nec velit accumsan cursus. Etiam ac fermentum metus, eget placerat enim. Fusce cursus placerat pellentesque. Vestibulum elementum porta sem, nec luctus est. Mauris justo dolor, convallis at augue nec, ultricies efficitur mi. Praesent tincidunt ultricies sem eget finibus.
  259. [/div]
  260. [div=display: block; width: 100%; margin-bottom: .5em;]
  261. In hac habitasse platea dictumst. Suspendisse potenti. Aliquam magna eros, porta a imperdiet quis, dapibus vel libero. Nunc ullamcorper rutrum enim, vitae posuere sapien pharetra vel. Aenean tortor diam, placerat auctor accumsan eu, feugiat vel arcu. Praesent molestie lorem lacus, in commodo dui hendrerit eget. Quisque sem libero, suscipit et nisl sit amet, scelerisque cursus tellus. Nulla tristique quam vitae volutpat congue. Aenean placerat ligula quis convallis malesuada. Suspendisse faucibus imperdiet risus ac varius. Pellentesque luctus sem a dui venenatis, sit amet hendrerit mauris malesuada. Nunc interdum felis eleifend pulvinar consequat. Donec ut lacus ultrices, fringilla mauris ut, vehicula odio.
  262. [/div]
  263. [/div]
  264. [/div]
  265. [div=display: flex;
  266. flex-flow: row wrap;
  267. align-items: center;
  268. justify-content: center;
  269. width: 95%;
  270. margin: auto;
  271. padding-top: 2.25rem;
  272. position: relative;
  273. gap: 0rem 2.5%;
  274. box-sizing: border-box;]
  275. [div=flex: 1 0px;] [/div]
  276. [div=flex: 3 300px;
  277. box-sizing: border-box;
  278. width: 100%;
  279. padding: 1.25rem;
  280. padding-bottom: 5rem;
  281. text-align: justify;
  282. font-size: .9rem;
  283. position: relative;
  284. z-index: 2;]
  285. [div=display: block;
  286. font-size: 2rem;
  287. font-family: var(--titleFont);
  288. margin: 2rem 0px .5rem 0px;
  289. scroll-snap-align: start;]
  290. info.
  291. [/div]
  292. [div=display: block; width: 100%; margin-bottom: .5em; ]
  293. Sed blandit tellus libero, sed fringilla nulla pretium sed. Quisque justo nisl, tempor eu lacus vitae, ultrices rhoncus nibh. Morbi porttitor eleifend consectetur. Phasellus lobortis auctor convallis. In hac habitasse platea dictumst. Proin vitae eros non magna rutrum fermentum. Vestibulum luctus accumsan orci id suscipit. Aenean rhoncus eros vitae mauris sollicitudin, quis tristique nisl sollicitudin. Nam magna est, tempus ut quam ut, fringilla efficitur diam. Curabitur sollicitudin sem nec turpis eleifend lacinia. Maecenas luctus mollis dui, non cursus eros porttitor vitae. Praesent consequat sapien id ipsum elementum facilisis.
  294. [/div]
  295. [div=display: block; width: 100%; margin-bottom: .5em; ]
  296. Suspendisse ex lacus, laoreet sit amet semper eu, consectetur sit amet eros. Nullam quis ex quis enim commodo finibus. Aliquam non consectetur massa, et elementum leo. Sed tempor massa non dui eleifend, quis scelerisque risus faucibus. Donec pellentesque aliquam lectus, eget tincidunt ipsum sagittis varius. In eu nunc porttitor, elementum est et, lobortis risus. Sed consectetur neque ac leo pharetra lobortis. Nam lorem turpis, molestie in diam eget, suscipit malesuada sem. In rhoncus ligula et tortor rutrum hendrerit. Nullam in dolor tincidunt, ullamcorper lectus eget, tempor est. Proin eu odio at justo luctus accumsan et ut risus. Nam in auctor arcu, blandit mollis tellus. Etiam lacinia, risus ut ultrices mattis, mauris orci molestie elit, at consequat metus massa id ex. Aliquam vulputate dictum lacus ac tempus. Ut ut sodales tortor, ut varius mi.
  297. [/div]
  298. [/div]
  299. [div=flex: 2 150px; width: 100%; box-sizing: border-box; scroll-snap-align: start; position: relative; min-height: 300px; align-self: stretch;]
  300. [div=position: absolute; left: 20%; top: 0px; height: 100%; width: 80%; background: var(--img3);] [/div]
  301. [div=position: absolute; left: 0px; bottom: 1rem; width: 80%; height: 80%; background: var(--img4); z-index: 1;] [/div]
  302. [/div]
  303. [/div]
  304. [/div]
  305. [/div]
  306. [/div]
  307. [div=background: var(--color2);
  308. flex: 1 150px;
  309. width: 100%;
  310. display: flex;
  311. flex-flow: column nowrap;
  312. align-items: flex-start;
  313. justify-content: flex-end;
  314. box-sizing: border-box;
  315. padding: 1rem;
  316. padding-bottom: 3.25rem;
  317. font-family: var(--titleFont);
  318. color: var(--color1);
  319. position: relative;
  320. overflow: hidden;]
  321. [div=
  322. flex: 0 auto;
  323. font-size: 2.2rem;
  324. line-height: 2.1rem;
  325. white-space: nowrap;
  326. box-sizing: border-box;
  327. z-index: 3;]
  328. tab01.[br][/br]
  329. [div=display: inline; color: var(--color3);]tab02.[/div][br][/br]
  330. tab03.[br][/br]
  331. tab04.
  332. [/div]
  333. [/div]
  334. [/div]
  335. [/tab]
  336. [tab=TAB03HEREXXXXXXXX]
  337. [div=--color3: slategrey; /* accent color */
  338. --img1: url(https://placehold.co/400x600/slategrey/white?text=portrait) no-repeat center center/cover; /* image for tab 3 */
  339. position: absolute;
  340. top: 0px;
  341. left: 0px;
  342. width: 100%;
  343. display: flex;
  344. flex-flow: row wrap-reverse;
  345. align-items: stretch;
  346. justify-content: center;
  347. box-sizing: border-box;
  348. pointer-events: none;
  349. line-height: normal;
  350. font-family: var(--textFont);
  351. color: var(--color2);]
  352. [div=
  353. flex: 2 300px;
  354. width: 100%;
  355. height: clamp(600px,60vh,1000px);
  356. background: var(--color1);
  357. position: relative;
  358. overflow: hidden;
  359. pointer-events: auto;]
  360. [div=
  361. position: absolute;
  362. top: 0px;
  363. left: 0px;
  364. width: 100%;
  365. height: 100%;
  366. overflow: hidden;
  367. box-sizing: border-box;
  368. display: flex;
  369. flex-flow: row wrap-reverse;
  370. align-items: stretch;
  371. justify-content: center;]
  372. [div=flex: 2 300px; min-height: 300px; overflow: hidden;]
  373. [div=position: relative;
  374. height: 100%;
  375. box-sizing: border-box;
  376. overflow: hidden;
  377. width: 100%;]
  378. [div=position: absolute;
  379. bottom: 1.5rem;
  380. left: 0px;
  381. height: calc(100% - 1.5rem);
  382. width: 100%;
  383. box-sizing: border-box;
  384. overflow: hidden;
  385. display: flex;
  386. flex-flow: column nowrap;]
  387. [div=flex: 1 0px;] [/div]
  388. [div=flex: 2 475px; position: relative;]
  389. [div=position: absolute;
  390. top: 0px;
  391. left: 0px;
  392. height: 100%;
  393. width: calc(100% + 125px);
  394. padding-right: 125px;
  395. box-sizing: border-box;
  396. overflow-x: hidden;
  397. overflow-y: scroll;
  398. scroll-snap-type: y proximity;]
  399. [div=position: relative; width: 100%; box-sizing: border-box; padding: 0px 2rem; text-align: justify; margin-bottom: 1rem; scroll-snap-align: start;]
  400. [div=position: sticky;
  401. top: 0px;
  402. left: 0px;
  403. z-index: 3;
  404. background: var(--color1);
  405. width: 100%;
  406. display: block;
  407. font-size: 2rem;
  408. color: var(--color2);
  409. font-family: var(--titleFont);
  410. padding: 1.5rem 0px .5rem 0px;]info.[/div]
  411. [div=display: block; font-size: .9rem; margin-bottom: .5em;]
  412. Sed vel egestas diam. In luctus volutpat leo, vitae vestibulum odio. Maecenas blandit mauris diam, vel aliquam odio finibus et. Nam placerat maximus massa semper viverra. Aliquam eget urna purus. In mauris mauris, suscipit sit amet placerat ac, mollis non tortor. Donec leo nunc, venenatis sit amet rutrum sit amet, hendrerit at urna. Fusce eu quam lobortis, placerat lorem tincidunt, pretium nulla. Aliquam suscipit ante quis scelerisque aliquam. Integer at est tempus, commodo massa vitae, congue ipsum. In pretium metus ornare nisi faucibus egestas.
  413. [/div]
  414. [div=display: block; font-size: .9rem; margin-bottom: .5em;]
  415. Vestibulum fermentum est ut finibus placerat. Nullam consectetur sem commodo, condimentum erat quis, accumsan ligula. Fusce faucibus suscipit pellentesque. Ut pharetra felis non interdum pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam dictum rutrum justo, ut molestie dui porta eleifend. Aliquam metus felis, suscipit ut erat ut, dignissim porta dui.
  416. [/div]
  417. [div=display: block; font-size: .9rem; margin-bottom: .5em;]
  418. Suspendisse pharetra nibh imperdiet sapien condimentum condimentum. Nunc consectetur turpis a vehicula sagittis. Morbi semper consequat lorem. Vivamus risus purus, ullamcorper eget aliquam at, malesuada non magna. Curabitur sagittis vitae tortor sed ultrices. Donec sagittis sagittis luctus. Ut condimentum, enim id cursus faucibus, purus elit placerat neque, sollicitudin blandit risus nibh non ipsum. Suspendisse egestas varius quam. Phasellus enim augue, porttitor non molestie non, hendrerit nec mauris. Nam aliquet eu mauris et dapibus. Nulla posuere sit amet sapien id semper. Cras ullamcorper justo vel dolor eleifend, quis convallis eros fringilla. Aenean lobortis ante non felis congue vestibulum. Ut pharetra ut ligula a consectetur.
  419. [/div]
  420. [/div]
  421. [div=position: relative; width: 100%; box-sizing: border-box; padding: 0px 2rem; text-align: justify; margin-bottom: 1rem; scroll-snap-align: start;]
  422. [div=position: sticky;
  423. top: 0px;
  424. left: 0px;
  425. z-index: 3;
  426. background: var(--color1);
  427. width: 100%;
  428. display: block;
  429. font-size: 2rem;
  430. color: var(--color2);
  431. font-family: var(--titleFont);
  432. padding: 1.5rem 0px .5rem 0px;]info.[/div]
  433. [div=display: flex;
  434. width: 100%;
  435. flex-flow: row wrap;
  436. align-items: flex-start;
  437. gap: 1rem;]
  438. [div=flex: 1 200px; border-left: 1px dashed var(--color3);]
  439. [div=display: block; font-size: 11px; font-family: var(--accentFont); text-transform: uppercase; box-sizing: border-box; padding-left: 10px;]misc[/div]
  440. [div=display: block; font-size: .9rem; box-sizing: border-box; padding-left: 5px;]
  441. ullamcorper, eget, aliquam, at, malesuada, non, magna, Curabitur, sagittis, vitae, tortor, sed ultrices
  442. [/div]
  443. [/div]
  444. [div=flex: 1 200px; border-left: 1px dashed var(--color3);]
  445. [div=display: block; font-size: 11px; font-family: var(--accentFont); text-transform: uppercase; box-sizing: border-box; padding-left: 10px;]misc[/div]
  446. [div=display: block; font-size: .9rem; box-sizing: border-box; padding-left: 5px;]
  447. ullamcorper, eget, aliquam, at, malesuada, non, magna, Curabitur, sagittis, vitae, tortor, sed ultrices
  448. [/div]
  449. [/div]
  450. [/div]
  451. [/div]
  452. [div=position: relative; width: 100%; box-sizing: border-box; padding: 0px 2rem; text-align: justify; margin-bottom: 1rem; scroll-snap-align: start;]
  453. [div=position: sticky;
  454. top: 0px;
  455. left: 0px;
  456. z-index: 3;
  457. background: var(--color1);
  458. width: 100%;
  459. display: block;
  460. font-size: 2rem;
  461. color: var(--color2);
  462. font-family: var(--titleFont);
  463. padding: 1.5rem 0px .5rem 0px;]info.[/div]
  464. [div=display: block; font-size: .9rem; margin-bottom: .5em;]
  465. Sed vel egestas diam. In luctus volutpat leo, vitae vestibulum odio. Maecenas blandit mauris diam, vel aliquam odio finibus et. Nam placerat maximus massa semper viverra. Aliquam eget urna purus. In mauris mauris, suscipit sit amet placerat ac, mollis non tortor. Donec leo nunc, venenatis sit amet rutrum sit amet, hendrerit at urna. Fusce eu quam lobortis, placerat lorem tincidunt, pretium nulla. Aliquam suscipit ante quis scelerisque aliquam. Integer at est tempus, commodo massa vitae, congue ipsum. In pretium metus ornare nisi faucibus egestas.
  466. [/div]
  467. [div=display: block; font-size: .9rem; margin-bottom: .5em;]
  468. Vestibulum fermentum est ut finibus placerat. Nullam consectetur sem commodo, condimentum erat quis, accumsan ligula. Fusce faucibus suscipit pellentesque. Ut pharetra felis non interdum pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam dictum rutrum justo, ut molestie dui porta eleifend. Aliquam metus felis, suscipit ut erat ut, dignissim porta dui.
  469. [/div]
  470. [div=display: block; font-size: .9rem; margin-bottom: .5em;]
  471. Suspendisse pharetra nibh imperdiet sapien condimentum condimentum. Nunc consectetur turpis a vehicula sagittis. Morbi semper consequat lorem. Vivamus risus purus, ullamcorper eget aliquam at, malesuada non magna. Curabitur sagittis vitae tortor sed ultrices. Donec sagittis sagittis luctus. Ut condimentum, enim id cursus faucibus, purus elit placerat neque, sollicitudin blandit risus nibh non ipsum. Suspendisse egestas varius quam. Phasellus enim augue, porttitor non molestie non, hendrerit nec mauris. Nam aliquet eu mauris et dapibus. Nulla posuere sit amet sapien id semper. Cras ullamcorper justo vel dolor eleifend, quis convallis eros fringilla. Aenean lobortis ante non felis congue vestibulum. Ut pharetra ut ligula a consectetur.
  472. [/div]
  473. [/div]
  474. [/div]
  475. [/div]
  476. [/div]
  477. [/div]
  478. [/div]
  479. [div=flex: 3 200px; display: flex; flex-flow: column nowrap; min-height: 125px; position: relative;]
  480. [div=flex: 3 125px; background: var(--img1);] [/div]
  481. [div=flex: 1 auto;
  482. box-sizing: border-box;
  483. width: 80%;
  484. margin-left: 20%;
  485. text-align: right;
  486. font-size: 11px;
  487. padding: .75rem;
  488. line-height: 12px;
  489. text-transform: uppercase;
  490. color: var(--color2);
  491. font-family: var(--accentFont);]
  492. [div=display: block; color: var(--color3);]keywords[/div]
  493. word word word word word
  494. [/div]
  495. [/div]
  496. [/div]
  497. [/div]
  498. [div=background: var(--color2);
  499. flex: 1 150px;
  500. width: 100%;
  501. display: flex;
  502. flex-flow: column nowrap;
  503. align-items: flex-start;
  504. justify-content: flex-end;
  505. box-sizing: border-box;
  506. padding: 1rem;
  507. padding-bottom: 3.25rem;
  508. font-family: var(--titleFont);
  509. color: var(--color1);
  510. overflow: hidden;
  511. position: relative;]
  512. [div=
  513. flex: 0 auto;
  514. font-size: 2.2rem;
  515. line-height: 2.1rem;
  516. white-space: nowrap;
  517. box-sizing: border-box;
  518. position: relative;
  519. z-index: 3;]
  520. tab01.[br][/br]
  521. tab02.[br][/br]
  522. [div=display: inline; color: var(--color3);]tab03.[/div][br][/br]
  523. tab04.
  524. [/div]
  525. [/div]
  526. [/div]
  527. [/tab]
  528. [tab=TAB04HEREXXXXXXXX]
  529. [div=--color3: tomato; /* accent color */
  530. --img1: url(https://placehold.co/800x400/tomato/white?text=any+img) no-repeat center center/cover; /* bg img tab 4 */
  531. position: absolute;
  532. top: 0px;
  533. left: 0px;
  534. width: 100%;
  535. display: flex;
  536. flex-flow: row wrap-reverse;
  537. align-items: stretch;
  538. justify-content: center;
  539. box-sizing: border-box;
  540. pointer-events: none;
  541. line-height: normal;
  542. font-family: var(--textFont);
  543. color: var(--color2);]
  544. [div=
  545. flex: 2 300px;
  546. width: 100%;
  547. height: clamp(600px,60vh,1000px);
  548. background: var(--color1);
  549. position: relative;
  550. overflow: hidden;
  551. pointer-events: auto;]
  552. [div=position: absolute; top: 5%; width: 100%; height: 85%; transform: translateX(-50%); box-sizing: border-box; border: .25rem solid var(--color3);] [/div]
  553. [div=
  554. position: absolute;
  555. bottom: 1.5rem;
  556. left: 0px;
  557. width: calc(100% + 125px);
  558. padding-right: 125px;
  559. height: calc(100% - 3rem);
  560. overflow-x: hidden;
  561. overflow-y: scroll;
  562. box-sizing: border-box;
  563. scroll-snap-type: y proximity;]
  564. [div=display: block; scroll-snap-align: start; height: 15rem;] [/div]
  565. [div=position: relative; width: clamp(200px,100%,400px); box-sizing: border-box; padding: 0px 2rem; text-align: justify; margin-right: 2rem; margin-left: auto; margin-bottom: 2rem; scroll-snap-align: start;]
  566. [div=position: sticky;
  567. top: 0px;
  568. left: 0px;
  569. z-index: 3;
  570. background: var(--color1);
  571. width: 100%;
  572. display: block;
  573. font-size: 2rem;
  574. color: var(--color2);
  575. font-family: var(--titleFont);
  576. padding: 0px 0px .5rem 0px;]info.[/div]
  577. [div=display: block; font-size: .9rem; margin-bottom: .5em;]
  578. While arcane history covers a wide range of sub-topics, Tala pursues an even less tangible specialty within it: non-written history, specifically in relation to oral tradition. This mainly involves rituals, stories, and her personal favorite, song. Magic has existed long before humans could record it, and evidence shows that knowledge and use of it predates most writing systems. What better way to remember a spell than giving it rhythm and melody?
  579. [/div]
  580. [div=display: block; font-size: .9rem; margin-bottom: .5em;]
  581. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis id lorem efficitur, suscipit odio a, blandit metus. Ut in diam scelerisque, porttitor metus quis, ullamcorper nisl. Aenean sed lobortis nisl. Nunc eu turpis quis est ornare vulputate. Sed tincidunt pretium sapien, nec ultricies enim malesuada vitae. Quisque eget magna nec odio facilisis sodales. Maecenas efficitur, purus vitae malesuada rutrum, quam elit rhoncus neque, eget tincidunt elit sem id nulla. Maecenas viverra felis non dui ullamcorper blandit. In ac luctus orci, in lacinia tortor. Aliquam erat volutpat. Sed eu mauris finibus mauris aliquet placerat id quis nunc. Nam vestibulum neque vel ultricies ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ut tristique turpis, sed ullamcorper lectus.
  582. [/div]
  583. [div=display: block; font-size: .9rem; margin-bottom: .5em;]
  584. Sed a massa nulla. Curabitur sit amet lectus id ligula venenatis efficitur. Pellentesque ut condimentum dolor. Cras laoreet elit eu diam fermentum mollis. Donec a elit ligula. Aliquam egestas imperdiet nisi sed accumsan. Pellentesque blandit sagittis tempor. Praesent vitae erat condimentum, laoreet sem pretium, vulputate odio. Mauris eu lacus vitae nulla tristique ultricies. Aliquam erat volutpat. Fusce nec leo a purus luctus fermentum.
  585. [/div]
  586. [/div]
  587. [/div]
  588. [/div]
  589. [div=background: var(--color2);
  590. flex: 1 150px;
  591. width: 100%;
  592. display: flex;
  593. flex-flow: column nowrap;
  594. align-items: flex-start;
  595. justify-content: flex-end;
  596. box-sizing: border-box;
  597. padding: 1rem;
  598. padding-bottom: 3.25rem;
  599. font-family: var(--titleFont);
  600. color: var(--color1);
  601. overflow: hidden;
  602. position: relative;]
  603. [div=position: absolute; mix-blend-mode: lighten; height: 80%; width: 100%; left: 0px; top: 0px; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 10%), var(--img1); filter: brightness(70%) contrast(115%);] [/div]
  604. [div=
  605. flex: 0 auto;
  606. font-size: 2.2rem;
  607. line-height: 2.1rem;
  608. white-space: nowrap;
  609. box-sizing: border-box;
  610. position: relative;
  611. z-index: 3;]
  612. tab01.[br][/br]
  613. tab02.[br][/br]
  614. tab03.[br][/br]
  615. [div=display: inline; color: var(--color3);]tab04.[/div]
  616. [/div]
  617. [/div]
  618. [/div]
  619. [/tab]
  620. [/tabs]
  621. [/div]
  622. [/div]
  623. [/div]
  624. [/div]
  625. [/nobr]
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!