API tools faq
paste
ooksie

hourglass for re:frain (uxie x triples)

ooksie
Oct 31st, 2020 (edited)
72
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 63.56 KB | None | 0 0
raw download clone embed print report
  1. [comment]
  2. [font=Archivo Black][font=Long Cang][font=Averia Serif Libre][font=Oswald][font=Raleway][font=Roboto]hello hello![/font][/font][/font][/font][/font][/font]
  3. [/comment][border=transparent;
  4. --bg-color: #fff;
  5. --border: #F1F1F1;
  6. --color-1: #8EB38A;
  7. --color-2: #BACDB6;
  8. --sidebar: #000;
  9. --t-color-1: #2b2b2b;
  10. --t-color-2: #fff;
  11.  
  12. --img-1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  13. --gimg-1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  14. --gimg-2: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  15. --gimg-3: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  16. --gimg-4: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  17. --img-2: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  18. --img-3: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  19. --img-4: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  20. --img-5: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  21. --rimg-a1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  22. --rimg-a2: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  23.  
  24. height:490px; width:740px; padding:0; padding-bottom:20px; position:relative; line-height:0; margin:auto;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-color); border:1px solid var(--border); border-left:0; position:relative; display:flex; justify-content:flex-start; align-items:center;]
  25.  
  26. [comment]----tab cover----[/comment]
  27. [border=transparent; height:100%; width:14%; padding:10px 0 15px 0; box-sizing:border-box; background: var(--sidebar); position:absolute; left:0; top:0; display:flex; flex-flow: column nowrap; align-items:center; justify-content:space-between; pointer-events:none;]
  28. [comment]----icon----[/comment]
  29. [border=transparent; height:70px; width:70px; padding:0; border-radius:50%; display:flex; align-items:center; justify-content:center; background-color: var(--color-1);]
  30. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%; font-size:35px; animation: fa-spin 8s linear infinite; color: var(--border);][comment]
  31. ----* * * icon here----
  32. [/comment][fa]fal fa-hourglass-half[/fa][/border]
  33. [/border]
  34.  
  35. [comment]----buttons----[/comment]
  36. [border=transparent; height:fit-content; width:fit-content; padding:0; display:flex; flex-flow: column nowrap;]
  37. [comment]----button----[/comment]
  38. [border=transparent; height:42px; width:42px; padding:0; border-radius:50%; display:flex; justify-content:center; align-items:center; margin:5px 0;]
  39. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%; font-size:28px; color: transparent; -webkit-text-stroke:2px var(--color-1); font-family:'Archivo Black', sans-serif;]1.[/border]
  40. [/border]
  41.  
  42. [comment]----button----[/comment]
  43. [border=transparent; height:42px; width:42px; padding:0; border-radius:50%; display:flex; justify-content:center; align-items:center; margin:5px 0;]
  44. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%; font-size:28px; color: transparent; -webkit-text-stroke:2px var(--color-1); font-family:'Archivo Black', sans-serif;]2.[/border]
  45. [/border]
  46.  
  47. [comment]----button----[/comment]
  48. [border=transparent; height:42px; width:42px; padding:0; border-radius:50%; display:flex; justify-content:center; align-items:center; margin:5px 0;]
  49. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%; font-size:28px; color: transparent; -webkit-text-stroke:2px var(--color-1); font-family:'Archivo Black', sans-serif;]3.[/border]
  50. [/border]
  51.  
  52. [comment]----button----[/comment]
  53. [border=transparent; height:42px; width:42px; padding:0; border-radius:50%; display:flex; justify-content:center; align-items:center; margin:5px 0;]
  54. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%; font-size:28px; color: transparent; -webkit-text-stroke:2px var(--color-1); font-family:'Archivo Black', sans-serif;]4.[/border]
  55. [/border]
  56. [/border]
  57. [comment]----buttons end----[/comment]
  58.  
  59. [comment]----name----[/comment]
  60. [border=transparent; height:fit-content; width:50%; padding:0; text-align:center; color: var(--bg-color); font-size:30px; font-family:'Long Cang', display; line-height:120%;][comment]
  61. ----* * *character's name here----
  62. [/comment]宋莉秦[/border]
  63. [/border]
  64.  
  65. [comment]----tabs----[/comment]
  66. [border=transparent; height:40%; width:8%; margin-left:15px; margin-top:-55px; padding:0; overflow:hidden; display:flex; justify-content:center;][border=transparent; padding:0; line-height:325%;][tabs]
  67.  
  68. [comment]----tab one (basics & appearance)----[/comment]
  69. [tab=.][border=transparent; height:100%; width:86%; padding:15px 25px; box-sizing:border-box; position:absolute; top:0; right:0; line-height:0; display:flex; flex-flow: row nowrap;]
  70. [comment]----line----[/comment]
  71. [border=transparent; height:0; width:100%; padding:0; border-top:5px solid var(--color-1); position:absolute; z-index:2; right:0; top:85px;][/border]
  72.  
  73. [border=transparent; height:100%; width:40%; padding:0; display:flex; flex-flow: row wrap; position:relative; z-index:3; flex-shrink:0;]
  74. [border=transparent; height:43%; width:100%; padding:0; display:flex; flex-flow: column nowrap; align-items:center; justify-content:center;]
  75. [comment]----icon----[/comment]
  76. [border=transparent; height:145px; width:145px; padding:5px; box-sizing:border-box; border:5px solid var(--color-1); background-color:var(--bg-color); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;][border=transparent; height:100%; width:100%; flex-shrink:0; padding:0; background: var(--img-1); background-size:cover; background-position:50% 50%; border-radius:50%;][/border][/border]
  77.  
  78. [comment]----name----[/comment]
  79. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:5px 0 2px 0; line-height:100%; color: var(--color-1); font-size:28px; font-family:'Raleway', sans-serif; font-weight:bold; letter-spacing:1.5px; -webkit-text-stroke:1px var(--color-1);][comment]
  80. ----* * * name here----
  81. [/comment]Song Liqin[/border]
  82.  
  83. [comment]----role----[/comment]
  84. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:90%; color: var(--color-1); font-size:17px; font-family:'Averia Serif Libre', serif;][comment]
  85. ----* * * role here----
  86. [/comment]the blackbird[/border]
  87. [/border]
  88.  
  89. [comment]----basics----[/comment]
  90. [border=transparent; height:54%; width:100%; padding:0; margin-top:5%; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow: row wrap;]
  91.  
  92. [comment]----copy this whole thing to get another piece of info----[/comment]
  93. [border=transparent; height:fit-content; width:100%; padding:0; position:relative; display:flex; justify-content:flex-end; align-items:center; margin:3px 0;]
  94. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-1); font-size:18px; font-weight:bold; -webkit-text-stroke:1px var(--color-1); font-family:'Raleway', sans-serif; letter-spacing:2px; position:absolute; left:12px; top:6px; line-height:100%;][comment]
  95. ----* * * info title here----
  96. [/comment]age.[/border]
  97. [border=transparent; height:fit-content; min-height:35px; width:85%; padding:3px 8px 3px 35px; box-sizing:border-box; background: var(--border); color:var(--t-color-1); font-family:'Roboto', sans-serif; line-height:130%; font-size:13px; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;][comment]
  98. ----* * *character info here----
  99. [/comment]hello[/border]
  100. [/border]
  101. [comment]----copy me too!----[/comment]
  102.  
  103. [comment]----copy this whole thing to get another piece of info----[/comment]
  104. [border=transparent; height:fit-content; width:100%; padding:0; position:relative; display:flex; justify-content:flex-end; align-items:center; margin:3px 0;]
  105. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-1); font-size:18px; font-weight:bold; -webkit-text-stroke:1px var(--color-1); font-family:'Raleway', sans-serif; letter-spacing:2px; position:absolute; left:12px; top:6px; line-height:100%;][comment]
  106. ----* * * info title here----
  107. [/comment]gender.[/border]
  108. [border=transparent; height:fit-content; min-height:35px; width:85%; padding:3px 8px 3px 65px; box-sizing:border-box; background: var(--border); color:var(--t-color-1); font-family:'Roboto', sans-serif; line-height:130%; font-size:13px; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;][comment]
  109. ----* * *character info here----
  110. [/comment]hellooo[/border]
  111. [/border]
  112. [comment]----copy me too!----[/comment]
  113.  
  114. [comment]----copy this whole thing to get another piece of info----[/comment]
  115. [border=transparent; height:fit-content; width:100%; padding:0; position:relative; display:flex; justify-content:flex-end; align-items:center; margin:3px 0;]
  116. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-1); font-size:18px; font-weight:bold; -webkit-text-stroke:1px var(--color-1); font-family:'Raleway', sans-serif; letter-spacing:2px; position:absolute; left:12px; top:6px; line-height:100%;][comment]
  117. ----* * * info title here----
  118. [/comment]sexuality.[/border]
  119. [border=transparent; height:fit-content; min-height:35px; width:85%; padding:3px 8px 3px 65px; box-sizing:border-box; background: var(--border); color:var(--t-color-1); font-family:'Roboto', sans-serif; line-height:130%; font-size:13px; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;][comment]
  120. ----* * *character info here----
  121. [/comment]hellooo[/border]
  122. [/border]
  123. [comment]----copy me too!----[/comment]
  124.  
  125. [comment]----copy this whole thing to get another piece of info----[/comment]
  126. [border=transparent; height:fit-content; width:100%; padding:0; position:relative; display:flex; justify-content:flex-end; align-items:center; margin:3px 0;]
  127. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-1); font-size:18px; font-weight:bold; -webkit-text-stroke:1px var(--color-1); font-family:'Raleway', sans-serif; letter-spacing:2px; position:absolute; left:12px; top:6px; line-height:100%;][comment]
  128. ----* * * info title here----
  129. [/comment]birthday.[/border]
  130. [border=transparent; height:fit-content; min-height:35px; width:85%; padding:3px 8px 3px 65px; box-sizing:border-box; background: var(--border); color:var(--t-color-1); font-family:'Roboto', sans-serif; line-height:130%; font-size:13px; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;][comment]
  131. ----* * *character info here----
  132. [/comment]hellooo[/border]
  133. [/border]
  134. [comment]----copy me too!----[/comment]
  135.  
  136. [comment]----copy this whole thing to get another piece of info----[/comment]
  137. [border=transparent; height:fit-content; width:100%; padding:0; position:relative; display:flex; justify-content:flex-end; align-items:center; margin:3px 0;]
  138. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-1); font-size:18px; font-weight:bold; -webkit-text-stroke:1px var(--color-1); font-family:'Raleway', sans-serif; letter-spacing:2px; position:absolute; left:12px; top:6px; line-height:100%;][comment]
  139. ----* * * info title here----
  140. [/comment]ethnicity.[/border]
  141. [border=transparent; height:fit-content; min-height:35px; width:85%; padding:3px 8px 3px 65px; box-sizing:border-box; background: var(--border); color:var(--t-color-1); font-family:'Roboto', sans-serif; line-height:130%; font-size:13px; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;][comment]
  142. ----* * *character info here----
  143. [/comment]hellooo[/border]
  144. [/border]
  145. [comment]----copy me too!----[/comment]
  146.  
  147. [comment]----copy this whole thing to get another piece of info----[/comment]
  148. [border=transparent; height:fit-content; width:100%; padding:0; position:relative; display:flex; justify-content:flex-end; align-items:center; margin:3px 0;]
  149. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-1); font-size:18px; font-weight:bold; -webkit-text-stroke:1px var(--color-1); font-family:'Raleway', sans-serif; letter-spacing:2px; position:absolute; left:12px; top:6px; line-height:100%;][comment]
  150. ----* * * info title here----
  151. [/comment]blah.[/border]
  152. [border=transparent; height:fit-content; min-height:35px; width:85%; padding:3px 8px 3px 65px; box-sizing:border-box; background: var(--border); color:var(--t-color-1); font-family:'Roboto', sans-serif; line-height:130%; font-size:13px; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;][comment]
  153. ----* * *character info here----
  154. [/comment]hellooo[/border]
  155. [/border]
  156. [comment]----copy me too!----[/comment]
  157.  
  158. [comment]----copy this whole thing to get another piece of info----[/comment]
  159. [border=transparent; height:fit-content; width:100%; padding:0; position:relative; display:flex; justify-content:flex-end; align-items:center; margin:3px 0;]
  160. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-1); font-size:18px; font-weight:bold; -webkit-text-stroke:1px var(--color-1); font-family:'Raleway', sans-serif; letter-spacing:2px; position:absolute; left:12px; top:6px; line-height:100%;][comment]
  161. ----* * * info title here----
  162. [/comment]blah.[/border]
  163. [border=transparent; height:fit-content; min-height:35px; width:85%; padding:3px 8px 3px 65px; box-sizing:border-box; background: var(--border); color:var(--t-color-1); font-family:'Roboto', sans-serif; line-height:130%; font-size:13px; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;][comment]
  164. ----* * *character info here----
  165. [/comment]hellooo[/border]
  166. [/border]
  167. [comment]----copy me too!----[/comment]
  168.  
  169. [/border][/border][/border]
  170. [/border]
  171.  
  172. [border=transparent; height:100%; flex-grow:1; max-width:56.5%; margin-left:20px; background-color:var(--color-1); padding:10px; box-sizing:border-box; position:relative; z-index:3; display:flex; flex-flow: row wrap;]
  173. [comment]----appearance----[/comment]
  174. [border=transparent; height:74%; width:100%; padding:4px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 5px; box-sizing:border-box; display:flex; flex-flow: row wrap;]
  175.  
  176. [comment]----copy this whole thing to get one new bit of info!----[/comment]
  177. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start;]
  178. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--bg-color); font-family:'Raleway', sans-serif; -webkit-text-stroke:1px var(--bg-color); letter-spacing:1px; letter-spacing:1px; line-height:80%; margin-right:10px;][comment]
  179. ----* * * info title here----
  180. [/comment]info.[/border]
  181. [border=transparent; height:fit-content; flex-grow:1; padding:0; color: var(--t-color-2); text-align:justify; line-height:130%; font-family:'Roboto', sans-serif; font-size:11px;][comment]
  182. ----* * * info contents here----
  183. [/comment]lorem ipsumm[/border]
  184. [/border]
  185. [comment]----copy me too!----[/comment]
  186.  
  187. [/border][/border][/border]
  188.  
  189. [comment]----gallery----[/comment]
  190. [border=transparent; height:24%; width:100%; margin-top:2%; padding:1px; box-sizing:border-box; overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; padding-bottom:40px; overflow-x:scroll;][border=transparent; height:100%; width:fit-content; padding:0; display:flex; flex-flow: row nowrap;]
  191. [border=transparent; height:104px; width:104px; padding:0; background: var(--gimg-1); background-size:cover; background-position:50% 50%; margin:0 5px; flex-shrink:0;][/border]
  192. [border=transparent; height:104px; width:104px; padding:0; background: var(--gimg-2); background-size:cover; background-position:50% 50%; margin:0 5px; flex-shrink:0;][/border]
  193. [border=transparent; height:104px; width:104px; padding:0; background: var(--gimg-3); background-size:cover; background-position:50% 50%; margin:0 5px; flex-shrink:0;][/border]
  194. [border=transparent; height:104px; width:104px; padding:0; background: var(--gimg-4); background-size:cover; background-position:50% 50%; margin:0 5px; flex-shrink:0;][/border]
  195. [/border][/border][/border]
  196. [/border]
  197. [/border]
  198.  
  199. [comment]----button select----[/comment]
  200. [border=transparent; height:42px; width:42px; padding:0; border-radius:50%; background-color: var(--color-1); display:flex; justify-content:center; align-items:center; position:absolute; left:30.3px; top:123.8px;]
  201. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%; font-size:28px; color: var(--bg-color); font-family:'Archivo Black', sans-serif; font-weight:bold;]1.[/border]
  202. [/border]
  203. [/tab]
  204. [comment]----tab one end----[/comment]
  205.  
  206. [comment]----tab two (personality)----[/comment]
  207. [tab=.][border=transparent; height:100%; width:86%; padding:15px; box-sizing:border-box; position:absolute; top:0; right:0; line-height:0; display:flex; flex-flow: row wrap;]
  208. [comment]----line----[/comment]
  209. [border=transparent; height:0; width:100%; padding:0; border-top:5px solid var(--color-1); position:absolute; z-index:2; right:0; top:85px;][/border]
  210.  
  211. [border=transparent; height:43%; width:100%; padding:10px; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:center; justify-content:center; position:relative; z-index:3;]
  212. [border=transparent; height:100%; width:40%; padding:0; display:flex; flex-flow: column nowrap; align-items:center; justify-content:center;]
  213. [comment]----icon----[/comment]
  214. [border=transparent; height:145px; min-height:145px; width:145px; padding:5px; box-sizing:border-box; border:5px solid var(--color-1); background-color:var(--bg-color); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;][border=transparent; height:100%; width:100%; flex-shrink:0; padding:0; background: var(--img-2); background-size:cover; background-position:50% 50%; border-radius:50%;][/border][/border]
  215.  
  216. [comment]----name----[/comment]
  217. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:5px 0 2px 0; line-height:100%; color: var(--color-1); font-size:28px; font-family:'Raleway', sans-serif; font-weight:bold; letter-spacing:1.5px; -webkit-text-stroke:1px var(--color-1);][comment]
  218. ----* * * name here----
  219. [/comment]Song Liqin[/border]
  220.  
  221. [comment]----role----[/comment]
  222. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:90%; color: var(--color-1); font-size:17px; font-family:'Averia Serif Libre', serif;][comment]
  223. ----* * * role here----
  224. [/comment]"a lil quote"[/border]
  225. [/border]
  226.  
  227. [comment]----music player----[/comment]
  228. [border=transparent; height:48%; width:45%; margin:0 25px 0 auto; padding:20px; box-sizing:border-box; background-color: var(--sidebar); border-radius:50px; margin-top:-52px; display:flex; flex-flow: row nowrap; align-items:center; position:relative; pointer-events:none;]
  229. [border=transparent; height:50px; width:50px; padding:0; background-color: var(--color-1); border-radius:50%; color: var(--sidebar); font-size:20px; display:flex; align-items:center; justify-content:center; position:relative; z-index:2;][fa]fas fa-play[/fa][/border]
  230.  
  231. [comment]----song info----[/comment]
  232. [border=transparent; height:fit-content; flex-grow:1; padding:0 5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center;]
  233. [comment]----song title----[/comment]
  234. [border=transparent; height:fit-content; width:fit-content; max-width:100%; padding:0; color: var(--bg-color); font-size:14px; text-transform:uppercase; font-family:'Oswald', sans-serif; line-height:130%; font-weight:bold; letter-spacing:1px;][comment]
  235. ----* * * song title here!----
  236. [/comment]君の脈で踊りたかった[/border]
  237.  
  238. [comment]----artist name----[/comment]
  239. [border=transparent; height:fit-content; width:fit-content; max-width:100%; padding:0; color: var(--border); font-size:11px; font-family:'Roboto', sans-serif; line-height:110%; letter-spacing:0.5px; margin-top:3px;][comment]
  240. ----* * *song artist here!----
  241. [/comment]by picon (dongdang cover)[/border]
  242. [/border]
  243. [comment]----song info end----[/comment]
  244.  
  245. [comment]----actual player----[/comment]
  246. [border=transparent; height:45px; width:45px; padding:0; overflow:hidden; position:absolute; z-index:1; left:22.5px; top:20px; border-radius:50%; pointer-events:auto;]
  247. [comment]----soundcloud----[/comment]
  248. [border=transparent; height:100px; width:180px; padding:0; margin-left:-7px; margin-top:-9px;]
  249. [media=soundcloud]https://soundcloud.com/ym2072/i-wanted-to-dance-in-your[/media]
  250. [/border]
  251.  
  252. [comment]----google drive----[/comment]
  253. [border=transparent; height:500px; width:500px; margin-top:-300px; margin-left:-88px; padding:0px; display:none;]
  254. [media=googledrive]1wdREzHCykQn1UeMRB546l6t8o7bxGknj[/media]
  255. [/border]
  256. [/border]
  257. [comment]----actual player end----[/comment]
  258. [/border]
  259. [comment]----music player end----[/comment]
  260. [/border]
  261.  
  262. [border=transparent; height:54.5%; width:100%; margin-top:2%; padding:0; display:flex; flex-flow: row nowrap;]
  263. [comment]----personality----[/comment]
  264. [border=transparent; height:100%; flex-grow:1; padding:12px 0; box-sizing:border-box; background-color:var(--color-1); 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 14px; box-sizing:border-box; color: var(--t-color-2); font-family:'Roboto', sans-serif; text-align:justify; line-height:130%; font-size:12px;][comment]
  265. ----* * *text starts here!----
  266. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec metus egestas, pulvinar risus ac, congue lacus. Phasellus dapibus pellentesque ex sit amet laoreet. Phasellus leo eros, mattis eget pretium ut, auctor fermentum erat. Curabitur felis ligula, hendrerit ut condimentum non, blandit quis nulla. Sed porttitor eros eu orci interdum euismod. Duis non dolor neque. Aliquam ut tellus vitae tellus sagittis vestibulum. Nullam at laoreet arcu, ac aliquet justo. Maecenas consequat quam nec condimentum elementum. Suspendisse aliquet erat ut commodo hendrerit.
  267.  
  268. Nulla hendrerit volutpat tempor. Integer tempus fermentum suscipit. Vivamus tincidunt convallis tincidunt. Morbi lobortis suscipit nisi vel consectetur. Vestibulum posuere urna at mi faucibus posuere. Praesent vel pulvinar massa. Morbi leo justo, molestie et sodales non, vehicula eu sapien. Fusce finibus, ipsum id dictum molestie, lorem purus ultrices augue, vitae faucibus mauris quam eu nunc. Integer ornare libero nisi, quis porttitor mauris lacinia vitae. Vivamus non molestie ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla ante. Etiam in imperdiet augue. Quisque dapibus maximus lectus et aliquam. Ut rutrum quis magna at feugiat. Duis in viverra lacus.
  269. [/border][/border][/border]
  270. [comment]----personality end----[/comment]
  271.  
  272. [comment]----image----[/comment]
  273. [border=transparent; height:100%; width:28%; padding:0; margin-left:15px; background: var(--img-3); background-size:cover; background-position:50% 50%; flex-shrink:0;][/border]
  274. [/border]
  275. [/border]
  276.  
  277. [comment]----button select----[/comment]
  278. [border=transparent; height:42px; width:42px; padding:0; border-radius:50%; background-color: var(--color-1); display:flex; justify-content:center; align-items:center; position:absolute; left:30.3px; top:175.8px;]
  279. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%; font-size:28px; color: var(--bg-color); font-family:'Archivo Black', sans-serif; font-weight:bold;]2.[/border]
  280. [/border]
  281. [/tab]
  282. [comment]----tab two end----[/comment]
  283.  
  284. [comment]----tab three (history)----[/comment]
  285. [tab=.][border=transparent; height:100%; width:86%; padding:15px 25px; box-sizing:border-box; position:absolute; top:0; right:0; line-height:0; display:flex; flex-flow: row nowrap;]
  286. [comment]----line----[/comment]
  287. [border=transparent; height:0; width:100%; padding:0; border-top:5px solid var(--color-1); position:absolute; z-index:2; right:0; top:85px;][/border]
  288.  
  289. [border=transparent; height:100%; width:42%; padding:0; display:flex; flex-flow: row wrap; position:relative; z-index:3; flex-shrink:0;]
  290. [border=transparent; height:43%; width:100%; padding:0 12px 0 0; box-sizing:border-box; display:flex; flex-flow: column nowrap; align-items:center; justify-content:center;]
  291. [comment]----icon----[/comment]
  292. [border=transparent; height:145px; width:145px; padding:5px; box-sizing:border-box; border:5px solid var(--color-1); background-color:var(--bg-color); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;][border=transparent; height:100%; width:100%; flex-shrink:0; padding:0; background: var(--img-4); background-size:cover; background-position:50% 50%; border-radius:50%;][/border][/border]
  293.  
  294. [comment]----name----[/comment]
  295. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:5px 0 2px 0; line-height:100%; color: var(--color-1); font-size:28px; font-family:'Raleway', sans-serif; font-weight:bold; letter-spacing:1.5px; -webkit-text-stroke:1px var(--color-1);][comment]
  296. ----* * * name here----
  297. [/comment]Song Liqin[/border]
  298.  
  299. [comment]----role----[/comment]
  300. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:90%; color: var(--color-1); font-size:17px; font-family:'Averia Serif Libre', serif;][comment]
  301. ----* * * role here----
  302. [/comment]what she regrets...[/border]
  303. [/border]
  304.  
  305. [comment]----text messages----[/comment]
  306. [border=transparent; height:55%; width:100%; padding:0; margin-top:4%; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:fit-content; width:50%; padding:0; display:flex; flex-flow: row wrap;]
  307.  
  308. [comment]----sent message----[/comment]
  309. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; justify-content:flex-end; align-items:flex-end; margin:3px 0; position:relative;]
  310. [comment]----time stamp----[/comment]
  311. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color-1); font-size:9px; line-height:100%; margin-right:5px; position:relative; top:-3px;]12:57[/border]
  312. [comment]----message contents----[/comment]
  313. [border=transparent; height:fit-content; width:fit-content; max-width:80.2%; padding:5px 5px 5px 8px; box-sizing:border-box; background-color:var(--color-1); line-height:120%; font-family:'Roboto', sans-serif; color: var(--t-color-2); font-size:11px; border-radius:5px;][comment]
  314. ----* * *message starts here----
  315. [/comment]lorem[/border]
  316. [comment]----pointy thing idk----[/comment]
  317. [border=transparent; height:0; width:0; padding:0; border-top:8px solid transparent; border-left:8px solid var(--color-1); align-self:center; margin-top:3px;][/border]
  318. [/border]
  319. [comment]----sent message end----[/comment]
  320.  
  321. [comment]----sent message (not delivered)----[/comment]
  322. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; justify-content:flex-end; align-items:flex-end; margin:3px 0; position:relative;]
  323. [comment]----time stamp----[/comment]
  324. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color-1); font-size:9px; line-height:100%; margin-right:5px; position:relative; top:-3px;]12:57[/border]
  325. [comment]----message contents----[/comment]
  326. [border=transparent; height:fit-content; width:fit-content; max-width:77%; padding:5px 5px 5px 8px; box-sizing:border-box; background-color:var(--color-1); line-height:120%; font-family:'Roboto', sans-serif; color: var(--t-color-2); font-size:11px; border-radius:5px;][comment]
  327. ----* * *message starts here----
  328. [/comment]lorem ipsum ur a bitch!!!!![/border]
  329. [comment]----pointy thing idk----[/comment]
  330. [border=transparent; height:0; width:0; padding:0; border-top:8px solid transparent; border-left:8px solid var(--color-1); align-self:center; margin-top:3px;][/border]
  331. [comment]----not sent----[/comment]
  332. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 3px; color: #ed4954; line-height:100%; font-size:13px; align-self:center;][fa]fas fa-exclamation-circle[/fa][/border]
  333. [/border]
  334. [comment]----sent message end----[/comment]
  335.  
  336. [comment]----sent message----[/comment]
  337. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; justify-content:flex-end; align-items:flex-end; margin:3px 0; position:relative;]
  338. [comment]----time stamp----[/comment]
  339. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color-1); font-size:9px; line-height:100%; margin-right:5px; position:relative; top:-3px;]12:57[/border]
  340. [comment]----message contents----[/comment]
  341. [border=transparent; height:fit-content; width:fit-content; max-width:77%; padding:5px 5px 5px 8px; box-sizing:border-box; background-color:var(--color-1); line-height:120%; font-family:'Roboto', sans-serif; color: var(--t-color-2); font-size:11px; border-radius:5px;][comment]
  342. ----* * *message starts here----
  343. [/comment]lorem ipsummmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm[/border]
  344. [comment]----pointy thing idk----[/comment]
  345. [border=transparent; height:0; width:0; padding:0; border-top:8px solid transparent; border-left:8px solid var(--color-1); align-self:center; margin-top:3px;][/border]
  346. [/border]
  347. [comment]----sent message end----[/comment]
  348.  
  349. [comment]----missed call----[/comment]
  350. [border=transparent; height:fit-content; width:100%; padding:0; border:1px solid var(--border); border-left:0; border-right:0; padding:5px 10px; box-sizing:border-box; color: var(--t-color-1); font-size:11px; font-family:'Roboto', sans-serif; display:flex; justify-content:center; margin:5px 0;]
  351. [border=transparent; height:fit-content; width:fit-content; padding:0; margin-right:8px; line-height:120%;][fa]fas fa-phone-alt[/fa][/border]
  352. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:120%;]missed call (1)[/border]
  353. [/border]
  354.  
  355. [comment]----sent message----[/comment]
  356. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; justify-content:flex-end; align-items:flex-end; margin:3px 0; position:relative;]
  357. [comment]----time stamp----[/comment]
  358. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color-1); font-size:9px; line-height:100%; margin-right:5px; position:relative; top:-3px;]12:57[/border]
  359. [comment]----message contents----[/comment]
  360. [border=transparent; height:fit-content; width:fit-content; max-width:77%; padding:5px 5px 5px 8px; box-sizing:border-box; background-color:var(--color-1); line-height:120%; font-family:'Roboto', sans-serif; color: var(--t-color-2); font-size:11px; border-radius:5px;][comment]
  361. ----* * *message starts here----
  362. [/comment]lorem ipsum ur a bitch!!!!![/border]
  363. [comment]----pointy thing idk----[/comment]
  364. [border=transparent; height:0; width:0; padding:0; border-top:8px solid transparent; border-left:8px solid var(--color-1); align-self:center; margin-top:3px;][/border]
  365. [/border]
  366. [comment]----sent message end----[/comment]
  367.  
  368. [comment]----received message----[/comment]
  369. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row-reverse nowrap; justify-content:flex-end; align-items:flex-end; margin:3px 0; position:relative;]
  370. [comment]----time stamp----[/comment]
  371. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color-1); font-size:9px; line-height:100%; margin-left:5px; position:relative; top:-3px;]12:57[/border]
  372. [comment]----message contents----[/comment]
  373. [border=transparent; height:fit-content; width:fit-content; max-width:77%; padding:5px 5px 5px 8px; box-sizing:border-box; background-color:var(--color-2); line-height:120%; font-family:'Roboto', sans-serif; color: var(--t-color-2); font-size:11px; border-radius:5px;][comment]
  374. ----* * *message starts here----
  375. [/comment]i guess this is f??? lmao idk ,y brother is dyinggggnooo[/border]
  376. [comment]----pointy thing idk----[/comment]
  377. [border=transparent; height:0; width:0; padding:0; border-top:8px solid transparent; border-right:8px solid var(--color-2); align-self:center; margin-top:3px;][/border]
  378. [/border]
  379. [comment]----received message end----[/comment]
  380.  
  381. [comment]----received message----[/comment]
  382. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row-reverse nowrap; justify-content:flex-end; align-items:flex-end; margin:3px 0; position:relative;]
  383. [comment]----time stamp----[/comment]
  384. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color-1); font-size:9px; line-height:100%; margin-left:5px; position:relative; top:-3px;]12:57[/border]
  385. [comment]----message contents----[/comment]
  386. [border=transparent; height:fit-content; width:fit-content; max-width:77%; padding:5px 5px 5px 8px; box-sizing:border-box; background-color:var(--color-2); line-height:120%; font-family:'Roboto', sans-serif; color: var(--t-color-2); font-size:11px; border-radius:5px;][comment]
  387. ----* * *message starts here----
  388. [/comment]i think this scrolls
  389. probablyyy[/border]
  390. [comment]----pointy thing idk----[/comment]
  391. [border=transparent; height:0; width:0; padding:0; border-top:8px solid transparent; border-right:8px solid var(--color-2); align-self:center; margin-top:3px;][/border]
  392. [/border]
  393. [comment]----received message end----[/comment]
  394.  
  395. [comment]----received message----[/comment]
  396. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row-reverse nowrap; justify-content:flex-end; align-items:flex-end; margin:3px 0; position:relative;]
  397. [comment]----time stamp----[/comment]
  398. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color-1); font-size:9px; line-height:100%; margin-left:5px; position:relative; top:-3px;]12:57[/border]
  399. [comment]----message contents----[/comment]
  400. [border=transparent; height:fit-content; width:fit-content; max-width:77%; padding:5px 5px 5px 8px; box-sizing:border-box; background-color:var(--color-2); line-height:120%; font-family:'Roboto', sans-serif; color: var(--t-color-2); font-size:11px; border-radius:5px;][comment]
  401. ----* * *message starts here----
  402. [/comment]i guess this is f??? lmao idk ,y brother is dyinggggnooo[/border]
  403. [comment]----pointy thing idk----[/comment]
  404. [border=transparent; height:0; width:0; padding:0; border-top:8px solid transparent; border-right:8px solid var(--color-2); align-self:center; margin-top:3px;][/border]
  405. [/border]
  406. [comment]----received message end----[/comment]
  407.  
  408. [/border][/border][/border]
  409. [/border]
  410.  
  411. [comment]----history----[/comment]
  412. [border=transparent; height:100%; flex-grow:1; max-width:56.5%; margin-left:10px; background-color:var(--color-1); padding:10px; box-sizing:border-box; position:relative; z-index:3; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 5px; box-sizing:border-box; color: var(--t-color-2); font-family:'Roboto', sans-serif; font-size:12px; line-height:130%; text-align:justify;][comment]
  413. ----* * * your history starts here----
  414. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet, odio vitae condimentum sollicitudin, dui justo tempor neque, sed accumsan mauris urna eu erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tellus ante, consectetur vitae metus eget, mattis mollis nisi. Vivamus eget eros ac urna cursus viverra vitae ac dolor. Sed ultrices lectus eget bibendum imperdiet. Nulla venenatis leo felis, id aliquam mauris elementum sed. Nunc pulvinar tincidunt tellus, at pellentesque urna auctor nec. Morbi bibendum urna auctor magna dictum, vel euismod nunc venenatis. Mauris dignissim sagittis lacus, ac fringilla leo. Sed sit amet elit vitae orci eleifend ornare sit amet cursus orci. Donec nec rhoncus lectus. Donec vulputate nunc id massa sodales, nec aliquet felis tristique.
  415.  
  416. Mauris bibendum tortor ac magna cursus finibus. Aenean tincidunt eget lorem in vehicula. Aliquam laoreet est ut placerat molestie. Nulla sed mollis enim. Aenean nec tortor at sem gravida ultricies id quis augue. In sit amet turpis quam. Nulla facilisi.
  417.  
  418. Cras et eros nisl. Duis tempus nisi rutrum dictum cursus. Nulla erat mauris, auctor id quam nec, luctus accumsan augue. Curabitur in sapien a lorem aliquet iaculis. Pellentesque sed dui et turpis auctor malesuada quis sodales sapien. Aenean nec scelerisque neque, eu sollicitudin neque. Vivamus ac congue velit. Sed iaculis enim a nisi porta, sit amet facilisis neque tempus. Quisque volutpat varius quam rutrum porttitor.
  419. [/border][/border][/border]
  420. [comment]----history end----[/comment]
  421. [/border]
  422.  
  423. [comment]----button select----[/comment]
  424. [border=transparent; height:42px; width:42px; padding:0; border-radius:50%; background-color: var(--color-1); display:flex; justify-content:center; align-items:center; position:absolute; left:30.3px; top:228px;]
  425. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%; font-size:28px; color: var(--bg-color); font-family:'Archivo Black', sans-serif; font-weight:bold;]3.[/border]
  426. [/border]
  427. [/tab]
  428. [comment]----tab three end----[/comment]
  429.  
  430. [comment]----tab four (misc & relationships)----[/comment]
  431. [tab=.][border=transparent; height:100%; width:86%; padding:15px 25px; box-sizing:border-box; position:absolute; top:0; right:0; line-height:0; display:flex; flex-flow: row nowrap;]
  432. [comment]----line----[/comment]
  433. [border=transparent; height:0; width:100%; padding:0; border-top:5px solid var(--color-1); position:absolute; z-index:2; right:0; top:85px;][/border]
  434.  
  435. [border=transparent; height:100%; width:40%; padding:0; display:flex; flex-flow: row wrap; position:relative; z-index:4; flex-shrink:0;]
  436. [border=transparent; height:43%; width:100%; padding:0; display:flex; flex-flow: column nowrap; align-items:center; justify-content:center;]
  437. [comment]----icon----[/comment]
  438. [border=transparent; height:145px; width:145px; padding:5px; box-sizing:border-box; border:5px solid var(--color-1); background-color:var(--bg-color); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;][border=transparent; height:100%; width:100%; flex-shrink:0; padding:0; background: var(--img-5); background-size:cover; background-position:50% 50%; border-radius:50%;][/border][/border]
  439.  
  440. [comment]----name----[/comment]
  441. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:5px 0 2px 0; line-height:100%; color: var(--color-1); font-size:28px; font-family:'Raleway', sans-serif; font-weight:bold; letter-spacing:1.5px; -webkit-text-stroke:1px var(--color-1);][comment]
  442. ----* * * name here----
  443. [/comment]Song Liqin[/border]
  444.  
  445. [comment]----role----[/comment]
  446. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:90%; color: var(--color-1); font-size:17px; font-family:'Averia Serif Libre', serif;][comment]
  447. ----* * * role here----
  448. [/comment]the blackbird[/border]
  449. [/border]
  450.  
  451. [comment]----misc----[/comment]
  452. [border=transparent; height:54%; width:100%; padding:10px 0; box-sizing:border-box; margin-top:5%; display:flex; flex-direction:column; overflow:hidden; background-color:var(--color-1); position:relative;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; display:flex; flex-flow: row wrap;]
  453.  
  454. [comment]----copy this whole thing to get one new bit of info!----[/comment]
  455. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start;]
  456. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--bg-color); font-family:'Raleway', sans-serif; -webkit-text-stroke:1px var(--bg-color); letter-spacing:1px; letter-spacing:1px; line-height:80%; margin-right:10px;][comment]
  457. ----* * * info title here----
  458. [/comment]info.[/border]
  459. [border=transparent; height:fit-content; flex-grow:1; padding:0; color: var(--t-color-2); text-align:justify; line-height:130%; font-family:'Roboto', sans-serif; font-size:11px;][comment]
  460. ----* * * info contents here----
  461. [/comment]lorem ipsumm[/border]
  462. [/border]
  463. [comment]----copy me too!----[/comment]
  464.  
  465. [/border][/border][/border]
  466.  
  467. [comment]----title----[/comment]
  468. [border=transparent; height:fit-content; min-height:30%; width:fit-content; max-width:15%; position:absolute; right:-27px; bottom:0; display:flex; justify-content:center; align-items:center; padding:0;]
  469. [border=transparent; display:flex; transform: rotate(90deg); font-family: 'Archivo Black', sans-serif; font-weight: bold; font-size:38px; align-self:center; line-height:150%; padding:0; padding-bottom:4px; box-sizing:border-box; color:transparent;-webkit-text-stroke:1.5px var(--color-1)]misc.[/border]
  470. [/border]
  471. [/border]
  472.  
  473. [comment]----relationships----[/comment]
  474. [border=transparent; height:100%; flex-grow:1; max-width:60.5%; padding:0; position:relative; z-index:3; display:flex; flex-flow: row nowrap; justify-content:flex-end;]
  475. [comment]----relationship tabs cover----[/comment]
  476. [border=transparent; height:15%; width:100%; padding:0 0 5px 0; box-sizing:border-box; background-color: var(--bg-color); position:absolute; top:0; left:0; display:flex; flex-flow: row nowrap; align-items:flex-end; pointer-events:none;]
  477. [border=transparent; height:fit-content; width:fit-content; font-family: 'Archivo Black', sans-serif; font-weight: bold; font-size:29px; padding:0; padding-bottom:4px; box-sizing:border-box; color:transparent;-webkit-text-stroke:1.5px var(--color-2); line-height:60%; position:relative; left:-5px; pointer-events:auto;]relationships.[/border]
  478. [border=transparent; height:100%; flex-grow:1; padding:0; margin-left:5px; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:center; color: var(--color-2);]
  479. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:22px; line-height:100%;][fa]fas fa-home[/fa][/border]
  480. [border=transparent; height:100%; width:25px; padding:0; pointer-events:auto;][/border]
  481. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:22px; line-height:100%;][fa]far fa-clock[/fa][/border]
  482. [/border]
  483. [/border]
  484. [comment]----relationship tabs cover end----[/comment]
  485.  
  486. [comment]----relationship tabs----[/comment]
  487. [border=transparent; height:5%; width:40%; padding:0; overflow:hidden; margin-top:12%;][border=transparent; padding:0;][tabs]
  488.  
  489. [comment]----relationship tab one (family)----[/comment]
  490. [tab=.][border=transparent; height:81%; width:90%; padding:10px 0; box-sizing:border-box; background-color:var(--color-2); position:absolute; right:0; bottom:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; display:flex; flex-flow: row wrap;]
  491.  
  492. [comment]----copy this whole thing to get another relationship box!----[/comment]
  493. [border=transparent; height:125px; width:100%; padding:0; display:flex; flex-flow: row nowrap; margin:5px 0;]
  494. [border=transparent; height:100%; width:105px; padding:0; display:flex; flex-flow:column nowrap; align-items:center;]
  495. [comment]----relationship icon----[/comment]
  496. [border=transparent; height:103px; width:103px; padding:5px; box-sizing:border-box; border:4px solid var(--color-1); border-radius:50%; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; border-radius:50%; background: var(--rimg-a1); background-size:cover; background-position: 50% 50%;][/border][/border]
  497.  
  498. [comment]----relationship status----[/comment]
  499. [border=transparent; flex-grow:1; width:100%; padding:0; margin-top:5px; color: var(--color-1); font-family:'Averia Serif Libre', serif; font-size:15px; letter-spacing:0.5px; line-height:110%; text-align:center; font-weight:bold;][comment]
  500. ----* * * relationship status----
  501. [/comment]father[/border]
  502. [/border]
  503.  
  504. [comment]----relationship info----[/comment]
  505. [border=transparent; height:100%; flex-grow:1; padding:5px 0; box-sizing:border-box; display:flex; flex-flow:row wrap;]
  506. [comment]----character name----[/comment]
  507. [border=transparent; height:27%; width:100%; padding:0 0 5px 20px; box-sizing:border-box; position:relative; left:-4px; border-bottom:4px solid var(--color-1); color: var(--color-1); text-shadow:1.5px 1.5px var(--bg-color); font-family:'Raleway', sans-serif; -webkit-text-stroke:1px var(--color-1); font-weight:bold; letter-spacing:1px; line-height:100%; font-size:22px;][comment]----* * * relationship name here----
  508. [/comment]name here[/border]
  509.  
  510. [comment]----character info----[/comment]
  511. [border=transparent; height:70%; width:100%; padding:0; margin-top:4%; 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-1); font-family:'Roboto', sans-serif; text-align:justify; line-height:130%; font-size:11px;][comment]
  512. ----* * * relationship info here----
  513. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec metus egestas, pulvinar risus ac, congue lacus. Phasellus dapibus pellentesque ex sit amet laoreet. Phasellus leo eros, mattis eget pretium ut, auctor fermentum erat. Curabitur felis ligula, hendrerit ut condimentum non, blandit quis nulla. Sed porttitor eros eu orci interdum euismod. Duis non dolor neque. Aliquam ut tellus vitae tellus sagittis vestibulum. Nullam at laoreet arcu, ac aliquet justo. Maecenas consequat quam nec condimentum elementum. Suspendisse aliquet erat ut commodo hendrerit.
  514. [/border][/border][/border]
  515. [/border]
  516. [/border]
  517. [comment]----copy me too!----[/comment]
  518.  
  519. [comment]----copy this whole thing to get another relationship box!----[/comment]
  520. [border=transparent; height:125px; width:100%; padding:0; display:flex; flex-flow: row nowrap; margin:5px 0;]
  521. [border=transparent; height:100%; width:105px; padding:0; display:flex; flex-flow:column nowrap; align-items:center;]
  522. [comment]----relationship icon----[/comment]
  523. [border=transparent; height:103px; width:103px; padding:5px; box-sizing:border-box; border:4px solid var(--color-1); border-radius:50%; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; border-radius:50%; background: var(--rimg-a2); background-size:cover; background-position: 50% 50%;][/border][/border]
  524.  
  525. [comment]----relationship status----[/comment]
  526. [border=transparent; flex-grow:1; width:100%; padding:0; margin-top:5px; color: var(--color-1); font-family:'Averia Serif Libre', serif; font-size:15px; letter-spacing:0.5px; line-height:110%; text-align:center; font-weight:bold;][comment]
  527. ----* * * relationship status----
  528. [/comment]father[/border]
  529. [/border]
  530.  
  531. [comment]----relationship info----[/comment]
  532. [border=transparent; height:100%; flex-grow:1; padding:5px 0; box-sizing:border-box; display:flex; flex-flow:row wrap;]
  533. [comment]----character name----[/comment]
  534. [border=transparent; height:27%; width:100%; padding:0 0 5px 20px; box-sizing:border-box; position:relative; left:-4px; border-bottom:4px solid var(--color-1); color: var(--color-1); text-shadow:1.5px 1.5px var(--bg-color); font-family:'Raleway', sans-serif; -webkit-text-stroke:1px var(--color-1); font-weight:bold; letter-spacing:1px; line-height:100%; font-size:22px;][comment]----* * * relationship name here----
  535. [/comment]name here[/border]
  536.  
  537. [comment]----character info----[/comment]
  538. [border=transparent; height:70%; width:100%; padding:0; margin-top:4%; 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-1); font-family:'Roboto', sans-serif; text-align:justify; line-height:130%; font-size:11px;][comment]
  539. ----* * * relationship info here----
  540. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec metus egestas, pulvinar risus ac, congue lacus. Phasellus dapibus pellentesque ex sit amet laoreet. Phasellus leo eros, mattis eget pretium ut, auctor fermentum erat. Curabitur felis ligula, hendrerit ut condimentum non, blandit quis nulla. Sed porttitor eros eu orci interdum euismod. Duis non dolor neque. Aliquam ut tellus vitae tellus sagittis vestibulum. Nullam at laoreet arcu, ac aliquet justo. Maecenas consequat quam nec condimentum elementum. Suspendisse aliquet erat ut commodo hendrerit.
  541. [/border][/border][/border]
  542. [/border]
  543. [/border]
  544. [comment]----copy me too!----[/comment]
  545.  
  546. [comment]----copy this whole thing to get another relationship box!----[/comment]
  547. [border=transparent; height:125px; width:100%; padding:0; display:flex; flex-flow: row nowrap; margin:5px 0;]
  548. [border=transparent; height:100%; width:105px; padding:0; display:flex; flex-flow:column nowrap; align-items:center;]
  549. [comment]----relationship icon----[/comment]
  550. [border=transparent; height:103px; width:103px; padding:5px; box-sizing:border-box; border:4px solid var(--color-1); border-radius:50%; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; border-radius:50%; background: var(--rimg-a3); background-size:cover; background-position: 50% 50%;][/border][/border]
  551.  
  552. [comment]----relationship status----[/comment]
  553. [border=transparent; flex-grow:1; width:100%; padding:0; margin-top:5px; color: var(--color-1); font-family:'Averia Serif Libre', serif; font-size:15px; letter-spacing:0.5px; line-height:110%; text-align:center; font-weight:bold;][comment]
  554. ----* * * relationship status----
  555. [/comment]father[/border]
  556. [/border]
  557.  
  558. [comment]----relationship info----[/comment]
  559. [border=transparent; height:100%; flex-grow:1; padding:5px 0; box-sizing:border-box; display:flex; flex-flow:row wrap;]
  560. [comment]----character name----[/comment]
  561. [border=transparent; height:27%; width:100%; padding:0 0 5px 20px; box-sizing:border-box; position:relative; left:-4px; border-bottom:4px solid var(--color-1); color: var(--color-1); text-shadow:1.5px 1.5px var(--bg-color); font-family:'Raleway', sans-serif; -webkit-text-stroke:1px var(--color-1); font-weight:bold; letter-spacing:1px; line-height:100%; font-size:22px;][comment]----* * * relationship name here----
  562. [/comment]name here[/border]
  563.  
  564. [comment]----character info----[/comment]
  565. [border=transparent; height:70%; width:100%; padding:0; margin-top:4%; 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-1); font-family:'Roboto', sans-serif; text-align:justify; line-height:130%; font-size:11px;][comment]
  566. ----* * * relationship info here----
  567. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec metus egestas, pulvinar risus ac, congue lacus. Phasellus dapibus pellentesque ex sit amet laoreet. Phasellus leo eros, mattis eget pretium ut, auctor fermentum erat. Curabitur felis ligula, hendrerit ut condimentum non, blandit quis nulla. Sed porttitor eros eu orci interdum euismod. Duis non dolor neque. Aliquam ut tellus vitae tellus sagittis vestibulum. Nullam at laoreet arcu, ac aliquet justo. Maecenas consequat quam nec condimentum elementum. Suspendisse aliquet erat ut commodo hendrerit.
  568. [/border][/border][/border]
  569. [/border]
  570. [/border]
  571. [comment]----copy me too!----[/comment]
  572.  
  573. [/border][/border][/border][/tab]
  574. [comment]----relationship tab one end----[/comment]
  575.  
  576. [comment]----relationship tab two (others)----[/comment]
  577. [tab=.][border=transparent; height:81%; width:90%; padding:10px 0; box-sizing:border-box; background-color:var(--color-2); position:absolute; right:0; bottom:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; display:flex; flex-flow: row wrap;]
  578.  
  579. [comment]----copy this whole thing to get another relationship box!----[/comment]
  580. [border=transparent; height:125px; width:100%; padding:0; display:flex; flex-flow: row nowrap; margin:5px 0;]
  581. [border=transparent; height:100%; width:105px; padding:0; display:flex; flex-flow:column nowrap; align-items:center;]
  582. [comment]----relationship icon----[/comment]
  583. [border=transparent; height:103px; width:103px; padding:5px; box-sizing:border-box; border:4px solid var(--color-1); border-radius:50%; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; border-radius:50%; background: var(--rimg-b1); background-size:cover; background-position: 50% 50%;][/border][/border]
  584.  
  585. [comment]----relationship status----[/comment]
  586. [border=transparent; flex-grow:1; width:100%; padding:0; margin-top:5px; color: var(--color-1); font-family:'Averia Serif Libre', serif; font-size:15px; letter-spacing:0.5px; line-height:110%; text-align:center; font-weight:bold;][comment]
  587. ----* * * relationship status----
  588. [/comment]friend[/border]
  589. [/border]
  590.  
  591. [comment]----relationship info----[/comment]
  592. [border=transparent; height:100%; flex-grow:1; padding:5px 0; box-sizing:border-box; display:flex; flex-flow:row wrap;]
  593. [comment]----character name----[/comment]
  594. [border=transparent; height:27%; width:100%; padding:0 0 5px 20px; box-sizing:border-box; position:relative; left:-4px; border-bottom:4px solid var(--color-1); color: var(--color-1); text-shadow:1.5px 1.5px var(--bg-color); font-family:'Raleway', sans-serif; -webkit-text-stroke:1px var(--color-1); font-weight:bold; letter-spacing:1px; line-height:100%; font-size:22px;][comment]----* * * relationship name here----
  595. [/comment]name here[/border]
  596.  
  597. [comment]----character info----[/comment]
  598. [border=transparent; height:70%; width:100%; padding:0; margin-top:4%; 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-1); font-family:'Roboto', sans-serif; text-align:justify; line-height:130%; font-size:11px;][comment]
  599. ----* * * relationship info here----
  600. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec metus egestas, pulvinar risus ac, congue lacus. Phasellus dapibus pellentesque ex sit amet laoreet. Phasellus leo eros, mattis eget pretium ut, auctor fermentum erat. Curabitur felis ligula, hendrerit ut condimentum non, blandit quis nulla. Sed porttitor eros eu orci interdum euismod. Duis non dolor neque. Aliquam ut tellus vitae tellus sagittis vestibulum. Nullam at laoreet arcu, ac aliquet justo. Maecenas consequat quam nec condimentum elementum. Suspendisse aliquet erat ut commodo hendrerit.
  601. [/border][/border][/border]
  602. [/border]
  603. [/border]
  604. [comment]----copy me too!----[/comment]
  605.  
  606. [comment]----copy this whole thing to get another relationship box!----[/comment]
  607. [border=transparent; height:125px; width:100%; padding:0; display:flex; flex-flow: row nowrap; margin:5px 0;]
  608. [border=transparent; height:100%; width:105px; padding:0; display:flex; flex-flow:column nowrap; align-items:center;]
  609. [comment]----relationship icon----[/comment]
  610. [border=transparent; height:103px; width:103px; padding:5px; box-sizing:border-box; border:4px solid var(--color-1); border-radius:50%; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; border-radius:50%; background: var(--rimg-b2); background-size:cover; background-position: 50% 50%;][/border][/border]
  611.  
  612. [comment]----relationship status----[/comment]
  613. [border=transparent; flex-grow:1; width:100%; padding:0; margin-top:5px; color: var(--color-1); font-family:'Averia Serif Libre', serif; font-size:15px; letter-spacing:0.5px; line-height:110%; text-align:center; font-weight:bold;][comment]
  614. ----* * * relationship status----
  615. [/comment]friend[/border]
  616. [/border]
  617.  
  618. [comment]----relationship info----[/comment]
  619. [border=transparent; height:100%; flex-grow:1; padding:5px 0; box-sizing:border-box; display:flex; flex-flow:row wrap;]
  620. [comment]----character name----[/comment]
  621. [border=transparent; height:27%; width:100%; padding:0 0 5px 20px; box-sizing:border-box; position:relative; left:-4px; border-bottom:4px solid var(--color-1); color: var(--color-1); text-shadow:1.5px 1.5px var(--bg-color); font-family:'Raleway', sans-serif; -webkit-text-stroke:1px var(--color-1); font-weight:bold; letter-spacing:1px; line-height:100%; font-size:22px;][comment]----* * * relationship name here----
  622. [/comment]name here[/border]
  623.  
  624. [comment]----character info----[/comment]
  625. [border=transparent; height:70%; width:100%; padding:0; margin-top:4%; 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-1); font-family:'Roboto', sans-serif; text-align:justify; line-height:130%; font-size:11px;][comment]
  626. ----* * * relationship info here----
  627. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec metus egestas, pulvinar risus ac, congue lacus. Phasellus dapibus pellentesque ex sit amet laoreet. Phasellus leo eros, mattis eget pretium ut, auctor fermentum erat. Curabitur felis ligula, hendrerit ut condimentum non, blandit quis nulla. Sed porttitor eros eu orci interdum euismod. Duis non dolor neque. Aliquam ut tellus vitae tellus sagittis vestibulum. Nullam at laoreet arcu, ac aliquet justo. Maecenas consequat quam nec condimentum elementum. Suspendisse aliquet erat ut commodo hendrerit.
  628. [/border][/border][/border]
  629. [/border]
  630. [/border]
  631. [comment]----copy me too!----[/comment]
  632.  
  633. [comment]----copy this whole thing to get another relationship box!----[/comment]
  634. [border=transparent; height:125px; width:100%; padding:0; display:flex; flex-flow: row nowrap; margin:5px 0;]
  635. [border=transparent; height:100%; width:105px; padding:0; display:flex; flex-flow:column nowrap; align-items:center;]
  636. [comment]----relationship icon----[/comment]
  637. [border=transparent; height:103px; width:103px; padding:5px; box-sizing:border-box; border:4px solid var(--color-1); border-radius:50%; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; border-radius:50%; background: var(--rimg-b3); background-size:cover; background-position: 50% 50%;][/border][/border]
  638.  
  639. [comment]----relationship status----[/comment]
  640. [border=transparent; flex-grow:1; width:100%; padding:0; margin-top:5px; color: var(--color-1); font-family:'Averia Serif Libre', serif; font-size:15px; letter-spacing:0.5px; line-height:110%; text-align:center; font-weight:bold;][comment]
  641. ----* * * relationship status----
  642. [/comment]friend[/border]
  643. [/border]
  644.  
  645. [comment]----relationship info----[/comment]
  646. [border=transparent; height:100%; flex-grow:1; padding:5px 0; box-sizing:border-box; display:flex; flex-flow:row wrap;]
  647. [comment]----character name----[/comment]
  648. [border=transparent; height:27%; width:100%; padding:0 0 5px 20px; box-sizing:border-box; position:relative; left:-4px; border-bottom:4px solid var(--color-1); color: var(--color-1); text-shadow:1.5px 1.5px var(--bg-color); font-family:'Raleway', sans-serif; -webkit-text-stroke:1px var(--color-1); font-weight:bold; letter-spacing:1px; line-height:100%; font-size:22px;][comment]----* * * relationship name here----
  649. [/comment]name here[/border]
  650.  
  651. [comment]----character info----[/comment]
  652. [border=transparent; height:70%; width:100%; padding:0; margin-top:4%; 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-1); font-family:'Roboto', sans-serif; text-align:justify; line-height:130%; font-size:11px;][comment]
  653. ----* * * relationship info here----
  654. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec metus egestas, pulvinar risus ac, congue lacus. Phasellus dapibus pellentesque ex sit amet laoreet. Phasellus leo eros, mattis eget pretium ut, auctor fermentum erat. Curabitur felis ligula, hendrerit ut condimentum non, blandit quis nulla. Sed porttitor eros eu orci interdum euismod. Duis non dolor neque. Aliquam ut tellus vitae tellus sagittis vestibulum. Nullam at laoreet arcu, ac aliquet justo. Maecenas consequat quam nec condimentum elementum. Suspendisse aliquet erat ut commodo hendrerit.
  655. [/border][/border][/border]
  656. [/border]
  657. [/border]
  658. [comment]----copy me too!----[/comment]
  659.  
  660. [/border][/border][/border][/tab]
  661. [comment]----relationship tab two end----[/comment]
  662.  
  663. [/tabs][/border][/border]
  664. [comment]----relationship tabs end----[/comment]
  665. [/border]
  666. [comment]----relationships end----[/comment]
  667. [/border]
  668.  
  669. [comment]----button select----[/comment]
  670. [border=transparent; height:42px; width:42px; padding:0; border-radius:50%; background-color:var(--color-1); display:flex; justify-content:center; align-items:center; position:absolute; left:30.3px; top:280px;]
  671. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%; font-size:28px; color: var(--bg-color); font-family:'Archivo Black', sans-serif; font-weight:bold;]4.[/border]
  672. [/border]
  673. [/tab]
  674. [comment]----tab four end----[/comment]
  675.  
  676. [/tabs][/border][/border]
  677. [/border][comment]----signature! do not remove----[/comment][bg=transparent; height:10px;width:100%;z-index:6;opacity:0.7;color: var(--color-1);font-size:10px;text-align:center; position:absolute; bottom:10px; left:0; padding:0;][font=Open Sans]♡design by triples, coded by uxie♡[/font][/bg]
  678. [/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!