API tools faq
paste
ooksie

candy flowers (uxie x animegenork)

ooksie
Feb 7th, 2021 (edited)
188
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.19 KB | None | 0 0
raw download clone embed print report
  1. [comment]
  2.  
  3. fonts used:
  4. [font=Alegreya]headers[/font]
  5. [font=DM Sans]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: #EFEBE2;
  12.  
  13. *accent colour -- headers;
  14. --color-1: #AA2848;
  15. *text colour;
  16. --t-color:#000;
  17.  
  18. *fonts used;
  19. --header: 'Alegreya', serif;
  20. --body: 'DM Sans', sans-serif;
  21.  
  22. *extra image elements -- colours non-customisable;
  23. --flowers: url('https://i.imgur.com/bks4DKy.png');
  24. *buttons are 46px x 55px. weird ratio sry;
  25. --button: url('https://i.imgur.com/7mo8rRR.png');
  26.  
  27. *images are categorised based on which tab theyre in. images in tab 1 are labelled a, tab 2 with b and so on. all images are 1:1 aspect ratio.;
  28. --aimg-1: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  29. --aimg-2: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  30. --bimg-1: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  31. --bimg-2: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  32. --cimg-1: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  33. --cimg-2: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  34. --dimg-1: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  35. --dimg-2: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  36.  
  37. height:fit-content; min-height:430px; width:100%; max-width:600px; padding:0; padding-bottom:20px; position:relative; line-height:0; margin:auto;][border=transparent; height:fit-content; min-height:430px; width:100%; max-width:600px; padding:0; background: var(--bg-color); position:relative;]
  38.  
  39. [comment]----hidden scroll----[/comment]
  40. [border=transparent; height:430px; width:100%; padding:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  41.  
  42. [comment]----cover page----[/comment]
  43. [border=transparent; height:100%; width:50%; padding:15px 15px 25px 15px; box-sizing:border-box; display:flex; flex-flow: column nowrap; align-items:center; justify-content:center; position:relative; margin-bottom:3px;]
  44.  
  45. [comment]----character name----[/comment]
  46. [border=transparent; height:fit-content; width:100%; max-width:400px; padding:0 15px; box-sizing:border-box; color: var(--color-1); font-family: var(--header); font-size:clamp(40px, 5vw, 48px); padding:0; line-height:120%; text-transform:uppercase; letter-spacing:2px; text-align:center;][comment]
  47. ----* * * character name here----
  48. [/comment]character name[/border]
  49.  
  50. [comment]----subtitle----[/comment]
  51. [border=transparent; height:fit-content; width:100%; max-width:400px; padding:0 15px; box-sizing:border-box; color: var(--color-1); font-family: var(--header); font-size:clamp(18px, 3vw, 22px); padding:0; line-height:120%; letter-spacing:1px; text-align:center; margin:15px 0 35px 0;][comment]
  52. ----* * * subtitle here----
  53. [/comment]Role/Subtitle[/border]
  54.  
  55. [comment]----flowers----[/comment]
  56. [border=transparent; height:100%; width:clamp(350px, 120%, 600px); padding:0; background: var(--flowers); background-position:80% 50%; background-size:cover; pointer-events:none; position:absolute; top:0; left:0;][/border]
  57.  
  58. [/border]
  59. [comment]----cover page end----[/comment]
  60.  
  61. [comment]----main content----[/comment]
  62. [border=transparent; height:100%; width:50%; padding:20px 15px; box-sizing:border-box; position:relative;]
  63. [comment]----tabs----[/comment]
  64. [border=transparent; height:40px; width:100%; padding:0; overflow:hidden;][border=transparent; padding:0; margin:10px 0 0 -23px;][tabs]
  65.  
  66. [comment]----tab one (basic info)----[/comment]
  67. [tab=a..][border=transparent; height:calc(100% - 60px); width:100%; padding:20px 10px; box-sizing:border-box; position:absolute; bottom:0; left:0; display:flex; flex-flow: row wrap;]
  68.  
  69. [comment]----tab container----[/comment]
  70. [border=transparent; height:auto; max-height:100%; min-height:60%; flex:3; min-width:300px; padding:0; margin:5px; display:flex; flex-flow:column nowrap;]
  71. [comment]----tab title----[/comment]
  72. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--color-1); font-family: var(--header); font-size:clamp(35px, 6vw, 45px); line-height:100%; margin-bottom:5px;][comment]
  73. ----* * * tab title here----
  74. [/comment]Basic Info[/border]
  75.  
  76. [comment]----tab contents----[/comment]
  77. [border=transparent; height:auto; max-height:90%; width:100%; padding:5px 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; color: var(--t-color); font-family: var(--body); text-align:justify; font-size:12px; line-height:17px;][comment]
  78. ----* * * text starts here----
  79. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan facilisis nisi, eget finibus ante porttitor vel. Proin eget sollicitudin ante. Sed auctor felis eu urna efficitur porttitor. Ut sed tempus turpis. Cras luctus arcu non varius egestas. Nam non egestas metus, at consequat ex. Vivamus nec fringilla nunc. Etiam gravida hendrerit dolor in ultrices. Maecenas at justo ornare, pulvinar arcu ut, tempor urna. Nulla fermentum vel risus a vulputate.
  80.  
  81. Etiam elementum erat nec scelerisque tincidunt. Nunc sed metus eu sem consectetur suscipit. Ut ornare orci non lacus luctus, vel euismod mi faucibus. Nulla facilisi. Fusce sit amet accumsan mauris. Pellentesque iaculis consequat lobortis. Proin rhoncus augue mauris, mollis porta velit elementum vitae. Ut lobortis fringilla risus, vehicula accumsan nulla dapibus id. Morbi interdum, quam ut ullamcorper imperdiet, ex arcu auctor ligula, ut hendrerit nulla ipsum sit amet tellus. In eget ultricies metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  82.  
  83. In hac habitasse platea dictumst. Pellentesque lacinia velit eu odio vulputate commodo. Cras eget porta mi. Vivamus ac pharetra sem, accumsan consequat purus. Phasellus vehicula congue orci, quis placerat odio pretium eget. Sed tristique nibh nisl, sed consectetur nunc placerat quis. Integer tincidunt magna eget leo dapibus, mollis scelerisque est rutrum. Etiam mollis consequat ipsum. Aliquam pellentesque imperdiet tellus vitae luctus. Ut sodales ut eros quis efficitur. Ut placerat id ex a lacinia. Curabitur suscipit rutrum ante, sit amet lacinia lectus semper eget.
  84. [/border][/border][/border]
  85. [comment]----tab contents end----[/comment]
  86.  
  87. [/border]
  88. [comment]----tab container end----[/comment]
  89.  
  90. [comment]----images----[/comment]
  91. [border=transparent; height:auto; flex:1; min-height:110px; display:flex; flex-flow: row wrap; justify-content:center; align-items:center;]
  92. [border=transparent; width:clamp(100px, 15vw, 150px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--aimg-1); background-size:cover;
  93. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  94. [border=transparent; width:clamp(100px, 15vw, 150px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--aimg-2); background-size:cover;
  95. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  96. [/border]
  97. [comment]----images end----[/comment]
  98.  
  99. [/border][/tab]
  100. [comment]----tab one end----[/comment]
  101.  
  102.  
  103. [comment]----tab two (appearance)----[/comment]
  104. [tab=a..][border=transparent; height:calc(100% - 60px); width:100%; padding:20px 10px; box-sizing:border-box; position:absolute; bottom:0; left:0; display:flex; flex-flow: row wrap;]
  105.  
  106. [comment]----tab container----[/comment]
  107. [border=transparent; height:auto; max-height:100%; min-height:60%; flex:3; min-width:300px; padding:0; margin:5px; display:flex; flex-flow:column nowrap;]
  108. [comment]----tab title----[/comment]
  109. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--color-1); font-family: var(--header); font-size:clamp(35px, 6vw, 45px); line-height:100%; margin-bottom:5px;][comment]
  110. ----* * * tab title here----
  111. [/comment]Appearance[/border]
  112.  
  113. [comment]----tab contents----[/comment]
  114. [border=transparent; height:auto; max-height:90%; width:100%; padding:5px 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; color: var(--t-color); font-family: var(--body); text-align:justify; font-size:12px; line-height:17px;][comment]
  115. ----* * * text starts here----
  116. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan facilisis nisi, eget finibus ante porttitor vel. Proin eget sollicitudin ante. Sed auctor felis eu urna efficitur porttitor. Ut sed tempus turpis. Cras luctus arcu non varius egestas. Nam non egestas metus, at consequat ex. Vivamus nec fringilla nunc. Etiam gravida hendrerit dolor in ultrices. Maecenas at justo ornare, pulvinar arcu ut, tempor urna. Nulla fermentum vel risus a vulputate.
  117.  
  118. Etiam elementum erat nec scelerisque tincidunt. Nunc sed metus eu sem consectetur suscipit. Ut ornare orci non lacus luctus, vel euismod mi faucibus. Nulla facilisi. Fusce sit amet accumsan mauris. Pellentesque iaculis consequat lobortis. Proin rhoncus augue mauris, mollis porta velit elementum vitae. Ut lobortis fringilla risus, vehicula accumsan nulla dapibus id. Morbi interdum, quam ut ullamcorper imperdiet, ex arcu auctor ligula, ut hendrerit nulla ipsum sit amet tellus. In eget ultricies metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  119.  
  120. In hac habitasse platea dictumst. Pellentesque lacinia velit eu odio vulputate commodo. Cras eget porta mi. Vivamus ac pharetra sem, accumsan consequat purus. Phasellus vehicula congue orci, quis placerat odio pretium eget. Sed tristique nibh nisl, sed consectetur nunc placerat quis. Integer tincidunt magna eget leo dapibus, mollis scelerisque est rutrum. Etiam mollis consequat ipsum. Aliquam pellentesque imperdiet tellus vitae luctus. Ut sodales ut eros quis efficitur. Ut placerat id ex a lacinia. Curabitur suscipit rutrum ante, sit amet lacinia lectus semper eget.
  121. [/border][/border][/border]
  122. [comment]----tab contents end----[/comment]
  123.  
  124. [/border]
  125. [comment]----tab container end----[/comment]
  126.  
  127. [comment]----images----[/comment]
  128. [border=transparent; height:auto; flex:1; min-height:110px; display:flex; flex-flow: row wrap; justify-content:center; align-items:center;]
  129. [border=transparent; width:clamp(100px, 15vw, 150px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--bimg-1); background-size:cover;
  130. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  131. [border=transparent; width:clamp(100px, 15vw, 150px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--bimg-2); background-size:cover;
  132. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  133. [/border]
  134. [comment]----images end----[/comment]
  135.  
  136. [/border][/tab]
  137. [comment]----tab two end----[/comment]
  138.  
  139.  
  140. [comment]----tab three (personality)----[/comment]
  141. [tab=a..][border=transparent; height:calc(100% - 60px); width:100%; padding:20px 10px; box-sizing:border-box; position:absolute; bottom:0; left:0; display:flex; flex-flow: row wrap;]
  142.  
  143. [comment]----tab container----[/comment]
  144. [border=transparent; height:auto; max-height:100%; min-height:60%; flex:3; min-width:300px; padding:0; margin:5px; display:flex; flex-flow:column nowrap;]
  145. [comment]----tab title----[/comment]
  146. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--color-1); font-family: var(--header); font-size:clamp(35px, 6vw, 45px); line-height:100%; margin-bottom:5px;][comment]
  147. ----* * * tab title here----
  148. [/comment]Personality[/border]
  149.  
  150. [comment]----tab contents----[/comment]
  151. [border=transparent; height:auto; max-height:90%; width:100%; padding:5px 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; color: var(--t-color); font-family: var(--body); text-align:justify; font-size:12px; line-height:17px;][comment]
  152. ----* * * text starts here----
  153. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan facilisis nisi, eget finibus ante porttitor vel. Proin eget sollicitudin ante. Sed auctor felis eu urna efficitur porttitor. Ut sed tempus turpis. Cras luctus arcu non varius egestas. Nam non egestas metus, at consequat ex. Vivamus nec fringilla nunc. Etiam gravida hendrerit dolor in ultrices. Maecenas at justo ornare, pulvinar arcu ut, tempor urna. Nulla fermentum vel risus a vulputate.
  154.  
  155. Etiam elementum erat nec scelerisque tincidunt. Nunc sed metus eu sem consectetur suscipit. Ut ornare orci non lacus luctus, vel euismod mi faucibus. Nulla facilisi. Fusce sit amet accumsan mauris. Pellentesque iaculis consequat lobortis. Proin rhoncus augue mauris, mollis porta velit elementum vitae. Ut lobortis fringilla risus, vehicula accumsan nulla dapibus id. Morbi interdum, quam ut ullamcorper imperdiet, ex arcu auctor ligula, ut hendrerit nulla ipsum sit amet tellus. In eget ultricies metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  156.  
  157. In hac habitasse platea dictumst. Pellentesque lacinia velit eu odio vulputate commodo. Cras eget porta mi. Vivamus ac pharetra sem, accumsan consequat purus. Phasellus vehicula congue orci, quis placerat odio pretium eget. Sed tristique nibh nisl, sed consectetur nunc placerat quis. Integer tincidunt magna eget leo dapibus, mollis scelerisque est rutrum. Etiam mollis consequat ipsum. Aliquam pellentesque imperdiet tellus vitae luctus. Ut sodales ut eros quis efficitur. Ut placerat id ex a lacinia. Curabitur suscipit rutrum ante, sit amet lacinia lectus semper eget.
  158. [/border][/border][/border]
  159. [comment]----tab contents end----[/comment]
  160.  
  161. [/border]
  162. [comment]----tab container end----[/comment]
  163.  
  164. [comment]----images----[/comment]
  165. [border=transparent; height:auto; flex:1; min-height:110px; display:flex; flex-flow: row wrap; justify-content:center; align-items:center;]
  166. [border=transparent; width:clamp(100px, 15vw, 150px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--cimg-1); background-size:cover;
  167. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  168. [border=transparent; width:clamp(100px, 15vw, 150px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--cimg-2); background-size:cover;
  169. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  170. [/border]
  171. [comment]----images end----[/comment]
  172.  
  173. [/border][/tab]
  174. [comment]----tab three end----[/comment]
  175.  
  176.  
  177. [comment]----tab four (background)----[/comment]
  178. [tab=a..][border=transparent; height:calc(100% - 60px); width:100%; padding:20px 10px; box-sizing:border-box; position:absolute; bottom:0; left:0; display:flex; flex-flow: row wrap;]
  179.  
  180. [comment]----tab container----[/comment]
  181. [border=transparent; height:auto; max-height:100%; min-height:60%; flex:3; min-width:300px; padding:0; margin:5px; display:flex; flex-flow:column nowrap;]
  182. [comment]----tab title----[/comment]
  183. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--color-1); font-family: var(--header); font-size:clamp(35px, 6vw, 45px); line-height:100%; margin-bottom:5px;][comment]
  184. ----* * * tab title here----
  185. [/comment]History[/border]
  186.  
  187. [comment]----tab contents----[/comment]
  188. [border=transparent; height:auto; max-height:90%; width:100%; padding:5px 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; color: var(--t-color); font-family: var(--body); text-align:justify; font-size:12px; line-height:17px;][comment]
  189. ----* * * text starts here----
  190. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan facilisis nisi, eget finibus ante porttitor vel. Proin eget sollicitudin ante. Sed auctor felis eu urna efficitur porttitor. Ut sed tempus turpis. Cras luctus arcu non varius egestas. Nam non egestas metus, at consequat ex. Vivamus nec fringilla nunc. Etiam gravida hendrerit dolor in ultrices. Maecenas at justo ornare, pulvinar arcu ut, tempor urna. Nulla fermentum vel risus a vulputate.
  191.  
  192. Etiam elementum erat nec scelerisque tincidunt. Nunc sed metus eu sem consectetur suscipit. Ut ornare orci non lacus luctus, vel euismod mi faucibus. Nulla facilisi. Fusce sit amet accumsan mauris. Pellentesque iaculis consequat lobortis. Proin rhoncus augue mauris, mollis porta velit elementum vitae. Ut lobortis fringilla risus, vehicula accumsan nulla dapibus id. Morbi interdum, quam ut ullamcorper imperdiet, ex arcu auctor ligula, ut hendrerit nulla ipsum sit amet tellus. In eget ultricies metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  193.  
  194. In hac habitasse platea dictumst. Pellentesque lacinia velit eu odio vulputate commodo. Cras eget porta mi. Vivamus ac pharetra sem, accumsan consequat purus. Phasellus vehicula congue orci, quis placerat odio pretium eget. Sed tristique nibh nisl, sed consectetur nunc placerat quis. Integer tincidunt magna eget leo dapibus, mollis scelerisque est rutrum. Etiam mollis consequat ipsum. Aliquam pellentesque imperdiet tellus vitae luctus. Ut sodales ut eros quis efficitur. Ut placerat id ex a lacinia. Curabitur suscipit rutrum ante, sit amet lacinia lectus semper eget.
  195. [/border][/border][/border]
  196. [comment]----tab contents end----[/comment]
  197.  
  198. [/border]
  199. [comment]----tab container end----[/comment]
  200.  
  201. [comment]----images----[/comment]
  202. [border=transparent; height:auto; flex:1; min-height:110px; display:flex; flex-flow: row wrap; justify-content:center; align-items:center;]
  203. [border=transparent; width:clamp(100px, 15vw, 150px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--dimg-1); background-size:cover;
  204. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  205. [border=transparent; width:clamp(100px, 15vw, 150px); padding:0; margin:5px;][border=transparent; padding:0; padding-top:100%; background: var(--dimg-2); background-size:cover;
  206. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  207. [/border]
  208. [comment]----images end----[/comment]
  209.  
  210. [/border][/tab]
  211. [comment]----tab four end----[/comment]
  212.  
  213.  
  214. [/tabs][/border][/border]
  215. [comment]----tabs end----[/comment]
  216.  
  217. [comment]----tabs cover----[/comment]
  218. [border=transparent; height:65px; width:100%; padding:20px 15px 0 15px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:3; display:flex; flex-flow: row nowrap; align-items:center; pointer-events:none; background: var(--bg-color);]
  219.  
  220. [comment]----button----[/comment]
  221. [border=transparent; height:46px; width:55px; padding:0; background: var(--button); background-size:cover; background-position:50% 50%; margin-right:17px; flex:auto 0;][/border]
  222. [comment]----button----[/comment]
  223. [border=transparent; height:46px; width:55px; padding:0; background: var(--button); background-size:cover; background-position:50% 50%; margin-right:17px; flex:auto 0;][/border]
  224. [comment]----button----[/comment]
  225. [border=transparent; height:46px; width:55px; padding:0; background: var(--button); background-size:cover; background-position:50% 50%; margin-right:17px; flex:auto 0;][/border]
  226. [comment]----button----[/comment]
  227. [border=transparent; height:46px; width:55px; padding:0; background: var(--button); background-size:cover; background-position:50% 50%; margin-right:17px; flex:auto 0;][/border]
  228.  
  229. [/border]
  230. [comment]----tabs cover end----[/comment]
  231.  
  232. [/border]
  233. [comment]----main content end----[/comment]
  234.  
  235. [/border][/border]
  236. [comment]----hidden scroll end----[/comment]
  237. [/border][comment]----signature! (do not remove!)-----
  238. [/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 animegenork, 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!