ooksie

lilies

Jan 5th, 2021 (edited)
537
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [comment]
  2.  
  3. fonts used:
  4. [font=Abril Fatface]biiig name[/font]
  5. [font=Raleway]body text, role 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 (main textbox);
  11. --bg-color: #fff;
  12. *border colour;
  13. --border:#e2dcd9;
  14. *main accent colour (dialogue, info tags);
  15. --color-1: #c49a85;
  16. *details textbox background colour;
  17. --color-2: #fff;
  18.  
  19. *text colour;
  20. --t-color: #383230;
  21. *name colour (shadow);
  22. --name-c: #DFC2B3;
  23. *name outline;
  24. --name-o: #937e74;
  25.  
  26. *fonts;
  27. --name: 'Abril Fatface', display;
  28. --body: 'Raleway', sans-serif;
  29. --role: 'Raleway', sans-serif;
  30.  
  31. *images;
  32. --img-1: url('https://i.pinimg.com/564x/11/4e/fd/114efd78f21f5f097e54bf803a0865ac.jpg');
  33.  
  34. margin:auto; height:fit-content; width:100%; max-width:560px; padding:10px; box-sizing:border-box; padding-bottom:25px; position:relative; line-height:0;][border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow: row wrap; cursor:crosshair; position:relative;]
  35.  
  36. [comment]----image----[/comment]
  37. [border=transparent; height:390px; width:100%; flex:2; min-width:195px; padding:0; background: var(--img-1); background-size:cover;
  38. /*edit the following to adjust the cropping of the image*/ background-position:50% 30%;][/border]
  39.  
  40. [comment]----post container----[/comment]
  41. [border=transparent; height:390px; width:100%; flex:3; min-width:330px; padding:0; background: var(--bg-color); box-sizing:border-box; border:1px solid var(--border); display:flex; flex-flow:column nowrap;]
  42. [comment]----post contents----[/comment]
  43. [border=transparent; height:81%; width:100%; padding:15px 0; box-sizing:border-box; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px; font-family:var(--body);][comment]
  44.  
  45. ----* * * text starts here----
  46.  
  47. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis est arcu, feugiat nec aliquam eget, lobortis et ligula. Quisque ipsum felis, cursus nec elit at, bibendum rutrum nibh. Suspendisse non sollicitudin turpis, sed bibendum tellus. Mauris sed mauris suscipit, auctor enim eget, vestibulum dolor. Maecenas pretium laoreet diam ac volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Suspendisse accumsan euismod purus, quis sodales mauris mattis a. In sollicitudin sit amet sapien a porta. Fusce nec massa sagittis, volutpat ex et, scelerisque felis. Sed sit amet tincidunt eros. Nam sed suscipit nulla, quis laoreet urna. [border=transparent; padding:0; color: var(--color-1); font-weight:bold; display:inline;]"this is a dialogue."[/border]
  48.  
  49. Integer vitae ex id quam convallis pharetra sed ut nibh. Suspendisse et nunc mauris. Vestibulum vitae justo sit amet sapien aliquet feugiat ut sit amet est. Donec ac ligula quis lorem ornare posuere. Sed fringilla elit et condimentum finibus. Etiam at risus fermentum, placerat massa in, imperdiet augue. Mauris sed maximus urna. Nam nisi lacus, malesuada et neque et, volutpat auctor orci. Vestibulum aliquet efficitur laoreet. Maecenas in eleifend eros. Pellentesque commodo ornare urna, ac cursus nibh volutpat eu. Cras quis nibh eu turpis porta tempus vitae vel dolor. Nam interdum at tellus nec ultrices. Vestibulum sodales nisl vel pretium dapibus. Suspendisse id arcu vel odio posuere sodales ut at velit.
  50.  
  51. Quisque aliquam urna elit, et rhoncus nibh eleifend eu. Donec quis mi quis nulla ultrices consequat eu at dui. Duis vehicula condimentum velit, eget vestibulum arcu rutrum varius. Duis in rhoncus tortor, vel tincidunt libero. Sed lorem augue, pretium non nulla nec, feugiat sodales nulla. Fusce id gravida justo, id varius quam. Ut pellentesque tortor ut sem porta congue. Nulla magna sem, laoreet eu rhoncus at, posuere nec nibh. Quisque pharetra non odio tincidunt semper. Etiam imperdiet nunc felis, sit amet consequat mi volutpat sit amet.
  52. [/border][/border][/border]
  53. [comment]----post contents end----[/comment]
  54.  
  55. [comment]----tabs cover----[/comment]
  56. [border=transparent; height:100%; width:100%; max-width:540px; padding:0; position:absolute; bottom:0; right:0; pointer-events:none; display:flex; flex-flow:row wrap;][border=transparent; height:390px; width:100%; min-width:190px; flex:2; padding:0;][/border][border=transparent; height:390px; width:100%; flex:3; min-width:307px; padding:5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:flex-end;][border=transparent; height:18.5%; width:100%; padding:5px; box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow: row nowrap; align-items:center; justify-content:flex-end;]
  57.  
  58. [comment]----role----[/comment]
  59. [border=transparent; height:fit-content; width:fit-content; max-width:60%; padding:3px 15px 3px 10px; background: var(--name-c); color: var(--t-color); font-family:var(--role); font-style:oblique; font-size:10px; letter-spacing:1px; line-height:100%; margin:7px -10px 0 0; text-align:right;][comment]
  60.  
  61. ----* * * role here----
  62.  
  63. [/comment]the influencer[/border]
  64.  
  65. [comment]----name----[/comment]
  66. [border=transparent; height:fit-content; width:fit-content; padding:0; color:transparent; text-shadow:-3px 2px var(--name-c); -webkit-text-stroke:1px var(--name-o); font-size:60px; letter-spacing:2px; font-family:var(--name); text-align:right; flex-shrink:0;][comment]
  67.  
  68. ----* * * name here (one line -- nicknames if the full names are too long plz)----
  69.  
  70. [/comment]hana.[/border]
  71.  
  72. [/border][/border][/border]
  73. [comment]----tabs cover end----[/comment]
  74.  
  75. [comment]----tabs/name area----[/comment]
  76. [border=transparent; height:18.5%; width:100%; padding:10px; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-end;]
  77. [comment]----details tabs----[/comment]
  78. [border=transparent; height:40%; width:110px; padding:0; background:blue; overflow:hidden; margin:8px 25px 0 0;][border=transparent; width:300px; padding:0; display:flex; justify-content:flex-end; margin-left:-45px; padding:0;][tabs]
  79. [tab=aaaaaaaaa][border=transparent; width:390px; padding:0; font-size:0;]filler tab![/border][/tab]
  80.  
  81. [comment]----details tab----[/comment]
  82. [tab=aaaaaaaaa][border=transparent; height:100%; width:100%; max-width:540px; padding:0; position:absolute; top:0; left:0; pointer-events:none; display:flex; flex-flow: row wrap;][border=transparent; height:390px; width:100%; min-width:195px; flex:2; padding:15px 20px; box-sizing:border-box; display:flex; align-items:flex-end; justify-content:center;]
  83. [comment]----details box----[/comment]
  84. [border=transparent; height:30%; width:100%; max-width:260px; padding:10px 0; box-sizing:border-box; position:relative; overflow:hidden; display:flex; flex-direction:column; pointer-events:auto;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-2); opacity:0.8; position:absolute; top:0; left:0; z-index:1; pointer-events:none;][/border][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:column nowrap; position:relative; z-index:2; align-items:center;]
  85.  
  86. [comment]----copy this whole thing to make another tag!----[/comment]
  87. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:center; font-family:var(--body); font-size:12px; margin:2px 0;]
  88. [comment]----tag title----[/comment]
  89. [border=transparent; height:fit-content; width:fit-content; padding:0 3px; box-sizing:border-box; border-bottom:2px solid var(--color-1); line-height:120%; flex-shrink:0; color: var(--t-color);][comment]
  90.  
  91. ----* * *tag title here----
  92.  
  93. [/comment]hello[/border]
  94.  
  95. [comment]----tag info----[/comment]
  96. [border=transparent; height:fit-content; flex-grow:1; padding:0; color: var(--t-color); margin:-2px 0 0 10px; line-height:120%;][comment]
  97.  
  98. ----* * * tag info here!----
  99.  
  100. [/comment]goodbye[/border]
  101. [/border]
  102. [comment]----copy me too!----[/comment]
  103.  
  104. [comment]----copy this whole thing to make another tag!----[/comment]
  105. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:center; font-family:var(--body); font-size:12px; margin:2px 0;]
  106. [comment]----tag title----[/comment]
  107. [border=transparent; height:fit-content; width:fit-content; padding:0 3px; box-sizing:border-box; border-bottom:2px solid var(--color-1); line-height:120%; flex-shrink:0; color: var(--t-color);][comment]
  108.  
  109. ----* * *tag title here----
  110.  
  111. [/comment]hello[/border]
  112.  
  113. [comment]----tag info----[/comment]
  114. [border=transparent; height:fit-content; flex-grow:1; padding:0; color: var(--t-color); margin:-2px 0 0 10px; line-height:120%;][comment]
  115.  
  116. ----* * * tag info here!----
  117.  
  118. [/comment]goodbye[/border]
  119. [/border]
  120. [comment]----copy me too!----[/comment]
  121.  
  122. [/border][/border][/border][/border][border=transparent; height:390px; width:100%; flex:3; min-width:330px; padding:0;][/border]
  123. [/border][/tab]
  124. [comment]----details end----[/comment]
  125. [/tabs][/border][/border]
  126. [/border]
  127.  
  128. [/border]
  129. [comment]----tabs/name area end----[/comment]
  130. [/border][comment]
  131. ----signature! do not remove
  132. [/comment][bg=transparent; height:fit-content; width:100%; position:absolute ;z-index:6;opacity:0.8; font-size:10px;text-align:center; left:0; bottom:15px; color: var(--color-1);][font=Open Sans]♡coded by uxie♡[/font][/bg][/border]
RAW Paste Data Copied