API tools faq
paste
ooksie

radio love (uxie x stardust galaxy)

ooksie
Jan 12th, 2021 (edited)
231
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.41 KB | None | 0 0
raw download clone embed print report
  1. [comment]have a nice day!
  2.  
  3. fonts used:
  4. [font=Passion One]buttons + headers[/font]
  5. [font=Sora]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. *background colour;
  11. --bg-color: #f4eee8;
  12. *first accent colour (darker);
  13. --color-1: #baa696;
  14. *second accent colour (lighter);
  15. --color-2: #dbcdbe;
  16. *button text;
  17. --button: #fff;
  18. *text colour;
  19. --t-color: #0f0e0e;
  20.  
  21. *fonts;
  22. --header: 'Passion One', sans-serif;
  23. --body: 'Sora', sans-serif;
  24.  
  25. *images -- images are categorised based on which tab theyre in. images in tab one are labelled with a, tab two with b, and so on. to make new images, just copy the format of the other variables and change the number/tab label as well as the image link;
  26. --aimg-1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  27. --aimg-2: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  28. --bimg-1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  29. --bimg-2: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  30.  
  31. height:460px; width:100%; max-width:600px; padding:0; padding-bottom:20px; position:relative; margin:auto; line-height:0;][border=transparent; height:460px; width:100%; max-width:600px; padding:0; position:relative; display:flex; flex-flow:column nowrap;]
  32.  
  33. [comment]----tabs cover----[/comment]
  34. [border=transparent; height:8%; width:100%; padding:0 2px; box-sizing:border-box; position:absolute; top:3px; left:0; z-index:2; pointer-events:none; display:flex; flex-flow: row nowrap;]
  35. [comment]----button----[/comment]
  36. [border=transparent; height:100%; width:fit-content; min-width:136px; padding:5px 10px; box-sizing:border-box; background: var(--color-1); display:flex; align-items:center; justify-content:center; text-align:center; color: var(--button); text-transform:uppercase; font-family:var(--header); line-height:100%; font-size:21px; letter-spacing:2px; border-radius:5px; margin-right:3px;][comment]
  37. ----* * * button text here ----
  38. [/comment]crushes[/border]
  39. [comment]----button end----[/comment]
  40.  
  41. [comment]----button----[/comment]
  42. [border=transparent; height:100%; width:fit-content; min-width:136px; padding:5px 10px; box-sizing:border-box; background: var(--color-2); display:flex; align-items:center; justify-content:center; text-align:center; color: var(--button); text-transform:uppercase; font-family:var(--header); line-height:100%; font-size:21px; letter-spacing:2px; border-radius:5px; margin-right:3px;][comment]
  43. ----* * * button text here ----
  44. [/comment]friends[/border]
  45. [comment]----button end----[/comment]
  46. [/border]
  47. [comment]----tabs cover----[/comment]
  48.  
  49. [comment]----tabs----[/comment]
  50. [border=transparent; height:8%; width:100%; padding:0; overflow:hidden;][border=transparent; padding:0; margin:5px 0 0 -12px;][tabs]
  51.  
  52. [comment]----character tab one (crushes)----[/comment]
  53. [tab=aaaaaaaaa][border=transparent; height:92%; width:100%; padding:18px; box-sizing:border-box; border-radius:3px; position:absolute; bottom:0; left:0; z-index:1; overflow:hidden;]
  54. [border=transparent; height:100%; width:100%; padding:15px 0; border:4px solid var(--color-2); box-sizing:border-box; position:relative; 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 15px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  55.  
  56. [comment]----copy this whole thing to make another character (rbox 1 -- alternate rbox 1 and 2)----[/comment]
  57. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; margin:5px 0 10px 0;]
  58. [comment]----icon----[/comment]
  59. [border=transparent; margin:5px 0; flex:1 0; padding:0; min-width:150px; max-width:160px;][border=transparent; padding:0; padding-top:calc(100% - 20px); border:10px solid var(--color-2); border-radius:50%; box-sizing:border-box; background: var(--aimg-1); background-size:cover; background-position: 50% 50%;][/border][/border]
  60. [comment]----character info----[/comment]
  61. [border=transparent; flex:3; height:fit-content; min-width:200px; padding:0; display:flex; flex-flow:column nowrap; align-items:flex-end; margin:5px 0;]
  62.  
  63. [comment]----character name----[/comment]
  64. [border=transparent; height:fit-content; width:100%; max-width:345px; padding:0; text-align:right; color: var(--color-1); font-size:30px; text-transform:uppercase; line-height:100%; font-family:var(--header); letter-spacing:1px; flex-shrink:0; font-style:oblique;][comment]
  65. ----* * * character name here----
  66. [/comment]character name[/border]
  67.  
  68. [comment]----character details----[/comment]
  69. [border=transparent; height:fit-content; width:100%; max-width:345px; padding:0; text-align:right; color: var(--color-1); font-size:22px; text-transform:uppercase; font-family:var(--header); letter-spacing:1px; line-height:100%; flex-shrink:0;][comment]
  70. ----* * * character details here----
  71. [/comment]age | faceclaim[/border]
  72.  
  73. [comment]----character description----[/comment]
  74. [border=transparent; height:98px; width:100%; max-width:345px; padding:8px 0; background: var(--color-1); box-sizing:border-box; margin-top:8px; 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 8px; box-sizing:border-box; color: var(--t-color); font-size:10px; text-align:justify; line-height:14px; font-family: var(--body);][comment]
  75. ----* * * text starts here ----
  76. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ligula eget velit imperdiet convallis quis ac dolor. Integer non feugiat sapien. Cras malesuada lectus et ante finibus ullamcorper. Nullam eleifend varius efficitur. Aliquam pellentesque dui at posuere elementum. Sed rutrum quam sit amet lectus faucibus, sit amet ornare felis luctus. Integer ut consectetur orci, viverra sagittis ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin nulla turpis, accumsan sit amet blandit at, blandit a leo.
  77.  
  78. Proin ac nunc et magna semper varius nec at mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dictum molestie metus in gravida. Vestibulum egestas commodo diam eget blandit. Sed commodo ac metus quis ultrices. Maecenas aliquet sit amet erat varius pulvinar. Praesent sodales gravida eleifend. Mauris eu nisi non augue egestas dapibus ut ac ante. Duis ultrices lorem venenatis diam eleifend, nec malesuada enim lobortis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  79. [/border][/border][/border]
  80. [comment]----character description end----[/comment]
  81.  
  82. [/border]
  83. [comment]----character info end----[/comment]
  84. [/border]
  85. [comment]----copy this too!----[/comment]
  86.  
  87. [comment]----copy this whole thing to make another character (rbox 2 -- alternate rbox 1 and 2)----[/comment]
  88. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:row-reverse wrap; justify-content:center; align-items:center; margin:5px 0 10px 0;]
  89. [comment]----icon----[/comment]
  90. [border=transparent; margin:5px 0; flex:1 0; padding:0; min-width:150px; max-width:160px;][border=transparent; padding:0; padding-top:calc(100% - 20px); border:10px solid var(--color-2); border-radius:50%; box-sizing:border-box; background: var(--aimg-2); background-size:cover; background-position: 50% 50%;][/border][/border]
  91. [comment]----character info----[/comment]
  92. [border=transparent; flex:3; height:fit-content; min-width:200px; padding:0; display:flex; flex-flow:column nowrap; align-items:flex-start; margin:5px 0;]
  93.  
  94. [comment]----character name----[/comment]
  95. [border=transparent; height:fit-content; width:100%; max-width:345px; padding:0; text-align:left; color: var(--color-1); font-size:30px; text-transform:uppercase; line-height:100%; font-family:var(--header); letter-spacing:1px; flex-shrink:0; font-style:oblique;][comment]
  96. ----* * * character name here----
  97. [/comment]character name[/border]
  98.  
  99. [comment]----character details----[/comment]
  100. [border=transparent; height:fit-content; width:100%; max-width:345px; padding:0; text-align:left; color: var(--color-1); font-size:22px; text-transform:uppercase; font-family:var(--header); letter-spacing:1px; line-height:100%; flex-shrink:0;][comment]
  101. ----* * * character details here----
  102. [/comment]age | faceclaim[/border]
  103.  
  104. [comment]----character description----[/comment]
  105. [border=transparent; height:98px; width:100%; max-width:345px; padding:8px 0; background: var(--color-1); box-sizing:border-box; margin-top:8px; 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 8px; box-sizing:border-box; color: var(--t-color); font-size:10px; text-align:justify; line-height:14px; font-family: var(--body);][comment]
  106. ----* * * text starts here ----
  107. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ligula eget velit imperdiet convallis quis ac dolor. Integer non feugiat sapien. Cras malesuada lectus et ante finibus ullamcorper. Nullam eleifend varius efficitur. Aliquam pellentesque dui at posuere elementum. Sed rutrum quam sit amet lectus faucibus, sit amet ornare felis luctus. Integer ut consectetur orci, viverra sagittis ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin nulla turpis, accumsan sit amet blandit at, blandit a leo.
  108.  
  109. Proin ac nunc et magna semper varius nec at mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dictum molestie metus in gravida. Vestibulum egestas commodo diam eget blandit. Sed commodo ac metus quis ultrices. Maecenas aliquet sit amet erat varius pulvinar. Praesent sodales gravida eleifend. Mauris eu nisi non augue egestas dapibus ut ac ante. Duis ultrices lorem venenatis diam eleifend, nec malesuada enim lobortis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  110. [/border][/border][/border]
  111. [comment]----character description end----[/comment]
  112.  
  113. [/border]
  114. [comment]----character info end----[/comment]
  115. [/border]
  116. [comment]----copy this too!----[/comment]
  117.  
  118. [/border][/border][/border]
  119. [/border]
  120. [comment]----tab contents end-----[/comment]
  121.  
  122. [comment]----button select----[/comment]
  123. [border=transparent; height:8%; width:fit-content; min-width:136px; position:absolute; top:3px; left:2px; z-index:3; padding:5px 10px; box-sizing:border-box; background: var(--bg-color); display:flex; align-items:center; justify-content:center; text-align:center; color: var(--button); text-shadow:2px 2px var(--color-1); text-transform:uppercase; font-family:var(--header); line-height:100%; font-size:21px; letter-spacing:2px; border-radius:5px; margin-right:3px;][comment]
  124. ----* * * button text here ----
  125. [/comment]crushes[/border]
  126. [comment]----button select end----[/comment]
  127.  
  128. [/tab]
  129. [comment]----character tab one end----[/comment]
  130.  
  131. [comment]----character tab two (friends)----[/comment]
  132. [tab=aaaaaaaaa][border=transparent; height:92%; width:100%; padding:18px; box-sizing:border-box; border-radius:3px; position:absolute; bottom:0; left:0; z-index:1; overflow:hidden;]
  133. [border=transparent; height:100%; width:100%; padding:15px 0; border:4px solid var(--color-2); box-sizing:border-box; position:relative; 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 15px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  134.  
  135. [comment]----copy this whole thing to make another character (rbox 1 -- alternate rbox 1 and 2)----[/comment]
  136. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; margin:5px 0 10px 0;]
  137. [comment]----icon----[/comment]
  138. [border=transparent; margin:5px 0; flex:1 0; padding:0; min-width:150px; max-width:160px;][border=transparent; padding:0; padding-top:calc(100% - 20px); border:10px solid var(--color-2); border-radius:50%; box-sizing:border-box; background: var(--bimg-1); background-size:cover; background-position: 50% 50%;][/border][/border]
  139. [comment]----character info----[/comment]
  140. [border=transparent; flex:3; height:fit-content; min-width:200px; padding:0; display:flex; flex-flow:column nowrap; align-items:flex-end; margin:5px 0;]
  141.  
  142. [comment]----character name----[/comment]
  143. [border=transparent; height:fit-content; width:100%; max-width:345px; padding:0; text-align:right; color: var(--color-1); font-size:30px; text-transform:uppercase; line-height:100%; font-family:var(--header); letter-spacing:1px; flex-shrink:0; font-style:oblique;][comment]
  144. ----* * * character name here----
  145. [/comment]character name[/border]
  146.  
  147. [comment]----character details----[/comment]
  148. [border=transparent; height:fit-content; width:100%; max-width:345px; padding:0; text-align:right; color: var(--color-1); font-size:22px; text-transform:uppercase; font-family:var(--header); letter-spacing:1px; line-height:100%; flex-shrink:0;][comment]
  149. ----* * * character details here----
  150. [/comment]age | faceclaim[/border]
  151.  
  152. [comment]----character description----[/comment]
  153. [border=transparent; height:98px; width:100%; max-width:345px; padding:8px 0; background: var(--color-1); box-sizing:border-box; margin-top:8px; 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 8px; box-sizing:border-box; color: var(--t-color); font-size:10px; text-align:justify; line-height:14px; font-family: var(--body);][comment]
  154. ----* * * text starts here ----
  155. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ligula eget velit imperdiet convallis quis ac dolor. Integer non feugiat sapien. Cras malesuada lectus et ante finibus ullamcorper. Nullam eleifend varius efficitur. Aliquam pellentesque dui at posuere elementum. Sed rutrum quam sit amet lectus faucibus, sit amet ornare felis luctus. Integer ut consectetur orci, viverra sagittis ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin nulla turpis, accumsan sit amet blandit at, blandit a leo.
  156.  
  157. Proin ac nunc et magna semper varius nec at mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dictum molestie metus in gravida. Vestibulum egestas commodo diam eget blandit. Sed commodo ac metus quis ultrices. Maecenas aliquet sit amet erat varius pulvinar. Praesent sodales gravida eleifend. Mauris eu nisi non augue egestas dapibus ut ac ante. Duis ultrices lorem venenatis diam eleifend, nec malesuada enim lobortis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  158. [/border][/border][/border]
  159. [comment]----character description end----[/comment]
  160.  
  161. [/border]
  162. [comment]----character info end----[/comment]
  163. [/border]
  164. [comment]----copy this too!----[/comment]
  165.  
  166. [comment]----copy this whole thing to make another character (rbox 2 -- alternate rbox 1 and 2)----[/comment]
  167. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:row-reverse wrap; justify-content:center; align-items:center; margin:5px 0 10px 0;]
  168. [comment]----icon----[/comment]
  169. [border=transparent; margin:5px 0; flex:1 0; padding:0; min-width:150px; max-width:160px;][border=transparent; padding:0; padding-top:calc(100% - 20px); border:10px solid var(--color-2); border-radius:50%; box-sizing:border-box; background: var(--bimg-2); background-size:cover; background-position: 50% 50%;][/border][/border]
  170. [comment]----character info----[/comment]
  171. [border=transparent; flex:3; height:fit-content; min-width:200px; padding:0; display:flex; flex-flow:column nowrap; align-items:flex-start; margin:5px 0;]
  172.  
  173. [comment]----character name----[/comment]
  174. [border=transparent; height:fit-content; width:100%; max-width:345px; padding:0; text-align:left; color: var(--color-1); font-size:30px; text-transform:uppercase; line-height:100%; font-family:var(--header); letter-spacing:1px; flex-shrink:0; font-style:oblique;][comment]
  175. ----* * * character name here----
  176. [/comment]character name[/border]
  177.  
  178. [comment]----character details----[/comment]
  179. [border=transparent; height:fit-content; width:100%; max-width:345px; padding:0; text-align:left; color: var(--color-1); font-size:22px; text-transform:uppercase; font-family:var(--header); letter-spacing:1px; line-height:100%; flex-shrink:0;][comment]
  180. ----* * * character details here----
  181. [/comment]age | faceclaim[/border]
  182.  
  183. [comment]----character description----[/comment]
  184. [border=transparent; height:98px; width:100%; max-width:345px; padding:8px 0; background: var(--color-1); box-sizing:border-box; margin-top:8px; 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 8px; box-sizing:border-box; color: var(--t-color); font-size:10px; text-align:justify; line-height:14px; font-family: var(--body);][comment]
  185. ----* * * text starts here ----
  186. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ligula eget velit imperdiet convallis quis ac dolor. Integer non feugiat sapien. Cras malesuada lectus et ante finibus ullamcorper. Nullam eleifend varius efficitur. Aliquam pellentesque dui at posuere elementum. Sed rutrum quam sit amet lectus faucibus, sit amet ornare felis luctus. Integer ut consectetur orci, viverra sagittis ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin nulla turpis, accumsan sit amet blandit at, blandit a leo.
  187.  
  188. Proin ac nunc et magna semper varius nec at mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dictum molestie metus in gravida. Vestibulum egestas commodo diam eget blandit. Sed commodo ac metus quis ultrices. Maecenas aliquet sit amet erat varius pulvinar. Praesent sodales gravida eleifend. Mauris eu nisi non augue egestas dapibus ut ac ante. Duis ultrices lorem venenatis diam eleifend, nec malesuada enim lobortis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  189. [/border][/border][/border]
  190. [comment]----character description end----[/comment]
  191.  
  192. [/border]
  193. [comment]----character info end----[/comment]
  194. [/border]
  195. [comment]----copy this too!----[/comment]
  196.  
  197. [/border][/border][/border]
  198. [/border]
  199. [comment]----tab contents end-----[/comment]
  200.  
  201. [comment]----button select----[/comment]
  202. [border=transparent; height:8%; width:fit-content; min-width:136px; position:absolute; top:3px; left:141px; z-index:3; padding:5px 10px; box-sizing:border-box; background: var(--bg-color); display:flex; align-items:center; justify-content:center; text-align:center; color: var(--button); text-shadow:2px 2px var(--color-2); text-transform:uppercase; font-family:var(--header); line-height:100%; font-size:21px; letter-spacing:2px; border-radius:5px; margin-right:3px;][comment]
  203. ----* * * button text here ----
  204. [/comment]friends[/border]
  205. [comment]----button select end----[/comment]
  206.  
  207. [/tab]
  208. [comment]----character tab two end----[/comment]
  209. [/tabs][/border][/border]
  210. [comment]----tabs end----[/comment]
  211.  
  212. [comment]----content filler area (ignore!)----[/comment]
  213. [border=transparent; height:92%; width:100%; padding:0; background: var(--bg-color); border-radius:3px;][/border]
  214.  
  215. [/border][comment]----signature! (do not remove!)-----
  216. [/comment][bg=transparent; height:fit-content; padding:0; width:100%; color: var(--color-1); position:absolute; bottom:15px; left:10px; z-index:7;opacity:0.8;font-size:10px;text-align:center; line-height:100%;][font=Open Sans]♡design by stardust galaxy, 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!