API tools faq
paste
Advertisement
ooksie

twilight

ooksie
Jun 18th, 2021 (edited)
1,269
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.20 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. fonts used:
  4. [font=Poppins]header[/font]
  5. [font=Karla]subheader/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.  
  11. /*border colour -- make sure it's distinct from the other background*/
  12. --bg-1: #f2f2f2;
  13. /*main background colour*/
  14. --bg-2: #fff;
  15.  
  16. /*main accent colour*/
  17. --color-1: #a9a9d6;
  18. /*secondary accent colour*/
  19. --color-2: #a07bc4;
  20.  
  21. /*header colour*/
  22. --h1: #fff;
  23. /*text colour*/
  24. --t-color: #332f2d;
  25.  
  26. /*fonts used*/
  27. --header: 'Poppins', sans-serif;
  28. --body: 'Karla', sans-serif;
  29.  
  30. /*big image (left/top)*/
  31. --img-1: url('https://pbs.twimg.com/media/EuRFZ25XAAAof22.jpg');
  32. /*sidebar icon*/
  33. --img-2: url('https://pbs.twimg.com/media/EuRFPxAWQAU_Nz2.jpg');
  34.  
  35. height:auto; width:100%; max-width:630px; padding:0; border: clamp(11px, 2vw, 15px) solid var(--bg-1); padding:clamp(5px, 1.5vw, 8px); box-sizing:border-box; position:relative; display:flex; flex-flow:row wrap; justify-content:center; margin:auto; line-height:0; background: var(--bg-2);]
  36.  
  37. [comment]----left----[/comment]
  38. [border=transparent; height:auto; min-height:205px; flex:40; min-width:195px; max-width:240px; padding:0; margin:10px; position:relative;][border=transparent; height:100%; width:100%; padding:25px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:1; background: var(--img-1); background-size:cover;
  39.  
  40. /*edit the following to adjust the cropping of the image*/ background-position:50% 70%;
  41.  
  42. margin-right:10px; pointer-events:none; overflow:hidden;][border=transparent; height:clamp(0px, 46vw - 180px, 240px); width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; top:clamp(-80px, 12vw - 90px, 0px); z-index:5;][/border][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border]
  43.  
  44. [comment]----details page----[/comment]
  45. [border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow:column nowrap; position:relative; z-index:2; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; scroll-snap-type:y proximity;]
  46.  
  47. [comment]----sidebar header----[/comment]
  48. [border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow:column nowrap; align-items:center;][border=transparent; flex:1; width:50%; padding:6px; box-sizing:border-box; display:flex; justify-content:flex-start; align-items:flex-end; color: var(--bg-2); text-shadow:1px 1px var(--color-2); font-size:10px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; font-family: var(--header); opacity:0.95; margin:0 auto 5px 0;]scroll[/border][border=transparent; height:auto; width:100%; padding:0; position:relative;][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; background: var(--bg-2);][/border][border=transparent; height:auto; width:50%; padding:0; display:flex; justify-content:center;][border=transparent; height:auto; width:100%; max-width:205px; padding:15px 0 0 0; box-sizing:border-box; position:relative; z-index:3; display:flex; flex-flow:row nowrap; background: var(--bg-2); scroll-snap-align:end;]
  49.  
  50. [border=transparent; --h: clamp(83px, 10vw, 90px); height: var(--h); width: var(--h); padding:0; border:1px solid var(--color-1); padding:8px; box-sizing:border-box; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;]
  51. [border=transparent; height:100%; width:100%; padding:0; border-radius:50%; background: var(--img-2); background-size:cover; margin:auto auto;
  52.  
  53. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  54.  
  55. overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.25;][/border][/border][/border]
  56.  
  57. [comment]----name & role-----[/comment]
  58. [border=transparent; height:auto; min-height:90px; flex:1; padding:0; margin-left:-16px; display:flex; flex-flow:column nowrap; justify-content:center; position:relative; z-index:5;]
  59. [comment]----role----[/comment]
  60. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:calc(100% - 15px); padding:0; margin-top:14px;][border=transparent; display:inline; padding:3px 6px; box-sizing:border-box; box-decoration-break:clone; -webkit-box-decoration-break: clone; background: var(--color-1); border-radius:2px; color: var(--h1); font-size:9.5px; text-transform:uppercase; letter-spacing:1.5px; line-height:15px; font-family: var(--body); text-align:right;][comment]
  61.  
  62. ----* * * role here----
  63.  
  64. [/comment]role here[/border][/border]
  65.  
  66. [comment]----name----[/comment]
  67. [border=transparent; height:auto; min-height:34px; max-height:58px; width:auto; padding:0; margin:15px 0 0 auto; color: var(--color-1); text-shadow:1px 1px var(--color-2); letter-spacing:2.5px; font-weight:bold; font-family: var(--header); font-size:31px; line-height:29px; flex-shrink:0; overflow:hidden; text-align:right;][comment]
  68.  
  69. ----* * * character first name/nickname here. two lines max!----
  70.  
  71. [/comment]name.[/border]
  72. [/border]
  73. [/border][/border][/border][/border]
  74. [comment]----header end----[/comment]
  75.  
  76. [comment]----details----[/comment]
  77. [border=transparent; height:auto; width:100%; padding:0; position:relative;][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; background: var(--bg-2);][/border][border=transparent; height:auto; width:50%; padding:0; display:flex; justify-content:center;][border=transparent; height:105px; width:205px; padding:20px 0 4px 0; box-sizing:border-box; background: var(--bg-2); overflow:hidden; display:flex; flex-direction:column; position:relative; z-index:3; scroll-snap-align:end;][border=transparent; height:100%; width:222px; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:205px; padding:0 10px; box-sizing:border-box; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-14px;][/border]
  78.  
  79. [comment]----copy this whole thing to make another detail----[/comment]
  80. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top:14px;]
  81. [border=transparent; height:auto; width:26px; padding:4px 0 0 0; box-sizing:border-box; color: var(--color-2); font-size:20px; flex-shrink:0; text-align:center;][comment]
  82.  
  83. ----* * * detail icon here----
  84.  
  85. [/comment][fa]fal fa-heart[/fa][/border]
  86.  
  87. [border=transparent; height:auto; flex:1; padding:0; margin-left:18px; display:flex; flex-flow:column nowrap; font-family: var(--body);]
  88. [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:9.5px; color: var(--h1); flex-shrink:0;][comment]
  89.  
  90. ----* * * detail title here----
  91.  
  92. [/comment]mood[/border]
  93. [border=transparent; height:fit-content; max-height:24px; width:100%; padding:0; margin:6px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; line-height:12px;][comment]
  94.  
  95. ----* * * detail contents here----
  96.  
  97. [/comment]mood here[/border]
  98. [/border][/border]
  99. [/border]
  100. [/border]
  101. [comment]----copy me too!----[/comment]
  102.  
  103. [comment]----copy this whole thing to make another detail----[/comment]
  104. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top:14px;]
  105. [border=transparent; height:auto; width:26px; padding:4px 0 0 0; box-sizing:border-box; color: var(--color-2); font-size:20px; flex-shrink:0; text-align:center;][comment]
  106.  
  107. ----* * * detail icon here----
  108.  
  109. [/comment][fa]fal fa-tshirt[/fa][/border]
  110.  
  111. [border=transparent; height:auto; flex:1; padding:0; margin-left:18px; display:flex; flex-flow:column nowrap; font-family: var(--body);]
  112. [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:9.5px; color: var(--h1); flex-shrink:0;][comment]
  113.  
  114. ----* * * detail title here----
  115.  
  116. [/comment]outfit[/border]
  117. [border=transparent; height:fit-content; max-height:24px; width:100%; padding:0; margin:6px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; line-height:12px;][comment]
  118.  
  119. ----* * * detail contents here----
  120.  
  121. [/comment]outfit[/border]
  122. [/border][/border]
  123. [/border]
  124. [/border]
  125. [comment]----copy me too!----[/comment]
  126.  
  127. [comment]----copy this whole thing to make another detail----[/comment]
  128. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top:14px;]
  129. [border=transparent; height:auto; width:26px; padding:4px 0 0 0; box-sizing:border-box; color: var(--color-2); font-size:20px; flex-shrink:0; text-align:center;][comment]
  130.  
  131. ----* * * detail icon here----
  132.  
  133. [/comment][fa]fal fa-map-marker-alt[/fa][/border]
  134.  
  135. [border=transparent; height:auto; flex:1; padding:0; margin-left:18px; display:flex; flex-flow:column nowrap; font-family: var(--body);]
  136. [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:9.5px; color: var(--h1); flex-shrink:0;][comment]
  137.  
  138. ----* * * detail title here----
  139.  
  140. [/comment]location[/border]
  141. [border=transparent; height:fit-content; max-height:24px; width:100%; padding:0; margin:6px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; line-height:12px;][comment]
  142.  
  143. ----* * * detail contents here----
  144.  
  145. [/comment]location here[/border]
  146. [/border][/border]
  147. [/border]
  148. [/border]
  149. [comment]----copy me too!----[/comment]
  150.  
  151. [comment]----copy this whole thing to make another detail----[/comment]
  152. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top:14px;]
  153. [border=transparent; height:auto; width:26px; padding:4px 0 0 0; box-sizing:border-box; color: var(--color-2); font-size:20px; flex-shrink:0; text-align:center;][comment]
  154.  
  155. ----* * * detail icon here----
  156.  
  157. [/comment][fa]fal fa-users[/fa][/border]
  158.  
  159. [border=transparent; height:auto; flex:1; padding:0; margin-left:18px; display:flex; flex-flow:column nowrap; font-family: var(--body);]
  160. [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:9.5px; color: var(--h1); flex-shrink:0;][comment]
  161.  
  162. ----* * * detail title here----
  163.  
  164. [/comment]interactions[/border]
  165. [border=transparent; height:fit-content; max-height:24px; width:100%; padding:0; margin:6px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; line-height:12px;][comment]
  166.  
  167. ----* * * detail contents here----
  168.  
  169. [/comment]interactions here[/border]
  170. [/border][/border]
  171. [/border]
  172. [/border]
  173. [comment]----copy me too!----[/comment]
  174.  
  175. [comment]----copy this whole thing to make another detail----[/comment]
  176. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top:14px;]
  177. [border=transparent; height:auto; width:26px; padding:4px 0 0 0; box-sizing:border-box; color: var(--color-2); font-size:20px; flex-shrink:0; text-align:center;][comment]
  178.  
  179. ----* * * detail icon here----
  180.  
  181. [/comment][fa]fal fa-comment[/fa][/border]
  182.  
  183. [border=transparent; height:auto; flex:1; padding:0; margin-left:18px; display:flex; flex-flow:column nowrap; font-family: var(--body);]
  184. [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:9.5px; color: var(--h1); flex-shrink:0;][comment]
  185.  
  186. ----* * * detail title here----
  187.  
  188. [/comment]tags[/border]
  189. [border=transparent; height:fit-content; max-height:24px; width:100%; padding:0; margin:6px 0 0 1px; 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; color: var(--t-color); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; line-height:12px;][comment]
  190.  
  191. ----* * * detail contents here----
  192.  
  193. [/comment]tags here[/border]
  194. [/border][/border]
  195. [/border]
  196. [/border]
  197. [comment]----copy me too!----[/comment]
  198.  
  199. [/border][/border][/border][/border][/border]
  200. [comment]----details end----[/comment]
  201. [/border][/border]
  202. [comment]----details page end----[/comment]
  203.  
  204. [/border]
  205. [comment]----left end----[/comment]
  206.  
  207. [comment]----right----[/comment]
  208. [border=transparent; --h: clamp(342px, 46vw, 400px); height: var(--h); flex:60; min-width:220px; max-width:350px; padding:18px 0 19px 0; box-sizing:border-box; border:1px solid var(--color-1); background: var(--bg-2); margin:10px; 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 8px 0 18px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:15px; font-family: var(--body);][comment]
  209.  
  210. ----* * * text starts here----
  211.  
  212. [/comment][border=transparent; padding:0; display:inline; color: var(--color-2); font-weight:bold;]"this is a dialogue."[/border] dolor felis, faucibus id tortor non, consectetur efficitur metus. Nulla ac tempus velit. Etiam sed nibh neque. Fusce lorem nisl, rutrum in luctus sit amet, elementum at justo. Proin consectetur, ante in pharetra auctor, nibh urna bibendum urna, a maximus odio arcu ac turpis. Curabitur vel varius elit, ut commodo quam. Sed sagittis porta metus vitae pretium. Morbi semper, arcu eget elementum cursus, arcu nulla egestas augue, id tempor turpis ex at arcu. Maecenas eget elit mauris. Vestibulum pellentesque tincidunt eros, id interdum justo convallis eget. Fusce non dui porta, ullamcorper lorem nec, interdum nunc. Sed sapien leo, pretium in nibh id, lobortis dictum erat. Phasellus sed nunc interdum orci rhoncus pulvinar in in mi.
  213.  
  214. Nam quam magna, vehicula a tortor et, consectetur dapibus eros. Mauris mollis, risus quis placerat mollis, sem purus auctor est, eget interdum mauris ante suscipit felis. Curabitur et dolor vitae nisl blandit vulputate. Vivamus faucibus vulputate vehicula. Fusce facilisis maximus lectus, sit amet faucibus risus scelerisque eget. Curabitur posuere, dui sed dapibus interdum, lectus nulla scelerisque nisl, a vulputate dolor mauris at quam. In sit amet risus facilisis, interdum nisl in, rutrum diam. Etiam eu orci vulputate libero varius ultricies sed vitae ipsum. Praesent et dignissim risus. Nullam efficitur nisl ac lacus rutrum, vel vulputate ligula posuere.
  215.  
  216. Nullam iaculis placerat mauris sed maximus. In sed pellentesque metus. Sed vestibulum tincidunt diam et viverra. Curabitur ex orci, tincidunt a facilisis id, maximus quis augue. Etiam semper fringilla sapien ac facilisis. Mauris lobortis purus nec mollis tempor. Donec erat eros, semper pulvinar leo ac, tempus aliquet erat. Quisque nec nisl justo. Duis malesuada metus elit, eu aliquam ante imperdiet ac. Phasellus at porta erat. Nullam efficitur imperdiet massa.
  217. [/border][/border][/border]
  218. [comment]----right end----[/comment]
  219. [comment]
  220. ----signature! do not remove
  221. [/comment][bg=transparent; height:auto; width:auto; padding:0; position:absolute;z-index:6;opacity:0.4;color: var(--bg-1); font-size:clamp(9px, 1.2vw, 10px);text-align:center; top:clamp(-2px, 10px - 1.5vw, -1px); right:0; line-height:100%; -webkit-filter:brightness(0.8);][font=Open Sans]♡coded by uxie♡[/font][/bg][/border]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!