Advertisement
ooksie

with you! (ic)

Jan 5th, 2022 (edited)
331
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.64 KB | None | 0 0
  1. [comment]coded by uxie!
  2.  
  3. fonts used:
  4. [font=Corben]headers[/font]
  5. [font=Libre Franklin]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. /*text background colour*/
  12. --bg-color: #e5e2ff;
  13.  
  14. /*main background colour*/
  15. --color-1: #C7C2F5;
  16. /*accent colour 1 -- slightly darker than color-1*/
  17. --color-2: #a8a2e5;
  18. /*accent colour 2 -- compliment color-1 + color-2*/
  19. --color-3: #F7A8E6;
  20. /*accent colour 3*/
  21. --color-4: #fff;
  22. /*accent colour 4 -- lighter than color-1*/
  23. --color-5: #eceaff;
  24.  
  25. /*tab button colours*/
  26. --b1: #f9c2fc;
  27. --b2: #c2b2f7;
  28. --b3: #bfe1fc;
  29.  
  30. /*header colour -- main title, subtitle*/
  31. --h1: #fff;
  32. /*header colour 2 -- tab titles*/
  33. --h2: #9892db;
  34. /*text colour*/
  35. --t-color: #3a3156;
  36.  
  37. /*fonts used*/
  38. --header: 'Corben', sans-serif;
  39. --subheader: 'Libre Franklin', sans-serif;
  40. --body: 'Libre Franklin', sans-serif;
  41.  
  42. /*main content image*/
  43. --img-1: url('https://64.media.tumblr.com/d103bf09c28772a149293ed0793773cb/41b67c40a1882a50-61/s540x810/a5dd63dfb8185d8264b56bb66e69aff23ba67b99.gif');
  44.  
  45. /*detail images -- if you don't want to use the images, just delete everything after detail: except for the semi-colon*/
  46. --location: url('https://dbkpop.com/wp-content/uploads/2021/03/weeekly_we_play_concept_all_group-2000x1333.jpg');
  47. --weather: url('https://0.soompi.io/wp-content/uploads/2021/02/03074142/weeekly-1.jpeg');
  48.  
  49. height:auto; width:100%; padding:0; overflow-x:auto; overflow-y:hidden; margin:15px 0 20px 0; line-height:0;][border=transparent; height:auto; min-height:450px; width:100%; min-width:330px; max-width:670px; padding:0; margin:auto; position:relative; background: var(--color-1); position:relative; --s:clamp(0px, -30px + 7vw, 8px); --b: clamp(10px, -40px + 8vw, 25px); border:var(--b) solid var(--color-1); border-top:clamp(3px, 30px - 6vw, 10px) solid var(--color-1); border-bottom:clamp(0px, 60px - 9vw, 20px) solid var(--color-1); box-sizing:border-box;]
  50.  
  51. [comment]----content page----[/comment]
  52. [border=transparent; height:auto; width:100%; padding:0; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  53.  
  54. [comment]----header----[/comment]
  55. [border=transparent; height:auto; min-height:90px; width:100%; padding:clamp(8px, -30px + 7vw, 13px) 5px 20px 5px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; flex-shrink:0;]
  56. [comment]----title text----[/comment]
  57. [border=transparent; height:auto; width:auto; padding:2px 0 0 0; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  58. [border=transparent; height:auto; width:auto; padding:0; box-sizing:border-box;][border=transparent; height:auto; width:auto; max-height:clamp(50px, 120px - 15vw, 72px); overflow:hidden; padding:0 10px 10px 0; box-sizing:border-box; color: var(--h1); font-weight:bold; font-family: var(--header); font-size:clamp(30px, -40px + 10vw, 45px); font-weight:bold; letter-spacing:0; word-spacing:6px; -webkit-text-stroke:1px var(--h1); text-shadow:3px 3px var(--color-3), 6px 6px var(--color-2);][border=transparent; height:auto; width:auto; padding:0 0 8px 0; box-sizing:border-box; line-height:100%; display:inline;][comment]
  59.  
  60. ----* * * title here----
  61.  
  62. [/comment]after school[/border][comment]
  63. [/comment][border=transparent; height:auto; width:auto; padding:0 30px 6px 0; box-sizing:border-box; line-height:100%; display:inline-block; position:relative;][comment]
  64.  
  65. ----* * * last character of title here----
  66.  
  67. [/comment]![comment]
  68.  
  69. [/comment][border=transparent; height:auto; width:auto; padding:0; text-shadow:3px 3px var(--color-3), 6px 6px var(--color-2); color: var(--h1); font-size:22px; position:absolute; left:20px; top:-3px; transform:rotate(10deg);][fa]fas fa-sparkles[/fa][/border][/border][/border]
  70. [/border]
  71. [border=transparent; height:auto; max-height:28px; width:fit-content; width:-moz-fit-content; padding:0; margin-top:7px; overflow:hidden;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; display:inline; padding:2px 5px; box-sizing:border-box; color: var(--h1); background: var(--color-2); font-size:12px; letter-spacing:0.8px; font-family: var(--subheader); line-height:17px; box-decoration-break:clone; -webkit-box-decoration-break: clone; font-weight:bold;][comment]
  72.  
  73. ----* * * subtitle here----
  74.  
  75. [/comment]i'm so good with you ♡[/border][/border]
  76. [/border]
  77. [comment]----title text end----[/comment]
  78.  
  79. [comment]----links container----[/comment]
  80. [border=transparent; height:100%; flex:1 0; min-width:clamp(75px, -20px + 20vw, 190px); padding:14px 0 5px 5px; box-sizing:border-box; display:flex; flex-flow:row wrap; justify-content:center; align-items:flex-end; align-content:flex-end; margin-left:15px;][border=transparent; flex:1; padding:0;][/border]
  81.  
  82. [comment]----link box (replace xx with link)----[/comment]
  83. [url='xx'][border=transparent; height:clamp(30px, -50px + 10vw, 50px); padding:0; width:auto; min-width:25px; max-width:40px; display:flex; flex-flow:column nowrap; align-items:center; overflow:hidden; color: var(--color-4);]
  84. [border=transparent; height:auto; width:auto; padding:0 3px; box-sizing:border-box; font-size:clamp(20px, -30px + 8vw, 23px); line-height:100%;][comment]
  85.  
  86. ----* * * link icon here----
  87.  
  88. [/comment][fa]fas fa-star[/fa][/border]
  89. [border=transparent; height:auto; width:auto; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:10px; line-height:100%; margin-top:12px; letter-spacing:1px; text-decoration:underline var(--color-1); font-weight:bold;][comment]
  90.  
  91. ----* * * link title here----
  92.  
  93. [/comment]main[/border]
  94. [/border][/url]
  95. [comment]----link box end----[/comment]
  96. [border=transparent; height:0; width:clamp(5px, -30px + 9vw, 40px); padding:0; flex-shrink:0;][/border]
  97.  
  98. [comment]----link box (replace xx with link)----[/comment]
  99. [url='xx'][border=transparent; height:clamp(30px, -50px + 10vw, 50px); padding:0; width:auto; min-width:25px; max-width:40px; display:flex; flex-flow:column nowrap; align-items:center; overflow:hidden; color: var(--color-4);]
  100. [border=transparent; height:auto; width:auto; padding:0 3px; box-sizing:border-box; font-size:clamp(20px, -30px + 8vw, 23px); line-height:100%;][comment]
  101.  
  102. ----* * * link icon here----
  103.  
  104. [/comment][fa]fas fa-users[/fa][/border]
  105. [border=transparent; height:auto; width:auto; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:10px; line-height:100%; margin-top:12px; letter-spacing:1px; text-decoration:underline var(--color-1); font-weight:bold;][comment]
  106.  
  107. ----* * * link title here----
  108.  
  109. [/comment]cs[/border]
  110. [/border][/url]
  111. [comment]----link box end----[/comment]
  112. [border=transparent; height:0; width:clamp(5px, -30px + 9vw, 40px); padding:0; flex-shrink:0;][/border]
  113.  
  114. [comment]----link box (replace xx with link)----[/comment]
  115. [url='xx'][border=transparent; height:clamp(30px, -50px + 10vw, 50px); padding:0; width:auto; min-width:25px; max-width:40px; display:flex; flex-flow:column nowrap; align-items:center; overflow:hidden; color: var(--color-4);]
  116. [border=transparent; height:auto; width:auto; padding:0 3px; box-sizing:border-box; font-size:clamp(20px, -30px + 8vw, 23px); line-height:100%;][comment]
  117.  
  118. ----* * * link icon here----
  119.  
  120. [/comment][fa]fas fa-comment-dots[/fa][/border]
  121. [border=transparent; height:auto; width:auto; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:10px; line-height:100%; margin-top:12px; letter-spacing:1px; text-decoration:underline var(--color-1); font-weight:bold;][comment]
  122.  
  123. ----* * * link title here----
  124.  
  125. [/comment]ooc[/border]
  126. [/border][/url]
  127. [comment]----link box end----[/comment]
  128. [border=transparent; height:0; width:5px; padding:0; flex-shrink:0;][/border]
  129. [/border]
  130. [comment]----links container end----[/comment]
  131. [/border]
  132. [comment]----header end----[/comment]
  133.  
  134. [comment]----content container----[/comment]
  135. [border=transparent; flex:1; width:100%; padding:0 5px; box-sizing:border-box; display:flex; flex-flow:row wrap; background: var(--color-1);]
  136. [comment]----left----[/comment]
  137. [border=transparent; flex:49; min-width:200px; padding:0; display:flex; flex-flow:row-reverse wrap; position:relative;]
  138.  
  139. [comment]----tabs----[/comment]
  140. [border=transparent; height:clamp(40px, -150px + 38vw, 340px); flex:1 0 20%; min-width:40px; padding:5px 8px; box-sizing:border-box; overflow:hidden;][border=transparent; padding:0; line-height:42px; margin:clamp(-45px, 60px - 13vw, -8px) -20px 0 clamp(-80px, -180px + 24vw, -25px); letter-spacing:-60px;][tabs][tab=.]h[/tab]
  141.  
  142. [comment]----tab one----[/comment]
  143. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:5; line-height:0; letter-spacing:0; pointer-events:none; display:flex; flex-flow:row-reverse wrap;][border=transparent; height:auto; min-height:40px; flex:1 0 20%; min-width:40px; padding:0;][/border][border=transparent; height:auto; max-height:310px; min-height:180px; min-width:clamp(200px, 600px - 65vw, 300px); flex:1 0 80%; padding:0; display:flex; flex-flow:column nowrap; align-items:center;][border=transparent; min-height:200px; max-width:280px; flex:1; width:100%; border:2px solid var(--color-4); padding:12px; background: var(--location); background-size:cover; background-position:50% 50%; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:flex-end; position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.15; position:absolute; top:0; left:0;][/border][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]
  144.  
  145. [comment]----copy this whole thing to add another detail----[/comment]
  146. [border=transparent; height:auto; width:100%; padding:8px 10px 10px 10px; box-sizing:border-box; position:relative; border-radius:5px; overflow:hidden; margin-top:8px;]
  147. [border=transparent; height:100%; width:100%; padding:0; background: var(--color-5); opacity:0.95; position:absolute; top:0; left:0;][/border][border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow:row nowrap; position:relative; z-index:2;]
  148. [border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-size:20px; flex-shrink:0; margin:5px 14px 0 0; text-shadow:1px 1px var(--color-2), 2px 2px var(--color-3);][comment]
  149.  
  150. ----* * * detail icon here----
  151.  
  152. [/comment][fa]far fa-map-marker-alt[/fa][/border]
  153. [border=transparent; height:auto; flex:1; padding:0; display:flex; flex-flow:column nowrap;]
  154. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 4px 2px 4px; background: var(--color-2); font-family: var(--subheader); font-weight:bold; text-transform:uppercase; letter-spacing:1.5px; font-size:8.5px; line-height:100%; color:var(--h1); opacity:0.9;][comment]
  155.  
  156. ----* * * detail title here----
  157.  
  158. [/comment]location[/border]
  159. [border=transparent; height:auto; width:auto; padding:0 1px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:10.5px; line-height:14px; margin-top:4px;][comment]
  160.  
  161. ----* * * details contents here----
  162.  
  163. [/comment]Lorem ipsum dolor sit amet.[/border]
  164. [/border]
  165. [/border][/border]
  166. [comment]----copy me too!----[/comment]
  167.  
  168. [comment]----copy this whole thing to add another detail----[/comment]
  169. [border=transparent; height:auto; width:100%; padding:8px 10px 10px 10px; box-sizing:border-box; position:relative; border-radius:5px; overflow:hidden; margin-top:8px;]
  170. [border=transparent; height:100%; width:100%; padding:0; background: var(--color-5); opacity:0.95; position:absolute; top:0; left:0;][/border][border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow:row nowrap; position:relative; z-index:2;]
  171. [border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-size:20px; flex-shrink:0; margin:5px 14px 0 0; text-shadow:1px 1px var(--color-2), 2px 2px var(--color-3);][comment]
  172.  
  173. ----* * * detail icon here----
  174.  
  175. [/comment][fa]far fa-calendar-alt[/fa][/border]
  176. [border=transparent; height:auto; flex:1; padding:0; display:flex; flex-flow:column nowrap;]
  177. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 4px 2px 4px; background: var(--color-2); font-family: var(--subheader); font-weight:bold; text-transform:uppercase; letter-spacing:1.5px; font-size:8.5px; line-height:100%; color:var(--h1); opacity:0.9;][comment]
  178.  
  179. ----* * * detail title here----
  180.  
  181. [/comment]date & time[/border]
  182. [border=transparent; height:auto; width:auto; padding:0 1px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:10.5px; line-height:14px; margin-top:4px;][comment]
  183.  
  184. ----* * * details contents here----
  185.  
  186. [/comment]Lorem ipsum dolor sit amet.[/border]
  187. [/border]
  188. [/border][/border]
  189. [comment]----copy me too!----[/comment]
  190.  
  191. [/border][border=transparent; height:55px; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:15px; flex-shrink:0;][/border][/border]
  192. [/border][/tab]
  193. [comment]----tab one end----[/comment]
  194.  
  195.  
  196. [comment]----tab two----[/comment]
  197. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:5; line-height:0; letter-spacing:0; pointer-events:none; display:flex; flex-flow:row-reverse wrap;][border=transparent; height:auto; min-height:40px; flex:1 0 20%; min-width:40px; padding:0;][/border][border=transparent; height:auto; max-height:310px; min-height:180px; min-width:clamp(200px, 600px - 65vw, 300px); flex:1 0 80%; padding:0; display:flex; flex-flow:column nowrap; align-items:center;][border=transparent; min-height:200px; max-width:280px; flex:1; width:100%; border:2px solid var(--color-4); padding:12px; background: var(--weather); background-size:cover; background-position:50% 50%; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:flex-end; position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.15; position:absolute; top:0; left:0;][/border][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]
  198.  
  199. [comment]----copy this whole thing to add another detail----[/comment]
  200. [border=transparent; height:auto; width:100%; padding:8px 10px 10px 10px; box-sizing:border-box; position:relative; border-radius:5px; overflow:hidden; margin-top:8px;]
  201. [border=transparent; height:100%; width:100%; padding:0; background: var(--color-5); opacity:0.95; position:absolute; top:0; left:0;][/border][border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow:row nowrap; position:relative; z-index:2;]
  202. [border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-size:20px; flex-shrink:0; margin:5px 14px 0 0; text-shadow:1px 1px var(--color-2), 2px 2px var(--color-3);][comment]
  203.  
  204. ----* * * detail icon here----
  205.  
  206. [/comment][fa]far fa-sun-cloud[/fa][/border]
  207. [border=transparent; height:auto; flex:1; padding:0; display:flex; flex-flow:column nowrap;]
  208. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 4px 2px 4px; background: var(--color-2); font-family: var(--subheader); font-weight:bold; text-transform:uppercase; letter-spacing:1.5px; font-size:8.5px; line-height:100%; color:var(--h1); opacity:0.9;][comment]
  209.  
  210. ----* * * detail title here----
  211.  
  212. [/comment]weather[/border]
  213. [border=transparent; height:auto; width:auto; padding:0 1px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:10.5px; line-height:14px; margin-top:4px;][comment]
  214.  
  215. ----* * * details contents here----
  216.  
  217. [/comment]23°C, the weather's perfect[/border]
  218. [/border]
  219. [/border][/border]
  220. [comment]----copy me too!----[/comment]
  221.  
  222. [/border][border=transparent; height:55px; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:15px; flex-shrink:0;][/border][/border]
  223. [/border][/tab]
  224. [comment]----tab two end----[/comment]
  225.  
  226.  
  227. [comment]----tab three----[/comment]
  228. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:5; line-height:0; letter-spacing:0; pointer-events:none; display:flex; flex-flow:row-reverse wrap;][border=transparent; height:auto; min-height:40px; flex:1 0 20%; min-width:40px; padding:0;][/border][border=transparent; height:auto; max-height:310px; min-height:180px; min-width:clamp(200px, 600px - 65vw, 300px); flex:1 0 80%; padding:0; display:flex; flex-flow:column nowrap; align-items:center;][border=transparent; min-height:200px; max-width:280px; flex:1; width:100%; border:2px solid var(--color-4); padding:12px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:flex-end; position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.15; position:absolute; top:0; left:0;][/border][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]
  229.  
  230. [comment]----copy this whole thing to add another detail----[/comment]
  231. [border=transparent; height:auto; width:100%; padding:8px 10px 10px 10px; box-sizing:border-box; position:relative; border-radius:5px; overflow:hidden; margin-top:8px;]
  232. [border=transparent; height:100%; width:100%; padding:0; background: var(--color-5); opacity:0.95; position:absolute; top:0; left:0;][/border][border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow:row nowrap; position:relative; z-index:2;]
  233. [border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-size:20px; flex-shrink:0; margin:5px 14px 0 0; text-shadow:1px 1px var(--color-2), 2px 2px var(--color-3);][comment]
  234.  
  235. ----* * * detail icon here----
  236.  
  237. [/comment][fa]far fa-user[/fa][/border]
  238. [border=transparent; height:auto; flex:1; padding:0; display:flex; flex-flow:column nowrap;]
  239. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 4px 2px 4px; background: var(--color-2); font-family: var(--subheader); font-weight:bold; text-transform:uppercase; letter-spacing:1.5px; font-size:8.5px; line-height:100%; color:var(--h1); opacity:0.9;][comment]
  240.  
  241. ----* * * detail title here----
  242.  
  243. [/comment]attendance[/border]
  244. [border=transparent; height:auto; width:auto; padding:0 1px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:10.5px; line-height:14px; margin-top:4px;][comment]
  245.  
  246. ----* * * details contents here----
  247.  
  248. [/comment]everyone's here![/border]
  249. [/border]
  250. [/border][/border]
  251. [comment]----copy me too!----[/comment]
  252.  
  253. [comment]----copy this whole thing to add another detail----[/comment]
  254. [border=transparent; height:auto; width:100%; padding:8px 10px 10px 10px; box-sizing:border-box; position:relative; border-radius:5px; overflow:hidden; margin-top:8px;]
  255. [border=transparent; height:100%; width:100%; padding:0; background: var(--color-5); opacity:0.95; position:absolute; top:0; left:0;][/border][border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow:row nowrap; position:relative; z-index:2;]
  256. [border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-size:20px; flex-shrink:0; margin:5px 14px 0 0; text-shadow:1px 1px var(--color-2), 2px 2px var(--color-3);][comment]
  257.  
  258. ----* * * detail icon here----
  259.  
  260. [/comment][fa]far fa-comment-exclamation[/fa][/border]
  261. [border=transparent; height:auto; flex:1; padding:0; display:flex; flex-flow:column nowrap;]
  262. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 4px 2px 4px; background: var(--color-2); font-family: var(--subheader); font-weight:bold; text-transform:uppercase; letter-spacing:1.5px; font-size:8.5px; line-height:100%; color:var(--h1); opacity:0.9;][comment]
  263.  
  264. ----* * * detail title here----
  265.  
  266. [/comment]mentions[/border]
  267. [border=transparent; height:auto; width:auto; padding:0 1px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:10.5px; line-height:14px; margin-top:4px;][comment]
  268.  
  269. ----* * * details contents here----
  270.  
  271. [/comment]@ user @ user[/border]
  272. [/border]
  273. [/border][/border]
  274. [comment]----copy me too!----[/comment]
  275.  
  276. [/border][border=transparent; height:55px; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:15px; flex-shrink:0;][/border][/border]
  277. [/border][/tab]
  278. [comment]----tab three end----[/comment]
  279.  
  280.  
  281. [/tabs][/border][/border]
  282. [comment]----tabs end----[/comment]
  283.  
  284. [comment]----left left----[/comment]
  285. [border=transparent; height:auto; max-height:310px; min-height:180px; min-width:clamp(200px, 600px - 65vw, 300px); flex:1 0 80%; padding:0; display:flex; flex-flow:column nowrap; align-items:center;]
  286. [comment]----image----[/comment]
  287. [border=transparent; flex:1; min-height:200px; width:100%; max-width:280px; padding:0; background: var(--img-1); border:2px solid var(--color-4); box-sizing:border-box; background-size:cover; position:relative;
  288.  
  289. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  290.  
  291. ][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.3; position:absolute; top:0; left:0; z-index:1;][/border]
  292. [/border]
  293. [comment]----image end----[/comment]
  294.  
  295. [comment]----music player----[/comment]
  296. [border=transparent; height:55px; width:100%; max-width:280px; padding:0; display:flex; flex-flow:column nowrap; margin-top:15px; flex-shrink:0;]
  297. [comment]----music title----[/comment]
  298. [border=transparent; height:auto; width:100%; padding:0; color: var(--color-4); font-family: var(--subheader); text-transform:uppercase; font-weight:bold; letter-spacing:1px; font-size:16px; line-height:100%; -webkit-text-stroke:0.5px var(--color-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  299.  
  300. ----* * * music title here----
  301.  
  302. [/comment]after school[/border]
  303. [comment]----music artist----[/comment]
  304. [border=transparent; height:auto; width:100%; padding:0; color: var(--color-2); font-family: var(--subheader); text-transform:uppercase; letter-spacing:0.5px; font-size:10px; line-height:100%; margin-top:5px; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  305.  
  306. ----* * * music artist here----
  307.  
  308. [/comment]weeekly[/border]
  309. [border=transparent; height:auto; width:100%; padding:0; margin-top:0; display:flex; flex-flow:row nowrap; align-items:flex-end;]
  310. [border=transparent; height:4px; flex:1; padding:0; background: var(--color-5); margin-bottom:8px;][border=transparent; height:100%;
  311. /*edit this to adjust length of music bar*/ width:65%;
  312.  
  313. padding:0; background: var(--color-2);][/border][/border]
  314. [comment]----buttons----[/comment]
  315. [border=transparent; height:auto; width:auto; padding:0; flex-shrink:0; display:flex; flex-flow:row nowrap; align-items:center; margin-left:15px;]
  316. [border=transparent; height:19px; width:19px; padding:2px 3px 0 0; box-sizing:border-box; border-radius:50%; background: var(--color-5); color: var(--color-2); font-size:10px; display:flex; justify-content:center; align-items:center;][fa]fas fa-chevron-left[/fa][/border]
  317. [border=transparent; height:25px; width:25px; padding:0; border-radius:50%; margin:0 8px; position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:1px 0 0 0; box-sizing:border-box; background: var(--color-2); color: var(--color-4); font-size:10.5px; display:flex; justify-content:center; align-items:center; position:relative; z-index:2; pointer-events:none; border-radius:50%;][fa]fas fa-play[/fa][/border]
  318. [comment]----actual media player----[/comment]
  319. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; opacity:0.01%;]
  320. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  321. [border=transparent; height:80px; width:180px; padding:0; margin-top:-18px; margin-left:-18px; position:absolute; top:0; left:0;]
  322. [media=soundcloud]https://soundcloud.com/dilla-fadilla-738297077/weekly-after-school[/media]
  323. [/border]
  324.  
  325. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  326. [border=transparent; height:500px; width:500px; margin-top:-175px; margin-left:-97px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  327. [media=googledrive]1wdREzHCykQn1UeMRB546l6t8o7bxGknj[/MEDIA]
  328. [/border]
  329. [/border]
  330. [comment]----actual media player end----[/comment]
  331. [/border]
  332. [border=transparent; height:19px; width:19px; padding:2px 0 0 1px; box-sizing:border-box; border-radius:50%; background: var(--color-5); color: var(--color-2); font-size:10px; display:flex; justify-content:center; align-items:center;][fa]fas fa-chevron-right[/fa][/border]
  333. [/border]
  334. [comment]----buttons end----[/comment]
  335. [/border]
  336. [/border]
  337. [comment]----music player end----[/comment]
  338. [/border]
  339. [comment]----left left end----[/comment]
  340.  
  341. [comment]----sidebar----[/comment]
  342. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:clamp(-4px, -30px + 6vw, 0px); right:0; pointer-events:none; display:flex; flex-flow:row-reverse wrap;]
  343. [comment]----button container----[/comment]
  344. [border=transparent; height:auto; min-height:40px; flex:1 0 20%; min-width:40px; padding:2px 5px; box-sizing:border-box; display:flex; flex-flow:row wrap; align-content:flex-start; align-items:center; justify-content:center; --m: clamp(5px, 50px - 7vw, 12px); background: var(--color-1);]
  345. [comment]----button----[/comment]
  346. [border=transparent; height:28px; width:28px; padding:0 1px 0 0; box-sizing:border-box; border-radius:50%; background: var(--b1); box-shadow:2px 2px var(--color-2); color: var(--color-4); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:bold; font-family: var(--header); margin:clamp(5px, -30px + 6vw, 8px) var(--m);][fa]far fa-map-marker-alt[/fa][/border]
  347. [comment]----button----[/comment]
  348. [border=transparent; height:28px; width:28px; padding:1px 0 0 0; box-sizing:border-box; border-radius:50%; background: var(--b2); box-shadow:2px 2px var(--color-2); color: var(--color-4); display:flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:bold; font-family: var(--header); margin:clamp(5px, -30px + 6vw, 10px) var(--m);][fa]far fa-cloud[/fa][/border]
  349. [comment]----button----[/comment]
  350. [border=transparent; height:28px; width:28px; padding:1px 0 0 0; box-sizing:border-box; border-radius:50%; background: var(--b3); box-shadow:2px 2px var(--color-2); color: var(--color-4); display:flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:bold; font-family: var(--header); margin:clamp(5px, -30px + 6vw, 10px) var(--m);][fa]far fa-users[/fa][/border]
  351.  
  352. [border=transparent; height:clamp(3px, -90px + 17vw, 150px); flex:1; min-width:3px; max-width:calc(100% - 65px); padding:0; background: var(--color-2); margin:clamp(5px, -30px + 6vw, 15px) 8px 0 8px;][/border]
  353.  
  354. [/border]
  355. [border=transparent; height:clamp(310px, 100%, 330px); flex:1 0 80%; min-width:clamp(200px, 600px - 65vw, 300px); padding:0;][/border]
  356. [/border]
  357. [comment]----sidebar end----[/comment]
  358. [/border]
  359. [comment]----left end----[/comment]
  360.  
  361. [comment]----right----[/comment]
  362. [border=transparent; height:clamp(294px, 37vw, 310px); flex:51; min-width:200px; padding:0; display:flex; flex-flow:column nowrap; pointer-events:auto; position:relative; margin-top:clamp(0px, 50px - 8vw, 15px);]
  363.  
  364. [comment]----title----[/comment]
  365. [border=transparent; height:auto; width:100%; padding:9px 12px 15px 12px; box-sizing:border-box; display:flex; flex-flow:row nowrap; font-size:18px; border-radius:1.5px; background: var(--bg-color); flex-shrink:0; box-shadow:4px 4px var(--color-2);][border=transparent; height:auto; width:auto; padding:0; color: var(--h2); font-family: var(--header); -webkit-text-stroke:1px var(--h2); letter-spacing:0.5px; line-height:60%; text-transform:lowercase;][comment]
  366.  
  367. ----* * *title here----
  368.  
  369. [/comment]the scene[/border]
  370. [border=transparent; height:auto; width:auto; padding:0; color: var(--h2); font-family: var(--header); -webkit-text-stroke:1px var(--h2); line-height:60%; margin-left:2px; letter-spacing:2px;]...[/border][/border]
  371.  
  372. [comment]----contents----[/comment]
  373. [border=transparent; height:98%; width:100%; padding:12px 0; box-sizing:border-box; background: var(--bg-color); margin-top:16px; box-shadow:4px 4px var(--color-2); border-radius:1.5px; overflow:hidden; display:flex; flex-flow:column nowrap;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 7px 0 15px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:17px; font-family: var(--body); margin-top:-1px;][comment]
  374.  
  375. ----* * * text starts here----
  376.  
  377. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et augue urna. Mauris bibendum quam sem, et porttitor eros consectetur in. Quisque luctus diam quis erat sodales, nec posuere turpis suscipit. Curabitur scelerisque ex eu massa bibendum feugiat. In hac habitasse platea dictumst. Curabitur est elit, semper quis urna non, molestie suscipit lectus. Cras eget magna sed sem rutrum faucibus nec sed dui. Morbi tincidunt erat eu laoreet ullamcorper.
  378.  
  379. Ut sagittis eleifend ante, vel ultricies magna varius eget. Duis luctus ultricies ex eget posuere. Mauris laoreet diam mattis turpis tincidunt fringilla. Donec non malesuada lectus. Vivamus ut augue accumsan, tincidunt metus id, tincidunt nisl. Fusce at ornare ligula. Sed mattis, justo nec viverra porttitor, felis dui pretium leo, sit amet eleifend ante enim eget nisi. Vivamus fringilla ac metus vulputate vulputate. Nunc quis ultrices velit.
  380.  
  381. [comment]----copy me to make a divider!----[/comment]
  382. [border=transparent; height:auto; width:100px; padding:0; display:flex; justify-content:center; align-items:center; margin:-22px auto -32px auto;][border=transparent; padding:0; height:0; flex:1; padding:0; border-top:2px solid var(--color-2);][/border][border=transparent; height:auto; width:auto; padding:0; margin:0 8px; color: var(--color-3); text-shadow:1px 1px var(--color-2); font-size:12px;][comment]
  383.  
  384. ----* * * divider icon here----
  385.  
  386. [/comment][fa]fas fa-star[/fa][/border][border=transparent; padding:0; height:0; flex:1; padding:0; border-top:2px solid var(--color-2);][/border][/border]
  387. [comment]----copy me too!----[/comment]
  388.  
  389. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam et lobortis magna, vel sollicitudin metus. Mauris at tellus non elit hendrerit feugiat eget nec ipsum. Pellentesque quis neque vitae dui dictum bibendum eu in odio. In non leo sit amet nibh consectetur consectetur. Morbi tincidunt auctor metus, at imperdiet odio pulvinar non. Ut mollis, velit ut viverra aliquam, eros libero blandit nisl, vel egestas mi elit et orci.
  390. [/border][/border][/border]
  391. [comment]----tab contents end----[/comment]
  392. [/border]
  393. [comment]----right end----[/comment]
  394. [/border]
  395. [comment]----content container end----[/comment]
  396. [/border]
  397. [comment]----content page end----[/comment]
  398.  
  399. [comment]
  400. ----signature! do not remove
  401. [/comment][bg=transparent; height:fit-content; width:auto; padding:0; position:absolute;z-index:15;opacity:0.7;color: var(--color-2); font-size:clamp(9px, -30px + 5vw, 10px);text-align:center; top:10px; right:clamp(-10px, 40px - 7vw, 0px); line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/bg][/border][/border]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement