API tools faq
paste
Advertisement
ooksie

saudade (ic)

ooksie
Jun 1st, 2022 (edited)
381
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.96 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. [font=Mitr]title[/font]
  4. [font=Radio Canada]header[/font]
  5. [font=Rubik]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. /*main background colour*/
  12. --bg-1: #f9f9f9;
  13. /*textbox background colour*/
  14. --bg-2: #fcfcfc;
  15.  
  16. /*contrasting colour to bg-1; you can make it in the same hue as color-2*/
  17. --color-1: #3a4456;
  18. /*textbox borders; you can make it an in-between between color-1 and bg-1 in the same hue as color-2*/
  19. --color-1b: #b1b9c9;
  20. /*main accent colour -- most tags and headers*/
  21. --color-2: #9CADCE;
  22. /*secondary accent colour -- large title text, decorative icons*/
  23. --color-3: #CB8CB6;
  24.  
  25. /*text colour*/
  26. --t-color:#020202;
  27. /*dialogue colour*/
  28. --d: var(--color-3);
  29.  
  30. /*fonts used*/
  31. --title: 'Mitr', sans-serif;
  32. --header: 'Radio Canada', sans-serif;
  33. --body: 'Rubik', sans-serif;
  34.  
  35. /*left/top large image*/
  36. --img-1: url('https://64.media.tumblr.com/78f82f7b05c3eb9eac3ff09e1e4d70f3/1394fcbcadedcf78-b6/s400x600/ca9ef3f3c5944ddcbd81ded46c04ab11027a0c7d.gifv');
  37.  
  38. /*outfit image*/
  39. --outfit: URL('https://i.pinimg.com/564x/d8/94/01/d89401b2bdb08c8a0efc881e1f945ce4.jpg');
  40.  
  41.  
  42. height:auto; width:100%; padding:0; margin:15px 0 25px 0; overflow-x:auto; line-height:0;][border=transparent; height:auto; width:clamp(320px, 90vw, 450px); padding:0; margin:5px auto; border:4px solid var(--color-2); box-sizing:border-box; overflow:hidden; border-radius:8px;][border=transparent; height:100%; width:100%; padding:clamp(15px, -40px + 12vw, 28px); padding-right:clamp(15px, -40px + 12vw, 20px); box-sizing:border-box; position:relative; display:flex; flex-flow:row wrap; justify-content:center; align-items:center;]
  43.  
  44. [comment]----top----[/comment]
  45. [border=transparent; height:140px; width:100%; padding:0; display:flex; flex-flow:row wrap; position:relative; z-index:5;]
  46.  
  47. [comment]----image----[/comment]
  48. [border=transparent; height:100%; flex:40; min-width:80px; max-width:160px; padding:0; display:flex; flex-flow:row nowrap; position:relative;][border=transparent; height:100%; flex:1; padding:0; background: var(--img-1);
  49.  
  50. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  51.  
  52. border-radius:8px 0 0 8px; overflow:hidden; background-size:cover; position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-2); opacity:0.25;][/border][/border][border=transparent; height:100%; width:8px; padding:0; background: var(--color-2); opacity:0.8; flex-shrink:0; border-radius:0 1px 1px 0;][/border][/border]
  53.  
  54. [comment]----details container----[/comment]
  55. [border=transparent; height:100%; flex:60; padding:0; min-width:130px; position:relative; margin-left:25px; display:flex; align-items:flex-end; overflow:hidden;][border=transparent; height:auto; width:100%; padding:0; display:flex; visibility:hidden;][accordion=100%]{slide=[border=transparent; height:280px; width:auto; padding:0; margin:0 -7px; position:relative; top:163px; visibility:visible; display:flex; flex-flow:column nowrap; font-variant:normal; font-weight:normal;]
  56.  
  57. [comment]----name container----[/comment]
  58. [border=transparent; height:140px; width:auto; padding:3px 8px 0 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; position:relative;][border=transparent; height:auto; width:auto; padding:0; position:absolute; top:5px; right:0; color: var(--color-1); pointer-events:none; font-size:8px; font-family: var(--header); letter-spacing:2px; opacity:0.6; text-transform:uppercase; font-weight:bold; background:var(--bg-1);]click![/border]
  59. [comment]----name----[/comment]
  60. [border=transparent;
  61.  
  62. /*adjust font size here to fit your title!*/ --fs: 68px;
  63.  
  64. height:auto; max-height:calc(var(--fs) + 3px); width:auto; max-width:100%; padding:0; color: var(--color-3); font-size:clamp(var(--fs) * 0.7, -50px + 13vw, var(--fs)); font-family: var(--title); text-shadow:2px 2px var(--bg-1); position:relative; line-height:120%; letter-spacing:5px; -webkit-text-stroke:1.5px var(--color-3); overflow:hidden; text-align:center; text-transform:uppercase;][comment]
  65.  
  66. ----* * * title here----
  67.  
  68. [/comment]title[/border]
  69.  
  70. [comment]----subtitle----[/comment]
  71. [border=transparent; height:auto; max-height:32px; width:auto; max-width:85%; padding:0; color: var(--color-1); font-size:clamp(13px, -30px + 6vw, 16px); font-family: var(--header); font-weight:bold; text-transform:uppercase; letter-spacing:2px; line-height:100%; margin-top:12px; text-shadow:1px 1px var(--color-2); text-align:center; overflow:hidden;][comment]
  72.  
  73. ----* * * subtitle here----
  74.  
  75. [/comment]i want to see you[/border]
  76.  
  77. [/border]
  78. [comment]----name container end----[/comment]
  79.  
  80. [comment]----details contents----[/comment]
  81. [border=transparent; height:140px; width:auto; padding:0; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; margin-bottom:1px; --m-d:6px;][border=transparent; height:0; width:100%; padding:0; margin-bottom: calc(var(--m-d) * -1);][/border]
  82.  
  83. [comment]----copy this whole thing to make another tag----[/comment]
  84. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-d); margin-bottom:2px;]
  85. [border=transparent; height:auto; width:auto; margin:3px 15px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  86.  
  87. ----* * * info title here----
  88.  
  89. [/comment]location[/border][/border]
  90.  
  91. [border=transparent; height:auto; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:3px 0 0 0; color: var(--t-color); font-family: var(--body); font-size:12.5px; line-height:16px; text-transform:uppercase; letter-spacing:0.5px;][comment]
  92.  
  93. ----* * *info text here----
  94.  
  95. [/comment]answer[/border]
  96. [/border]
  97. [comment]----copy me too!----[/comment]
  98.  
  99. [comment]----copy this whole thing to make another tag (outfit)----[/comment]
  100. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-d); margin-bottom:2px;]
  101. [border=transparent; height:auto; width:auto; margin:3px 15px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  102.  
  103. ----* * * info title here----
  104.  
  105. [/comment]outfit[/border][/border]
  106.  
  107. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:flex-end;][border=transparent; height:105px; width:135px; padding:0; background: var(--outfit); background-size:cover; background-position:50% 20%; flex-shrink:0; margin:8px 0 6px 0; border-radius:5px; position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-2); opacity:0.23;][/border][/border]
  108.  
  109. [comment]----link your outfit image here too! replace xx with your link!----[/comment]
  110. [url='https://i.pinimg.com/564x/3b/49/eb/3b49eb75c5c831da2346d29157780c8a.jpg'][border=transparent; padding:0; color: var(--t-color); font-size:12px; margin:0 0 6px 8px; opacity:0.6;][fa]fas fa-search-plus[/fa][/border][/url][/border]
  111. [/border]
  112. [comment]----copy me too!----[/comment]
  113.  
  114. [comment]----copy this whole thing to make another tag----[/comment]
  115. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-d); margin-bottom:2px;]
  116. [border=transparent; height:auto; width:auto; margin:3px 15px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  117.  
  118. ----* * * info title here----
  119.  
  120. [/comment]interactions[/border][/border]
  121.  
  122. [border=transparent; height:auto; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:5px 0 0 0; color: var(--t-color); font-family: var(--body); font-size:12.5px; line-height:16px; text-transform:uppercase; letter-spacing:0.5px;][comment]
  123.  
  124. ----* * *info text here----
  125.  
  126. [/comment]answer, answer[/border]
  127. [/border]
  128. [comment]----copy me too!----[/comment]
  129.  
  130. [comment]----copy this whole thing to make another tag----[/comment]
  131. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-d); margin-bottom:2px;]
  132. [border=transparent; height:auto; width:auto; margin:3px 15px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  133.  
  134. ----* * * info title here----
  135.  
  136. [/comment]tags[/border][/border]
  137.  
  138. [border=transparent; height:auto; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:5px 0 0 0; color: var(--t-color); font-family: var(--body); font-size:12.5px; line-height:16px; text-transform:uppercase; letter-spacing:0.5px;][comment]
  139.  
  140. ----* * *info text here----
  141.  
  142. [/comment]@ user @ user[/border]
  143. [/border]
  144. [comment]----copy me too!----[/comment]
  145.  
  146. [/border][/border][/border]
  147. [comment]----details contents end----[/comment]
  148.  
  149. [/border]}[border=transparent; height:128px; width:auto; padding:0;][/border]{/slide}
  150. [/accordion][/border][/border]
  151. [comment]----details container end----[/comment]
  152.  
  153. [/border]
  154. [comment]----top end----[/comment]
  155.  
  156. [comment]----main contents----[/comment]
  157. [border=transparent; height:306px; width:calc(100% - 8px); padding:0; background: var(--bg-2); border:1px solid var(--color-1b); box-sizing:border-box; flex-shrink:0; position:relative; z-index:5; margin:22px 8px 0 auto;]
  158. [comment]----textbox header----[/comment]
  159. [border=transparent; height:32px; width:100%; padding:0; display:flex; flex-flow:row-reverse nowrap; border-bottom:1px solid var(--color-1b); flex-shrink:0;][border=transparent; height:32px; width:35px; padding:0; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-size:15px; border-left:1px solid var(--color-1b); flex-shrink:0;][comment]
  160.  
  161. ----* * * textbox icon here----
  162.  
  163. [/comment][fa]fas fa-heart[/fa][/border][border=transparent; height:100%; flex:1; padding:3px 10px; box-sizing:border-box; display:flex; align-items:center; color: var(--color-2); font-family: var(--header); font-size:15px; text-transform:uppercase; letter-spacing:1.5px; font-weight:bold; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  164.  
  165. ----* * * textbox title here----
  166.  
  167. [/comment]good morning...[/border]
  168. [/border]
  169. [comment]----textbox header end----[/comment]
  170.  
  171. [comment]----textbox contents----[/comment]
  172. [border=transparent; height:calc(100% - 32px); width:100%; padding:7px 0 11px 0; box-sizing:border-box; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 4px 0 12px; box-sizing:border-box; color: var(--t-color); font-size:11.5px; text-align:justify; line-height:16px; font-family: var(--body);][comment]
  173.  
  174. ----* * * text starts here----
  175.  
  176. [/comment][border=0; padding:0; color: var(--d); font-weight:bold; display:inline; letter-spacing:0.5px;]this is a dialogue![/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet ipsum lorem, eu congue quam laoreet a. Duis vulputate nunc eget diam vestibulum tincidunt. Duis eget consequat nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec gravida efficitur quam, ut eleifend felis consequat ac. Sed vel lacus sodales, sollicitudin lectus eget, malesuada ligula. In elementum tempus aliquet. Aenean sit amet nulla dolor. Etiam ligula ligula, ullamcorper et auctor maximus, volutpat ultrices felis.
  177.  
  178. Ut at massa odio. Integer dapibus sapien eu egestas finibus. Etiam mattis velit vulputate sapien porta malesuada. Cras consequat ipsum in faucibus elementum. Duis purus erat, iaculis eget nibh nec, ullamcorper tempus libero. Vivamus ipsum sem, facilisis tincidunt massa quis, sodales lacinia nibh. Proin quis velit lobortis, laoreet justo non, convallis nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna elit, rutrum ac aliquam vitae, dignissim nec justo. Etiam tortor orci, facilisis non leo id, faucibus euismod purus. Morbi efficitur augue nulla, quis molestie enim sagittis id. Praesent ut tellus ut lacus sagittis tempor vel vel velit. Mauris maximus congue dolor, sit amet cursus massa. In ligula magna, elementum blandit tellus id, lobortis rutrum massa. Sed sit amet ante turpis.
  179. [/border][/border][/border]
  180. [comment]----textbox contents end----[/comment]
  181.  
  182. [/border]
  183. [comment]----main contents end----[/comment]
  184.  
  185. [comment]----music player----[/comment]
  186. [border=transparent; height:auto; width:auto; max-width:80%; padding:0 8px 0 0; box-sizing:border-box; margin:12px 0 -10px auto; display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-end; position:relative; z-index:5;
  187.  
  188. /*replace here; with display:none; to hide music player*/ here;
  189.  
  190. opacity:0.9;]
  191. [comment]----play button----[/comment]
  192. [border=transparent; height:auto; width:auto; padding:0; position:relative; flex-shrink:0; margin:0;][border=transparent; height:auto; width:auto; padding:0; position:relative; z-index:2; pointer-events:none; color: var(--color-2); font-size:11px; line-height:100%; text-shadow:1px 1px var(--bg-1);][fa]fas fa-play[/fa][/border]
  193. [comment]----actual media player----[/comment]
  194. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0.01%;][border=transparent; height:32px; width:32px; padding:0; position:relative; pointer-events:auto;]
  195.  
  196. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  197. [border=transparent; height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
  198. [media=soundcloud]https://soundcloud.com/noiselessflowers/blueming[/media]
  199. [/border]
  200.  
  201. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  202. [border=transparent; height:500px; width:500px; margin-top:-170px; margin-left:-93px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  203. [media=googledrive]1aw4rab_7NBp4ZNiN91sECNwuqjpZc0lq[/MEDIA]
  204. [/border]
  205.  
  206. [/border][/border]
  207. [comment]----actual media player end----[/comment]
  208. [/border]
  209. [comment]----play button end----[/comment]
  210.  
  211. [comment]----song title----[/comment]
  212. [border=transparent; height:auto; flex:1; padding:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color: var(--color-2); font-size:13px; text-transform:uppercase; font-family: var(--header); letter-spacing:2px; text-shadow:1.5px 1.5px var(--bg-1); line-height:100%; margin-left:12px; font-weight:bold;][comment]
  213.  
  214. ----* * * song title here----
  215.  
  216. [/comment]song title[/border]
  217. [/border]
  218. [comment]----music player end----[/comment]
  219.  
  220.  
  221.  
  222. [comment]----decor icons----[/comment]
  223. [border=transparent; height:auto; width:auto; padding:0; position:absolute; bottom:-45px; left:-65px; z-index:2; font-size:230px; color: var(--color-3); transform:rotate(20deg);][fa]fal fa-star[/fa][/border]
  224.  
  225. [comment]----grid pattern----[/comment]
  226. [border=transparent; height:100%; width:100%; padding:0; background: var(--bg-1); position:absolute; top:0; left:0; z-index:1; pointer-events:none;][border=transparent; height:100%; width:100%; padding:0; background: linear-gradient(to right, var(--color-1) 1px, transparent 1px), linear-gradient(to bottom, var(--color-1) 1px, transparent 1px); background-size:32px 32px; background-position:50% 45%; opacity:0.3;][/border][/border]
  227.  
  228. [comment]----signature! do not remove----[/comment]
  229. [bg=transparent; height:10px;width:fit-content; position:absolute ;z-index:6;opacity:0.4;color: var(--color-3); font-size:9px;text-align:center; top:7px; right:3px;][font=Open Sans]♡coded by uxie♡[/font][/bg]
  230. [/border][/border][/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!