API tools faq
paste
ooksie

an almanac (uxie x s o u r)

ooksie
Mar 21st, 2021 (edited)
201
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.73 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. fonts used:
  4. [font=IM Fell DW Pica]headers[/font]
  5. [font=IM Fell Great Primer]body text[/font]
  6. [font=Mr Bedfort]signature[/font]
  7.  
  8. to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  9.  
  10. [/comment][border=transparent;
  11.  
  12. /*background image*/
  13. --bg: url('https://i.imgur.com/jk1j3MB.png');
  14. /*picture border + home button colour*/
  15. --color-1: #845440;
  16.  
  17. /*header text colour*/
  18. --h1: #3d312f;
  19. /*body text colour*/
  20. --t-color: #3d312f;
  21. /*signature colour*/
  22. --s-color: #543631;
  23.  
  24. /*fonts used*/
  25. --header: 'IM Fell DW Pica', serif;
  26. --body: 'IM Fell Great Primer', serif;
  27. --signature: 'Mr Bedfort', display;
  28.  
  29. /*images are categorised based on which tab they're in. images in tab 1 are labelled a, tab 2 with b and so on.*/
  30. --aimg-1: url('http://smiledoctor.com.sg/wp-content/uploads/2016/10/orionthemes-placeholder-image.jpg');
  31. --aimg-2: url('http://smiledoctor.com.sg/wp-content/uploads/2016/10/orionthemes-placeholder-image.jpg');
  32.  
  33. /*character images*/
  34. --c1: url('http://smiledoctor.com.sg/wp-content/uploads/2016/10/orionthemes-placeholder-image.jpg');
  35. --c2: url('http://smiledoctor.com.sg/wp-content/uploads/2016/10/orionthemes-placeholder-image.jpg');
  36. --c3: url('http://smiledoctor.com.sg/wp-content/uploads/2016/10/orionthemes-placeholder-image.jpg');
  37. --c4: url('http://smiledoctor.com.sg/wp-content/uploads/2016/10/orionthemes-placeholder-image.jpg');
  38.  
  39. height:auto; min-height:540px; width:100%; max-width:730px; padding:0; padding-bottom:20px; position:relative; line-height:0; margin:auto;][border=transparent; height:auto; min-height:540px; width:100%; max-width:730px; padding:0; position:relative; display:flex; flex-flow: row wrap; justify-content:center; align-items:center;][border=transparent; height:540px; width:100%; max-width:365px; padding:0; flex:auto 0;][/border]
  40.  
  41. [comment]----tabs----[/comment]
  42. [border=transparent; height:540px; width:100%; max-width:365px; padding:15px 25px 15px 15px; box-sizing:border-box; display:flex; justify-content:flex-end;][border=transparent; height:70%; width:90%; padding:0; overflow:hidden;][border=transparent; padding:0; margin:3px 0 0 0; line-height:30.2px; letter-spacing:4px;][tabs]
  43.  
  44. [comment]----home tab----[/comment]
  45. [tab=aaaaaaaaaaaaaaaaaaaaaa][border=transparent; height:100%; width:100%; max-width:730px; padding:0; position:absolute; top:0; left:0; z-index:2; display:flex; flex-flow: row wrap; justify-content:center; pointer-events:none; line-height:0; letter-spacing:0;]
  46.  
  47. [comment]----tab contents----[/comment]
  48. [border=transparent; height:540px; width:100%; max-width:365px; padding:0; flex:auto 0;][/border][border=transparent; height:540px; width:100%; max-width:365px; padding:15px 40px 15px 15px; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:center; justify-content:flex-start;][border=transparent; height:28px; width:100%; padding:0; pointer-events:auto;][/border][border=transparent; height:15px; width:100%; padding:0; font-size:0; pointer-events:auto;]filler. ignore![/border]
  49.  
  50. [comment]----header----[/comment]
  51. [border=transparent; height:30%; width:100%; padding:0; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; pointer-events:auto;]
  52. [comment]----title----[/comment]
  53. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--h1); font-family: var(--header); font-size:35px; font-weight:bold; letter-spacing:2px; line-height:33px; text-align:center;][comment]
  54.  
  55. ----* * * title here----
  56.  
  57. [/comment]Minulle & Sons[/border]
  58.  
  59. [comment]----subtitle----[/comment]
  60. [border=transparent; height:fit-content; width:fit-content; max-width:65%; padding:0; color: var(--h1); font-family: var(--header); font-size:22px; letter-spacing:0.5px; line-height:23px; text-align:center; margin-top:3px;][comment]
  61.  
  62. ----* * * subtitle here----
  63.  
  64. [/comment]Purveyors of the Finest Books:[/border]
  65.  
  66. [comment]----subtitle subtitle----[/comment]
  67. [border=transparent; height:fit-content; width:fit-content; max-width:65%; padding:0; color: var(--h1); font-family: var(--header); font-size:18px; line-height:20px; text-align:center; margin-top:3px;][comment]
  68.  
  69. ----* * * smaller subtitle here----
  70.  
  71. [/comment]a fantastical
  72. book-hopping adventure[/border]
  73.  
  74. [/border]
  75. [comment]----header end----[/comment]
  76.  
  77. [border=transparent; height:15px; width:100%; padding:0; font-size:0; pointer-events:auto;]filler. ignore![/border]
  78.  
  79. [comment]----buttons (index)----[/comment]
  80. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center;]
  81.  
  82. [comment]----button----[/comment]
  83. [border=transparent; height:fit-content; width:auto; min-width:50%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; font-family: var(--header); letter-spacing:0.8px; margin:5px 0;]
  84. [border=transparent; height:fit-content; width:35px; padding:0; flex:auto 0; color: var(--t-color); line-height:100%; margin-right:10px; font-size:24px;][comment]
  85.  
  86. ----* * * index number here----
  87.  
  88. [/comment]1.[/border]
  89.  
  90. [border=transparent; height:fit-content; flex:1; padding:0; color: var(--t-color); line-height:100%; margin-right:10px; font-size:20px;][comment]
  91.  
  92. ----* * * tab title here----
  93.  
  94. [/comment]The World[/border]
  95. [/border]
  96. [comment]----button end----[/comment]
  97.  
  98. [comment]----button----[/comment]
  99. [border=transparent; height:fit-content; width:auto; min-width:50%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; font-family: var(--header); letter-spacing:0.8px; margin:5px 0;]
  100. [border=transparent; height:fit-content; width:35px; padding:0; flex:auto 0; color: var(--t-color); line-height:100%; margin-right:10px; font-size:24px;][comment]
  101.  
  102. ----* * * index number here----
  103.  
  104. [/comment]2.[/border]
  105.  
  106. [border=transparent; height:fit-content; flex:1; padding:0; color: var(--t-color); line-height:100%; margin-right:10px; font-size:20px;][comment]
  107.  
  108. ----* * * tab title here----
  109.  
  110. [/comment]Rules[/border]
  111. [/border]
  112. [comment]----button end----[/comment]
  113.  
  114. [comment]----button----[/comment]
  115. [border=transparent; height:fit-content; width:auto; min-width:50%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; font-family: var(--header); letter-spacing:0.8px; margin:5px 0;]
  116. [border=transparent; height:fit-content; width:35px; padding:0; flex:auto 0; color: var(--t-color); line-height:100%; margin-right:10px; font-size:24px;][comment]
  117.  
  118. ----* * * index number here----
  119.  
  120. [/comment]3.[/border]
  121.  
  122. [border=transparent; height:fit-content; flex:1; padding:0; color: var(--t-color); line-height:100%; margin-right:10px; font-size:20px;][comment]
  123.  
  124. ----* * * tab title here----
  125.  
  126. [/comment]Characters[/border]
  127. [/border]
  128. [comment]----button end----[/comment]
  129.  
  130. [comment]----button----[/comment]
  131. [border=transparent; height:fit-content; width:auto; min-width:50%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; font-family: var(--header); letter-spacing:0.8px; margin:5px 0;]
  132. [border=transparent; height:fit-content; width:35px; padding:0; flex:auto 0; color: var(--t-color); line-height:100%; margin-right:10px; font-size:24px;][comment]
  133.  
  134. ----* * * index number here----
  135.  
  136. [/comment]4.[/border]
  137.  
  138. [border=transparent; height:fit-content; flex:1; padding:0; color: var(--t-color); line-height:24px; font-size:20px;][comment]
  139.  
  140. ----* * * tab title here----
  141.  
  142. [/comment]References[/border]
  143. [/border]
  144. [comment]----button end----[/comment]
  145.  
  146. [/border]
  147. [comment]----buttons (index) end----[/comment]
  148.  
  149. [comment]----footer (signature)----[/comment]
  150. [border=transparent; height:fit-content; width:fit-content; padding:0; flex:auto 0; margin:auto -5px 25px auto; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; color: var(--s-color); font-family: var(--signature); font-size:18px; text-align:left; line-height:100%; transform:skew(-25deg) rotate(-3deg);][comment]
  151.  
  152. ---- * * * signature here----
  153.  
  154. [/comment]Lauri Minulle.[/border]
  155. [/border]
  156. [comment]----tab contents end----[/comment]
  157. [/border][/tab]
  158. [comment]----home tab end----[/comment]
  159.  
  160. [comment]----ignore these!----[/comment]
  161. [tab=aaaaaaaaaaaa]filler tab[/tab]
  162. [tab=aaaaaaaaaaaa]filler tab[/tab]
  163. [tab=aaaaaaaaaaaa]filler tab[/tab]
  164. [tab=aaaaaaaaaaaa]filler tab[/tab]
  165. [tab=aaaaaaaaaaaa]filler tab[/tab]
  166.  
  167.  
  168. [comment]----tab one----[/comment]
  169. [tab=aaaaaaaaaaaa1][border=transparent; height:100%; width:100%; max-width:730px; padding:0; position:absolute; top:0; left:0; z-index:2; display:flex; flex-flow: row wrap; justify-content:center; pointer-events:none; line-height:0; letter-spacing:0;]
  170.  
  171. [comment]----left page----[/comment]
  172. [border=transparent; height:540px; width:100%; max-width:365px; padding:45px clamp(20px, 6.5vw, 25px) 45px 45px; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; align-items:center; pointer-events:auto;]
  173.  
  174. [comment]----header----[/comment]
  175. [border=transparent; height:fit-content; min-height:10%; width:100%; padding:0; flex:auto 0; margin-bottom:10px; display:flex; align-items:center;][border=transparent; height:fit-content; width:100%; padding:0; color: var(--h1); font-family: var(--header); font-size:32px; font-weight:bold; letter-spacing:1px; line-height:28px; text-align:center;][comment]
  176.  
  177. ----* * * page header here----
  178.  
  179. [/comment]The World[/border]
  180. [/border]
  181.  
  182. [comment]----page contents----[/comment]
  183. [border=transparent; height:auto; max-height:78%; min-height:60%; width:clamp(220px, 100%, 310px); padding:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 0 0 10px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:13px; line-height:16px; text-align:justify;][comment]
  184.  
  185. ----* * * text starts here----
  186.  
  187. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id sapien vitae turpis auctor suscipit. Sed vestibulum diam et condimentum rhoncus. Donec magna diam, elementum quis suscipit eget, iaculis nec nisi. Curabitur semper consectetur viverra. Vestibulum sodales finibus justo quis efficitur. Aliquam magna nulla, accumsan ac ex vitae, tempor pellentesque sem. Nullam sed nisl congue, malesuada risus at, eleifend magna. Nam ut scelerisque odio. Morbi vitae ante erat. Duis lacinia felis lacus, eu fringilla leo tempus non. Aenean luctus bibendum magna sed placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo nibh in porttitor porta. Cras sed tempus turpis, eu consectetur magna. In lacinia ornare molestie.
  188.  
  189. Nunc aliquet in mauris non sollicitudin. Etiam finibus urna non ex dapibus, eu semper neque luctus. Suspendisse eu turpis ac justo luctus auctor sed nec libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras pellentesque mi vel euismod vulputate. Integer finibus dolor vel ex blandit ultrices. Proin vestibulum sem quis enim lacinia vehicula ac vel nisi. Fusce tincidunt risus augue, vitae tempus purus fringilla ac. Integer eget nulla tempus dolor egestas imperdiet. Cras diam sapien, molestie luctus semper elementum, vehicula et neque. Sed in leo semper leo cursus rutrum quis vel velit. Maecenas rhoncus sollicitudin mauris id eleifend.
  190.  
  191. Sed lacus nibh, laoreet vel efficitur a, ullamcorper quis velit. Vestibulum sit amet nisi sagittis, tincidunt mauris et, molestie turpis. Donec non elit lorem. Maecenas nulla augue, semper eget mattis ut, tincidunt ac justo. Aenean in sapien in augue elementum egestas. Curabitur sit amet augue posuere, varius ex nec, eleifend nisi. Quisque tristique pellentesque neque sit amet faucibus. Morbi sit amet commodo lectus. In accumsan ornare sodales.
  192. [/border][/border][/border]
  193. [comment]----contents end----[/comment]
  194. [/border]
  195. [comment]----left page end----[/comment]
  196.  
  197. [comment]----right page----[/comment]
  198. [border=transparent; height:540px; width:100%; max-width:365px; padding:25px 50px 40px clamp(25px, 8vw, 35px); box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:center; justify-content:flex-start;]
  199.  
  200. [comment]----home button----[/comment]
  201. [border=transparent; height:28px; width:100%; padding:0; display:flex; align-items:center; justify-content:flex-end; flex:auto 0;][border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border][border=transparent; height:fit-content; width:fit-content; padding:0; flex:auto 0; color: var(--color-1); font-size:19px;][fa]fas fa-home[/fa][/border][/border]
  202.  
  203. [comment]----page contents----[/comment]
  204. [border=transparent; flex:1; width:100%; max-height:calc(100% - 28px); padding:0; pointer-events:auto; display:flex; flex-flow: column nowrap; justify-content:center;]
  205.  
  206. [comment]----image one----[/comment]
  207. [border=transparent; height:130px; width:150px; padding:0; border:2px solid var(--color-1); margin:0 auto 20px 0; background: var(--aimg-1); background-size:cover;
  208.  
  209. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  210.  
  211. [comment]----image two----[/comment]
  212. [border=transparent; height:170px; width:190px; padding:0; border:2px solid var(--color-1); margin:15px 0 20px auto; background: var(--aimg-1); background-size:cover;
  213.  
  214. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  215.  
  216. [/border]
  217. [comment]----page contents end----[/comment]
  218. [/border]
  219. [comment]----right page end----[/comment]
  220.  
  221. [/border][/tab]
  222. [comment]----tab one end----[/comment]
  223.  
  224.  
  225. [comment]----tab two----[/comment]
  226. [tab=aaaaaaaaaaaa1][border=transparent; height:100%; width:100%; max-width:730px; padding:0; position:absolute; top:0; left:0; z-index:2; display:flex; flex-flow: row wrap; justify-content:center; pointer-events:none; line-height:0; letter-spacing:0;]
  227.  
  228. [comment]----left page----[/comment]
  229. [border=transparent; height:540px; width:100%; max-width:365px; padding:45px clamp(20px, 6.5vw, 25px) 45px 45px; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; align-items:center; pointer-events:auto;]
  230.  
  231. [comment]----header----[/comment]
  232. [border=transparent; height:fit-content; min-height:10%; width:100%; padding:0; flex:auto 0; margin-bottom:10px; display:flex; align-items:center;][border=transparent; height:fit-content; width:100%; padding:0; color: var(--h1); font-family: var(--header); font-size:32px; font-weight:bold; letter-spacing:1px; line-height:28px; text-align:center;][comment]
  233.  
  234. ----* * * page header here----
  235.  
  236. [/comment]The Rules[/border]
  237. [/border]
  238.  
  239. [comment]----page contents----[/comment]
  240. [border=transparent; height:76.5%; width:clamp(220px, 100%, 310px); padding:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  241.  
  242. [comment]----copy this whole thing to make another rule!----[/comment]
  243. [border=transparent; height:auto; width:50%; padding:0 0 0 10px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:13px; line-height:16px; text-align:justify; margin:8px 0;][border=transparent; height:35px; width:auto; min-width:40px; padding:0 0 5px 0; box-sizing:border-box; margin:0 5px 0 0; color: var(--h1); font-size:40px; font-family: var(--header); float:left; display:flex; align-items:flex-end; justify-content:center;][comment]
  244.  
  245. ----* * * rule number here----
  246.  
  247. [/comment]1.[/border][comment]
  248.  
  249. ----* * * text starts here----
  250.  
  251. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id sapien vitae turpis auctor suscipit. Sed vestibulum diam et condimentum rhoncus. Donec magna diam, elementum quis suscipit eget, iaculis nec nisi. Curabitur semper consectetur viverra. Vestibulum sodales finibus justo quis efficitur. Aliquam magna nulla, accumsan ac ex vitae, tempor pellentesque sem.
  252. [/border]
  253. [comment]----copy me too!----[/comment]
  254.  
  255. [comment]----copy this whole thing to make another rule!----[/comment]
  256. [border=transparent; height:auto; width:50%; padding:0 0 0 10px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:13px; line-height:16px; text-align:justify; margin:8px 0;][border=transparent; height:35px; width:auto; min-width:40px; padding:0 0 5px 0; box-sizing:border-box; margin:0 5px 0 0; color: var(--h1); font-size:40px; font-family: var(--header); float:left; display:flex; align-items:flex-end; justify-content:center;][comment]
  257.  
  258. ----* * * rule number here----
  259.  
  260. [/comment]2.[/border][comment]
  261.  
  262. ----* * * text starts here----
  263.  
  264. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id sapien vitae turpis auctor suscipit. Sed vestibulum diam et condimentum rhoncus. Donec magna diam, elementum quis suscipit eget, iaculis nec nisi. Curabitur semper consectetur viverra. Vestibulum sodales finibus justo quis efficitur. Aliquam magna nulla, accumsan ac ex vitae, tempor pellentesque sem.
  265. [/border]
  266. [comment]----copy me too!----[/comment]
  267.  
  268. [comment]----copy this whole thing to make another rule!----[/comment]
  269. [border=transparent; height:auto; width:50%; padding:0 0 0 10px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:13px; line-height:16px; text-align:justify; margin:8px 0;][border=transparent; height:35px; width:auto; min-width:40px; padding:0 0 5px 0; box-sizing:border-box; margin:0 5px 0 0; color: var(--h1); font-size:40px; font-family: var(--header); float:left; display:flex; align-items:flex-end; justify-content:center;][comment]
  270.  
  271. ----* * * rule number here----
  272.  
  273. [/comment]3.[/border][comment]
  274.  
  275. ----* * * text starts here----
  276.  
  277. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id sapien vitae turpis auctor suscipit. Sed vestibulum diam et condimentum rhoncus. Donec magna diam, elementum quis suscipit eget, iaculis nec nisi. Curabitur semper consectetur viverra. Vestibulum sodales finibus justo quis efficitur. Aliquam magna nulla, accumsan ac ex vitae, tempor pellentesque sem.
  278. [/border]
  279. [comment]----copy me too!----[/comment]
  280.  
  281. [/border][/border]
  282. [comment]----contents end----[/comment]
  283. [/border]
  284. [comment]----left page end----[/comment]
  285.  
  286. [comment]----right page----[/comment]
  287. [border=transparent; height:540px; width:100%; max-width:365px; padding:25px 50px 45px clamp(25px, 8vw, 35px); box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:center; justify-content:flex-start;]
  288.  
  289. [comment]----home button----[/comment]
  290. [border=transparent; height:28px; width:100%; padding:0; display:flex; align-items:center; justify-content:flex-end;][border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border][border=transparent; height:fit-content; width:fit-content; padding:0; flex:auto 0; color: var(--color-1); font-size:19px;][fa]fas fa-home[/fa][/border][/border]
  291.  
  292. [comment]----header----[/comment]
  293. [border=transparent; height:calc(7% + 5px); width:100%; padding:0; flex:auto 0; display:flex; align-items:center; pointer-events:auto;][/border]
  294.  
  295. [comment]----page contents----[/comment]
  296. [border=transparent; height:80%; width:clamp(220px, 100%, 310px); padding:0; overflow:hidden; display:flex; flex-direction:column; pointer-events:auto;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  297.  
  298. [comment]----copy this whole thing to make another rule!----[/comment]
  299. [border=transparent; height:auto; width:50%; padding:0 0 0 10px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:13px; line-height:16px; text-align:justify; margin:8px 0;][border=transparent; height:35px; width:auto; min-width:40px; padding:0 0 5px 0; box-sizing:border-box; margin:0 5px 0 0; color: var(--h1); font-size:40px; font-family: var(--header); float:left; display:flex; align-items:flex-end; justify-content:center;][comment]
  300.  
  301. ----* * * rule number here----
  302.  
  303. [/comment]4.[/border][comment]
  304.  
  305. ----* * * text starts here----
  306.  
  307. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id sapien vitae turpis auctor suscipit. Sed vestibulum diam et condimentum rhoncus. Donec magna diam, elementum quis suscipit eget, iaculis nec nisi. Curabitur semper consectetur viverra. Vestibulum sodales finibus justo quis efficitur. Aliquam magna nulla, accumsan ac ex vitae, tempor pellentesque sem.
  308. [/border]
  309. [comment]----copy me too!----[/comment]
  310.  
  311. [comment]----copy this whole thing to make another rule!----[/comment]
  312. [border=transparent; height:auto; width:50%; padding:0 0 0 10px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:13px; line-height:16px; text-align:justify; margin:8px 0;][border=transparent; height:35px; width:auto; min-width:40px; padding:0 0 5px 0; box-sizing:border-box; margin:0 5px 0 0; color: var(--h1); font-size:40px; font-family: var(--header); float:left; display:flex; align-items:flex-end; justify-content:center;][comment]
  313.  
  314. ----* * * rule number here----
  315.  
  316. [/comment]5.[/border][comment]
  317.  
  318. ----* * * text starts here----
  319.  
  320. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id sapien vitae turpis auctor suscipit. Sed vestibulum diam et condimentum rhoncus. Donec magna diam, elementum quis suscipit eget, iaculis nec nisi. Curabitur semper consectetur viverra. Vestibulum sodales finibus justo quis efficitur. Aliquam magna nulla, accumsan ac ex vitae, tempor pellentesque sem.
  321. [/border]
  322. [comment]----copy me too!----[/comment]
  323.  
  324. [comment]----copy this whole thing to make another rule!----[/comment]
  325. [border=transparent; height:auto; width:50%; padding:0 0 0 10px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:13px; line-height:16px; text-align:justify; margin:8px 0;][border=transparent; height:35px; width:auto; min-width:40px; padding:0 0 5px 0; box-sizing:border-box; margin:0 5px 0 0; color: var(--h1); font-size:40px; font-family: var(--header); float:left; display:flex; align-items:flex-end; justify-content:center;][comment]
  326.  
  327. ----* * * rule number here----
  328.  
  329. [/comment]6.[/border][comment]
  330.  
  331. ----* * * text starts here----
  332.  
  333. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id sapien vitae turpis auctor suscipit. Sed vestibulum diam et condimentum rhoncus. Donec magna diam, elementum quis suscipit eget, iaculis nec nisi. Curabitur semper consectetur viverra. Vestibulum sodales finibus justo quis efficitur. Aliquam magna nulla, accumsan ac ex vitae, tempor pellentesque sem.
  334. [/border]
  335. [comment]----copy me too!----[/comment]
  336.  
  337. [/border][/border]
  338. [comment]----contents end----[/comment]
  339. [/border]
  340. [comment]----right page end----[/comment]
  341.  
  342. [/border][/tab]
  343. [comment]----tab two end----[/comment]
  344.  
  345.  
  346. [comment]----tab three----[/comment]
  347. [tab=aaaaaaaaaaaa1][border=transparent; height:100%; width:100%; max-width:730px; padding:0; position:absolute; top:0; left:0; z-index:2; display:flex; flex-flow: row wrap; justify-content:center; pointer-events:none; line-height:0; letter-spacing:0;]
  348.  
  349. [comment]----left page----[/comment]
  350. [border=transparent; height:540px; width:100%; max-width:365px; padding:50px clamp(20px, 6.5vw, 25px) 50px 45px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:center; pointer-events:auto;]
  351.  
  352. [comment]----header----[/comment]
  353. [border=transparent; height:fit-content; min-height:10%; width:100%; padding:0; flex:auto 0; margin-bottom:10px; display:flex; align-items:center;][border=transparent; height:fit-content; width:100%; padding:0; color: var(--h1); font-family: var(--header); font-size:32px; font-weight:bold; letter-spacing:1px; line-height:28px; text-align:center;][comment]
  354.  
  355. ----* * * page header here----
  356.  
  357. [/comment]The Characters[/border]
  358. [/border]
  359.  
  360. [comment]----page contents----[/comment]
  361. [border=transparent; height:auto; max-height:87%; min-height:50%; width:100%; padding:0; display:flex; flex-flow: column nowrap;]
  362.  
  363. [comment]----character container----[/comment]
  364. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; align-items:center; margin:10px 0;]
  365. [comment]----character image----[/comment]
  366. [border=transparent; height:90px; width:130px; padding:0; background: var(--c1); background-size:cover; flex:auto 0; margin-bottom:10px; border:2px solid var(--color-1);
  367. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  368.  
  369. [comment]----character blurb----[/comment]
  370. [border=transparent; height:fit-content; max-height:65px; width:clamp(240px, 85%, 310px); padding:0 5px; box-sizing:border-box; overflow:hidden; color: var(--t-color); font-size:13px; font-family: var(--body); line-height:16px; text-align:justify; overflow-y:auto;][comment]
  371.  
  372. ----* * * text starts here----
  373.  
  374. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id sapien vitae turpis auctor suscipit. Sed vestibulum diam et condimentum rhoncus.
  375. [/border]
  376. [comment]----character blurb end----[/comment]
  377. [/border]
  378. [comment]----character container end----[/comment]
  379.  
  380. [comment]----character container----[/comment]
  381. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; align-items:center; margin:10px 0;]
  382. [comment]----character image----[/comment]
  383. [border=transparent; height:90px; width:130px; padding:0; background: var(--c2); background-size:cover; flex:auto 0; margin-bottom:10px; border:2px solid var(--color-1);
  384. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  385.  
  386. [comment]----character blurb----[/comment]
  387. [border=transparent; height:fit-content; max-height:65px; width:clamp(240px, 85%, 310px); padding:0 5px; box-sizing:border-box; overflow:hidden; color: var(--t-color); font-size:13px; font-family: var(--body); line-height:16px; text-align:justify; overflow-y:auto;][comment]
  388.  
  389. ----* * * text starts here----
  390.  
  391. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id sapien vitae turpis auctor suscipit. Sed vestibulum diam et condimentum rhoncus.
  392. [/border]
  393. [comment]----character blurb end----[/comment]
  394. [/border]
  395. [comment]----character container end----[/comment]
  396.  
  397.  
  398. [/border]
  399. [comment]----page contents end----[/comment]
  400. [/border]
  401. [comment]----left page end----[/comment]
  402.  
  403. [comment]----right page----[/comment]
  404. [border=transparent; height:540px; width:100%; max-width:365px; padding:25px 50px 40px clamp(25px, 8vw, 35px); box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center;]
  405.  
  406. [comment]----home button----[/comment]
  407. [border=transparent; height:28px; width:100%; padding:0; display:flex; align-items:center; justify-content:flex-end; margin-bottom:auto; position:relative;][border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border][border=transparent; height:fit-content; width:fit-content; padding:0; flex:auto 0; color: var(--color-1); font-size:19px;][fa]fas fa-home[/fa][/border][border=transparent; height:30px; width:100%; padding:0; position:absolute; left:0; bottom:-28px; pointer-events:auto;][/border][/border]
  408.  
  409. [comment]----page contents----[/comment]
  410. [border=transparent; height:auto; max-height:87%; min-height:50%; width:100%; padding:0; display:flex; flex-flow: column nowrap; margin-bottom:auto; pointer-events:auto;]
  411.  
  412. [comment]----character container----[/comment]
  413. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; align-items:center; margin:10px 0;]
  414. [comment]----character image----[/comment]
  415. [border=transparent; height:90px; width:130px; padding:0; background: var(--c3); background-size:cover; flex:auto 0; margin-bottom:10px; border:2px solid var(--color-1);
  416. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  417.  
  418. [comment]----character blurb----[/comment]
  419. [border=transparent; height:fit-content; max-height:65px; width:clamp(240px, 85%, 310px); padding:0 5px; box-sizing:border-box; overflow:hidden; color: var(--t-color); font-size:13px; font-family: var(--body); line-height:16px; text-align:justify; overflow-y:auto;][comment]
  420.  
  421. ----* * * text starts here----
  422.  
  423. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id sapien vitae turpis auctor suscipit. Sed vestibulum diam et condimentum rhoncus.
  424. [/border]
  425. [comment]----character blurb end----[/comment]
  426. [/border]
  427. [comment]----character container end----[/comment]
  428.  
  429. [comment]----character container----[/comment]
  430. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; align-items:center; margin:10px 0;]
  431. [comment]----character image----[/comment]
  432. [border=transparent; height:90px; width:130px; padding:0; background: var(--c4); background-size:cover; flex:auto 0; margin-bottom:10px; border:2px solid var(--color-1);
  433. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  434.  
  435. [comment]----character blurb----[/comment]
  436. [border=transparent; height:fit-content; max-height:65px; width:clamp(240px, 85%, 310px); padding:0 5px; box-sizing:border-box; overflow:hidden; color: var(--t-color); font-size:13px; font-family: var(--body); line-height:16px; text-align:justify; overflow-y:auto;][comment]
  437.  
  438. ----* * * text starts here----
  439.  
  440. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id sapien vitae turpis auctor suscipit. Sed vestibulum diam et condimentum rhoncus.
  441. [/border]
  442. [comment]----character blurb end----[/comment]
  443. [/border]
  444. [comment]----character container end----[/comment]
  445.  
  446. [/border]
  447. [comment]----page contents end----[/comment]
  448.  
  449. [/border]
  450. [comment]----right page end----[/comment]
  451.  
  452. [/border][/tab]
  453. [comment]----tab three end----[/comment]
  454.  
  455.  
  456. [comment]----tab four----[/comment]
  457. [tab=aaaaaaaaaaaa1][border=transparent; height:100%; width:100%; max-width:730px; padding:0; position:absolute; top:0; left:0; z-index:2; display:flex; flex-flow: row wrap; justify-content:center; pointer-events:none; line-height:0; letter-spacing:0;]
  458.  
  459. [comment]----left page----[/comment]
  460. [border=transparent; height:540px; width:100%; max-width:365px; padding:50px clamp(20px, 6.5vw, 25px) 50px 45px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:center; pointer-events:auto;]
  461.  
  462. [comment]----header----[/comment]
  463. [border=transparent; height:fit-content; min-height:10%; width:100%; padding:0; flex:auto 0; margin-bottom:10px; display:flex; align-items:center;][border=transparent; height:fit-content; width:100%; padding:0; color: var(--h1); font-family: var(--header); font-size:32px; font-weight:bold; letter-spacing:1px; line-height:28px; text-align:center;][comment]
  464.  
  465. ----* * * page header here----
  466.  
  467. [/comment]References[/border]
  468. [/border]
  469.  
  470. [comment]----page contents----[/comment]
  471. [border=transparent; height:auto; max-height:87%; min-height:50%; width:100%; padding:0; display:flex; flex-flow: column nowrap; align-items:center;]
  472.  
  473. [comment]----copy this whole thing to add another link----[/comment]
  474. [border=transparent; height:fit-content; width:85%; padding:0; display:flex; flex-flow: row nowrap; color: var(--t-color); font-size:17px; font-family: var(--body); position:relative; margin:10px 0;]
  475. [border=transparent; height:fit-content; width:20px; padding:0; flex:auto 0; margin-right:15px; line-height:100%; font-size:18px;][comment]
  476.  
  477. ----* * * link number here----
  478.  
  479. [/comment]1.[/border]
  480.  
  481. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%; pointer-events:auto; flex:auto 0;][comment]
  482.  
  483. ----* * * link to page here----
  484.  
  485. [/comment][url='xx'][comment]
  486.  
  487. [/comment][border=transparent; padding:0; color: var(--t-color);][comment]
  488.  
  489. ----* * * link title----
  490.  
  491. [/comment]Character Sheet (WIP)[comment]
  492.  
  493. [/comment][/border][/url][/border]
  494. [/border]
  495. [comment]----copy me too!----[/comment]
  496.  
  497. [comment]----copy this whole thing to add another link----[/comment]
  498. [border=transparent; height:fit-content; width:85%; padding:0; display:flex; flex-flow: row nowrap; color: var(--t-color); font-size:17px; font-family: var(--body); position:relative; margin:10px 0;]
  499. [border=transparent; height:fit-content; width:20px; padding:0; flex:auto 0; margin-right:15px; line-height:100%; font-size:18px;][comment]
  500.  
  501. ----* * * link number here----
  502.  
  503. [/comment]2.[/border]
  504.  
  505. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%; pointer-events:auto; flex:auto 0;][comment]
  506.  
  507. ----* * * link to page here----
  508.  
  509. [/comment][url='xx'][comment]
  510.  
  511. [/comment][border=transparent; padding:0; color: var(--t-color);][comment]
  512.  
  513. ----* * * link title----
  514.  
  515. [/comment]Out of Character Chat (WIP)[comment]
  516.  
  517. [/comment][/border][/url][/border]
  518. [/border]
  519. [comment]----copy me too!----[/comment]
  520.  
  521. [comment]----copy this whole thing to add another link----[/comment]
  522. [border=transparent; height:fit-content; width:85%; padding:0; display:flex; flex-flow: row nowrap; color: var(--t-color); font-size:17px; font-family: var(--body); position:relative; margin:10px 0;]
  523. [border=transparent; height:fit-content; width:20px; padding:0; flex:auto 0; margin-right:15px; line-height:100%; font-size:18px;][comment]
  524.  
  525. ----* * * link number here----
  526.  
  527. [/comment]3.[/border]
  528.  
  529. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%; pointer-events:auto; flex:auto 0;][comment]
  530.  
  531. ----* * * link to page here----
  532.  
  533. [/comment][url='xx'][comment]
  534.  
  535. [/comment][border=transparent; padding:0; color: var(--t-color);][comment]
  536.  
  537. ----* * * link title----
  538.  
  539. [/comment]In Character[comment]
  540.  
  541. [/comment][/border][/url][/border]
  542. [/border]
  543. [comment]----copy me too!----[/comment]
  544.  
  545. [comment]----copy this whole thing to add another link----[/comment]
  546. [border=transparent; height:fit-content; width:85%; padding:0; display:flex; flex-flow: row nowrap; color: var(--t-color); font-size:17px; font-family: var(--body); position:relative; margin:10px 0;]
  547. [border=transparent; height:fit-content; width:20px; padding:0; flex:auto 0; margin-right:15px; line-height:100%; font-size:18px;][comment]
  548.  
  549. ----* * * link number here----
  550.  
  551. [/comment]4.[/border]
  552.  
  553. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%; pointer-events:auto; flex:auto 0;][comment]
  554.  
  555. ----* * * link to page here----
  556.  
  557. [/comment][url='xx'][comment]
  558.  
  559. [/comment][border=transparent; padding:0; color: var(--t-color);][comment]
  560.  
  561. ----* * * link title----
  562.  
  563. [/comment]Moodboard/Pinterest[comment]
  564.  
  565. [/comment][/border][/url][/border]
  566. [/border]
  567. [comment]----copy me too!----[/comment]
  568.  
  569. [/border]
  570. [comment]----page contents end----[/comment]
  571. [/border]
  572. [comment]----left page end----[/comment]
  573.  
  574. [comment]----right page----[/comment]
  575. [border=transparent; height:540px; width:100%; max-width:365px; padding:25px 50px 40px clamp(25px, 8vw, 35px); box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; position:relative;][border=transparent; height:calc(100% - 58px); width:100%; padding:0; position:absolute; bottom:0; left:0; pointer-events:auto;][/border]
  576.  
  577. [comment]----home button----[/comment]
  578. [border=transparent; height:28px; width:100%; padding:0; display:flex; align-items:center; justify-content:flex-end; margin-bottom:auto;][border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border][border=transparent; height:fit-content; width:fit-content; padding:0; flex:auto 0; color: var(--color-1); font-size:19px;][fa]fas fa-home[/fa][/border][/border]
  579.  
  580. [comment]----image (optional)----[/comment]
  581. [border=transparent; height:70%; width:clamp(250px, 90%, 350px); padding:0; border:2px solid var(--color-1); background: var(--dimg-1); background-size:cover; margin-bottom:auto; transform:rotate(-1.2deg) skew(-1deg);
  582.  
  583. /*remove this line to have the image visible*/ display:none;
  584.  
  585. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  586.  
  587. [/border]
  588. [comment]----right page end----[/comment]
  589.  
  590. [/border][/tab]
  591. [comment]----tab four end----[/comment]
  592.  
  593. [/tabs][/border][/border][/border]
  594.  
  595.  
  596. [comment]----image background (ignore!)----[/comment]
  597. [border=transparent; height:auto; min-height:540px; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:none;][border=transparent; height:540px; width:100%; max-width:365px; padding:0; background: var(--bg); background-size:auto 100%; background-position:0 0%;][/border][border=transparent; height:540px; width:100%; max-width:365px; padding:0; background: var(--bg); background-size:auto 100%; background-position:100% 0%;][/border][/border]
  598.  
  599.  
  600. [/border][comment]----signature! (do not remove!)-----
  601. [/comment][bg=transparent; height:fit-content; width:100%; padding:0; position:absolute; bottom:12px; left:10px; z-index:7;][border=transparent; height:fit-content; width:fit-content; margin:auto; padding:5px; box-sizing:border-box; opacity:0.65;font-size:10px;text-align:center; line-height:100%;][font=Open Sans]♡design by s o u r, coded by uxie♡[/font][/border][/bg][/border]
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!