API tools faq
paste
ooksie

midnight cold brew (nine lives)

ooksie
Dec 13th, 2020 (edited)
249
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.33 KB | None | 0 0
raw download clone embed print report
  1. [comment]code by nine lives ♡
  2.  
  3. fonts used:
  4. [font=Fugaz One]title, headers[/font]
  5. [font=Roboto Condensed]subheaders[/font]
  6. [font=Arvo]body text[/font]
  7.  
  8. to replace fonts, replace them here, then search up 'font-family' and replace them there too between the ''!
  9. [/comment][border=transparent;
  10. --cursor: url('https://i.imgur.com/SDzmKp9.png');
  11. *background colour;
  12. --bg-color: #061428;
  13.  
  14. *main accent colour -- picture frames/borders, info titles, button;
  15. --color-1: #fff;
  16. *second accent colour -- main header colours (names, quote);
  17. --color-2: #00ADAF;
  18. *third accent colour -- header shadow (names, quote);
  19. --color-3: #2e5cb9;
  20. *text colour;
  21. --t-color: #fff;
  22.  
  23. *images on the first page (details);
  24. --img-1: url('https://i.pinimg.com/originals/ac/7e/d1/ac7ed1215fe0eb1d111fd9be41db6023.jpg');
  25. --img-2: url('https://i.redd.it/lp7e99emueuz.jpg');
  26. *image on the second page (main post);
  27. --img-3: url('https://i.pinimg.com/originals/5b/92/57/5b9257c4c977c3ca35398947e8f85356.jpg');
  28.  
  29. height:fit-content; width:100%; max-width:550px; padding:0; background: var(--bg-color); margin:auto; position:relative; line-height:0; cursor: var(--cursor), auto!important;]
  30. [comment]----tab one----[/comment]
  31. [border=transparent; height:fit-content; width:100%; padding:0; position:relative; display:flex; flex-flow: row wrap; justify-content:flex-end;]
  32.  
  33. [comment]----images + music player & tabs----[/comment]
  34. [border=transparent; height:380px; width:100%; flex:4; min-width:230px; padding:5px; box-sizing:border-box; box-sizing:border-box; display:flex; flex-flow: row nowrap;]
  35.  
  36. [comment]----left----[/comment]
  37. [border=transparent; height:100%; width:calc(50% - 2.5px); padding:0; display:flex; flex-flow:column-reverse nowrap; margin-right:5px;]
  38. [comment]----image one----[/comment]
  39. [border=transparent; height:85%; width:100%; padding:0; border:4px solid var(--color-1); border-bottom:15px solid var(--color-1); box-sizing:border-box; background: var(--img-1); background-size:cover; margin-top:auto;
  40. /*edit the following to adjust the cropping of the image*/ background-position: 10% 50%;][/border]
  41.  
  42. [comment]----tab cover (remember to match this to the other tab cover button)-----[/comment]
  43. [border=transparent; height:50px; width:70px; padding:10px; box-sizing:border-box; background: var(--bg-color); position:absolute; top:0; left:0; pointer-events:none; color: var(--color-1); display:flex; align-items:flex-start; justify-content:flex-start; font-size:35px;][comment]
  44.  
  45. ----* * * button icon here! replace icon in fa-icon with the icon of your choice!----
  46.  
  47. [/comment][fa]fas fa-bat[/fa][/border]
  48.  
  49. [comment]----tabs----[/comment]
  50. [border=transparent; height:8%; width:60px; padding:0; overflow:hidden; margin:10px 0 auto 5px;][border=transparent; width:150px; padding:0; margin-left:-30px; display:flex; justify-content:flex-end;][border=transparent; padding:0;][tabs]
  51. [tab=.][border=transparent; width:180px; padding:0; font-size:0;]filler tab! ignore[/border][/tab]
  52.  
  53. [comment]----main post contents----[/comment]
  54. [tab=.][border=transparent; width:100px; padding:0;][border=transparent; height:100%; width:100%; padding:10px 0; box-sizing:border-box; background: var(--bg-color); position:absolute; top:0; left:0; z-index:3; pointer-events:none; display:flex; flex-flow: column nowrap; align-items:center;]
  55.  
  56. [comment]----title/quote----[/comment]
  57. [border=transparent; min-height:50px; height:auto; width:85%; padding:0 5px; box-sizing:border-box; display:flex; align-items:flex-end; justify-content:flex-end; margin:10px 0 -10px auto; position:relative; z-index:3; pointer-events:auto; flex-shrink:0;][border=transparent; height:auto; width:fit-content; padding:0 5px; box-sizing:border-box; font-size:38px; letter-spacing:1px; color: var(--color-2); text-shadow:-3px 5px var(--bg-color), -5px 7px var(--color-3); font-family:'Fugaz One', display; line-height:100%; text-transform:uppercase; text-align:right;][comment]
  58.  
  59. ----* * * title/quote here (try to keep to one line)----
  60.  
  61. [/comment]keep me up all night[/border]
  62. [/border]
  63.  
  64. [comment]----image----[/comment]
  65. [border=transparent; height:22%; flex-shrink:0; width:100%; padding:0; border-top:5px solid var(--color-1); border-bottom:5px solid var(--color-1); box-sizing:border-box; background: var(--img-3); background-size:cover;
  66. /*edit the following to adjust the cropping of the image*/ background-position: 50% 75%;][/border]
  67.  
  68. [comment]----text----[/comment]
  69. [border=transparent; max-height:100%; min-height:30%; width:90%; max-width:460px; padding:15px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; pointer-events:auto;][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:10px; text-align:justify; line-height:150%; font-family:'Arvo', serif;][comment]
  70.  
  71. ----* * * text starts here!----
  72.  
  73. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit dui sollicitudin imperdiet lacinia. Suspendisse at placerat nisi, id congue magna. Donec consectetur molestie pulvinar. Donec dignissim fermentum tellus, et dictum ante gravida at. Mauris nunc tortor, luctus tristique suscipit in, feugiat a nunc. Donec a neque vitae felis vestibulum rutrum ac non elit. Nulla varius, leo nec fermentum feugiat, nunc mi rhoncus purus, a suscipit dui diam non ex. Donec ullamcorper purus gravida tortor pretium lacinia. Mauris vitae justo in leo vehicula posuere. Aenean felis leo, lacinia ac purus ac, cursus dignissim velit.
  74.  
  75. Cras quis fringilla dui. Cras aliquam, eros sit amet faucibus convallis, justo tortor placerat diam, vel pretium tellus tortor eget diam. Sed vel venenatis ipsum. Curabitur elit est, pulvinar et varius eu, egestas eu ipsum. Praesent posuere tristique lacus, vitae pulvinar magna blandit nec. Vestibulum quis velit nibh. Ut blandit urna in aliquet pellentesque. Aliquam commodo placerat arcu vel luctus. Duis nisi nulla, ultrices ut porta vitae, dapibus in massa. Vivamus porttitor arcu nisi. Praesent laoreet dolor a arcu feugiat, at sodales nulla imperdiet. Morbi nec mauris sit amet tortor dictum scelerisque eget sit amet neque. Vivamus ut lectus ut tortor pretium consectetur. Pellentesque tincidunt ligula non porttitor pharetra. Phasellus nec scelerisque ipsum. Praesent vel lacinia nisl.
  76. [/border][/border][/border]
  77.  
  78. [comment]----tab cover (remember to match this to the other tab cover button)-----[/comment]
  79. [border=transparent; height:50px; width:70px; padding:10px; box-sizing:border-box; background: var(--bg-color); position:absolute; top:0; left:0; pointer-events:none; color: var(--color-1); display:flex; align-items:flex-start; justify-content:flex-start; font-size:35px;][comment]
  80.  
  81. ----* * * button icon here! replace icon in fa-icon with the icon of your choice!----
  82.  
  83. [/comment][fa]fas fa-bat[/fa][/border]
  84.  
  85. [/border][/border][/tab]
  86. [comment]----main post contents end----[/comment]
  87.  
  88. [/tabs][/border][/border][/border]
  89. [comment]----tabs end----[/comment]
  90. [/border]
  91. [comment]----left end----[/comment]
  92.  
  93. [comment]----right----[/comment]
  94. [border=transparent; height:100%; width:calc(50% - 2.5px); padding:0; display:flex; flex-flow:column nowrap;]
  95. [comment]----image two----[/comment]
  96. [border=transparent; height:87%; width:100%; padding:0; border:4px solid var(--color-1); border-top:15px solid var(--color-1); box-sizing:border-box; background: var(--img-2); background-size:cover; margin-bottom:auto; position:relative; z-index:1;
  97. /*edit the following to adjust the cropping of the image*/ background-position:40% 50%;][/border]
  98.  
  99. [comment]----music player----[/comment]
  100. [border=transparent; height:13%; width:100%; padding:0; position: relative; z-index:2; display:flex; justify-content:center;]
  101. [comment]----play button----[/comment]
  102. [border=transparent; height:54px; width:54px; padding:0; background: var(--color-1); color: var(--bg-color); font-size:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:-25px; pointer-events:none; position:relative; z-index:2; flex-shrink:0;][fa]fas fa-play[/fa][/border]
  103.  
  104. [comment]----actual media player----[/comment]
  105. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:-24px; left:0; z-index:1; display:flex; justify-content:center; align-items:center;][border=transparent; height:30px; width:45px; padding:0; overflow:hidden; pointer-events:auto;][border=transparent; padding:0; margin:-25px 0 0 -22px;][tabs]
  106. [tab=.]h[/tab]
  107.  
  108. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; display:flex; justify-content:center;][border=transparent; height:50px; width:50px; padding:0; overflow:hidden; border-radius:50%; font-size:0; position:relative;]
  109.  
  110. [comment]----soundcloud (put a soundcloud link within media tag)----[/comment]
  111. [border=transparent; height:80px; width:180px; padding:0; margin-top:-5px; margin-left:-5px;]
  112. [media=soundcloud]https://soundcloud.com/lrdselia/kill-my-time-5sos-target-edition[/media]
  113. [/border]
  114.  
  115. [comment]----google drive (put google file code within media tag)----[/comment]
  116. [border=transparent; height:500px; width:500px; margin-top:-298px; margin-left:-85px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  117. [media=googledrive]1d6ceOfZhU7DwglBjktq42EiKMnDXs2HE[/MEDIA]
  118. [/border]
  119.  
  120. text text[/border][/border][/tab]
  121. [/tabs][/border][/border][/border]
  122. [/border]
  123. [comment]----music player end----[/comment]
  124. [/border]
  125. [comment]----right end----[/comment]
  126.  
  127. [/border]
  128. [comment]----images end----[/comment]
  129.  
  130. [comment]----details----[/comment]
  131. [border=transparent; height:380px; flex:5; max-width:310px; min-width:310px; padding:0; display:flex; flex-flow:column nowrap; align-items:flex-end; justify-content:flex-end; position:relative; z-index:2;]
  132.  
  133. [comment]----details contents----[/comment]
  134. [border=transparent; max-height:82%; height:100%; width:92%; 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; display:flex; flex-flow:column nowrap;]
  135.  
  136. [comment]----copy this whole thing to make another character detail----[/comment]
  137. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin:10px 0;]
  138. [comment]----info title----[/comment]
  139. [border=transparent; height:fit-content; width:100%; padding:0; text-align:left; color: var(--color-1); text-transform:uppercase; line-height:110%; font-family:'Roboto Condensed', sans-serif; font-size:28px; margin-bottom:5px;][comment]
  140. ----* * * info title here!----
  141. [/comment]mood[/border]
  142.  
  143. [comment]----info contents----[/comment]
  144. [border=transparent; height:fit-content; width:100%; padding:0; text-align:left; color: var(--t-color); line-height:110%; font-family:'Arvo', serif; font-size:13px;][comment]
  145. ----* * * info contents here!----
  146. [/comment]this is how they're feeling![/border]
  147. [/border]
  148. [comment]----copy me too!----[/comment]
  149.  
  150. [comment]----copy this whole thing to make another character detail----[/comment]
  151. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin:10px 0;]
  152. [comment]----info title----[/comment]
  153. [border=transparent; height:fit-content; width:100%; padding:0; text-align:left; color: var(--color-1); text-transform:uppercase; line-height:110%; font-family:'Roboto Condensed', sans-serif; font-size:28px; margin-bottom:5px;][comment]
  154. ----* * * info title here!----
  155. [/comment]location[/border]
  156.  
  157. [comment]----info contents----[/comment]
  158. [border=transparent; height:fit-content; width:100%; padding:0; text-align:left; color: var(--t-color); line-height:110%; font-family:'Arvo', serif; font-size:13px;][comment]
  159. ----* * * info contents here!----
  160. [/comment]this is where they are[/border]
  161. [/border]
  162. [comment]----copy me too!----[/comment]
  163.  
  164. [comment]----copy this whole thing to make another character detail----[/comment]
  165. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin:10px 0;]
  166. [comment]----info title----[/comment]
  167. [border=transparent; height:fit-content; width:100%; padding:0; text-align:left; color: var(--color-1); text-transform:uppercase; line-height:110%; font-family:'Roboto Condensed', sans-serif; font-size:28px; margin-bottom:5px;][comment]
  168. ----* * * info title here!----
  169. [/comment]outfit[/border]
  170.  
  171. [comment]----info contents----[/comment]
  172. [border=transparent; height:fit-content; width:100%; padding:0; text-align:left; color: var(--t-color); line-height:110%; font-family:'Arvo', serif; font-size:13px;][comment]
  173. ----* * * info contents here!----
  174. [/comment]maybe a link or an image?[/border]
  175. [/border]
  176. [comment]----copy me too!----[/comment]
  177.  
  178. [comment]----copy this whole thing to make another character detail----[/comment]
  179. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin:10px 0;]
  180. [comment]----info title----[/comment]
  181. [border=transparent; height:fit-content; width:100%; padding:0; text-align:left; color: var(--color-1); text-transform:uppercase; line-height:110%; font-family:'Roboto Condensed', sans-serif; font-size:28px; margin-bottom:5px;][comment]
  182. ----* * * info title here!----
  183. [/comment]interactions[/border]
  184.  
  185. [comment]----info contents----[/comment]
  186. [border=transparent; height:fit-content; width:100%; padding:0; text-align:left; color: var(--t-color); line-height:110%; font-family:'Arvo', serif; font-size:13px;][comment]
  187. ----* * * info contents here!----
  188. [/comment]who they're talking to[/border]
  189. [/border]
  190. [comment]----copy me too!----[/comment]
  191.  
  192. [comment]----copy this whole thing to make another character detail----[/comment]
  193. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin:10px 0;]
  194. [comment]----info title----[/comment]
  195. [border=transparent; height:fit-content; width:100%; padding:0; text-align:left; color: var(--color-1); text-transform:uppercase; line-height:110%; font-family:'Roboto Condensed', sans-serif; font-size:28px; margin-bottom:5px;][comment]
  196. ----* * * info title here!----
  197. [/comment]tags[/border]
  198.  
  199. [comment]----info contents----[/comment]
  200. [border=transparent; height:fit-content; width:100%; padding:0; text-align:left; color: var(--t-color); line-height:110%; font-family:'Arvo', serif; font-size:13px;][comment]
  201. ----* * * info contents here!----
  202. [/comment]yeah yeah[/border]
  203. [/border]
  204. [comment]----copy me too!----[/comment]
  205.  
  206. [/border][/border][/border]
  207. [comment]----details contents end----[/comment]
  208.  
  209. [comment]----name----[/comment]
  210. [border=transparent; min-height:20%; height:auto; width:100%; padding:5px 15px 15px 0; box-sizing:border-box; display:flex; align-items:flex-start; justify-content:flex-start; position:relative; z-index:3; pointer-events:auto; flex-shrink:0;][border=transparent; height:auto; width:fit-content; padding:0; box-sizing:border-box; font-size:52px; letter-spacing:1px; color: var(--color-2); text-shadow:-5px 6px var(--bg-color), -8px 9px var(--color-3); font-family:'Fugaz One', display; line-height:100%; text-transform:uppercase; text-align:left; margin-left:-13px;][comment]
  211.  
  212. ----* * * character name here (try to keep to one line)----
  213.  
  214. [/comment]name here[/border]
  215. [/border]
  216. [/border]
  217. [comment]----details end----[/comment]
  218. [/border]
  219. [comment]----tab one end----[/comment]
  220.  
  221. [comment]----made with love by uxie and triples ♡ do not remove!! !!----[/comment]
  222. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-3); font-size:10px; position:absolute; z-index:7; top:5.5px; right:7px; 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]
  223. [/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!