API tools faq
paste
ooksie

swim good (uxie x dreamglow)

ooksie
Nov 22nd, 2020 (edited)
353
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 38.91 KB | None | 0 0
raw download clone embed print report
  1. [border=transparent;
  2. *background image on the cover tab;
  3. --bg: url('https://64.media.tumblr.com/4b7c4a9594f672e99b48f4b7beb7fdfa/c374669282d669ca-66/s1280x1920/7dc043eb35b6c0b853b74adca6ce608ded21051f.jpg');
  4. *tabs background;
  5. --bg-color: #EFEFEF;
  6. *search bar colour;
  7. --search: #fff;
  8. *text box colour;
  9. --color-1: #fff;
  10. *text box accent;
  11. --color-2: #cecece;
  12. *header text colour (the text in the search bars);
  13. --header: #000;
  14. *subheader text colour (headers in text box);
  15. --subheader: #8E8E8E;
  16. *body text colour;
  17. --t-color: #000;
  18. *button colour;
  19. --button: #47403e;
  20.  
  21. *images are categorised based on the tabs theyre in. images in tab 1 are aimg, tab 2 are bimg, and so on;
  22. --aimg-1: url('https://64.media.tumblr.com/3e4bb636a0bf5b4e9ce2f63abfe48180/4b35df3e648011d6-ed/s540x810/560e42df87f792dee7b995b0c697321000721340.jpg');
  23. --aimg-2: url('https://64.media.tumblr.com/ebe32bdf258d5667d65b7abe326c240d/4b35df3e648011d6-8e/s1280x1920/c35ef73fbf19bdc9e292186d6fa0ad8fac21cbda.jpg');
  24. --bimg-1: url('https://64.media.tumblr.com/13c34c507543f278334ddb7b8f2bf512/af2217ab40173667-c3/s1280x1920/3fa431c02dc955562fbbaf79bd54d51b9ef9d929.jpg');
  25. --bimg-2: url('https://64.media.tumblr.com/b7a828fe49add00994553b93165a081d/af2217ab40173667-2f/s1280x1920/b2a5f901db106e031d06174f7824ab4bfbc689d6.jpg');
  26. --cimg-1: url('https://64.media.tumblr.com/9f49758f232808705932493e729bbbe8/f13d581e9e32a95d-84/s1280x1920/3cccd388b304be927eb347fb9b83d8edd52c7708.jpg');
  27. --dimg-1: url('https://64.media.tumblr.com/0d8d57a0bfbb3aaccc76894ede4ee0d3/2b5167a9240573a2-6d/s1280x1920/bf1c4b0ac7c1c4c852c3644c3f5fc41d99b00659.png');
  28. --dimg-2: url('https://64.media.tumblr.com/96c0901380472cf3ba7ea8b7b0ab4d4b/2b5167a9240573a2-53/s1280x1920/90798c6f5fc6c0efa2dff0eccb8a73b062b5867f.png');
  29.  
  30. height:450px; width:500px; padding:0; padding-bottom:25px; line-height:0; margin:auto; position:relative;][border=transparent; height:100%; width:100%; padding:0; position:relative; display:flex; background: var(--bg-color); display:flex; align-items:center; justify-content:flex-end;]
  31.  
  32. [comment]----cover tabs----[/comment]
  33. [border=transparent; height:5%; width:80%; padding:0; overflow:hidden; display:flex; justify-content:center; margin-right:15px;][border=transparent; padding:0; margin-top:0px;][tabs]
  34.  
  35. [comment]----cover page (fill in character's name!)----[/comment]
  36. [tab=aaaaaaaaaa][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; pointer-events:none; display:flex; align-items:center; justify-content:center; background: var(--bg); background-size:cover; /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;]
  37.  
  38. [comment]----login (character's name/username)----[/comment]
  39. [border=transparent; height:9%; width:70%; padding:5px 12px; box-sizing:border-box; background: var(--search); border-radius:10px; display:flex; flex-flow: row nowrap; align-items:center; justify-content:center;]
  40.  
  41. [comment]----* * name * * ----[/comment]
  42. [border=transparent; height:100%; flex-grow:1; padding:0; display:flex; flex-flow: row nowrap; align-items:center; justify-content:flex-start; pointer-events:auto; overflow:hidden;]
  43. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--header); font-size:17px; line-height:100%;][font=DM Sans][comment]
  44. ----* * * character's name here!----
  45. [/comment]character name[/font][/border]
  46.  
  47. [border=transparent; height:20px; width:11px; padding:0; background: url('https://i.imgur.com/oopiHUP.gif'); background-size:100%; flex-shrink:0; background-position:center; opacity:0.85;][/border]
  48. [/border]
  49.  
  50. [comment]----search button----[/comment]
  51. [border=transparent; height:fit-content; width:fit-content; padding:0 3px; box-sizing:border-box; color: var(--header); line-height:100%; flex-shrink:0; font-size:16px;][fa]far fa-search[/fa][/border]
  52. [/border]
  53. [comment]----login end----[/comment]
  54. [/border][/tab]
  55. [comment]----cover page end----[/comment]
  56.  
  57. [comment]----* main content *----[/comment]
  58. [tab=aaaaaaaaaaaaa][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-color); position:absolute; top:0; left:0; display:flex; flex-flow: row nowrap;]
  59.  
  60. [comment]----tabs cover (edit buttons here!)----[/comment]
  61. [border=transparent; height:100%; width:50px; padding:15px 0; box-sizing:border-box; background: var(--bg-color); position:absolute; top:0; left:0; display:flex; flex-flow: column nowrap; align-items:center; justify-content:flex-start; pointer-events:none;]
  62.  
  63. [comment]----buttons container----[/comment]
  64. [border=transparent; height:40%; width:fit-content; padding:0; display:flex; flex-flow: column nowrap; justify-content:space-between; align-items:center;]
  65. [comment]----button 1----[/comment]
  66. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--button); font-size:16px; line-height:100%;][comment]
  67. ----* * * button icon here! (replace icon in fa-icon with your own)----
  68. [/comment][fa]fas fa-home[/fa][/border]
  69.  
  70. [comment]----button 2----[/comment]
  71. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--button); font-size:16px; line-height:100%;][comment]
  72. ----* * * button icon here! (replace icon in fa-icon with your own)----
  73. [/comment][fa]fas fa-user[/fa][/border]
  74.  
  75. [comment]----button 3----[/comment]
  76. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--button); font-size:16px; line-height:100%;][comment]
  77. ----* * * button icon here! (replace icon in fa-icon with your own)----
  78. [/comment][fa]fas fa-heart[/fa][/border]
  79.  
  80. [comment]----button 4----[/comment]
  81. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--button); font-size:16px; line-height:100%;][comment]
  82. ----* * * button icon here! (replace icon in fa-icon with your own)----
  83. [/comment][fa]fas fa-book[/fa][/border]
  84. [/border]
  85. [comment]----button container end----[/comment]
  86.  
  87. [comment]----* * name * *----[/comment]
  88. [border=transparent; height:calc(60% - 20px); width:90%; margin:20px 0 0 -0; padding:0; display:flex; align-items:center; justify-content:center; pointer-events:auto; overflow:hidden;][border=transparent; padding:0; display:flex; color: var(--header); font-size:18px; transform: rotate(-90deg); letter-spacing:0.5px; line-height:100%; white-space:nowrap;][font=DM Sans][comment]
  89. ----* * * character's name here!----
  90. [/comment]character name name[/font][/border][/border]
  91.  
  92. [/border]
  93. [comment]----tabs cover end----[/comment]
  94.  
  95. [comment]----main tabs----[/comment]
  96. [border=transparent; height:100%; width:50px; padding:15px; box-sizing:border-box; overflow:hidden; display:flex; justify-content:center;][border=transparent; padding:0; line-height:255%;][tabs]
  97.  
  98. [comment]----tab one (basics)----[/comment]
  99. [tab=.][border=transparent; height:450px; width:450px; padding:15px 10px; box-sizing:border-box; position:absolute; top:0; right:0; display:flex; flex-flow: column nowrap; line-height:0;]
  100.  
  101. [comment]----tab title----[/comment]
  102. [border=transparent; height:9%; width:70%; padding:5px 12px; box-sizing:border-box; background: var(--search); border-radius:8px; display:flex; flex-flow: row nowrap; align-items:center; justify-content:center; margin:0 auto 0 10px;]
  103.  
  104. [comment]----* * title * * ----[/comment]
  105. [border=transparent; height:100%; flex-grow:1; padding:0; display:flex; flex-flow: row nowrap; align-items:center; justify-content:flex-start; pointer-events:auto; overflow:hidden;]
  106. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--header); font-size:16px; line-height:100%;][font=DM Sans][comment]
  107. ----* * * tab title here!----
  108. [/comment]basics[/font][/border]
  109. [/border]
  110.  
  111. [comment]----search button----[/comment]
  112. [border=transparent; height:fit-content; width:fit-content; padding:0 3px; box-sizing:border-box; color: var(--header); line-height:100%; flex-shrink:0; font-size:16px; cursor:pointer;][fa]far fa-search[/fa][/border]
  113. [/border]
  114. [comment]----tab title end----[/comment]
  115.  
  116. [comment]----row one----[/comment]
  117. [border=transparent; height:40%; width:100%; padding:0; margin:auto 0; display:flex; flex-flow: row nowrap; align-items:center;]
  118. [comment]----image----[/comment]
  119. [border=transparent; height:97%; width:37%; padding:0; flex-shrink:0; margin-right:10px; background: var(--aimg-1); background-size:cover;
  120. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  121.  
  122. [comment]----basics contents 1----[/comment]
  123. [border=transparent; height:100%; flex-grow:1; padding:0; display:flex; flex-flow: column nowrap; background: var(--color-1); border-radius:10px; overflow:hidden;]
  124.  
  125. [comment]----* username *----[/comment]
  126. [border=transparent; height:17%; width:fit-content; padding:5px 3px 1px 3px; margin:0 7px; box-sizing:border-box; display:flex; align-items:center; color: var(--subheader); font-size:18px; line-height:100%; border-bottom:2px solid var(--subheader);][font=Arimo][comment]
  127. ----* * * username here----
  128. [/comment]username[/font][/border]
  129.  
  130. [comment]----* * basics text * *----[/comment]
  131. [border=transparent; height:61%; width:100%; padding:5px 0 8px 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 12px; box-sizing:border-box;]
  132.  
  133. [comment]----subheader----[/comment]
  134. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--subheader); line-height:100%; font-size:16px;][font=Arimo][comment]
  135. ----* * *subheader here----
  136. [/comment]here[/font][/border]
  137.  
  138. [comment]----text----[/comment]
  139. [border=transparent; height:fit-content; width:calc(100% - 10px); padding:0; margin:5px 0 10px 10px; color: var(--t-color); line-height:120%; font-size:11px; text-align:justify;][font=Arimo][comment]
  140. ----* * * text starts here!----
  141. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis lacinia lacus, at euismod dolor gravida id. Ut in aliquet magna. Sed in tellus ut tellus fringilla feugiat laoreet quis diam. Cras tincidunt enim et felis ultricies, sed luctus augue interdum. Integer ornare, velit ut congue rhoncus, odio turpis pharetra nisi, scelerisque cursus ligula diam et turpis. Donec ac nunc bibendum, porta elit at, suscipit nulla. Cras pretium nisi neque, vel posuere libero lobortis non.
  142. [/font][/border]
  143. [comment]----text end---[/comment]
  144.  
  145. [comment]----subheader----[/comment]
  146. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--subheader); line-height:100%; font-size:16px;][font=Arimo][comment]
  147. ----* * *subheader here----
  148. [/comment]here[/font][/border]
  149.  
  150. [comment]----text----[/comment]
  151. [border=transparent; height:fit-content; width:calc(100% - 10px); padding:0; margin:5px 0 10px 10px; color: var(--t-color); line-height:120%; font-size:11px; text-align:justify;][font=Arimo][comment]
  152. ----* * * text starts here!----
  153. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis lacinia lacus, at euismod dolor gravida id. Ut in aliquet magna. Sed in tellus ut tellus fringilla feugiat laoreet quis diam. Cras tincidunt enim et felis ultricies, sed luctus augue interdum. Integer ornare, velit ut congue rhoncus, odio turpis pharetra nisi, scelerisque cursus ligula diam et turpis. Donec ac nunc bibendum, porta elit at, suscipit nulla. Cras pretium nisi neque, vel posuere libero lobortis non.
  154. [/font][/border]
  155. [comment]----text end---[/comment]
  156.  
  157. [/border][/border][/border]
  158. [comment]----basics text end----[/comment]
  159.  
  160. [comment]----post details----[/comment]
  161. [border=transparent; height:22%; width:100%; padding:0 10px 0 15px; border-top:5px solid var(--bg-color); box-sizing:border-box; display:flex; flex-flow: row nowrap; color: var(--color-2); align-items:center; justify-content:center;]
  162.  
  163. [comment]----* *notes* *----[/comment]
  164. [border=transparent; height:fit-content; flex-grow:1; padding:0; font-size:12px; line-height:100%;][font=Arimo][comment]
  165. ----* * * number of notes----
  166. [/comment]643 notes[/font][/border]
  167.  
  168. [comment]----post buttons (ignore!)----[/comment]
  169. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:11px; line-height:100%; cursor:pointer;][fa]fas fa-heart[/fa][/border]
  170. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:11px; line-height:100%; cursor:pointer;][fa]fas fa-comment-alt-dots[/fa][/border]
  171. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:11px; line-height:100%; cursor:pointer;][fa]far fa-share-alt[/fa][/border]
  172. [/border]
  173. [comment]----post details end----[/comment]
  174. [/border]
  175. [comment]----basics contents 1 end----[/comment]
  176. [/border]
  177. [comment]----row one end----[/comment]
  178.  
  179. [comment]----row two----[/comment]
  180. [border=transparent; height:40%; width:100%; padding:0; display:flex; flex-flow: row-reverse nowrap; align-items:center;]
  181. [comment]----image----[/comment]
  182. [border=transparent; height:97%; width:37%; padding:0; flex-shrink:0; margin-left:10px; background: var(--aimg-2); background-size:cover;
  183. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  184.  
  185. [comment]----basics contents 2----[/comment]
  186. [border=transparent; height:100%; flex-grow:1; padding:0; display:flex; flex-flow: column nowrap; background: var(--color-1); border-radius:10px; overflow:hidden;]
  187.  
  188. [comment]----* username *----[/comment]
  189. [border=transparent; height:17%; width:fit-content; padding:5px 3px 1px 3px; margin:0 7px; box-sizing:border-box; display:flex; align-items:center; color: var(--subheader); font-size:18px; line-height:100%; border-bottom:2px solid var(--subheader);][font=Arimo][comment]
  190. ----* * * username here----
  191. [/comment]username[/font][/border]
  192.  
  193. [comment]----* * basics text * *----[/comment]
  194. [border=transparent; height:61%; width:100%; padding:5px 0 8px 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 12px; box-sizing:border-box;]
  195.  
  196. [comment]----subheader----[/comment]
  197. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--subheader); line-height:100%; font-size:16px;][font=Arimo][comment]
  198. ----* * *subheader here----
  199. [/comment]here[/font][/border]
  200.  
  201. [comment]----text----[/comment]
  202. [border=transparent; height:fit-content; width:calc(100% - 10px); padding:0; margin:5px 0 10px 10px; color: var(--t-color); line-height:120%; font-size:11px; text-align:justify;][font=Arimo][comment]
  203. ----* * * text starts here!----
  204. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis lacinia lacus, at euismod dolor gravida id. Ut in aliquet magna. Sed in tellus ut tellus fringilla feugiat laoreet quis diam. Cras tincidunt enim et felis ultricies, sed luctus augue interdum. Integer ornare, velit ut congue rhoncus, odio turpis pharetra nisi, scelerisque cursus ligula diam et turpis. Donec ac nunc bibendum, porta elit at, suscipit nulla. Cras pretium nisi neque, vel posuere libero lobortis non.
  205. [/font][/border]
  206. [comment]----text end---[/comment]
  207.  
  208. [comment]----subheader----[/comment]
  209. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--subheader); line-height:100%; font-size:16px;][font=Arimo][comment]
  210. ----* * *subheader here----
  211. [/comment]here[/font][/border]
  212.  
  213. [comment]----text----[/comment]
  214. [border=transparent; height:fit-content; width:calc(100% - 10px); padding:0; margin:5px 0 10px 10px; color: var(--t-color); line-height:120%; font-size:11px; text-align:justify;][font=Arimo][comment]
  215. ----* * * text starts here!----
  216. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis lacinia lacus, at euismod dolor gravida id. Ut in aliquet magna. Sed in tellus ut tellus fringilla feugiat laoreet quis diam. Cras tincidunt enim et felis ultricies, sed luctus augue interdum. Integer ornare, velit ut congue rhoncus, odio turpis pharetra nisi, scelerisque cursus ligula diam et turpis. Donec ac nunc bibendum, porta elit at, suscipit nulla. Cras pretium nisi neque, vel posuere libero lobortis non.
  217. [/font][/border]
  218. [comment]----text end---[/comment]
  219.  
  220. [/border][/border][/border]
  221. [comment]----basics text end----[/comment]
  222.  
  223. [comment]----post details----[/comment]
  224. [border=transparent; height:22%; width:100%; padding:0 10px 0 15px; border-top:5px solid var(--bg-color); box-sizing:border-box; display:flex; flex-flow: row nowrap; color: var(--color-2); align-items:center; justify-content:center;]
  225.  
  226. [comment]----* *notes* *----[/comment]
  227. [border=transparent; height:fit-content; flex-grow:1; padding:0; font-size:12px; line-height:100%;][font=Arimo][comment]
  228. ----* * * number of notes----
  229. [/comment]643 notes[/font][/border]
  230.  
  231. [comment]----post buttons (ignore!)----[/comment]
  232. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:11px; line-height:100%; cursor:pointer;][fa]fas fa-heart[/fa][/border]
  233. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:11px; line-height:100%; cursor:pointer;][fa]fas fa-comment-alt-dots[/fa][/border]
  234. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:11px; line-height:100%; cursor:pointer;][fa]far fa-share-alt[/fa][/border]
  235. [/border]
  236. [comment]----post details end----[/comment]
  237. [/border]
  238. [comment]----basics contents 2 end----[/comment]
  239. [/border]
  240. [comment]----row two end----[/comment]
  241.  
  242. [/border][/tab]
  243. [comment]----tab one end----[/comment]
  244.  
  245.  
  246. [comment]----tab two (visage)----[/comment]
  247. [tab=.][border=transparent; height:450px; width:450px; padding:15px 10px; box-sizing:border-box; position:absolute; top:0; right:0; display:flex; flex-flow: column nowrap; align-items:center; line-height:0;]
  248.  
  249. [comment]----tab title----[/comment]
  250. [border=transparent; height:9%; width:70%; padding:5px 12px; box-sizing:border-box; background: var(--search); border-radius:8px; display:flex; flex-flow: row nowrap; align-items:center; justify-content:center; margin:0 auto;]
  251.  
  252. [comment]----* * title * * ----[/comment]
  253. [border=transparent; height:100%; flex-grow:1; padding:0; display:flex; flex-flow: row nowrap; align-items:center; justify-content:flex-start; pointer-events:auto; overflow:hidden;]
  254. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--header); font-size:16px; line-height:100%;][font=DM Sans][comment]
  255. ----* * * tab title here!----
  256. [/comment]visage[/font][/border]
  257. [/border]
  258.  
  259. [comment]----search button----[/comment]
  260. [border=transparent; height:fit-content; width:fit-content; padding:0 3px; box-sizing:border-box; color: var(--header); line-height:100%; flex-shrink:0; font-size:16px; cursor:pointer;][fa]far fa-search[/fa][/border]
  261. [/border]
  262. [comment]----tab title end----[/comment]
  263.  
  264. [comment]----row one----[/comment]
  265. [border=transparent; height:35%; width:100%; padding:0; margin:auto 0; display:flex; flex-flow: row nowrap; align-items:center; justify-content:space-around;]
  266. [comment]----image----[/comment]
  267. [border=transparent; height:97%; width:47%; padding:0; flex-shrink:0; background: var(--bimg-1); background-size:cover;
  268. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  269. [comment]----image----[/comment]
  270. [border=transparent; height:97%; width:47%; padding:0; flex-shrink:0; margin-left:10px; background: var(--bimg-2); background-size:cover;
  271. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  272. [/border]
  273. [comment]----row one end----[/comment]
  274.  
  275. [comment]----* *row two* *----[/comment]
  276. [border=transparent; height:46%; width:94%; padding:0; display:flex; flex-flow: row nowrap; align-items:center;]
  277.  
  278. [comment]----visage contents 1----[/comment]
  279. [border=transparent; height:100%; flex-grow:1; padding:0; display:flex; flex-flow: column nowrap; background: var(--color-1); border-radius:10px; overflow:hidden;]
  280.  
  281. [comment]----* username *----[/comment]
  282. [border=transparent; height:17%; width:fit-content; padding:5px 3px 1px 3px; margin:0 7px; box-sizing:border-box; display:flex; align-items:center; color: var(--subheader); font-size:18px; line-height:100%; border-bottom:2px solid var(--subheader);][font=Arimo][comment]
  283. ----* * * username here----
  284. [/comment]username[/font][/border]
  285.  
  286. [comment]----* * visage text * *----[/comment]
  287. [border=transparent; height:61%; width:100%; padding:5px 0 8px 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 12px; box-sizing:border-box;]
  288.  
  289. [comment]----subheader----[/comment]
  290. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--subheader); line-height:100%; font-size:16px;][font=Arimo][comment]
  291. ----* * *subheader here----
  292. [/comment]here[/font][/border]
  293.  
  294. [comment]----text----[/comment]
  295. [border=transparent; height:fit-content; width:calc(100% - 10px); padding:0; margin:5px 0 10px 10px; color: var(--t-color); line-height:120%; font-size:11px; text-align:justify;][font=Arimo][comment]
  296. ----* * * text starts here!----
  297. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis lacinia lacus, at euismod dolor gravida id. Ut in aliquet magna. Sed in tellus ut tellus fringilla feugiat laoreet quis diam. Cras tincidunt enim et felis ultricies, sed luctus augue interdum. Integer ornare, velit ut congue rhoncus, odio turpis pharetra nisi, scelerisque cursus ligula diam et turpis. Donec ac nunc bibendum, porta elit at, suscipit nulla. Cras pretium nisi neque, vel posuere libero lobortis non.
  298. [/font][/border]
  299. [comment]----text end---[/comment]
  300.  
  301. [comment]----subheader----[/comment]
  302. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--subheader); line-height:100%; font-size:16px;][font=Arimo][comment]
  303. ----* * *subheader here----
  304. [/comment]here[/font][/border]
  305.  
  306. [comment]----text----[/comment]
  307. [border=transparent; height:fit-content; width:calc(100% - 10px); padding:0; margin:5px 0 10px 10px; color: var(--t-color); line-height:120%; font-size:11px; text-align:justify;][font=Arimo][comment]
  308. ----* * * text starts here!----
  309. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis lacinia lacus, at euismod dolor gravida id. Ut in aliquet magna. Sed in tellus ut tellus fringilla feugiat laoreet quis diam. Cras tincidunt enim et felis ultricies, sed luctus augue interdum. Integer ornare, velit ut congue rhoncus, odio turpis pharetra nisi, scelerisque cursus ligula diam et turpis. Donec ac nunc bibendum, porta elit at, suscipit nulla. Cras pretium nisi neque, vel posuere libero lobortis non.
  310. [/font][/border]
  311. [comment]----text end---[/comment]
  312.  
  313. [/border][/border][/border]
  314. [comment]----visage text end----[/comment]
  315.  
  316. [comment]----post details----[/comment]
  317. [border=transparent; height:22%; width:100%; padding:0 10px 0 15px; border-top:5px solid var(--bg-color); box-sizing:border-box; display:flex; flex-flow: row nowrap; color: var(--color-2); align-items:center; justify-content:center;]
  318.  
  319. [comment]----* *notes* *----[/comment]
  320. [border=transparent; height:fit-content; flex-grow:1; padding:0; font-size:12px; line-height:100%;][font=Arimo][comment]
  321. ----* * * number of notes----
  322. [/comment]14,920 notes[/font][/border]
  323.  
  324. [comment]----post buttons (ignore!)----[/comment]
  325. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:11px; line-height:100%; cursor:pointer;][fa]fas fa-heart[/fa][/border]
  326. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:11px; line-height:100%; cursor:pointer;][fa]fas fa-comment-alt-dots[/fa][/border]
  327. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:11px; line-height:100%; cursor:pointer;][fa]far fa-share-alt[/fa][/border]
  328. [/border]
  329. [comment]----post details end----[/comment]
  330. [/border]
  331. [comment]----visage contents end----[/comment]
  332. [/border]
  333. [comment]----row two end----[/comment]
  334.  
  335. [/border][/tab]
  336. [comment]----tab two end----[/comment]
  337.  
  338.  
  339. [comment]----tab three (persona)----[/comment]
  340. [tab=.][border=transparent; height:450px; width:450px; padding:15px 10px; box-sizing:border-box; position:absolute; top:0; right:0; display:flex; flex-flow: column nowrap; line-height:0;]
  341.  
  342. [comment]----tab title----[/comment]
  343. [border=transparent; height:9%; width:70%; padding:5px 12px; box-sizing:border-box; background: var(--search); border-radius:8px; display:flex; flex-flow: row nowrap; align-items:center; justify-content:center; margin:0 10px 0 auto;]
  344.  
  345. [comment]----* * title * * ----[/comment]
  346. [border=transparent; height:100%; flex-grow:1; padding:0; display:flex; flex-flow: row nowrap; align-items:center; justify-content:flex-start; pointer-events:auto; overflow:hidden;]
  347. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--header); font-size:16px; line-height:100%;][font=DM Sans][comment]
  348. ----* * * tab title here!----
  349. [/comment]persona[/font][/border]
  350. [/border]
  351.  
  352. [comment]----search button----[/comment]
  353. [border=transparent; height:fit-content; width:fit-content; padding:0 3px; box-sizing:border-box; color: var(--header); line-height:100%; flex-shrink:0; font-size:16px; cursor:pointer;][fa]far fa-search[/fa][/border]
  354. [/border]
  355. [comment]----tab title end----[/comment]
  356.  
  357. [comment]----row----[/comment]
  358. [border=transparent; height:88%; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:center; margin:auto 0 0 0;]
  359.  
  360. [comment]----persona contents----[/comment]
  361. [border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow: column nowrap; align-items:center; background: var(--color-1); border-radius:10px; overflow:hidden;]
  362.  
  363. [comment]----* username *----[/comment]
  364. [border=transparent; height:8%; width:fit-content; padding:5px 3px 1px 3px; margin:0 7px; box-sizing:border-box; display:flex; align-items:center; color: var(--subheader); font-size:18px; line-height:100%; border-bottom:2px solid var(--subheader); margin-right:auto;][font=Arimo][comment]
  365. ----* * * username here----
  366. [/comment]username[/font][/border]
  367.  
  368. [comment]----post image + source----[/comment]
  369. [border=transparent; height:calc(37% - 5px); width:100%; padding:0; display:flex; flex-flow: column nowrap; align-items:center; margin:5px 0 0 0;]
  370. [border=transparent; height:88%; width:95%; padding:0; background: var(--cimg-1); flex-shrink:0; background-size:cover;
  371. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  372.  
  373. [comment]----* source *----[/comment]
  374. [border=transparent; height:12%; width:100%; padding:0 10px; box-sizing:border-box; color: var(--subheader); font-size:10px; letter-spacing:0.5px; display:flex; align-items:flex-end; line-height:100%;][font=Arimo][comment]
  375. ----* * *source here!----
  376. [/comment]source: persona. maybe a short quote?[/font][/border]
  377. [/border]
  378.  
  379. [comment]----* * persona text * *----[/comment]
  380. [border=transparent; height:43%; width:100%; padding:5px 0 8px 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 12px; box-sizing:border-box;]
  381.  
  382. [comment]----subheader----[/comment]
  383. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--subheader); line-height:100%; font-size:16px;][font=Arimo][comment]
  384. ----* * *subheader here----
  385. [/comment]here[/font][/border]
  386.  
  387. [comment]----text----[/comment]
  388. [border=transparent; height:fit-content; width:calc(100% - 10px); padding:0; margin:5px 0 10px 10px; color: var(--t-color); line-height:120%; font-size:11px; text-align:justify;][font=Arimo][comment]
  389. ----* * * text starts here!----
  390. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis lacinia lacus, at euismod dolor gravida id. Ut in aliquet magna. Sed in tellus ut tellus fringilla feugiat laoreet quis diam. Cras tincidunt enim et felis ultricies, sed luctus augue interdum. Integer ornare, velit ut congue rhoncus, odio turpis pharetra nisi, scelerisque cursus ligula diam et turpis. Donec ac nunc bibendum, porta elit at, suscipit nulla. Cras pretium nisi neque, vel posuere libero lobortis non.
  391. [/font][/border]
  392. [comment]----text end---[/comment]
  393.  
  394. [comment]----subheader----[/comment]
  395. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--subheader); line-height:100%; font-size:16px;][font=Arimo][comment]
  396. ----* * *subheader here----
  397. [/comment]here[/font][/border]
  398.  
  399. [comment]----text----[/comment]
  400. [border=transparent; height:fit-content; width:calc(100% - 10px); padding:0; margin:5px 0 10px 10px; color: var(--t-color); line-height:120%; font-size:11px; text-align:justify;][font=Arimo][comment]
  401. ----* * * text starts here!----
  402. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis lacinia lacus, at euismod dolor gravida id. Ut in aliquet magna. Sed in tellus ut tellus fringilla feugiat laoreet quis diam. Cras tincidunt enim et felis ultricies, sed luctus augue interdum. Integer ornare, velit ut congue rhoncus, odio turpis pharetra nisi, scelerisque cursus ligula diam et turpis. Donec ac nunc bibendum, porta elit at, suscipit nulla. Cras pretium nisi neque, vel posuere libero lobortis non.
  403.  
  404. Praesent vitae dapibus ipsum. Duis venenatis tempor ante, ac dignissim eros scelerisque scelerisque. Proin placerat leo sit amet massa aliquam elementum. Nam sem ex, efficitur ut porttitor et, finibus sed dolor. Integer et pharetra dolor. Nunc varius massa sit amet venenatis vehicula. Sed in vehicula erat. Vivamus in ipsum nunc. Duis tincidunt nibh ac nibh volutpat mattis.
  405. [/font][/border]
  406. [comment]----text end---[/comment]
  407.  
  408. [/border][/border][/border]
  409. [comment]----persona text end----[/comment]
  410.  
  411. [comment]----post details----[/comment]
  412. [border=transparent; height:12%; width:100%; padding:0 10px 0 15px; border-top:5px solid var(--bg-color); box-sizing:border-box; display:flex; flex-flow: row nowrap; color: var(--color-2); align-items:center; justify-content:center;]
  413.  
  414. [comment]----* *notes* *----[/comment]
  415. [border=transparent; height:fit-content; flex-grow:1; padding:0; font-size:12px; line-height:100%;][font=Arimo][comment]
  416. ----* * * number of notes----
  417. [/comment]18,223 notes[/font][/border]
  418.  
  419. [comment]----post buttons (ignore!)----[/comment]
  420. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:11px; line-height:100%; cursor:pointer;][fa]fas fa-heart[/fa][/border]
  421. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:11px; line-height:100%; cursor:pointer;][fa]fas fa-comment-alt-dots[/fa][/border]
  422. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:11px; line-height:100%; cursor:pointer;][fa]far fa-share-alt[/fa][/border]
  423. [/border]
  424. [comment]----post details end----[/comment]
  425. [/border]
  426. [comment]----persona contents----[/comment]
  427. [/border]
  428. [comment]----row end----[/comment]
  429.  
  430. [/border][/tab]
  431. [comment]----tab three end----[/comment]
  432.  
  433.  
  434. [comment]----tab four (backstory)----[/comment]
  435. [tab=.][border=transparent; height:450px; width:450px; padding:15px 10px; box-sizing:border-box; position:absolute; top:0; right:0; display:flex; flex-flow: column nowrap; line-height:0;]
  436.  
  437. [comment]----tab title----[/comment]
  438. [border=transparent; height:9%; width:70%; padding:5px 12px; box-sizing:border-box; background: var(--search); border-radius:8px; display:flex; flex-flow: row nowrap; align-items:center; justify-content:center; margin:0 auto 0 10px;]
  439.  
  440. [comment]----* * title * * ----[/comment]
  441. [border=transparent; height:100%; flex-grow:1; padding:0; display:flex; flex-flow: row nowrap; align-items:center; justify-content:flex-start; pointer-events:auto; overflow:hidden;]
  442. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--header); font-size:16px; line-height:100%;][font=DM Sans][comment]
  443. ----* * * tab title here!----
  444. [/comment]backstory[/font][/border]
  445. [/border]
  446.  
  447. [comment]----search button----[/comment]
  448. [border=transparent; height:fit-content; width:fit-content; padding:0 3px; box-sizing:border-box; color: var(--header); line-height:100%; flex-shrink:0; font-size:16px; cursor:pointer;][fa]far fa-search[/fa][/border]
  449. [/border]
  450. [comment]----tab title end----[/comment]
  451.  
  452. [comment]----row one----[/comment]
  453. [border=transparent; height:55%; width:100%; padding:0; margin:auto 0; display:flex; flex-flow: row-reverse nowrap; align-items:flex-end;]
  454. [comment]----image----[/comment]
  455. [border=transparent; height:100%; width:36%; padding:0; flex-shrink:0; margin-left:12px; background: var(--dimg-1); background-size:cover;
  456. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  457.  
  458. [comment]----backstory contents----[/comment]
  459. [border=transparent; height:95%; flex-grow:1; padding:0; display:flex; flex-flow: column nowrap; background: var(--color-1); border-radius:10px; overflow:hidden;]
  460.  
  461. [comment]----* username *----[/comment]
  462. [border=transparent; height:13%; width:fit-content; padding:5px 3px 1px 3px; margin:0 7px; box-sizing:border-box; display:flex; align-items:center; color: var(--subheader); font-size:18px; line-height:100%; border-bottom:2px solid var(--subheader);][font=Arimo][comment]
  463. ----* * * username here----
  464. [/comment]username[/font][/border]
  465.  
  466. [comment]----* * backstory text * *----[/comment]
  467. [border=transparent; height:67%; width:100%; padding:5px 0 8px 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 12px; box-sizing:border-box;]
  468.  
  469. [comment]----subheader----[/comment]
  470. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--subheader); line-height:100%; font-size:16px;][font=Arimo][comment]
  471. ----* * *subheader here----
  472. [/comment]the story[/font][/border]
  473.  
  474. [comment]----text----[/comment]
  475. [border=transparent; height:fit-content; width:calc(100% - 10px); padding:0; margin:5px 0 10px 10px; color: var(--t-color); line-height:120%; font-size:11px; text-align:justify;][font=Arimo][comment]
  476. ----* * * text starts here!----
  477. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis lacinia lacus, at euismod dolor gravida id. Ut in aliquet magna. Sed in tellus ut tellus fringilla feugiat laoreet quis diam. Cras tincidunt enim et felis ultricies, sed luctus augue interdum. Integer ornare, velit ut congue rhoncus, odio turpis pharetra nisi, scelerisque cursus ligula diam et turpis. Donec ac nunc bibendum, porta elit at, suscipit nulla. Cras pretium nisi neque, vel posuere libero lobortis non.
  478. [/font][/border]
  479. [comment]----text end---[/comment]
  480.  
  481. [comment]----subheader----[/comment]
  482. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--subheader); line-height:100%; font-size:16px;][font=Arimo][comment]
  483. ----* * *subheader here----
  484. [/comment]misc.[/font][/border]
  485.  
  486. [comment]----text----[/comment]
  487. [border=transparent; height:fit-content; width:calc(100% - 10px); padding:0; margin:5px 0 10px 10px; color: var(--t-color); line-height:120%; font-size:11px; text-align:justify;][font=Arimo][comment]
  488. ----* * * text starts here!----
  489. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis lacinia lacus, at euismod dolor gravida id. Ut in aliquet magna. Sed in tellus ut tellus fringilla feugiat laoreet quis diam. Cras tincidunt enim et felis ultricies, sed luctus augue interdum. Integer ornare, velit ut congue rhoncus, odio turpis pharetra nisi, scelerisque cursus ligula diam et turpis. Donec ac nunc bibendum, porta elit at, suscipit nulla. Cras pretium nisi neque, vel posuere libero lobortis non.
  490. [/font][/border]
  491. [comment]----text end---[/comment]
  492.  
  493. [/border][/border][/border]
  494. [comment]----backstory text end----[/comment]
  495.  
  496. [comment]----post details----[/comment]
  497. [border=transparent; height:20%; width:100%; padding:0 10px 0 15px; border-top:5px solid var(--bg-color); box-sizing:border-box; display:flex; flex-flow: row nowrap; color: var(--color-2); align-items:center; justify-content:center;]
  498.  
  499. [comment]----* *notes* *----[/comment]
  500. [border=transparent; height:fit-content; flex-grow:1; padding:0; font-size:12px; line-height:100%;][font=Arimo][comment]
  501. ----* * * number of notes----
  502. [/comment]1,202 notes[/font][/border]
  503.  
  504. [comment]----post buttons (ignore!)----[/comment]
  505. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:11px; line-height:100%; cursor:pointer;][fa]fas fa-heart[/fa][/border]
  506. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:11px; line-height:100%; cursor:pointer;][fa]fas fa-comment-alt-dots[/fa][/border]
  507. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:11px; line-height:100%; cursor:pointer;][fa]far fa-share-alt[/fa][/border]
  508. [/border]
  509. [comment]----post details end----[/comment]
  510. [/border]
  511. [comment]----basics contents 1 end----[/comment]
  512. [/border]
  513. [comment]----row one end----[/comment]
  514.  
  515. [comment]----row two----[/comment]
  516. [border=transparent; height:28%; width:100%; padding:0; display:flex; flex-flow: row-reverse nowrap; align-items:center;]
  517.  
  518. [comment]----image----[/comment]
  519. [border=transparent; height:100%; width:100%; padding:0; flex-shrink:0; margin-left:10px; background: var(--dimg-2); background-size:cover;
  520. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  521.  
  522. [/border]
  523. [comment]----row two end----[/comment]
  524.  
  525. [/border][/tab]
  526. [comment]----tab four end----[/comment]
  527.  
  528. [/tabs][/border][/border]
  529. [comment]----main tabs end----[/comment]
  530.  
  531. [/border][/tab]
  532. [comment]----main content end----[/comment]
  533.  
  534. [tab=.]h[/tab][/tabs][/border][/border]
  535. [comment]----cover tabs end----[/comment]
  536.  
  537. [/border][comment]----signature! (do not remove!)-----
  538. [/comment][bg=transparent; height:fit-content; padding:0; width:100%; position:absolute; bottom:15px; left:10px; z-index:7;opacity:0.7;font-size:10px;text-align:center; line-height:100%;][font=Open Sans]♡design by dreamglow, coded by uxie♡[/font][/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!