API tools faq
paste
Advertisement
ooksie

hearts

ooksie
Mar 16th, 2019
369
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.36 KB | None | 0 0
raw download clone embed print report
  1. [div class=variations][div=height:20px;width:100px;position:relative;z-index:6;opacity:0.8;color: var(--color-4);float:left;font-size:10px;top:5px;][font=Open Sans]♡coded by uxie♡[/font][/div][div class="container"]
  2. [div class=tabbox][div class="tabcontents tab1"][div class=tabheadertagp][font=Vibur]appearance[/font][/div][div class=tabaflex][div class=hoverpicb][div=height:100%;width:100%;background: var(--img-4);background-size:150%;background-position:20% 50%;border-radius:2px;][/div][/div][div class=ablock][/div][div class=atabscroll][div class=scroll][font=Arimo][div class=atag][font=Pragati Narrow]♡ oof[/font][/div]
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat gravida nisl, in malesuada elit commodo sed. Aenean risus dui, sollicitudin ac interdum a, fringilla sit amet ipsum. Etiam quis metus commodo, mollis nulla eget, dictum lorem. Vivamus rhoncus felis vel lacus elementum lobortis ac eu enim. Duis sit amet mi sed orci lobortis hendrerit quis at ante. Praesent blandit, ante non congue commodo, nunc tellus fringilla nisl, id molestie libero erat at nunc. Vivamus ac nisl ante. Aliquam felis neque, vulputate ut fringilla vel, dignissim et magna. Quisque urna libero, mattis nec aliquam ac, sollicitudin sit amet erat. Nulla facilisi. Integer nunc dui, mollis sed sodales quis, commodo vel lorem. Donec in magna facilisis, sollicitudin libero ut, interdum orci. Vivamus diam urna, tincidunt id dui eu, suscipit accumsan neque. Etiam sit amet iaculis odio, nec imperdiet eros.
  4.  
  5. [/font][/div]
  6. [/div][div class=atabscroll][div class=scroll][font=Arimo][div class=atag][font=Pragati Narrow]♡ wig[/font][/div]
  7. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat gravida nisl, in malesuada elit commodo sed. Aenean risus dui, sollicitudin ac interdum a, fringilla sit amet ipsum. Etiam quis metus commodo, mollis nulla eget, dictum lorem. Vivamus rhoncus felis vel lacus elementum lobortis ac eu enim. Duis sit amet mi sed orci lobortis hendrerit quis at ante. Praesent blandit, ante non congue commodo, nunc tellus fringilla nisl, id molestie libero erat at nunc. Vivamus ac nisl ante. Aliquam felis neque, vulputate ut fringilla vel, dignissim et magna. Quisque urna libero, mattis nec aliquam ac, sollicitudin sit amet erat. Nulla facilisi. Integer nunc dui, mollis sed sodales quis, commodo vel lorem. Donec in magna facilisis, sollicitudin libero ut, interdum orci. Vivamus diam urna, tincidunt id dui eu, suscipit accumsan neque. Etiam sit amet iaculis odio, nec imperdiet eros.
  8.  
  9. [/font][/div]
  10. [/div][div class=ablock][/div][div class=hoverpicb][div=height:100%;width:100%;background: var(--img-5);background-size:142%;background-position:50% 50%;border-radius:2px;][/div][/div]
  11.  
  12. [/div]
  13. [/div][div class="tabcontents tab2" style=display:none;][div class=tabheadertagp][font=Vibur]persona[/font][/div][div class=tabpflex][nobr][div class=listgrp]
  14. [div class="perslist likes"]
  15. [div class=perslisttitle][font=Vibur]
  16. likes
  17. [/font][/div][div class=persblock][/div][font=News Cycle]
  18. [div class=perstag]♡ strawberries[/div][div class=perstag]♡ music[/div][div class=perstag]♡ polar bears[/div][div class=perstag]♡ laughing[/div][div class=perstag]♡ rollercoasters[/div][div class=perstag]♡ moomin[/div]
  19. [/font][/div][div class="perslist dislikes"]
  20. [div class=perslisttitle][font=Vibur]
  21. dislikes
  22. [/font][/div][div class=persblock][/div][font=News Cycle]
  23. [div class=perstag]♡ dislike 1[/div][div class=perstag]♡ dislike 2[/div][div class=perstag]♡ dislike 3[/div][div class=perstag]♡ dislike 4[/div][div class=perstag]♡ dislike 5[/div]
  24. [/font][/div]
  25. [/div][/nobr][div class=tabpfscroll][div class=scroll][font=Arimo]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat gravida nisl, in malesuada elit commodo sed. Aenean risus dui, sollicitudin ac interdum a, fringilla sit amet ipsum. Etiam quis metus commodo, mollis nulla eget, dictum lorem. Vivamus rhoncus felis vel lacus elementum lobortis ac eu enim. Duis sit amet mi sed orci lobortis hendrerit quis at ante. Praesent blandit, ante non congue commodo, nunc tellus fringilla nisl, id molestie libero erat at nunc. Vivamus ac nisl ante. Aliquam felis neque, vulputate ut fringilla vel, dignissim et magna. Quisque urna libero, mattis nec aliquam ac, sollicitudin sit amet erat. Nulla facilisi. Integer nunc dui, mollis sed sodales quis, commodo vel lorem. Donec in magna facilisis, sollicitudin libero ut, interdum orci. Vivamus diam urna, tincidunt id dui eu, suscipit accumsan neque. Etiam sit amet iaculis odio, nec imperdiet eros.
  26.  
  27. Nunc in sollicitudin eros, non ultrices orci. Morbi efficitur ipsum vitae nibh aliquam eleifend. Donec mattis neque eget velit egestas scelerisque. Sed justo dolor, elementum vitae malesuada molestie, mattis a risus. Nullam a velit sit amet purus feugiat lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc finibus nibh sit amet nisl euismod pellentesque sit amet vitae ligula. Nam mattis dignissim quam, non ornare purus suscipit nec.
  28.  
  29. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras lacinia feugiat vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis mattis metus id semper. Fusce eu aliquet mi, sit amet egestas diam. Aliquam dapibus justo a nulla porttitor pellentesque. Nam fringilla sem odio, eget vehicula tortor hendrerit quis. Cras eget posuere tortor. Cras molestie erat vel ex sollicitudin lobortis.
  30.  
  31. [/font]
  32. [/div][/div][nobr][div class=listgrp]
  33. [div class="perslist fears"]
  34. [div class=perslisttitle][font=Vibur]
  35. fears
  36. [/font][/div][div class=persblock][/div][font=News Cycle]
  37. [div class=perstag]♡ fear 1[/div][div class=perstag]♡ fear 2[/div][div class=perstag]♡ fear 3[/div][div class=perstag]♡ fear 4[/div][div class=perstag]♡ fear 5[/div]
  38. [/font][/div]
  39. [div class="perslist hobbies"]
  40. [div class=perslisttitle][font=Vibur]
  41. hobbies
  42. [/font][/div][div class=persblock][/div][font=News Cycle]
  43. [div class=perstag]♡ hobby 1[/div][div class=perstag]♡ hobby 2[/div][div class=perstag]♡ hobby 3[/div][div class=perstag]♡ hobby 4[/div][div class=perstag]♡ hobby 5[/div]
  44. [/font][/div]
  45. [/div][/nobr]
  46.  
  47. [/div]
  48. [/div][div class="tabcontents tab3" style=display:none;][div class=tabheader][div class=tabheaderquote][font=Playfair Display]attention creeper69xd45,[/font]
  49. [div class=tabheadersubtext][font=Heebo]you are banned from this server. my mum came in my room and saw that you typed fuck in the chat and now i'm grounded. you know the rules. you know the rules[/font][/div]
  50. [/div]
  51.  
  52. [div class=tabheadertag][font=Vibur]background[/font][/div]
  53.  
  54. [/div][div class=tabhc][div class=tabhscroll][div class=scroll][font=Arimo]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat gravida nisl, in malesuada elit commodo sed. Aenean risus dui, sollicitudin ac interdum a, fringilla sit amet ipsum. Etiam quis metus commodo, mollis nulla eget, dictum lorem. Vivamus rhoncus felis vel lacus elementum lobortis ac eu enim. Duis sit amet mi sed orci lobortis hendrerit quis at ante. Praesent blandit, ante non congue commodo, nunc tellus fringilla nisl, id molestie libero erat at nunc. Vivamus ac nisl ante. Aliquam felis neque, vulputate ut fringilla vel, dignissim et magna. Quisque urna libero, mattis nec aliquam ac, sollicitudin sit amet erat. Nulla facilisi. Integer nunc dui, mollis sed sodales quis, commodo vel lorem. Donec in magna facilisis, sollicitudin libero ut, interdum orci. Vivamus diam urna, tincidunt id dui eu, suscipit accumsan neque. Etiam sit amet iaculis odio, nec imperdiet eros.
  55.  
  56. Nunc in sollicitudin eros, non ultrices orci. Morbi efficitur ipsum vitae nibh aliquam eleifend. Donec mattis neque eget velit egestas scelerisque. Sed justo dolor, elementum vitae malesuada molestie, mattis a risus. Nullam a velit sit amet purus feugiat lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc finibus nibh sit amet nisl euismod pellentesque sit amet vitae ligula. Nam mattis dignissim quam, non ornare purus suscipit nec.
  57.  
  58. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras lacinia feugiat vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis mattis metus id semper. Fusce eu aliquet mi, sit amet egestas diam. Aliquam dapibus justo a nulla porttitor pellentesque. Nam fringilla sem odio, eget vehicula tortor hendrerit quis. Cras eget posuere tortor. Cras molestie erat vel ex sollicitudin lobortis.
  59.  
  60. [/font][/div][/div][div class=tabhsidepicb][div class=tabhsidepic1][/div][/div]
  61. [/div]
  62.  
  63. [/div][div class="tabcontents tab4" style=display:none;][div class=tabfc][nobr]
  64. [div class=tabpicheaderc]
  65. [div class=tabpicheader]
  66. [div=height:100%;width:100%;background: var(--img-6);background-size:190%;background-position:50% 50%;][/div]
  67. [/div]
  68. [div class=tabpicheader]
  69. [div=height:100%;width:100%;background: var(--img-7);background-size:190%;background-position:60% 50%;][/div]
  70. [/div]
  71. [/div][/nobr][div class=tabfcscroll][div class=scroll][font=Arimo][div class=etag][font=Pragati Narrow]♡ somethin' extra[/font][/div]
  72. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat gravida nisl, in malesuada elit commodo sed. Aenean risus dui, sollicitudin ac interdum a, fringilla sit amet ipsum. Etiam quis metus commodo, mollis nulla eget, dictum lorem. Vivamus rhoncus felis vel lacus elementum lobortis ac eu enim. Duis sit amet mi sed orci lobortis hendrerit quis at ante. Praesent blandit, ante non congue commodo, nunc tellus fringilla nisl, id molestie libero erat at nunc. Vivamus ac nisl ante. Aliquam felis neque, vulputate ut fringilla vel, dignissim et magna. Quisque urna libero, mattis nec aliquam ac, sollicitudin sit amet erat. Nulla facilisi. Integer nunc dui, mollis sed sodales quis, commodo vel lorem. Donec in magna facilisis, sollicitudin libero ut, interdum orci. Vivamus diam urna, tincidunt id dui eu, suscipit accumsan neque. Etiam sit amet iaculis odio, nec imperdiet eros.
  73.  
  74. Nunc in sollicitudin eros, non ultrices orci. Morbi efficitur ipsum vitae nibh aliquam eleifend. Donec mattis neque eget velit egestas scelerisque. Sed justo dolor, elementum vitae malesuada molestie, mattis a risus. Nullam a velit sit amet purus feugiat lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc finibus nibh sit amet nisl euismod pellentesque sit amet vitae ligula. Nam mattis dignissim quam, non ornare purus suscipit nec.
  75.  
  76. [/font][/div][/div]
  77. [/div][div class=tabfooter][div class=tabfooterquote][font=Playfair Display]attention creeper69xd45,[/font]
  78. [div class=tabfootersubtext][font=Heebo]you are banned from this server. my mum came in my room and saw that you typed fuck in the chat and now i'm grounded. you know the rules. you know the rules[/font][/div]
  79. [div class=tabfootertag][font=Vibur]extra[/font][/div]
  80. [/div]
  81.  
  82. [/div][/div]
  83.  
  84. [/div][nobr]
  85. [div class=navbar]
  86. [div class=navbarimgb]
  87. [div class=navbarimg][/div]
  88. [/div]
  89. [div class=navbars]
  90. [div class=name][font=Poor Story]송나연 [div=display:inline;font-size:0.8em][fa]fa-heart-o[/fa][/div][/font][/div]
  91. [div class=infotagc][font=Pragati Narrow]
  92. [div class=infotag]♡ song nayeon[/div]
  93. [div class=infotag]♡ gender[/div]
  94. [div class=infotag]♡ age[/div]
  95. [div class=infotag]♡ sexuality[/div]
  96. [div class=infotag]♡ role[/div]
  97. [div class=infotag]♡ zodiac[/div]
  98.  
  99. [/font][/div]
  100. [div class=tabnav]
  101. [div class=buttons1]
  102. [div=display:inline-block;height:1.5px;background-color:white;width:28%;margin-right:3px;position:relative;top:-8px;][/div][div class="button navbutton1 buttonselect"]♡[div=display:none]1[/div][/div][div=display:inline-block;height:1.5px;background-color:white;width:22.5%;margin-left:3px;margin-right:3px;position:relative;top:-8px;][/div][div class="button navbutton2"]♡[div=display:none]2[/div][/div][div=display:inline-block;height:1.5px;background-color:white;width:28%;margin-left:3px;position:relative;top:-8px;][/div]
  103.  
  104. [/div]
  105.  
  106. [div class=buttons2]
  107. [div=display:inline-block;height:1.5px;background-color:white;width:28%;margin-right:3px;position:relative;top:-8px;][/div][div class="button navbutton3"]♡[div=display:none]3[/div][/div][div=display:inline-block;height:1.5px;background-color:white;width:22.5%;margin-left:3px;margin-right:3px;position:relative;top:-8px;][/div][div class="button navbutton4"]♡[div=display:none]4[/div][/div][div=display:inline-block;height:1.5px;background-color:white;width:28%;margin-left:3px;position:relative;top:-8px;][/div]
  108.  
  109. [/div]
  110.  
  111. [/div]
  112. [/div]
  113.  
  114. [div class=tabnavm]
  115. [div class=buttonsm]
  116. [div=display:inline-block;height:2px;background-color:white;width:22.2%;margin-right:0.5vw;position:relative;top:-8px;][/div][div class="button navbutton1 buttonselect"]♡[div=display:none]1[/div][/div][div=display:inline-block;height:2px;background-color:white;width:10%;margin-left:0.5vw;margin-right:0.5vw;position:relative;top:-8px;][/div][div class="button navbutton2"]♡[div=display:none]2[/div][/div][div=display:inline-block;height:2px;background-color:white;width:10%;margin-left:0.5vw;margin-right:0.5vw;position:relative;top:-8px;][/div][div class="button navbutton3"]♡[div=display:none]3[/div][/div][div=display:inline-block;height:2px;background-color:white;width:10%;margin-left:0.5vw;margin-right:0.5vw;position:relative;top:-8px;][/div][div class="button navbutton4"]♡[div=display:none]4[/div][/div][div=display:inline-block;height:2px;background-color:white;width:22.2%;margin-left:0.5vw;position:relative;top:-8px;][/div]
  117.  
  118. [/div]
  119. [/div]
  120.  
  121. [/div]
  122. [/nobr]
  123.  
  124. [/div][/div]
  125.  
  126. [nobr]
  127.  
  128. [class=variations]
  129. --color-1: #A2BBD5;
  130. --color-2: #FCD8DC;
  131. --color-3: #E7F1FA;
  132. --color-4: #FCA0B3;
  133. --color-5: #FDFCF8;
  134. --color-6: #B6CEF0;
  135. --tcolor-1: #526172;
  136. --tcolor-2: #7192ba;
  137. --img-1: url('https://66.media.tumblr.com/f460b2ebd7ab922be8dc10f0a8642ecf/tumblr_p4gisvziBs1wrx1hlo4_1280.png');
  138. --img-2: url('https://pbs.twimg.com/media/DppF6n7XoAAgRId.jpg');
  139. --img-3: url('https://66.media.tumblr.com/87abb8df0fecbb9645f915283c9f898b/tumblr_p6hbhqX9OZ1wjiw6ao6_1280.jpg');
  140. --img-4: url('https://66.media.tumblr.com/3bf50939333f4a49033f8bab28715174/tumblr_pjo9u1vgAb1vg4w5d_1280.png');
  141. --img-5: url('https://66.media.tumblr.com/c21a3ba0885063261fd4736f7588a614/tumblr_pli8izy8sy1y04sa6o6_500.png');
  142. --img-6: url('https://66.media.tumblr.com/88936081ffe4d81c75f27cdbbf1c9958/tumblr_pgehlh9ac41xpvioxo3_400.png');
  143. --img-7: url('https://66.media.tumblr.com/f0fbefc5238e8417f909f7fa78380eaf/tumblr_pgehlh9ac41xpvioxo5_400.png');
  144. width:540px;
  145. margin:auto;
  146. [/class]
  147.  
  148. [class name=variations maxWidth="539px"]
  149. width:90vw;
  150. margin:auto;
  151. [/class]
  152.  
  153. [class name="container" minWidth="540px"]
  154. width:100%;
  155. background: var(--color-1);
  156. margin:auto;
  157. padding:10px;
  158. box-sizing:border-box;
  159. display:flex;
  160. justify-content: center;
  161. flex-flow: row;
  162. border-radius:2px;
  163. [/class]
  164.  
  165. [class name="container" maxWidth="539px"]
  166. width:100%;
  167. background: var(--color-1);
  168. margin:auto;
  169. padding:10px;
  170. box-sizing:border-box;
  171. display:flex;
  172. flex-flow: row wrap-reverse;
  173. justify-content: center;
  174. border-radius:2px;
  175. [/class]
  176.  
  177. [comment]----tab outer[/comment]
  178.  
  179. [class name=tabbox minWidth="540px"]
  180. height:400px;
  181. width:65%;
  182. background-color: var(--color-3);
  183. margin-right:2%;
  184. border-radius:2px;
  185. position:relative;
  186. [/class]
  187.  
  188. [class name=tabbox maxWidth="539px"]
  189. height:60vh;
  190. width:100%;
  191. background-color: var(--color-3);
  192. border-radius:2px;
  193. position:relative;
  194. [/class]
  195.  
  196. [class name=tabcontents minWidth="540px"]
  197. height:100%;
  198. width:100%;
  199. position:absolute;
  200. [/class]
  201.  
  202. [class name=tabcontents maxWidth="539px"]
  203. height:100%;
  204. width:100%;
  205. position:absolute;
  206. [/class]
  207.  
  208. [comment]----tab contents appearance[/comment]
  209.  
  210. [class name=tabaflex minWidth="540px"]
  211. height:90.5%;
  212. width:100%;
  213. padding:10px;
  214. display:flex;
  215. flex-flow: row wrap;
  216. box-sizing: border-box;
  217. justify:content:center;
  218. margin-top:11.5%;
  219. [/class]
  220.  
  221. [class name=tabaflex maxWidth="539px"]
  222. height:89%;
  223. width:100%;
  224. padding:8px;
  225. padding-top:10px;
  226. padding-bottom:10px;
  227. display:flex;
  228. flex-flow: row wrap;
  229. justify-content:center;
  230. box-sizing: border-box;
  231. margin-top:11%;
  232. [/class]
  233.  
  234. [class name=hoverpicb]
  235. height:45%;
  236. width:36%;
  237. padding:5px;
  238. box-sizing:border-box;
  239. border:1px solid white;
  240. border-radius:2px;
  241. margin-top:2%;
  242. [/class]
  243.  
  244. [class name=atabscroll]
  245. height:45%;
  246. width:60%;
  247. margin-top:2%;
  248. overflow:hidden;
  249. padding:5px;
  250. box-sizing:border-box;
  251. font-size:10px;
  252. color:black;
  253. text-align:justify;
  254. [/class]
  255.  
  256. [class name=atabscroll maxWidth="539px"]
  257. height:46%;
  258. width:60%;
  259. margin-top:2%;
  260. overflow:hidden;
  261. padding:5px;
  262. box-sizing:border-box;
  263. font-size:10px;
  264. color:black;
  265. text-align:justify;
  266. [/class]
  267.  
  268. [class name=ablock]
  269. height:20%;
  270. width:4%;
  271. [/class]
  272.  
  273. [class=atag]
  274. font-size:10.5px;
  275. background-color: var(--color-6);
  276. text-transform: uppercase;
  277. letter-spacing:0.5px;
  278. border-radius:3px;
  279. display:inline-block;
  280. padding-left:3px;
  281. padding-right:3px;
  282. margin-bottom:2px;
  283. margin-right:1px;
  284. [/class]
  285.  
  286. [comment]----tab contents history[/comment]
  287.  
  288. [class name=tabheader minWidth="540px"]
  289. height:18%;
  290. width:100%;
  291. background-color: var(--color-5);
  292. border-top-right-radius:2px;
  293. border-top-left-radius:2px;
  294. position:relative;
  295. [/class]
  296.  
  297. [class name=tabheader maxWidth="539px"]
  298. height:20%;
  299. width:100%;
  300. background-color: var(--color-5);
  301. border-top-right-radius:2px;
  302. border-top-left-radius:2px;
  303. position:relative;
  304. [/class]
  305.  
  306. [class=tabheaderquote]
  307. width:100%;
  308. height:85%;
  309. box-sizing:border-box;
  310. padding:5px;
  311. color: var(--color-4);
  312. font-size:25px;
  313. text-align:right;
  314. font-weight:bold;
  315. overflow:hidden;
  316. float:right;
  317. [/class]
  318.  
  319. [class name=tabheaderquote maxWidth="539px"]
  320. font-size:2.4em;
  321. width:60%;
  322. line-height:150%;
  323. overflow:hidden;
  324. margin-right:2px;
  325. [/class]
  326.  
  327. [class=tabheadersubtext]
  328. float:right;
  329. width:70%;
  330. font-size:7px;
  331. text-transform:uppercase;
  332. font-weight:100;
  333. [/class]
  334.  
  335. [class name=tabheadersubtext maxWidth="539px"]
  336. display:none;
  337. [/class]
  338.  
  339. [class=tabheadertag]
  340. height:45%;
  341. min-width:20%;
  342. max-width:150%;
  343. background-color: var(--color-2);
  344. color: var(--tcolor-1);
  345. padding:5px;
  346. padding-left:7px;
  347. padding-right:7px;
  348. box-sizing:border-box;
  349. border-radius:3px;
  350. display:inline-block;
  351. font-size:23px;
  352. font-weight:bold;
  353. letter-spacing:1.5px;
  354. line-height:60%;
  355. text-shadow:1.5px 1.5px #fff;
  356. position:absolute;
  357. top:78%;
  358. left:2%;
  359. font-style:oblique;
  360. [/class]
  361.  
  362. [class name=tabheadertag maxWidth="539px"]
  363. position:absolute;
  364. top:30%;
  365. left:4%;
  366. [/class]
  367.  
  368. [class name=tabhc minWidth="540px"]
  369. padding:10px;
  370. height:80%;
  371. display:flex;
  372. flex-flow:row nowrap;
  373. justify-content: space-evenly;
  374. align-content: center;
  375. margin-top:2%;
  376. box-sizing:border-box;
  377. [/class]
  378.  
  379. [class name=tabhc maxWidth="539px"]
  380. padding:5px;
  381. height:82.8%;
  382. display:flex;
  383. flex-flow:column;
  384. margin-top:2%;
  385. box-sizing:border-box;
  386. [/class]
  387.  
  388. [class name=tabhscroll minWidth="540px"]
  389. width:76%;
  390. height:100%;
  391. overflow:hidden;
  392. padding:5px;
  393. font-size:10px;
  394. color:black;
  395. box-sizing: border-box;
  396. text-align:justify;
  397. [/class]
  398.  
  399. [class name=tabhscroll maxWidth="539px"]
  400. width:100%;
  401. height:162%;
  402. overflow:hidden;
  403. padding:3px;
  404. font-size:10px;
  405. color:black;
  406. [/class]
  407.  
  408. [class name=tabhsidepicb minWidth="540px"]
  409. width:25%;
  410. height:calc(100% - 12px);
  411. border:1px solid white;
  412. border-radius:2px;
  413. padding:5px;
  414. margin-left:1%;
  415. [/class]
  416.  
  417. [class name=tabhsidepicb maxWidth="539px"]
  418. width:100%;
  419. height:23%;
  420. margin-top:2%;
  421. border:1px solid white;
  422. padding:5px;
  423. box-sizing:border-box;
  424. border-radius:2px;
  425. [/class]
  426.  
  427. [class name=tabhsidepic1 minWidth="540px"]
  428. height:100%;
  429. width:100%;
  430. background: var(--img-2);
  431. background-size:362%;
  432. background-position:50% 52%;
  433. border-radius:2px;
  434. [/class]
  435.  
  436. [class name=tabhsidepic1 maxWidth="539px"]
  437. height:100%;
  438. width:100%;
  439. background: var(--img-3);
  440. background-size:100%;
  441. border-radius:2px;
  442. [/class]
  443.  
  444. [class=scroll]
  445. height:100%;
  446. width:100%;
  447. overflow-y:scroll;
  448. padding-right:50px;
  449. [/class]
  450.  
  451. [comment]----persona tab (tab 2)[/comment]
  452.  
  453. [class=tabheadertagp]
  454. height:8%;
  455. min-width:20%;
  456. max-width:150%;
  457. background-color: var(--color-2);
  458. color: var(--tcolor-1);
  459. padding:5px;
  460. padding-left:7px;
  461. padding-right:7px;
  462. box-sizing:border-box;
  463. border-radius:3px;
  464. display:inline-block;
  465. font-size:23px;
  466. font-weight:bold;
  467. letter-spacing:1.5px;
  468. line-height:50%;
  469. text-shadow:1.5px 1.5px #fff;
  470. position:absolute;
  471. top:2%;
  472. left:3%;
  473. font-style:oblique;
  474. [/class]
  475.  
  476. [class name=tabpflex minWidth="540px"]
  477. height:90.5%;
  478. width:100%;
  479. padding:10px;
  480. display:flex;
  481. flex-flow: row wrap;
  482. box-sizing: border-box;
  483. justify:content:center;
  484. margin-top:11.5%;
  485. [/class]
  486.  
  487. [class name=tabpflex maxWidth="539px"]
  488. height:100%;
  489. width:100%;
  490. padding:5px;
  491. padding-top:10px;
  492. padding-bottom:10px;
  493. display:flex;
  494. flex-flow: column nowrap;
  495. justify-content:center;
  496. box-sizing: border-box;
  497. margin-top:11%;
  498. [/class]
  499.  
  500. [class name=tabpfscroll minWidth="540px"]
  501. height:45.5%;
  502. width:100%;
  503. overflow:hidden;
  504. padding:5px;
  505. text-align:justify;
  506. font-size:10px;
  507. color:black;
  508. box-sizing: border-box;
  509. margin-top:2%;
  510. margin-bottom:2%;
  511. [/class]
  512.  
  513. [class name=tabpfscroll maxWidth="539px"]
  514. height:64%;
  515. width:100%;
  516. overflow:hidden;
  517. padding:5px;
  518. text-align:justify;
  519. font-size:10px;
  520. color:black;
  521. box-sizing: border-box;
  522. margin-top:2%;
  523. margin-bottom:2%;
  524. [/class]
  525.  
  526. [class name=listgrp minWidth="540px"]
  527. height:25%;
  528. width:100%;
  529. display:flex;
  530. flex-flow: row nowrap;
  531. [/class]
  532.  
  533. [class name=listgrp maxWidth="539px"]
  534. height:34%;
  535. width:100%;
  536. display:flex;
  537. flex-flow: row nowrap;
  538. [/class]
  539.  
  540. [class name=perslist minWidth="540px"]
  541. height:100%;
  542. width:48%;
  543. background-color: var(--color-5);
  544. border-radius:2px;
  545. display:flex;
  546. padding:5px;
  547. box-sizing: border-box;
  548. flex-flow: row wrap;
  549. justify-content: center;
  550. align-content: space-evenly;
  551. margin-left:1.5%;
  552. margin-right:1.5%;
  553. position:relative;
  554. line-height:120%;
  555. [/class]
  556.  
  557. [class name=perslist maxWidth="539px"]
  558. height:100%;
  559. width:48%;
  560. background-color: var(--color-5);
  561. border-radius:2px;
  562. display:flex;
  563. padding:5px;
  564. box-sizing: border-box;
  565. flex-flow: row wrap;
  566. justify-content: center;
  567. align-content: space-evenly;
  568. margin-left:1.5%;
  569. margin-right:1.5%;
  570. position:relative;
  571. line-height:120%;
  572. [/class]
  573.  
  574. [class=persblock]
  575. height:3px;
  576. width:100%;
  577. [/class]
  578.  
  579. [class name=perslisttitle minWidth="540px"]
  580. width:100%;
  581. font-size:16px;
  582. color: var(--tcolor-2);
  583. letter-spacing:2px;
  584. font-weight:bold;
  585. position:absolute;
  586. top:-2px;
  587. text-shadow: 1.2px 1.2px var(--color-6);
  588. background-color: var(--color-6);
  589. padding-left:3%;
  590. border-top-right-radius:2px;
  591. border-top-left-radius:2px;
  592. box-sizing:border-box;
  593. [/class]
  594.  
  595. [class name=perslisttitle maxWidth="539px"]
  596. width:100%;
  597. font-size:14px;
  598. color: var(--tcolor-2);
  599. letter-spacing:2px;
  600. font-weight:bold;
  601. position:absolute;
  602. top:-2px;
  603. text-shadow: 1.2px 1.2px var(--color-6);
  604. background-color: var(--color-6);
  605. padding-left:3%;
  606. border-top-right-radius:2px;
  607. border-top-left-radius:2px;
  608. box-sizing:border-box;
  609. [/class]
  610.  
  611. [class=perstag]
  612. max-height:14px;
  613. font-size:9px;
  614. color:black;
  615. background-color: var(--color-1);
  616. border-radius:3px;
  617. min-width:2%;
  618. max-width:100%;
  619. display:inline-block;
  620. text-transform:uppercase;
  621. padding:2px;
  622. margin-right:2px;
  623. line-height:100%;
  624. [/class]
  625.  
  626. [comment]----tab contents extra[/comment]
  627.  
  628. [class name=tabpicheaderc]
  629. height:100%;
  630. width:30%;
  631. [/class]
  632.  
  633. [class name=tabpicheader]
  634. height: 48%;
  635. width: 100%;
  636. border-top-right-radius:2px;
  637. border-top-left-radius:2px;
  638. padding:5px;
  639. box-sizing:border-box;
  640. border:1px solid white;
  641. margin-bottom:10%;
  642. [/class]
  643.  
  644. [class name=tabfooter minWidth="540px"]
  645. height:18%;
  646. width:100%;
  647. background-color: var(--color-5);
  648. border-bottom-right-radius:2px;
  649. border-bottom-left-radius:2px;
  650. position:relative;
  651. margin-top:1%;
  652. [/class]
  653.  
  654. [class name=tabfooter maxWidth="539px"]
  655. height:19%;
  656. width:100%;
  657. background-color: var(--color-5);
  658. border-top-right-radius:2px;
  659. border-top-left-radius:2px;
  660. position:relative;
  661. margin-top:0%;
  662. [/class]
  663.  
  664. [class=tabfooterquote]
  665. width:100%;
  666. height:85%;
  667. box-sizing:border-box;
  668. padding:5px;
  669. color: var(--color-4);
  670. font-size:25px;
  671. text-align:left;
  672. font-weight:bold;
  673. overflow:hidden;
  674. float:left;
  675. [/class]
  676.  
  677. [class name=tabfooterquote maxWidth="539px"]
  678. font-size:2.4em;
  679. width:60%;
  680. line-height:150%;
  681. overflow:hidden;
  682. margin-right:2px;
  683. [/class]
  684.  
  685. [class=tabfootersubtext]
  686. float:left;
  687. width:70%;
  688. font-size:7px;
  689. text-transform:uppercase;
  690. font-weight:100;
  691. [/class]
  692.  
  693. [class name=tabfootersubtext maxWidth="539px"]
  694. display:none;
  695. [/class]
  696.  
  697. [class=tabfootertag]
  698. height:45%;
  699. min-width:10%;
  700. max-width:150%;
  701. background-color: var(--color-2);
  702. color: var(--tcolor-1);
  703. padding:5px;
  704. padding-left:7px;
  705. padding-right:7px;
  706. box-sizing:border-box;
  707. border-radius:3px;
  708. display:inline-block;
  709. font-size:23px;
  710. font-weight:bold;
  711. letter-spacing:1.5px;
  712. line-height:60%;
  713. text-shadow:1.5px 1.5px #fff;
  714. position:absolute;
  715. top:-22%;
  716. right:4%;
  717. font-style:oblique;
  718. [/class]
  719.  
  720. [class name=tabfootertag maxWidth="539px"]
  721. position:absolute;
  722. top:20%;
  723. right:4%;
  724. [/class]
  725.  
  726. [class name=tabfc minWidth="540px"]
  727. padding:10px;
  728. height:81.5%;
  729. display:flex;
  730. flex-flow: row wrap;
  731. box-sizing:border-box;
  732. padding-bottom:0px;
  733. position:relative;
  734. [/class]
  735.  
  736. [class name=tabfc maxWidth="539px"]
  737. padding:5px;
  738. height:81%;
  739. display:flex;
  740. flex-flow: row wrap;
  741. box-sizing:border-box;
  742. justify-content:center;
  743. [/class]
  744.  
  745. [class name=tabfcscroll minWidth="540px"]
  746. height:97.5%;
  747. width:68%;
  748. padding:5px;
  749. overflow:hidden;
  750. box-sizing:border-box;
  751. margin-left:2%;
  752. font-size:10px;
  753. color:black;
  754. text-align:justify;
  755. [/class]
  756.  
  757. [class name=tabfcscroll maxWidth="539px"]
  758. height:97.5%;
  759. width:66%;
  760. padding:5px;
  761. overflow:hidden;
  762. box-sizing:border-box;
  763. margin-left:2%;
  764. font-size:10px;
  765. color:black;
  766. text-align:justify;
  767. [/class]
  768.  
  769. [class=etag]
  770. font-size:12px;
  771. background-color: var(--color-6);
  772. color:black;
  773. border-radius:3px;
  774. padding:3px;
  775. padding-top:1px;
  776. padding-bottom:1px;
  777. text-transform:uppercase;
  778. letter-spacing:0.3px;
  779. box-sizing:border-box;
  780. display:inline-block;
  781. margin-bottom:2px;
  782. margin-right:1px;
  783. [/class]
  784.  
  785. [comment]----navigation side bar[/comment]
  786.  
  787. [class name=navbar minWidth="540px"]
  788. height:400px;
  789. width: 35%;
  790. background-color: var(--color-2);
  791. border-radius:2px;
  792. display:flex;
  793. flex-flow: column nowrap;
  794. align-content:center;
  795. [/class]
  796.  
  797. [class name=navbar maxWidth="539px"]
  798. height:28vh;
  799. margin-bottom:2%;
  800. width:100%;
  801. background-color: var(--color-2);
  802. border-radius:2px;
  803. flex-flow: row wrap;
  804. justify-content:space-evenly;
  805. box-sizing:border-box;
  806. padding:5px;
  807. display:flex;
  808. [/class]
  809.  
  810. [class name=navbarimgb minWidth="540px"]
  811. height:140px;
  812. width:140px;
  813. border-radius:2px;
  814. border:1px solid white;
  815. padding:5px;
  816. margin-top:4%;
  817. align-self:center;
  818. [/class]
  819.  
  820. [class name=navbarimgb maxWidth="539px"]
  821. padding:5px;
  822. height:100px;
  823. width:100px;
  824. border-radius:2px;
  825. border:1px solid white;
  826. align-self:flex-start;
  827. display:block;
  828. position:relative;
  829. margin-top:4%;
  830. [/class]
  831.  
  832. [class name=navbarimg minWidth="540px"]
  833. height:100%;
  834. width:100%;
  835. background: var(--img-1);
  836. background-size:100%;
  837. border-radius:2px;
  838. [/class]
  839.  
  840. [class name=navbarimg maxWidth="539px"]
  841. height:100%;
  842. width:100%;
  843. background: var(--img-1);
  844. background-size:111%;
  845. border-radius:2px;
  846. [/class]
  847.  
  848. [class name=navbars minWidth="540px"]
  849. height:70%;
  850. width:100%;
  851. display:flex;
  852. flex-flow:column nowrap;
  853. [/class]
  854.  
  855. [class name=navbars maxWidth="539px"]
  856. height:70%;
  857. width:60%;
  858. display:flex;
  859. flex-direction:column;
  860. margin-left:2%;
  861. [/class]
  862.  
  863. [class name=name minWidth="540px"]
  864. font-size:2.1em;
  865. color: var(--color-1);
  866. text-align:center;
  867. font-weight:bold;
  868. margin-top:3%;
  869. text-shadow:2px 2px white;
  870. [/class]
  871.  
  872. [class name=name maxWidth="539px"]
  873. font-size:1.8em;
  874. color: var(--color-1);
  875. font-weight:bold;
  876. margin-left:3%;
  877. text-shadow:2px 2px white;
  878. [/class]
  879.  
  880. [class name=infotagc minWidth="540px"]
  881. min-height:10%;
  882. max-height:40%;
  883. width:100%;
  884. padding:5px;
  885. display:flex;
  886. flex-flow: row wrap;
  887. justify-content:center;
  888. box-sizing:border-box;
  889. margin-top:2%;
  890. align-content:center;
  891. text-align:center;
  892. [/class]
  893.  
  894. [class name=infotagc maxWidth="539px"]
  895. min-height:10%;
  896. max-height:40%;
  897. width:100%;
  898. padding:5px;
  899. display:flex;
  900. flex-flow: row wrap;
  901. justify-content:space-evenly;
  902. box-sizing:border-box;
  903. margin-top:3%;
  904. [/class]
  905.  
  906. [class=infotag]
  907. max-width:110px;
  908. min-width:10px;
  909. font-size:10px;
  910. background-color: var(--color-4);
  911. color:black;
  912. border-radius:3px;
  913. padding:3px;
  914. text-transform:uppercase;
  915. letter-spacing:0.3px;
  916. box-sizing:border-box;
  917. display:inline-block;
  918. margin-right:3px;
  919. [/class]
  920.  
  921. [class name=tabnav minWidth="540px"]
  922. height:30%;
  923. width:100%;
  924. display:flex;
  925. flex-flow: column nowrap;
  926. position:relative;
  927. top:20px;
  928. [/class]
  929.  
  930. [class name=tabnav maxWidth="539px"]
  931. height:10%;
  932. width:100%;
  933. position:relative;
  934. display:flex;
  935. top:10px;
  936. [/class]
  937.  
  938. [class=buttons1]
  939. font-size:1.2em;
  940. color:white;
  941. width:100%;
  942. [/class]
  943.  
  944. [class name=buttons1 maxWidth="539px"]
  945. font-size:1.2em;
  946. color:white;
  947. width:100%;
  948. display:none;
  949. [/class]
  950.  
  951. [class=buttons2]
  952. font-size:1.2em;
  953. color:white;
  954. width:100%;
  955. margin-top:2%;
  956. [/class]
  957.  
  958. [class name=buttons2 maxWidth="539px"]
  959. font-size:1.2em;
  960. color:white;
  961. width:100%;
  962. display:none;
  963. [/class]
  964.  
  965. [class name=tabnavm minWidth="540px"]
  966. height:30%;
  967. width:100%;
  968. display:none;
  969. [/class]
  970.  
  971. [class name=tabnavm maxWidth="539px"]
  972. height:18%;
  973. width:100%;
  974. [/class]
  975.  
  976. [class name=buttonsm minWidth="540px"]
  977. font-size:1.2em;
  978. color:white;
  979. width:100%;
  980. display:none;
  981. [/class]
  982.  
  983. [class name=buttonsm maxWidth="539px"]
  984. font-size:1.2em;
  985. color:white;
  986. width:100%;
  987. padding-top:10px;
  988. margin:auto;
  989. [/class]
  990.  
  991. [class=button]
  992. color:white;
  993. transition:0.3s;
  994. cursor:pointer;
  995. display:inline;
  996. [/class]
  997.  
  998. [class name=button state=hover]
  999. text-shadow: 1.5px 1.5px var(--color-4);
  1000. transition:0.3s;
  1001. [/class]
  1002.  
  1003. [class=buttonselect]
  1004. text-shadow: 1.5px 1.5px var(--color-4);
  1005. pointer-events:none;
  1006. [/class]
  1007.  
  1008. [comment]----scripts[/comment]
  1009.  
  1010. [script class=button on=click]
  1011. hide tabcontents
  1012. removeClass buttonselect button
  1013.  
  1014. set currentTab (getText)
  1015.  
  1016. //buttons scripts
  1017. if (eq ${currentTab} ♡1) (addClass buttonselect navbutton1)
  1018. if (eq ${currentTab} ♡2) (addClass buttonselect navbutton2)
  1019. if (eq ${currentTab} ♡3) (addClass buttonselect navbutton3)
  1020. if (eq ${currentTab} ♡4) (addClass buttonselect navbutton4)
  1021.  
  1022. //tab scripts
  1023. if (eq ${currentTab} ♡1) (show tab1)
  1024. if (eq ${currentTab} ♡2) (show tab2)
  1025. if (eq ${currentTab} ♡3) (show tab3)
  1026. if (eq ${currentTab} ♡4) (show tab4)
  1027.  
  1028. [/script]
  1029.  
  1030. [/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!