API tools faq
paste
Advertisement
inklimg

/mizukitemp bundlrs code

inklimg
Feb 24th, 2024 (edited)
1,354
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.63 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.  
  8. <!-- opengraph stuff, optional -->
  9. <meta content="https://bundlrs.cc/mizukitemp" property="og:url" />
  10. <meta content="Mizuki Akiyama template" property="og:title" />
  11. <meta content="by @shellfie on disc" property="og:description" />
  12. <meta content="https://file.garden/ZRgh3nzfnhFDJvPp/mizuki.png" property="og:image" />
  13. <meta content="#fad1db" name="theme-color" />
  14. <!-- ------------------------- -->
  15.  
  16. <!-- favicon and page title -->
  17. <link
  18. rel="icon"
  19. type="image/gif"
  20. href="https://file.garden/ZRgh3nzfnhFDJvPp/boww.gif"
  21. />
  22. <title>Mizuki temp</title>
  23.  
  24. <style>
  25. /* fonts */
  26.  
  27. /* header font */
  28. @font-face {
  29. font-family: "Mogilte";
  30. src: url("https://file.garden/ZRgh3nzfnhFDJvPp/Mogilte.otf")
  31. format("opentype");
  32. }
  33.  
  34. /* body font */
  35. @font-face {
  36. font-family: "Buttershine";
  37. src: url("https://file.garden/ZRgh3nzfnhFDJvPp/BUTTERSHINE-SERIF.otf")
  38. format("opentype");
  39. }
  40.  
  41. /* variables */
  42.  
  43. :root {
  44. --color1: hsla(345, 80%, 90%, 1); /* main color */
  45. --color2: hsla(340, 80%, 98%, 1); /* accent color, first color of bg */
  46. --color3: hsla(340, 90%, 80%, 1); /* accent color, outline for header text */
  47.  
  48. --text-color: hsla(0, 0%, 30%, 1); /* text color */
  49.  
  50. font-size: 16px; /* 1rem */
  51. }
  52.  
  53. /* box sizing */
  54.  
  55. * {
  56. box-sizing: border-box;
  57. margin: 0;
  58. padding: 0;
  59. }
  60.  
  61. /* body stuff */
  62.  
  63. html,
  64. body {
  65. overflow-x: hidden; /* disable sideways scrolling */
  66. }
  67.  
  68. /* global things */
  69. body {
  70. background: radial-gradient(
  71. 100% 100% at top,
  72. var(--color2) 60%,
  73. var(--color1)
  74. ); /* background color */
  75. font-family: "Buttershine"; /* font */
  76. font-variant-ligatures: common-ligatures discretionary-ligatures; /* enable ligatures */
  77. font-feature-settings: "salt"; /* this enables the fancy letters, change to '"salt" off' or remove this line if you don't want all of the crazy swashy letters */
  78. color: var(--text-color); /* text color */
  79.  
  80. /* center everything */
  81. height: 100dvh;
  82. width: 100vw;
  83. display: flex;
  84. justify-content: center;
  85. align-items: center;
  86. }
  87.  
  88. a {
  89. color: var(--color3);
  90. }
  91.  
  92. /* container */
  93.  
  94. #container {
  95. --outline: var(--color1); /* color of drop shadow on everything */
  96. width: 350px;
  97. height: 600px;
  98. position: relative;
  99. filter: drop-shadow(1px 0 0 var(--outline))
  100. drop-shadow(0 1px 0 var(--outline))
  101. drop-shadow(-1px 0 0 var(--outline))
  102. drop-shadow(0 -1px 0 var(--outline))
  103. drop-shadow(0 0 1px var(--outline))
  104. drop-shadow(0 0 2px var(--outline))
  105. drop-shadow(0 0 8px var(--outline));
  106. }
  107.  
  108. /* make both image and scroll area overlap */
  109.  
  110. #img,
  111. #scroll-area {
  112. position: absolute;
  113. left: 0;
  114. right: 0;
  115. }
  116.  
  117. /* mizuki image */
  118.  
  119. #img {
  120. width: 90%;
  121. margin: 0 auto 0 25%;
  122. mask-image: linear-gradient(
  123. to top,
  124. transparent 0%,
  125. white 50% 100%
  126. ); /* add slight fade effect to bottom */
  127. z-index: 9000;
  128. }
  129.  
  130. #img img {
  131. display: block;
  132. height: auto;
  133. width: 100%;
  134. }
  135.  
  136. /* scrollbox area */
  137.  
  138. /* container */
  139. #scroll-area {
  140. height: fit-content;
  141. z-index: 9999; /* make sure scrollbox is on top of everything */
  142. bottom: 0;
  143. margin-bottom: 12%; /* make scrollbox overlap image */
  144. transform: rotate(2deg);
  145. }
  146.  
  147. /* header container */
  148. #scroll-area header {
  149. display: block;
  150. width: 100%;
  151. position: relative;
  152. top: 6%; /* make text overlap scrollbox */
  153. left: 3%;
  154. }
  155.  
  156. /* header text */
  157. #scroll-area header span {
  158. display: block;
  159. width: 100%;
  160. font-family: "Mogilte";
  161. font-size: 4rem;
  162.  
  163. /* color of text */
  164. color: transparent;
  165. background-image: linear-gradient(to bottom, white 25%, var(--color1));
  166. background-clip: text;
  167.  
  168. /* text outline */
  169. --text-outline: var(--color3); /* color of outline */
  170. filter: drop-shadow(1px 0 0 var(--text-outline))
  171. drop-shadow(0 1px 0 var(--text-outline))
  172. drop-shadow(-1px 0 0 var(--text-outline))
  173. drop-shadow(0 -1px 0 var(--text-outline))
  174. drop-shadow(0 0 2px var(--color2)) drop-shadow(0 0 5px var(--color2));
  175. }
  176.  
  177. /* actual scrollbox */
  178. .scrollbox {
  179. height: 200px;
  180. border-width: 10px;
  181. border-style: solid;
  182. border-image: url("https://file.garden/ZRgh3nzfnhFDJvPp/lacepink.png") 7
  183. fill round;
  184. padding: 0 0.5rem;
  185. }
  186.  
  187. /* inner part of scrollbox */
  188. .box-inner {
  189. height: 100%;
  190. overflow: auto;
  191. letter-spacing: 0.0625em;
  192. padding-top: 0.5rem;
  193. line-height: 1.4rem; /* line spacing */
  194. }
  195.  
  196. /* labels */
  197. .box-inner mark {
  198. box-sizing: content-box;
  199. display: inline-block;
  200. background: color-mix(in srgb, transparent 30%, var(--color3));
  201. color: white;
  202. padding: 0.1rem 0.5rem 0.2rem;
  203. height: 1rem;
  204. }
  205.  
  206. /* lace circle */
  207.  
  208. #lace {
  209. position: absolute;
  210. top: 18%;
  211. left: 5%;
  212. height: 15.5em;
  213. width: auto;
  214. }
  215.  
  216. /* responsiveness */
  217.  
  218. @media (max-width: 800px) and (orientation: landscape) {
  219. body {
  220. height: auto; /* reset height of body on mobile devices when in landscape mode */
  221. }
  222. }
  223.  
  224. @media screen and (max-width: 600px) {
  225. #container {
  226. transform: scale(90%); /* make everything smaller on small screens */
  227. }
  228. }
  229. </style>
  230. </head>
  231.  
  232. <body>
  233. <div id="container">
  234. <!-- start image section -->
  235. <section id="img">
  236. <img
  237. src="https://file.garden/ZRgh3nzfnhFDJvPp/mizuki.png"
  238. alt="Mizuki Akiyama in a pink dress with lots of lace and bows. Her torso is leaned toward the opposite direction as her head and she has a neutral look on her face"
  239. />
  240. </section>
  241. <!-- end image section -->
  242.  
  243. <!-- start scroll section -->
  244. <section id="scroll-area">
  245. <!-- header text -->
  246. <header><span>Text</span></header>
  247.  
  248. <!-- start scrollbox -->
  249. <main class="scrollbox">
  250. <div class="box-inner">
  251. <p>
  252. <mark>label</mark> <a href="https://pastebin.com/hDnQDN0R">pastebin with code</a> ,, <strong>bold</strong> <em>italic</em> <a href="#">link</a> ,, template by @shellfie on discord! idc whether you credit me or not! edits are ok, for any questions dm me on disc. Most colors are changeable through variables, so you don't need that much HTML/CSS knowledge to use this temp!
  253. </p>
  254. </div>
  255. </main>
  256. <!-- end scrollbox -->
  257. </section>
  258. <!-- end scroll section -->
  259.  
  260. <!-- lace image -->
  261. <img
  262. src="https://file.garden/ZRgh3nzfnhFDJvPp/lacecircle2.svg"
  263. alt="a circle of lace"
  264. id="lace"
  265. />
  266. </div>
  267. </body>
  268. </html>
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!