API tools faq
paste
ooksie

adventurer's ale (nine lives)

ooksie
Dec 11th, 2020 (edited)
203
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.24 KB | None | 0 0
raw download clone embed print report
  1. [comment]code by nine lives ♡
  2.  
  3. fonts used:
  4. [font=Parisienne]character name, title[/font]
  5. [font=Josefin Sans]body text[/font]
  6.  
  7. to replace fonts, replace them here, then search up 'font-family' and replace them there too between the ''!
  8. [/comment][border=transparent;
  9. *background image;
  10. --bg: url('https://cdn.discordapp.com/attachments/774641055294816279/786938508752322600/CBtP5zjYRR184Ur5gqR20QeWdShmZbgPb3tqK0NEbPNx_scGkFyKvuqfRoPwUSMz6_HzKhfptGE-tBCH4OYw1200-h630-p-k-no.png');
  11. *background colour;
  12. --bg-color: #291602;
  13.  
  14. *first accent colour (darker) -- name, info titles, buttons, decoration icon;
  15. --color-1: #dbae6b;
  16. *second accent colour (lighter) -- selected button accent;
  17. --color-2: #f7d8ad;
  18. *text colour -- main body text, character info;
  19. --t-color: #fff;
  20.  
  21. *main character image;
  22. --img-1: url('https://i.pinimg.com/originals/02/ed/49/02ed4990ed9c4c62124707cddaac6a50.jpg');
  23.  
  24. height:fit-content; width:100%; max-width:580px; padding:15px; box-sizing:border-box; margin:auto; position:relative; line-height:0;]
  25. [comment]----background image----[/comment]
  26. [border=transparent; height:100%; width:100%; padding:0; background: var(--bg); background-size:cover; background-position: 50% 50%; position:absolute; top:0; left:0; z-index:1; pointer-events:none;][/border]
  27.  
  28. [comment]----main content----[/comment]
  29. [border=transparent; height:fit-content; width:100%; max-width:550px; padding:5px; box-sizing:border-box; display:flex; flex-flow: row-reverse wrap; justify-content:center;]
  30. [comment]----background colour----[/comment]
  31. [border=transparent; height:calc(100% - 20px); width:calc(100% - 20px); padding:0; background: var(--bg-color); position:absolute; top:10px; left:10px; z-index:1; opacity:0.8; pointer-events:none;][/border]
  32.  
  33. [comment]----right----[/comment]
  34. [border=transparent; height:413px; width:100%; padding:15px 10px; box-sizing:border-box; min-width:220px; flex:3; display:flex; flex-flow:column nowrap; justify-content:flex-end; align-items:center; position:relative;]
  35.  
  36. [comment]----character image----[/comment]
  37. [border=transparent; height:82%; width:100%; padding:0; background: var(--img-1); position:relative; z-index:2; background-size:cover; pointer-events:none;
  38. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  39.  
  40. [comment]----tabs cover (remember to match any icon changes here to ----button select---- borders)----[/comment]
  41. [border=transparent; height:7%; width:100%; padding:0; box-sizing:border-box; position:absolute; bottom:15px; right:0; z-index:3; display:flex; flex-flow: row nowrap; justify-content:center; align-items:center; pointer-events:none;]
  42. [comment]----button----[/comment]
  43. [border=transparent; height:45px; width:45px; padding:0; color: var(--color-1); font-size:35px; display:flex; align-items:center; justify-content:center; margin:0 8px;][comment]
  44. ----* * * button icon here! replace icon in fa-icon with the icon of your choice!----
  45. [/comment][fa]far fa-leaf[/fa][/border]
  46.  
  47. [comment]----button----[/comment]
  48. [border=transparent; height:45px; width:45px; padding:0; color: var(--color-1); font-size:35px; display:flex; align-items:center; justify-content:center; margin:0 8px;][comment]
  49. ----* * * button icon here! replace icon in fa-icon with the icon of your choice!----
  50. [/comment][fa]far fa-leaf[/fa][/border]
  51.  
  52. [comment]----button----[/comment]
  53. [border=transparent; height:45px; width:45px; padding:0; color: var(--color-1); font-size:35px; display:flex; align-items:center; justify-content:center; margin:0 8px;][comment]
  54. ----* * * button icon here! replace icon in fa-icon with the icon of your choice!----
  55. [/comment][fa]far fa-leaf[/fa][/border]
  56. [/border]
  57. [comment]----tabs cover end----[/comment]
  58.  
  59. [comment]----tabs----[/comment]
  60. [border=transparent; height:7%; width:220px; padding:0; overflow:hidden; margin-top:-12px;][border=transparent; padding:0;][tabs]
  61.  
  62. [comment]----info tab 1----[/comment]
  63. [tab=.][border=transparent; height:13%; width:100%; padding:0 10px; box-sizing:border-box; position:absolute; top:5px; left:0; z-index:3; letter-spacing:0;][border=transparent; height:100%; width:100%; padding:0; position:relative; display:flex; align-items:flex-end; justify-content:flex-end;]
  64.  
  65. [comment]----info title----[/comment]
  66. [border=transparent; height:fit-content; width:100%; padding:0; position:absolute; bottom:4px; right:0; z-index:1; color: var(--color-1); font-family:'Parisienne', display; font-size:34px; line-height:100%; font-weight:bold; letter-spacing:1px; opacity:0.8; text-align:right;][comment]
  67. ----* * * info title here!----
  68. [/comment]race[/border]
  69.  
  70. [comment]----info contents----[/comment]
  71. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); font-weight:bold; font-family:'Josefin Sans', sans-serif; letter-spacing:1px; font-size:19px; position:relative; z-index:2; line-height:110%; text-align:right;][comment]
  72. ----* * * character info here!----
  73. [/comment]character info[/border]
  74. [/border][/border]
  75.  
  76. [comment]----button select (remember to match this icon to the button icon!)----[/comment]
  77. [border=transparent; height:fit-content; width:100%; padding:0; position:absolute; bottom:7px; left:0; z-index:3; display:flex; justify-content:center; align-items:center; pointer-events:none; letter-spacing:0;][border=transparent; height:45px; width:45px; padding:0; color: var(--color-2); font-size:35px; display:flex; align-items:center; justify-content:center; margin:0 122px 0 0;][comment]
  78. ----* * * button icon here! replace icon in fa-icon with the icon of your choice!----
  79. [/comment][fa]far fa-leaf[/fa][/border][/border][/tab]
  80. [comment]----info tab 1 end----[/comment]
  81.  
  82.  
  83. [comment]----info tab 2----[/comment]
  84. [tab=.][border=transparent; height:13%; width:100%; padding:0 10px; box-sizing:border-box; position:absolute; top:5px; left:0; z-index:3; letter-spacing:0;][border=transparent; height:100%; width:100%; padding:0; position:relative; display:flex; align-items:flex-end; justify-content:flex-end;]
  85.  
  86. [comment]----info title----[/comment]
  87. [border=transparent; height:fit-content; width:100%; padding:0; position:absolute; bottom:4px; right:0; z-index:1; color: var(--color-1); font-family:'Parisienne', display; font-size:34px; line-height:100%; font-weight:bold; letter-spacing:1px; opacity:0.8; text-align:right;][comment]
  88. ----* * * info title here!----
  89. [/comment]class & rank[/border]
  90.  
  91. [comment]----info contents----[/comment]
  92. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); font-weight:bold; font-family:'Josefin Sans', sans-serif; letter-spacing:1px; font-size:19px; position:relative; z-index:2; line-height:110%; text-align:right;][comment]
  93. ----* * * character info here!----
  94. [/comment]character info[/border]
  95. [/border][/border]
  96.  
  97. [comment]----button select (remember to match this icon to the button icon!)----[/comment]
  98. [border=transparent; height:fit-content; width:100%; padding:0; position:absolute; bottom:7px; left:0; z-index:3; display:flex; justify-content:center; align-items:center; pointer-events:none; letter-spacing:0;][border=transparent; height:45px; width:45px; padding:0; color: var(--color-2); font-size:35px; display:flex; align-items:center; justify-content:center; margin:0 0 0 0;][comment]
  99. ----* * * button icon here! replace icon in fa-icon with the icon of your choice!----
  100. [/comment][fa]far fa-leaf[/fa][/border][/border][/tab]
  101. [comment]----info tab 2 end----[/comment]
  102.  
  103.  
  104. [comment]----info tab 3----[/comment]
  105. [tab=.][border=transparent; height:13%; width:100%; padding:0 10px; box-sizing:border-box; position:absolute; top:5px; left:0; z-index:3; letter-spacing:0;][border=transparent; height:100%; width:100%; padding:0; position:relative; display:flex; align-items:flex-end; justify-content:flex-end;]
  106.  
  107. [comment]----info title----[/comment]
  108. [border=transparent; height:fit-content; width:100%; padding:0; position:absolute; bottom:4px; right:0; z-index:1; color: var(--color-1); font-family:'Parisienne', display; font-size:34px; line-height:100%; font-weight:bold; letter-spacing:1px; opacity:0.8; text-align:right;][comment]
  109. ----* * * info title here!----
  110. [/comment]party[/border]
  111.  
  112. [comment]----info contents----[/comment]
  113. [border=transparent; height:fit-content; max-height:80%; width:fit-content; padding:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:auto;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-weight:bold; font-family:'Josefin Sans', sans-serif; letter-spacing:1px; font-size:19px; position:relative; z-index:2; line-height:110%; text-align:right;][comment]
  114. ----* * * character info here! (this scrolls!)----
  115. [/comment]character info[/border]
  116. [/border][/border]
  117. [/border][/border]
  118.  
  119. [comment]----button select (remember to match this icon to the button icon!)----[/comment]
  120. [border=transparent; height:fit-content; width:100%; padding:0; position:absolute; bottom:7px; left:0; z-index:3; display:flex; justify-content:center; align-items:center; pointer-events:none; letter-spacing:0;][border=transparent; height:45px; width:45px; padding:0; color: var(--color-2); font-size:35px; display:flex; align-items:center; justify-content:center; margin:0 0 0 122px;][comment]
  121. ----* * * button icon here! replace icon in fa-icon with the icon of your choice!----
  122. [/comment][fa]far fa-leaf[/fa][/border][/border][/tab]
  123. [comment]----info tab 3 end----[/comment]
  124.  
  125. [/tabs][/border][/border]
  126.  
  127. [/border]
  128. [comment]----right end----[/comment]
  129.  
  130. [comment]----left----[/comment]
  131. [border=transparent; height:413px; width:100%; flex:5; padding:15px 10px; min-width:300px; box-sizing:border-box; position:relative; z-index:2; display:flex; flex-flow:column nowrap; overflow:hidden;]
  132.  
  133. [comment]----name----[/comment]
  134. [border=transparent; min-height:6%; width:100%; padding:3px 0 15px 0; color: var(--color-1); font-size:40px; line-height:90%; font-family:'Parisienne', display; font-weight:bold;][comment]
  135. ----* * * character name here!----
  136. [/comment]Name Here[/border]
  137.  
  138. [comment]----text----[/comment]
  139. [border=transparent; max-height:92%; width:100%; padding:3px 0 0 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; position:relative; z-index:3;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:12px; text-align:justify; font-family:'Josefin Sans', sans-serif; line-height:130%;][comment]
  140. ----* * * text starts here----
  141. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec velit tortor, iaculis eu turpis non, scelerisque malesuada purus. Curabitur vulputate mi metus, quis tincidunt turpis venenatis eu. Cras eros urna, vehicula ac ullamcorper nec, laoreet id nibh. Cras sodales pharetra varius. In sit amet felis pharetra, efficitur tortor tristique, blandit ex. Duis vel cursus nisl. Phasellus vel euismod nibh, rhoncus vehicula magna.
  142.  
  143. Fusce finibus varius magna, in mollis urna pretium non. Phasellus aliquet elit et augue blandit, at euismod turpis luctus. Proin convallis justo non odio vulputate imperdiet. Integer pulvinar, arcu varius fermentum tristique, nisl augue bibendum diam, vitae vulputate nisl tellus vitae augue. Aliquam nec lectus a turpis efficitur suscipit. Vestibulum nec arcu et ex fringilla tristique. Pellentesque eleifend a ante ut feugiat. Proin risus neque, facilisis ut ornare ac, pellentesque sed magna. In sit amet elementum tortor. Curabitur felis leo, porttitor a lobortis nec, bibendum a urna. Donec at luctus sem, vel ullamcorper diam. Mauris sagittis ut nibh eget varius. Pellentesque posuere vel mauris ut auctor. Quisque euismod pellentesque sem, eget feugiat ante molestie quis. Vivamus facilisis, erat sed sodales blandit, lectus risus venenatis elit, vel scelerisque nisl velit sed nulla. Quisque eleifend mollis lectus, nec facilisis augue accumsan sed.
  144. [/border][/border][/border]
  145. [comment]----text end----[/comment]
  146.  
  147. [comment]----character icon----[/comment]
  148. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-1); position:absolute; bottom:0; left:-20px; z-index:2; font-size:140px; opacity:0.4; line-height:100%;][comment]
  149. ----* * * character icon here! replace icon in fa-icon with the icon of your choice!
  150. [/comment][fa]fas fa-hand-holding-seedling[/fa][/border]
  151.  
  152. [/border]
  153. [comment]----left end----[/comment]
  154. [/border]
  155. [comment]----main content end----[/comment]
  156.  
  157. [comment]----made with love by uxie and triples ♡ do not remove!! !!----[/comment]
  158. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); font-size:10px; position:absolute; z-index:7; top:14px; right:16px; display:flex; flex-flow: row nowrap; align-items:center; line-height:100%;][border=transparent; height:fit-content; width:fit-content; padding:0; letter-spacing:0.5px; font-weight:bold;][font=Space Grotesk]nine lives[/font][/border][border=transparent; height:fit-content; width:fit-content; padding:0; margin-left:5px; font-size:8px;][fa]fas fa-cat[/fa][/border][/border]
  159. [/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!