Advertisement
ooksie

oscine

Dec 5th, 2021 (edited)
494
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [comment]coded by uxie!
  2.  
  3. [font=Libre Baskerville]headers[/font]
  4. [font=Karla]body text[/font]
  5.  
  6. 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 ( ‾́ ◡ ‾́ )
  7.  
  8. [/comment][border=transparent;
  9.  
  10. /*you can put in a hexcode/image link if you want a big background, but i think it looks better without!*/
  11. --bg: x;
  12.  
  13. /*container background colour*/
  14. --bg-color:#231f1f;
  15. /*container border*/
  16. --border:#bc807a;
  17. /*accent colour 1*/
  18. --color-1: #a52115;
  19. /*accent colour 2 (slightly darker/more saturated)*/
  20. --color-2: #8A0D00;
  21.  
  22. /*main role header colour*/
  23. --h1: #fff;
  24. /*info title colour*/
  25. --h2: var(--color-1);
  26. /*psyche trait colour*/
  27. --h3: #b2271a;
  28. /*text colour*/
  29. --t-color: #fff;
  30.  
  31. /*fonts used*/
  32. --header: 'Libre Baskerville', serif;
  33. --body: 'Karla', sans-serif;
  34.  
  35. /*right/top image*/
  36. --img-1: url('https://static.wikia.nocookie.net/how-to-protect-the-heroines-older-brother/images/6/62/Roxy_ch.26.jpg/revision/latest?cb=20210519213907');
  37.  
  38. /*gallery images*/
  39. --g1: url('https://pic1.mangapicgallery.com/r/album/ad/md_/923348_13605272.jpg');
  40. --g2: url('https://pbs.twimg.com/media/E4kanMdXwAEGsrl.jpg');
  41. --g3: url('https://i.pinimg.com/564x/fd/40/e2/fd40e207838a11ac834fbed8f1dd4096.jpg');
  42. --g4: url('https://static.wikia.nocookie.net/how-to-protect-the-heroines-older-brother/images/a/af/Roxana_Agriche.png/revision/latest?cb=20210519154710');
  43.  
  44. height:auto; width:100%; padding:clamp(10px, 4.5vw, 25px) 5px; box-sizing:border-box; background: var(--bg); background-size:cover; line-height:0; position:relative; overflow:hidden;][border=transparent; height:auto; width:100%; max-width:480px; padding:0; box-sizing:border-box; display:flex; flex-flow:row-reverse wrap; justify-content:center; margin:auto; position:relative; z-index:2; overflow:hidden;]
  45.  
  46. [comment]----right/top image----[/comment]
  47. [border=transparent; height:auto; min-height:140px; flex:40; min-width:100px; padding:0; background: var(--img-1), var(--color-1);
  48.  
  49. /*edit the following to adjust the cropping of the image*/ background-position:10% 20%;
  50.  
  51. background-size:cover; position:relative; z-index:1; border:1px solid var(--border); border-left:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.15;][/border]
  52.  
  53. [comment]----music player----[/comment]
  54. [border=transparent; height:32px; width:auto; max-width:clamp(120px, 24vw, 140px); padding:0; background: var(--bg-color); border:1px solid var(--color-1); position:absolute; bottom:clamp(-1px, 300px - 38vw, 106.5px); right:-1px; opacity:0.95;][border=transparent; height:100%; width:100%; padding:5px 12px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;]
  55.  
  56. [comment]----play button----[/comment]
  57. [border=transparent; height:auto; width:auto; padding:0; position:relative; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:0; background:var(--bg-color); position:relative; z-index:2; color: var(--color-2); font-size:13px; pointer-events:none;][fa]fas fa-play[/fa][/border]
  58.  
  59. [comment]----actual media player----[/comment]
  60. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; overflow:hidden; opacity:0.01%;]
  61. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  62. [border=transparent; height:80px; width:180px; padding:0; margin-top:-20px; margin-left:-20px; position:absolute; top:0; left:0;]
  63. [media=soundcloud]soundcloud link here[/media]
  64. [/border]
  65.  
  66. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  67. [border=transparent; height:500px; width:500px; margin-top:-172px; margin-left:-95px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  68. [media=googledrive]google drive file code here[/MEDIA]
  69. [/border]
  70. [/border]
  71. [comment]----actual media player end----[/comment]
  72. [/border]
  73. [comment]----play button end----[/comment]
  74.  
  75. [comment]----song contents----[/comment]
  76. [border=transparent; height:12px; width:auto; padding:0; overflow:hidden; display:flex; flex-flow:row wrap; justify-content:center;]
  77. [comment]----song title----[/comment]
  78. [border=transparent; height:12px; width:auto; padding:0; margin:0 5px 0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--h2); font-family: var(--body); letter-spacing:1px; text-transform:uppercase; font-size:12px; line-height:100%; font-weight:bold;][comment]
  79.  
  80. ----* * * song title here----
  81.  
  82. [/comment]title[/border]
  83.  
  84. [comment]----song artist----[/comment]
  85. [border=transparent; height:auto; width:auto; min-width:fit-content; min-width:-moz-fit-content; padding:0; display:flex; flex-flow:row nowrap; align-items:center;][border=transparent; height:0; width:15px; padding:0; border-top:1px solid var(--h2); flex-shrink:0; margin-right:5px;][/border][border=transparent; height:auto; width:auto; padding:0; white-space:nowrap; text-overflow:ellipsis; color: var(--h2); font-family: var(--body); letter-spacing:1px; text-transform:uppercase; font-size:12px; line-height:100%; font-weight:bold;][comment]
  86.  
  87. ----* * * artist here (will be hidden if too long)----
  88.  
  89. [/comment]artist[/border][/border]
  90. [/border]
  91. [comment]----song contents end----[/comment]
  92. [/border][/border]
  93. [comment]----music player end----[/comment]
  94. [/border]
  95. [comment]----left/top image end----[/comment]
  96.  
  97. [comment]----contents----[/comment]
  98. [border=transparent; height:380px; flex:60; min-width:250px; padding:15px 8px 15px 15px; box-sizing:border-box; background: var(--bg-color); position:relative; border:1px solid var(--border);]
  99.  
  100. [comment]----role----[/comment]
  101. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row-reverse wrap; align-items:center;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:100%; padding:0; background: var(--bg-color); border:1px solid var(--color-1); margin:clamp(-30px, -80px + 12vw, 5px) clamp(-35px, 50px - 9vw, 10px) 0 auto; position:relative; z-index:2;][border=transparent; height:100%; width:100%; padding:10px 13px 10px 13px; box-sizing:border-box; color: var(--h1); font-family: var(--header); font-size:16px; text-transform:uppercase; letter-spacing:-1px; word-spacing:4px; line-height:100%; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;][comment]
  102.  
  103. ----* * * role here----
  104.  
  105. [/comment]role here[/border][/border]
  106. [border=transparent; height:0; flex:1; min-width:60px; padding:0; border-top:1px solid var(--color-1); margin:clamp(-80px, -200px + 26vw, 8px) 20px 0 10px; display:flex; align-items:center; justify-content:center;][border=transparent; height:30px; width:auto; padding:0 10px; box-sizing:border-box; background: var(--bg-color); color: var(--color-2); font-size:13px; line-height:100%; display:flex; align-items:center; justify-content:center;][comment]
  107.  
  108. ----* * * edit role icon here----
  109.  
  110. [/comment][fa]fas fa-star[/fa]
  111. [/border][/border]
  112. [/border]
  113. [comment]----role end----[/comment]
  114. [border=transparent; height:30px; width:100%; padding:0; background: var(--bg-color); position:absolute; top:50px; left:0;][/border]
  115.  
  116. [comment]----scroll container----[/comment]
  117. [border=transparent; height:clamp(285px, 700px - 78vw, 320px); width:100%; padding:0; margin:clamp(8px, 50px - 9vw, 16px) 0 0 auto; position:relative; z-index:3; 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; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-10px;][/border]
  118.  
  119. [comment]----basics section----[/comment]
  120. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:10px;]
  121.  
  122. [comment]----header----[/comment]
  123. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; position:sticky; top:-0.5px; z-index:5; background: var(--bg-color); ]
  124. [border=transparent; height:30px; width:30px; padding:3px; box-sizing:border-box; background-color: var(--color-2); flex-shrink:0;][border=transparent; height:100%; width:100%; padding:5px; border:1px solid var(--bg-color); box-sizing:border-box; color: var(--bg-color); font-size:13px; line-height:100%; display:flex; align-items:center; justify-content:center; font-family: var(--header); font-weight:bold; text-transform:uppercase;][comment]
  125.  
  126. ----* * * first letter of title here----
  127.  
  128. [/comment]R[/border][/border]
  129. [border=transparent; height:auto; width:auto; padding:0; box-sizing:border-box; color: var(--color-2); font-size:12px; letter-spacing:2px; line-height:100%; font-family: var(--body); margin:2px 0 0 6px; text-transform:uppercase; font-weight:bold;][comment]
  130.  
  131. ----* * * section header here----
  132.  
  133. [/comment]equisite.[/border]
  134. [/border]
  135. [comment]----header end----[/comment]
  136.  
  137. [comment]----section contents----[/comment]
  138. [border=transparent; height:auto; width:100%; padding:0; position:relative; display:flex; flex-flow:row nowrap;][border=transparent; height:auto; min-height:calc(100% + 60px); width:0; padding:0; border-left:1px solid var(--color-2); box-sizing:border-box; margin:-60px 18px 0 13px; flex-shrink:0;][/border][border=transparent; height:100%; flex:1; padding:10px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-5px;][/border]
  139.  
  140. [comment]----copy this whole thing to make another piece of info----[/comment]
  141. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; font-family: var(--body); margin-top:5px;]
  142. [comment]----info title----[/comment]
  143. [border=transparent; height:auto; width:auto; padding:0; color: var(--h2); font-size:12px; font-weight:bold; line-height:100%; flex-shrink:0; margin:4px 10px 0 0; text-transform:uppercase; letter-spacing:1px;][comment]
  144.  
  145. ----* * * info title here----
  146.  
  147. [/comment]name[/border]
  148. [comment]----info contents----[/comment]
  149. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; text-align:justify; color: var(--t-color); font-size:12px; line-height:100%; margin:4px 0 0 0;][comment]
  150.  
  151. ----* * * info here----
  152.  
  153. [/comment]answer[/border]
  154. [/border]
  155. [comment]----copy me too!----[/comment]
  156.  
  157. [comment]----copy this whole thing to make another piece of info----[/comment]
  158. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; font-family: var(--body); margin-top:5px;]
  159. [comment]----info title----[/comment]
  160. [border=transparent; height:auto; width:auto; padding:0; color: var(--h2); font-size:12px; font-weight:bold; line-height:100%; flex-shrink:0; margin:4px 10px 0 0; text-transform:uppercase; letter-spacing:1px;][comment]
  161.  
  162. ----* * * info title here----
  163.  
  164. [/comment]a.k.a.[/border]
  165. [comment]----info contents----[/comment]
  166. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; text-align:justify; color: var(--t-color); font-size:12px; line-height:100%; margin:4px 0 0 0;][comment]
  167.  
  168. ----* * * info here----
  169.  
  170. [/comment]answer[/border]
  171. [/border]
  172. [comment]----copy me too!----[/comment]
  173.  
  174. [comment]----copy this whole thing to make another piece of info----[/comment]
  175. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; font-family: var(--body); margin-top:5px;]
  176. [comment]----info title----[/comment]
  177. [border=transparent; height:auto; width:auto; padding:0; color: var(--h2); font-size:12px; font-weight:bold; line-height:100%; flex-shrink:0; margin:4px 10px 0 0; text-transform:uppercase; letter-spacing:1px;][comment]
  178.  
  179. ----* * * info title here----
  180.  
  181. [/comment]age[/border]
  182. [comment]----info contents----[/comment]
  183. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; text-align:justify; color: var(--t-color); font-size:12px; line-height:100%; margin:4px 0 0 0;][comment]
  184.  
  185. ----* * * info here----
  186.  
  187. [/comment]answer[/border]
  188. [/border]
  189. [comment]----copy me too!----[/comment]
  190.  
  191. [comment]----copy this whole thing to make another piece of info----[/comment]
  192. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; font-family: var(--body); margin-top:5px;]
  193. [comment]----info title----[/comment]
  194. [border=transparent; height:auto; width:auto; padding:0; color: var(--h2); font-size:12px; font-weight:bold; line-height:100%; flex-shrink:0; margin:4px 10px 0 0; text-transform:uppercase; letter-spacing:1px;][comment]
  195.  
  196. ----* * * info title here----
  197.  
  198. [/comment]hair c.[/border]
  199. [comment]----info contents----[/comment]
  200. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; text-align:justify; color: var(--t-color); font-size:12px; line-height:100%; margin:4px 0 0 0;][comment]
  201.  
  202. ----* * * info here----
  203.  
  204. [/comment]answer[/border]
  205. [/border]
  206. [comment]----copy me too!----[/comment]
  207.  
  208. [comment]----copy this whole thing to make another piece of info----[/comment]
  209. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; font-family: var(--body); margin-top:5px;]
  210. [comment]----info title----[/comment]
  211. [border=transparent; height:auto; width:auto; padding:0; color: var(--h2); font-size:12px; font-weight:bold; line-height:100%; flex-shrink:0; margin:4px 10px 0 0; text-transform:uppercase; letter-spacing:1px;][comment]
  212.  
  213. ----* * * info title here----
  214.  
  215. [/comment]eye c.[/border]
  216. [comment]----info contents----[/comment]
  217. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; text-align:justify; color: var(--t-color); font-size:12px; line-height:100%; margin:4px 0 0 0;][comment]
  218.  
  219. ----* * * info here----
  220.  
  221. [/comment]answer[/border]
  222. [/border]
  223. [comment]----copy me too!----[/comment]
  224.  
  225. [/border][/border]
  226. [/border]
  227. [comment]----section end----[/comment]
  228.  
  229. [comment]----personality section----[/comment]
  230. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:10px;]
  231.  
  232. [comment]----header----[/comment]
  233. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; position:sticky; top:-0.5px; z-index:5; background: var(--bg-color); ]
  234. [border=transparent; height:30px; width:30px; padding:3px; box-sizing:border-box; background-color: var(--color-2); flex-shrink:0;][border=transparent; height:100%; width:100%; padding:5px; border:1px solid var(--bg-color); box-sizing:border-box; color: var(--bg-color); font-size:13px; line-height:100%; display:flex; align-items:center; justify-content:center; font-family: var(--header); font-weight:bold; text-transform:uppercase;][comment]
  235.  
  236. ----* * * first letter of title here----
  237.  
  238. [/comment]p[/border][/border]
  239. [border=transparent; height:auto; width:auto; padding:0; box-sizing:border-box; color: var(--color-2); font-size:12px; letter-spacing:2px; line-height:100%; font-family: var(--body); margin:2px 0 0 6px; text-transform:uppercase; font-weight:bold;][comment]
  240.  
  241. ----* * * section header here----
  242.  
  243. [/comment]syche.[/border]
  244. [/border]
  245. [comment]----header end----[/comment]
  246.  
  247. [comment]----section contents----[/comment]
  248. [border=transparent; height:auto; width:100%; max-width:100%; padding:0; position:relative; display:flex; flex-flow:row nowrap;][border=transparent; height:auto; min-height:calc(100% + 60px); width:0; padding:0; border-left:1px solid var(--color-2); box-sizing:border-box; margin:-60px 18px 0 13px; flex-shrink:0;][/border][border=transparent; height:100%; flex:1; padding:8px 0 10px 0; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:16px; font-family: var(--body);][comment]
  249.  
  250. ----* * * text starts here----
  251.  
  252. [/comment]Lorem ipsum [border=0; padding:0; font-weight:bold; display:inline; color: var(--h3); letter-spacing:0.5px;]trait[/border] sit amet, consectetur adipiscing elit. Maecenas pharetra justo in magna rhoncus lacinia. Etiam egestas finibus sapien, non blandit velit [border=0; padding:0; font-weight:bold; display:inline; color: var(--h3); letter-spacing:0.5px;]trait[/border] in. Praesent accumsan nisl sed leo congue egestas. In cursus mattis dolor, et laoreet lorem faucibus vehicula. Fusce eu elit eget ex posuere rhoncus a vel sapien. Donec eu laoreet velit, in consequat dolor. Praesent [border=0; padding:0; font-weight:bold; display:inline; color: var(--h3); letter-spacing:0.5px;]trait[/border] at neque et tristique. Morbi ac enim in nisl rhoncus dapibus.
  253. [/border][/border]
  254. [/border]
  255. [comment]----section end----[/comment]
  256.  
  257. [comment]----personality section----[/comment]
  258. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:10px;]
  259.  
  260. [comment]----header----[/comment]
  261. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; position:sticky; top:-0.5px; z-index:5; background: var(--bg-color); ]
  262. [border=transparent; height:30px; width:30px; padding:3px; box-sizing:border-box; background-color: var(--color-2); flex-shrink:0;][border=transparent; height:100%; width:100%; padding:5px; border:1px solid var(--bg-color); box-sizing:border-box; color: var(--bg-color); font-size:13px; line-height:100%; display:flex; align-items:center; justify-content:center; font-family: var(--header); font-weight:bold; text-transform:uppercase;][comment]
  263.  
  264. ----* * * first letter of title here----
  265.  
  266. [/comment]h[/border][/border]
  267. [border=transparent; height:auto; width:auto; padding:0; box-sizing:border-box; color: var(--color-2); font-size:12px; letter-spacing:2px; line-height:100%; font-family: var(--body); margin:2px 0 0 6px; text-transform:uppercase; font-weight:bold;][comment]
  268.  
  269. ----* * * section header here----
  270.  
  271. [/comment]istory[/border]
  272. [/border]
  273. [comment]----header end----[/comment]
  274.  
  275. [comment]----section contents----[/comment]
  276. [border=transparent; height:auto; width:100%; max-width:100%; padding:0; position:relative; display:flex; flex-flow:row nowrap;][border=transparent; height:auto; min-height:calc(100% + 60px); width:0; padding:0; border-left:1px solid var(--color-2); box-sizing:border-box; margin:-60px 18px 0 13px; flex-shrink:0;][/border][border=transparent; height:100%; flex:1; padding:8px 0 10px 0; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:16px; font-family: var(--body);][comment]
  277.  
  278. ----* * * text starts here----
  279.  
  280. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra justo in magna rhoncus lacinia. Etiam egestas finibus sapien, non blandit velit convallis in. Praesent accumsan nisl sed leo congue egestas. In cursus mattis dolor, et laoreet lorem faucibus vehicula. Fusce eu elit eget ex posuere rhoncus a vel sapien. Donec eu laoreet velit, in consequat dolor. Praesent aliquam at neque et tristique. Morbi ac enim in nisl rhoncus dapibus. In commodo felis et feugiat volutpat. Vivamus porta, felis ut vulputate varius, nulla tortor elementum tellus, in pulvinar sem eros vitae velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper enim vel quam blandit feugiat ac quis nibh.
  281. [/border][/border]
  282. [/border]
  283. [comment]----section end----[/comment]
  284.  
  285. [comment]----gallery section----[/comment]
  286. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:10px;]
  287.  
  288. [comment]----header----[/comment]
  289. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; position:sticky; top:-0.5px; z-index:5; background: var(--bg-color); ]
  290. [border=transparent; height:30px; width:30px; padding:3px; box-sizing:border-box; background-color: var(--color-2); flex-shrink:0;][border=transparent; height:100%; width:100%; padding:5px; border:1px solid var(--bg-color); box-sizing:border-box; color: var(--bg-color); font-size:13px; line-height:100%; display:flex; align-items:center; justify-content:center; font-family: var(--header); font-weight:bold; text-transform:uppercase;][comment]
  291.  
  292. ----* * * first letter of title here----
  293.  
  294. [/comment]g[/border][/border]
  295. [border=transparent; height:auto; width:auto; padding:0; box-sizing:border-box; color: var(--color-2); font-size:12px; letter-spacing:2px; line-height:100%; font-family: var(--body); margin:2px 0 0 6px; text-transform:uppercase; font-weight:bold;][comment]
  296.  
  297. ----* * * section header here----
  298.  
  299. [/comment]allery.[/border]
  300. [/border]
  301. [comment]----header end----[/comment]
  302.  
  303. [comment]----section contents----[/comment]
  304. [border=transparent; height:auto; width:100%; max-width:100%; padding:0; position:relative; display:flex; flex-flow:row nowrap;][border=transparent; height:auto; min-height:calc(100% + 60px); width:0; padding:0; border-left:1px solid var(--color-2); box-sizing:border-box; margin:-60px 18px 0 13px; flex-shrink:0;][/border][border=transparent; height:100%; flex:1; padding:8px 4px 8px 0; box-sizing:border-box; display:flex; flex-flow:row wrap;]
  305.  
  306. [comment]----copy this to add another gallery image----[/comment]
  307. [border=transparent; flex:1; min-width:35%; max-width:50%; padding:0; margin:7px;][border=transparent; padding:0; padding-top:100%; border:1px solid var(--color-1); position:relative;
  308.  
  309. /*edit the number in gX to match the variables*/ background: var(--g1);
  310.  
  311. background-size:cover;
  312.  
  313. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;
  314.  
  315. ][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.15; position:absolute; top:0; left:0;][/border][/border][/border]
  316. [comment]----copy me too!----[/comment]
  317.  
  318. [comment]----copy this to add another gallery image----[/comment]
  319. [border=transparent; flex:1; min-width:35%; max-width:50%; padding:0; margin:7px;][border=transparent; padding:0; padding-top:100%; border:1px solid var(--color-1); position:relative;
  320.  
  321. /*edit the number in gX to match the variables*/ background: var(--g2);
  322.  
  323. background-size:cover;
  324.  
  325. /*edit this to adjust the cropping of the image*/ background-position:50% 20%;
  326.  
  327. ][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.15; position:absolute; top:0; left:0;][/border][/border][/border]
  328. [comment]----copy me too!----[/comment]
  329.  
  330. [comment]----copy this to add another gallery image----[/comment]
  331. [border=transparent; flex:1; min-width:35%; max-width:50%; padding:0; margin:7px;][border=transparent; padding:0; padding-top:100%; border:1px solid var(--color-1); position:relative;
  332.  
  333. /*edit the number in gX to match the variables*/ background: var(--g3);
  334.  
  335. background-size:cover;
  336.  
  337. /*edit this to adjust the cropping of the image*/ background-position:50% 20%;
  338.  
  339. ][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.15; position:absolute; top:0; left:0;][/border][/border][/border]
  340. [comment]----copy me too!----[/comment]
  341.  
  342. [comment]----copy this to add another gallery image----[/comment]
  343. [border=transparent; flex:1; min-width:35%; max-width:50%; padding:0; margin:7px;][border=transparent; padding:0; padding-top:100%; border:1px solid var(--color-1); position:relative;
  344.  
  345. /*edit the number in gX to match the variables*/ background: var(--g4);
  346.  
  347. background-size:cover;
  348.  
  349. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;
  350.  
  351. ][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.15; position:absolute; top:0; left:0;][/border][/border][/border]
  352. [comment]----copy me too!----[/comment]
  353.  
  354. [/border][/border]
  355. [/border]
  356. [comment]----section end----[/comment]
  357.  
  358. [/border][/border][/border]
  359. [comment]----scroll container end----[/comment]
  360. [/border]
  361. [comment]----contents end----[/comment]
  362.  
  363. [comment]
  364. ----signature! do not remove
  365. [/comment][bg=transparent; height:auto; width:auto; padding:3px; box-sizing:border-box; position:absolute;z-index:6;opacity:0.7;text-align:center; top:11px; left:11px; z-index:10; background: var(--bg-color);][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:clamp(9px, 1.2vw, 10px); line-height:100%; opacity:0.8;][font=Open Sans]♡coded by uxie♡[/font][/border][/bg][/border][/border]
Advertisement
RAW Paste Data Copied
Advertisement