API tools faq
paste
ooksie

it was always u (uxie x teefies)

ooksie
Feb 13th, 2021 (edited)
147
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 35.88 KB | None | 0 0
raw download clone embed print report
  1. [comment]
  2.  
  3. fonts used:
  4. [font=Josefin Sans]name, headers[/font]
  5. [font=Poppins]body text[/font]
  6.  
  7. to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  8.  
  9. [/comment][border=transparent;
  10.  
  11. *main background colour;
  12. --bg-color: #fff;
  13.  
  14. *accent colour;
  15. --color-1: #C81415;
  16.  
  17. *text colour;
  18. --t-color: #682933;
  19.  
  20. *fonts used;
  21. --name: 'Josefin Sans', sans-serif;
  22. --header: 'Josefin Sans', sans-serif;
  23. --body: 'Poppins', sans-serif;
  24.  
  25. *images in tab 3 (gallery) -- a represents row one and b represents row 2;
  26. -- preview art by hiruna545;
  27. --img-a1: url('https://i.imgur.com/6h6iOPi.png');
  28. --img-a2: url('https://i.imgur.com/KUl1qG2.png');
  29. --img-a3: url('https://i.imgur.com/EGa2I0s.png');
  30. --img-a4: url('https://i.imgur.com/alUx2hZ.png');
  31.  
  32. --img-b1: url('https://i.imgur.com/6h6iOPi.png');
  33. --img-b2: url('https://i.imgur.com/KUl1qG2.png');
  34. --img-b3: url('https://i.imgur.com/EGa2I0s.png');
  35. --img-b4: url('https://i.imgur.com/alUx2hZ.png');
  36.  
  37. *images in tab 4 (relationships) -- images go from left to right;
  38. --r1: url('https://i.imgur.com/6h6iOPi.png');
  39. --r2: url('https://i.imgur.com/KUl1qG2.png');
  40. --r3: url('https://i.imgur.com/EGa2I0s.png');
  41. --r4: url('https://i.imgur.com/alUx2hZ.png');
  42. --r5: url('https://i.imgur.com/6h6iOPi.png');
  43. --r6: url('https://i.imgur.com/KUl1qG2.png');
  44.  
  45. height:420px; width:100%; max-width:600px; padding:0; padding-bottom:20px; position:relative; line-height:0; margin:auto;][border=transparent; height:100%; width:100%; max-width:600px; padding:20px; box-sizing:border-box; background: var(--bg-color); border:15px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; justify-content:flex-end;]
  46.  
  47. [comment]----cover tabs----[/comment]
  48. [border=transparent; height:28px; width:50px; padding:0; overflow:hidden; margin:15px 10px 0 0;][border=transparent; padding:0; margin:-27px -30px 0 -20px;][tabs]
  49.  
  50. [comment]----cover page----[/comment]
  51. [tab=.][border=transparent; height:100%; width:100%; padding:clamp(20px, 3vw, 30px); box-sizing:border-box; position:absolute; top:0; left:0; z-index:3; pointer-events:none; display:flex; flex-flow: row nowrap; align-items:center; justify-content:center;]
  52.  
  53. [comment]----character name----[/comment]
  54. [border=transparent; height:fit-content; width:fit-content; padding:0; text-align:center; color: var(--color-1); font-size:clamp(42px, 3.5vw, 48px); line-height:100%; font-family: var(--name); position:relative; z-index:2;][comment]
  55. ----* * * name here----
  56. [/comment]firstname lastname[/border]
  57.  
  58. [comment]----noclick (ignore!)----[/comment]
  59. [border=transparent; height:60%; width:70px; padding:0; position:absolute; top:93px; right:20px; z-index:1; background: var(--bg-color); pointer-events:auto;][/border]
  60.  
  61. [/border][/tab]
  62. [comment]----cover page end----[/comment]
  63.  
  64. [comment]----main contents----[/comment]
  65. [tab=.][border=transparent; height:100%; width:100%; padding:20px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:2; display:flex; justify-content:flex-end;]
  66.  
  67. [comment]----main tabs----[/comment]
  68. [border=transparent; height:246px; width:50px; padding:0; overflow:hidden; margin:16px 10px 0 0; pointer-events:auto; flex:auto 0;][border=transparent; padding:0; margin:-20px -30px 0 -20px; line-height:67px;][tabs]
  69.  
  70. [comment]----tab one (basics)----[/comment]
  71. [tab=.][border=transparent; height:100%; width:calc(100% - 90px); padding:20px 20px 20px 30px; box-sizing:border-box; position:absolute; top:0; left:0; display:flex; flex-flow:column nowrap; line-height:0; pointer-events:auto;]
  72.  
  73. [comment]----tab title/name----[/comment]
  74. [border=transparent; height:fit-content; width:fit-content; padding:0 0 0 20px; box-sizing:border-box; color: var(--color-1); font-family: var(--header); font-size:clamp(34px, 3.8vw, 43px); text-align:center; line-height:100%; flex:auto 0; margin-bottom:6px;][comment]
  75. ----* * * tab title here---
  76. [/comment]firstname lastname[/border]
  77.  
  78. [comment]----tab contents----[/comment]
  79. [border=transparent; height:auto; max-height:90%; padding:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 0 0 5px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:12px; text-align:justify; line-height:17px;][comment]
  80. ----* * * text starts here---
  81. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque blandit justo, a laoreet ipsum malesuada faucibus. Fusce sit amet hendrerit ligula. Vestibulum ut elementum est. Vestibulum tincidunt odio id mauris luctus, vitae dignissim lacus auctor. Mauris et feugiat orci, vel pharetra dolor. Proin et leo libero. Vivamus ac nisi vel sapien sodales hendrerit sit amet a nibh. Morbi sed feugiat purus. Donec quis mauris nisi. Nam at hendrerit lectus, sit amet hendrerit dui. Suspendisse imperdiet purus ac convallis dapibus. Praesent eget lacus leo.
  82.  
  83. Vestibulum ullamcorper in sem et sollicitudin. Donec eu eleifend leo. Fusce volutpat nisl eu vehicula tempor. Curabitur nec massa enim. Nunc tempor cursus consequat. Phasellus hendrerit massa orci, eget accumsan tellus pellentesque nec. Mauris finibus vehicula ligula dignissim maximus. Fusce finibus venenatis metus fermentum egestas. Mauris commodo elementum ex a aliquet. Phasellus at magna at massa dignissim maximus.
  84.  
  85. Donec sed arcu eget enim sollicitudin lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dolor sed erat iaculis scelerisque a sit amet metus. Praesent posuere, ligula quis ultrices condimentum, elit sapien ornare eros, ut commodo nisl turpis in est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed luctus mattis ipsum, ac semper nisi vestibulum eu. Nunc ut urna quis magna rhoncus dignissim. Proin finibus felis eget velit blandit ultrices. Proin at lorem dolor. Ut finibus consectetur nunc et mattis.
  86. [/border][/border][/border]
  87. [comment]----tab contents end----[/comment]
  88.  
  89. [/border][/tab]
  90. [comment]----tab one end----[/comment]
  91.  
  92.  
  93. [comment]----tab two (psyche)----[/comment]
  94. [tab=.][border=transparent; height:100%; width:calc(100% - 90px); padding:20px 20px 20px 30px; box-sizing:border-box; position:absolute; top:0; left:0; display:flex; flex-flow:column nowrap; line-height:0; pointer-events:auto;]
  95.  
  96. [comment]----tab title/name----[/comment]
  97. [border=transparent; height:fit-content; width:fit-content; padding:0 0 0 20px; box-sizing:border-box; color: var(--color-1); font-family: var(--header); font-size:clamp(34px, 3.8vw, 43px); text-align:center; line-height:100%; flex:auto 0; margin-bottom:6px;][comment]
  98. ----* * * tab title here---
  99. [/comment]firstname lastname[/border]
  100.  
  101. [comment]----tab contents----[/comment]
  102. [border=transparent; height:auto; max-height:90%; padding:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 0 0 5px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:12px; text-align:justify; line-height:17px;][comment]
  103. ----* * * text starts here---
  104. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque blandit justo, a laoreet ipsum malesuada faucibus. Fusce sit amet hendrerit ligula. Vestibulum ut elementum est. Vestibulum tincidunt odio id mauris luctus, vitae dignissim lacus auctor. Mauris et feugiat orci, vel pharetra dolor. Proin et leo libero. Vivamus ac nisi vel sapien sodales hendrerit sit amet a nibh. Morbi sed feugiat purus. Donec quis mauris nisi. Nam at hendrerit lectus, sit amet hendrerit dui. Suspendisse imperdiet purus ac convallis dapibus. Praesent eget lacus leo.
  105.  
  106. Vestibulum ullamcorper in sem et sollicitudin. Donec eu eleifend leo. Fusce volutpat nisl eu vehicula tempor. Curabitur nec massa enim. Nunc tempor cursus consequat. Phasellus hendrerit massa orci, eget accumsan tellus pellentesque nec. Mauris finibus vehicula ligula dignissim maximus. Fusce finibus venenatis metus fermentum egestas. Mauris commodo elementum ex a aliquet. Phasellus at magna at massa dignissim maximus.
  107.  
  108. Donec sed arcu eget enim sollicitudin lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dolor sed erat iaculis scelerisque a sit amet metus. Praesent posuere, ligula quis ultrices condimentum, elit sapien ornare eros, ut commodo nisl turpis in est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed luctus mattis ipsum, ac semper nisi vestibulum eu. Nunc ut urna quis magna rhoncus dignissim. Proin finibus felis eget velit blandit ultrices. Proin at lorem dolor. Ut finibus consectetur nunc et mattis.
  109. [/border][/border][/border]
  110. [comment]----tab contents end----[/comment]
  111.  
  112. [/border][/tab]
  113. [comment]----tab two end----[/comment]
  114.  
  115.  
  116. [comment]----tab three (gallery)----[/comment]
  117. [tab=.][border=transparent; height:100%; width:calc(100% - 90px); padding:20px 20px 20px 30px; box-sizing:border-box; position:absolute; top:0; left:0; display:flex; flex-flow:column nowrap; line-height:0; pointer-events:auto;]
  118.  
  119. [comment]----tab title/name----[/comment]
  120. [border=transparent; height:fit-content; width:fit-content; padding:0 0 0 20px; box-sizing:border-box; color: var(--color-1); font-family: var(--header); font-size:clamp(34px, 3.8vw, 43px); text-align:center; line-height:100%; flex:auto 0; margin-bottom:10px;][comment]
  121. ----* * * tab title here---
  122. [/comment]firstname lastname[/border]
  123.  
  124. [comment]----tab contents----[/comment]
  125. [border=transparent; height:90%; max-height:90%; padding:0; overflow:hidden; display:flex; flex-flow:column nowrap; justify-content:center;]
  126.  
  127. [comment]----row one-----
  128. !!! to make a new image, replace the number in background: var(--img-x); after making a new variable at the top of the code !!![/comment]
  129. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-direction:row; overflow:hidden; margin-bottom:35px;][border=transparent; height:200%; width:100%; padding:0; overflow-x:scroll;][border=transparent; height:50%; width:fit-content; padding:0; display:flex; flex-flow: row nowrap;]
  130.  
  131. [comment]----image (copy this to make a new image)----[/comment]
  132. [border=transparent; width:clamp(100px, 15vw, 135px); padding:0; flex:auto 0; margin:0 5px;][border=transparent; height:0; padding:0; padding-top:100%;
  133. /*replace the number in img-x*/ background: var(--img-a1);
  134. background-size:cover;
  135. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  136. [comment]----copy this too!----[/comment]
  137.  
  138. [comment]----image (copy this to make a new image)----[/comment]
  139. [border=transparent; width:clamp(100px, 15vw, 135px); padding:0; flex:auto 0; margin:0 5px;][border=transparent; height:0; padding:0; padding-top:100%;
  140. /*replace the number in img-x*/ background: var(--img-a2);
  141. background-size:cover;
  142. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  143. [comment]----copy this too!----[/comment]
  144.  
  145. [comment]----image (copy this to make a new image)----[/comment]
  146. [border=transparent; width:clamp(100px, 15vw, 135px); padding:0; flex:auto 0; margin:0 5px;][border=transparent; height:0; padding:0; padding-top:100%;
  147. /*replace the number in img-x*/ background: var(--img-a3);
  148. background-size:cover;
  149. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  150. [comment]----copy this too!----[/comment]
  151.  
  152. [comment]----image (copy this to make a new image)----[/comment]
  153. [border=transparent; width:clamp(100px, 15vw, 135px); padding:0; flex:auto 0; margin:0 5px;][border=transparent; height:0; padding:0; padding-top:100%;
  154. /*replace the number in img-x*/ background: var(--img-a4);
  155. background-size:cover;
  156. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  157. [comment]----copy this too!----[/comment]
  158.  
  159. [/border][/border][/border]
  160. [comment]----row one end----[/comment]
  161.  
  162. [comment]----row two-----
  163. !!! to make a new image, replace the number in background: var(--img-x); after making a new variable at the top of the code !!![/comment]
  164. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-direction:row; overflow:hidden; margin-top:clamp(-25px, -4vw, -5px);][border=transparent; height:200%; width:100%; padding:0; overflow-x:scroll;][border=transparent; height:50%; width:fit-content; padding:0; display:flex; flex-flow: row nowrap;]
  165.  
  166. [comment]----image (copy this to make a new image)----[/comment]
  167. [border=transparent; width:clamp(100px, 15vw, 135px); padding:0; flex:auto 0; margin:0 5px;][border=transparent; height:0; padding:0; padding-top:100%;
  168. /*replace the number in img-x*/ background: var(--img-b1);
  169. background-size:cover;
  170. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  171. [comment]----copy this too!----[/comment]
  172.  
  173. [comment]----image (copy this to make a new image)----[/comment]
  174. [border=transparent; width:clamp(100px, 15vw, 135px); padding:0; flex:auto 0; margin:0 5px;][border=transparent; height:0; padding:0; padding-top:100%;
  175. /*replace the number in img-x*/ background: var(--img-b2);
  176. background-size:cover;
  177. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  178. [comment]----copy this too!----[/comment]
  179.  
  180. [comment]----image (copy this to make a new image)----[/comment]
  181. [border=transparent; width:clamp(100px, 15vw, 135px); padding:0; flex:auto 0; margin:0 5px;][border=transparent; height:0; padding:0; padding-top:100%;
  182. /*replace the number in img-x*/ background: var(--img-b3);
  183. background-size:cover;
  184. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  185. [comment]----copy this too!----[/comment]
  186.  
  187. [comment]----image (copy this to make a new image)----[/comment]
  188. [border=transparent; width:clamp(100px, 15vw, 135px); padding:0; flex:auto 0; margin:0 5px;][border=transparent; height:0; padding:0; padding-top:100%;
  189. /*replace the number in img-x*/ background: var(--img-b4);
  190. background-size:cover;
  191. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  192. [comment]----copy this too!----[/comment]
  193.  
  194. [/border][/border][/border]
  195. [comment]----row one end----[/comment]
  196.  
  197. [/border]
  198. [comment]----tab contents end----[/comment]
  199.  
  200. [/border][/tab]
  201. [comment]----tab three end----[/comment]
  202.  
  203.  
  204. [comment]----tab four (relationships)----[/comment]
  205. [tab=.][border=transparent; height:100%; width:calc(100% - 90px); padding:20px 20px 20px 30px; box-sizing:border-box; position:absolute; top:0; left:0; display:flex; flex-flow:column nowrap; line-height:0; pointer-events:auto;]
  206.  
  207. [comment]----tab title/name----[/comment]
  208. [border=transparent; height:fit-content; width:fit-content; padding:0 0 0 20px; box-sizing:border-box; color: var(--color-1); font-family: var(--header); font-size:clamp(34px, 3.8vw, 43px); text-align:center; line-height:100%; flex:auto 0; margin-bottom:5px;][comment]
  209. ----* * * tab title here---
  210. [/comment]firstname lastname[/border]
  211.  
  212. [comment]----tab contents----[/comment]
  213. [border=transparent; height:90%; max-height:90%; padding: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%; display:flex; flex-flow: row wrap; align-items:center; justify-content:center;]
  214.  
  215. [comment]----copy this whole thing to make another relationship----[/comment]
  216. [border=transparent; height:fit-content; min-height:180px; flex:1; min-width:130px; max-width:calc(100% - 10px); padding:0; display:flex; flex-flow: column nowrap; align-items:center; margin:5px;]
  217.  
  218. [comment]----relationship contents----[/comment]
  219. [border=transparent; width:100%; padding:0;][border=transparent; height:0; padding:0; padding-top:120%;
  220. /*edit the number in rX to match the variables*/ background: var(--r1);
  221. background-size:cover;
  222. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;
  223. position:relative;][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; overflow:visible; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  224. [border=transparent; height:100%; width:50%; padding:0;][/border]
  225.  
  226. [border=transparent; height:auto; width:50%; padding:0; box-sizing:border-box; position:relative;][border=transparent; height:100%; width:calc(100% + 10px); padding:0; background: var(--bg-color); opacity:0.7; position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; position:relative; z-index:2; color: var(--t-color); font-family: var(--body); font-size:10px; text-align:justify; line-height:16px;][comment]
  227. ----* * * text starts here----
  228. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque blandit justo, a laoreet ipsum malesuada faucibus. Fusce sit amet hendrerit ligula. Vestibulum ut elementum est. Vestibulum tincidunt odio id mauris luctus, vitae dignissim lacus auctor. Mauris et feugiat orci, vel pharetra dolor. Proin et leo libero. Vivamus ac nisi vel sapien sodales hendrerit sit amet a nibh. Morbi sed feugiat purus. Donec quis mauris nisi. Nam at hendrerit lectus, sit amet hendrerit dui. Suspendisse imperdiet purus ac convallis dapibus. Praesent eget lacus leo.
  229.  
  230. Vestibulum ullamcorper in sem et sollicitudin. Donec eu eleifend leo. Fusce volutpat nisl eu vehicula tempor. Curabitur nec massa enim. Nunc tempor cursus consequat. Phasellus hendrerit massa orci, eget accumsan tellus pellentesque nec. Mauris finibus vehicula ligula dignissim maximus. Fusce finibus venenatis metus fermentum egestas. Mauris commodo elementum ex a aliquet. Phasellus at magna at massa dignissim maximus.
  231. [/border][/border]
  232.  
  233. [/border][/border][/border][/border]
  234. [comment]----relationship contents end----[/comment]
  235.  
  236. [comment]----relationship tag----[/comment]
  237. [border=transparent; height:fit-content; width:100%; padding:0; margin-top:8px; color: var(--color-1); font-family: var(--header); font-size:20px; line-height:100%; text-align:center;][comment]
  238. ----* * * relationship tag here----
  239. [/comment]tag here[/border]
  240. [/border]
  241. [comment]----copy me too!----[/comment]
  242.  
  243. [comment]----copy this whole thing to make another relationship----[/comment]
  244. [border=transparent; height:fit-content; min-height:180px; flex:1; min-width:130px; padding:0; display:flex; flex-flow: column nowrap; align-items:center; margin:5px;]
  245.  
  246. [comment]----relationship contents----[/comment]
  247. [border=transparent; width:100%; padding:0;][border=transparent; height:0; padding:0; padding-top:120%;
  248. /*edit the number in rX to match the variables*/ background: var(--r2);
  249. background-size:cover;
  250. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;
  251. position:relative;][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  252. [border=transparent; height:100%; width:50%; padding:0;][/border]
  253.  
  254. [border=transparent; height:auto; width:50%; padding:0; box-sizing:border-box; position:relative;][border=transparent; height:100%; width:120%; padding:0; background: var(--bg-color); opacity:0.7; position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; position:relative; z-index:2; color: var(--t-color); font-family: var(--body); font-size:10px; text-align:justify; line-height:16px;][comment]
  255. ----* * * text starts here----
  256. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque blandit justo, a laoreet ipsum malesuada faucibus. Fusce sit amet hendrerit ligula. Vestibulum ut elementum est. Vestibulum tincidunt odio id mauris luctus, vitae dignissim lacus auctor. Mauris et feugiat orci, vel pharetra dolor. Proin et leo libero. Vivamus ac nisi vel sapien sodales hendrerit sit amet a nibh. Morbi sed feugiat purus. Donec quis mauris nisi. Nam at hendrerit lectus, sit amet hendrerit dui. Suspendisse imperdiet purus ac convallis dapibus. Praesent eget lacus leo.
  257.  
  258. Vestibulum ullamcorper in sem et sollicitudin. Donec eu eleifend leo. Fusce volutpat nisl eu vehicula tempor. Curabitur nec massa enim. Nunc tempor cursus consequat. Phasellus hendrerit massa orci, eget accumsan tellus pellentesque nec. Mauris finibus vehicula ligula dignissim maximus. Fusce finibus venenatis metus fermentum egestas. Mauris commodo elementum ex a aliquet. Phasellus at magna at massa dignissim maximus.
  259. [/border][/border]
  260.  
  261. [/border][/border][/border][/border]
  262. [comment]----relationship contents end----[/comment]
  263.  
  264. [comment]----relationship tag----[/comment]
  265. [border=transparent; height:fit-content; width:100%; padding:0; margin-top:8px; color: var(--color-1); font-family: var(--header); font-size:20px; line-height:100%; text-align:center;][comment]
  266. ----* * * relationship tag here----
  267. [/comment]tag here[/border]
  268. [/border]
  269. [comment]----copy me too!----[/comment]
  270.  
  271. [comment]----copy this whole thing to make another relationship----[/comment]
  272. [border=transparent; height:fit-content; min-height:180px; flex:1; min-width:130px; padding:0; display:flex; flex-flow: column nowrap; align-items:center; margin:5px;]
  273.  
  274. [comment]----relationship contents----[/comment]
  275. [border=transparent; width:100%; padding:0;][border=transparent; height:0; padding:0; padding-top:120%;
  276. /*edit the number in rX to match the variables*/ background: var(--r3);
  277. background-size:cover;
  278. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;
  279. position:relative;][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  280. [border=transparent; height:100%; width:50%; padding:0;][/border]
  281.  
  282. [border=transparent; height:auto; width:50%; padding:0; box-sizing:border-box; position:relative;][border=transparent; height:100%; width:120%; padding:0; background: var(--bg-color); opacity:0.7; position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; position:relative; z-index:2; color: var(--t-color); font-family: var(--body); font-size:10px; text-align:justify; line-height:16px;][comment]
  283. ----* * * text starts here----
  284. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque blandit justo, a laoreet ipsum malesuada faucibus. Fusce sit amet hendrerit ligula. Vestibulum ut elementum est. Vestibulum tincidunt odio id mauris luctus, vitae dignissim lacus auctor. Mauris et feugiat orci, vel pharetra dolor. Proin et leo libero. Vivamus ac nisi vel sapien sodales hendrerit sit amet a nibh. Morbi sed feugiat purus. Donec quis mauris nisi. Nam at hendrerit lectus, sit amet hendrerit dui. Suspendisse imperdiet purus ac convallis dapibus. Praesent eget lacus leo.
  285.  
  286. Vestibulum ullamcorper in sem et sollicitudin. Donec eu eleifend leo. Fusce volutpat nisl eu vehicula tempor. Curabitur nec massa enim. Nunc tempor cursus consequat. Phasellus hendrerit massa orci, eget accumsan tellus pellentesque nec. Mauris finibus vehicula ligula dignissim maximus. Fusce finibus venenatis metus fermentum egestas. Mauris commodo elementum ex a aliquet. Phasellus at magna at massa dignissim maximus.
  287. [/border][/border]
  288.  
  289. [/border][/border][/border][/border]
  290. [comment]----relationship contents end----[/comment]
  291.  
  292. [comment]----relationship tag----[/comment]
  293. [border=transparent; height:fit-content; width:100%; padding:0; margin-top:8px; color: var(--color-1); font-family: var(--header); font-size:20px; line-height:100%; text-align:center;][comment]
  294. ----* * * relationship tag here----
  295. [/comment]tag here[/border]
  296. [/border]
  297. [comment]----copy me too!----[/comment]
  298.  
  299. [comment]----copy this whole thing to make another relationship----[/comment]
  300. [border=transparent; height:fit-content; min-height:180px; flex:1; min-width:130px; padding:0; display:flex; flex-flow: column nowrap; align-items:center; margin:5px;]
  301.  
  302. [comment]----relationship contents----[/comment]
  303. [border=transparent; width:100%; padding:0;][border=transparent; height:0; padding:0; padding-top:120%;
  304. /*edit the number in rX to match the variables*/ background: var(--r4);
  305. background-size:cover;
  306. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;
  307. position:relative;][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  308. [border=transparent; height:100%; width:50%; padding:0;][/border]
  309.  
  310. [border=transparent; height:auto; width:50%; padding:0; box-sizing:border-box; position:relative;][border=transparent; height:100%; width:120%; padding:0; background: var(--bg-color); opacity:0.7; position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; position:relative; z-index:2; color: var(--t-color); font-family: var(--body); font-size:10px; text-align:justify; line-height:16px;][comment]
  311. ----* * * text starts here----
  312. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque blandit justo, a laoreet ipsum malesuada faucibus. Fusce sit amet hendrerit ligula. Vestibulum ut elementum est. Vestibulum tincidunt odio id mauris luctus, vitae dignissim lacus auctor. Mauris et feugiat orci, vel pharetra dolor. Proin et leo libero. Vivamus ac nisi vel sapien sodales hendrerit sit amet a nibh. Morbi sed feugiat purus. Donec quis mauris nisi. Nam at hendrerit lectus, sit amet hendrerit dui. Suspendisse imperdiet purus ac convallis dapibus. Praesent eget lacus leo.
  313.  
  314. Vestibulum ullamcorper in sem et sollicitudin. Donec eu eleifend leo. Fusce volutpat nisl eu vehicula tempor. Curabitur nec massa enim. Nunc tempor cursus consequat. Phasellus hendrerit massa orci, eget accumsan tellus pellentesque nec. Mauris finibus vehicula ligula dignissim maximus. Fusce finibus venenatis metus fermentum egestas. Mauris commodo elementum ex a aliquet. Phasellus at magna at massa dignissim maximus.
  315. [/border][/border]
  316.  
  317. [/border][/border][/border][/border]
  318. [comment]----relationship contents end----[/comment]
  319.  
  320. [comment]----relationship tag----[/comment]
  321. [border=transparent; height:fit-content; width:100%; padding:0; margin-top:8px; color: var(--color-1); font-family: var(--header); font-size:20px; line-height:100%; text-align:center;][comment]
  322. ----* * * relationship tag here----
  323. [/comment]tag here[/border]
  324. [/border]
  325. [comment]----copy me too!----[/comment]
  326.  
  327. [comment]----copy this whole thing to make another relationship----[/comment]
  328. [border=transparent; height:fit-content; min-height:180px; flex:1; min-width:130px; padding:0; display:flex; flex-flow: column nowrap; align-items:center; margin:5px;]
  329.  
  330. [comment]----relationship contents----[/comment]
  331. [border=transparent; width:100%; padding:0;][border=transparent; height:0; padding:0; padding-top:120%;
  332. /*edit the number in rX to match the variables*/ background: var(--r5);
  333. background-size:cover;
  334. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;
  335. position:relative;][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  336. [border=transparent; height:100%; width:50%; padding:0;][/border]
  337.  
  338. [border=transparent; height:auto; width:50%; padding:0; box-sizing:border-box; position:relative;][border=transparent; height:100%; width:120%; padding:0; background: var(--bg-color); opacity:0.7; position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; position:relative; z-index:2; color: var(--t-color); font-family: var(--body); font-size:10px; text-align:justify; line-height:16px;][comment]
  339. ----* * * text starts here----
  340. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque blandit justo, a laoreet ipsum malesuada faucibus. Fusce sit amet hendrerit ligula. Vestibulum ut elementum est. Vestibulum tincidunt odio id mauris luctus, vitae dignissim lacus auctor. Mauris et feugiat orci, vel pharetra dolor. Proin et leo libero. Vivamus ac nisi vel sapien sodales hendrerit sit amet a nibh. Morbi sed feugiat purus. Donec quis mauris nisi. Nam at hendrerit lectus, sit amet hendrerit dui. Suspendisse imperdiet purus ac convallis dapibus. Praesent eget lacus leo.
  341.  
  342. Vestibulum ullamcorper in sem et sollicitudin. Donec eu eleifend leo. Fusce volutpat nisl eu vehicula tempor. Curabitur nec massa enim. Nunc tempor cursus consequat. Phasellus hendrerit massa orci, eget accumsan tellus pellentesque nec. Mauris finibus vehicula ligula dignissim maximus. Fusce finibus venenatis metus fermentum egestas. Mauris commodo elementum ex a aliquet. Phasellus at magna at massa dignissim maximus.
  343. [/border][/border]
  344.  
  345. [/border][/border][/border][/border]
  346. [comment]----relationship contents end----[/comment]
  347.  
  348. [comment]----relationship tag----[/comment]
  349. [border=transparent; height:fit-content; width:100%; padding:0; margin-top:8px; color: var(--color-1); font-family: var(--header); font-size:20px; line-height:100%; text-align:center;][comment]
  350. ----* * * relationship tag here----
  351. [/comment]tag here[/border]
  352. [/border]
  353. [comment]----copy me too!----[/comment]
  354.  
  355. [comment]----copy this whole thing to make another relationship----[/comment]
  356. [border=transparent; height:fit-content; min-height:180px; flex:1; min-width:130px; padding:0; display:flex; flex-flow: column nowrap; align-items:center; margin:5px;]
  357.  
  358. [comment]----relationship contents----[/comment]
  359. [border=transparent; width:100%; padding:0;][border=transparent; height:0; padding:0; padding-top:120%;
  360. /*edit the number in rX to match the variables*/ background: var(--r6);
  361. background-size:cover;
  362. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;
  363. position:relative;][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  364. [border=transparent; height:100%; width:50%; padding:0;][/border]
  365.  
  366. [border=transparent; height:auto; width:50%; padding:0; box-sizing:border-box; position:relative;][border=transparent; height:100%; width:120%; padding:0; background: var(--bg-color); opacity:0.7; position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; position:relative; z-index:2; color: var(--t-color); font-family: var(--body); font-size:10px; text-align:justify; line-height:16px;][comment]
  367. ----* * * text starts here----
  368. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque blandit justo, a laoreet ipsum malesuada faucibus. Fusce sit amet hendrerit ligula. Vestibulum ut elementum est. Vestibulum tincidunt odio id mauris luctus, vitae dignissim lacus auctor. Mauris et feugiat orci, vel pharetra dolor. Proin et leo libero. Vivamus ac nisi vel sapien sodales hendrerit sit amet a nibh. Morbi sed feugiat purus. Donec quis mauris nisi. Nam at hendrerit lectus, sit amet hendrerit dui. Suspendisse imperdiet purus ac convallis dapibus. Praesent eget lacus leo.
  369.  
  370. Vestibulum ullamcorper in sem et sollicitudin. Donec eu eleifend leo. Fusce volutpat nisl eu vehicula tempor. Curabitur nec massa enim. Nunc tempor cursus consequat. Phasellus hendrerit massa orci, eget accumsan tellus pellentesque nec. Mauris finibus vehicula ligula dignissim maximus. Fusce finibus venenatis metus fermentum egestas. Mauris commodo elementum ex a aliquet. Phasellus at magna at massa dignissim maximus.
  371. [/border][/border]
  372.  
  373. [/border][/border][/border][/border]
  374. [comment]----relationship contents end----[/comment]
  375.  
  376. [comment]----relationship tag----[/comment]
  377. [border=transparent; height:fit-content; width:100%; padding:0; margin-top:8px; color: var(--color-1); font-family: var(--header); font-size:20px; line-height:100%; text-align:center;][comment]
  378. ----* * * relationship tag here----
  379. [/comment]tag here[/border]
  380. [/border]
  381. [comment]----copy me too!----[/comment]
  382.  
  383. [/border][/border][/border]
  384. [comment]----tab contents end----[/comment]
  385.  
  386. [/border][/tab]
  387. [comment]----tab four end----[/comment]
  388. [/tabs][/border][/border]
  389. [comment]----main tabs end----[/comment]
  390.  
  391. [/border][/tab]
  392. [comment]----main contents end----[/comment]
  393. [/tabs][/border][/border]
  394.  
  395. [comment]----tabs cover----[/comment]
  396. [border=transparent; height:80%; width:70px; padding:0; position:absolute; top:20px; right:20px; z-index:2; background:var(--bg-color); display:flex; flex-flow: column nowrap; pointer-events:none;]
  397. [comment]----button----[/comment]
  398. [border=transparent; height:67px; width:70px; padding:0; color: var(--color-1); font-size:67px; margin-bottom:5px;][comment]
  399. ----* * * button icon here. replace icon in fa-icon with the icon of your choice!----
  400. [/comment][fa]fas fa-heart[/fa][/border]
  401. [comment]----button----[/comment]
  402. [border=transparent; height:67px; width:70px; padding:0; color: var(--color-1); font-size:67px; margin-bottom:5px;][comment]
  403. ----* * * button icon here. replace icon in fa-icon with the icon of your choice!----
  404. [/comment][fa]fas fa-heart[/fa][/border]
  405. [comment]----button----[/comment]
  406. [border=transparent; height:67px; width:70px; padding:0; color: var(--color-1); font-size:67px; margin-bottom:5px;][comment]
  407. ----* * * button icon here. replace icon in fa-icon with the icon of your choice!----
  408. [/comment][fa]fas fa-heart[/fa][/border]
  409. [comment]----button----[/comment]
  410. [border=transparent; height:67px; width:70px; padding:0; color: var(--color-1); font-size:67px; margin-bottom:5px;][comment]
  411. ----* * * button icon here. replace icon in fa-icon with the icon of your choice!----
  412. [/comment][fa]fas fa-heart[/fa][/border]
  413. [/border]
  414. [comment]----tabs cover end----[/comment]
  415.  
  416. [comment]----triangle details (ignore!)----[/comment]
  417. [border=transparent; height:0; width:0; padding:0; border-left:60px solid var(--color-1); border-bottom:60px solid transparent; border-right:60px solid transparent; position:absolute; top:-5px; left:-5px; z-index:5; pointer-events:none;][/border]
  418. [border=transparent; height:0; width:0; padding:0; border-right:60px solid var(--color-1); border-top:60px solid transparent; border-left:60px solid transparent; position:absolute; bottom:-5px; right:-5px; z-index:5; pointer-events:none;][/border]
  419.  
  420. [/border][comment]----signature! (do not remove!)-----
  421. [/comment][bg=transparent; height:fit-content; padding:0; width:100%; position:absolute; bottom:15px; left:10px; z-index:7;opacity:0.5;font-size:10px;text-align:center; line-height:100%; color: var(--color-1);][font=Open Sans]♡design by teefies, 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!