API tools faq
paste
Advertisement
inklimg

/yava bundlrs atomic code

inklimg
Feb 17th, 2024 (edited)
685
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.82 KB | None | 1 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. <!-- favicon & page title -->
  9. <link rel="icon" type="image/gif" href="https://file.garden/ZRgh3nzfnhFDJvPp/cd.gif" />
  10. <title>Vinyl template by ángel</title>
  11.  
  12. <!-- opengraph (discord embed) stuff, optional -->
  13. <meta content="https://bundlrs.cc/yava" property="og:url" />
  14. <meta content="vinyl template" property="og:title" />
  15. <meta content="by @shellfie on disc" property="og:description" />
  16. <meta content="#CCBB6A" name="theme-color" />
  17.  
  18. <style>
  19. /* ---- !!! template by @shellfie on disc ---- */
  20.  
  21. /* fonts */
  22.  
  23. /* header font */
  24. @font-face {
  25. font-family: "Rameyon";
  26. src: url("https://file.garden/ZRgh3nzfnhFDJvPp/Rameyon.otf")
  27. format("opentype");
  28. }
  29.  
  30. /* variables */
  31.  
  32. /* feel free to change what any of these affect by scrolling down to them and putting in your own value! */
  33. :root {
  34. /* main colors */
  35. --bg-color: hsla(0, 0%, 83%, 1); /* main background color for page */
  36. --shadow: hsla(0, 0%, 0%, 0.6); /* color of the shadow for everything */
  37. --accent: hsla(50, 49%, 61%, 1); /* top half of header text, first color of labels, color of links */
  38. --accent2: hsla(44, 39%, 47%, 1); /* bottom half of header text, second color of labels, color of inner circle in CD */
  39.  
  40. /* sizing */
  41. --size: 700px; /* width of container on wide screens, height on small screens */
  42. --gap: -25%; /* gap between vinyl and cover */
  43.  
  44. /* header & label colors */
  45. --outline: hsla(0, 0, 0%, 1); /* color of header & label outline */
  46. --drop-shadow: hsla(0, 0, 100%, 1); /* color of header & label drop shadow */
  47.  
  48. /* CD colors */
  49. --highlight: hsla(0, 0%, 100%, 1); /* lightest color */
  50. --color1: hsla(0, 0%, 29%, 1); /* 2nd lightest */
  51. --color2: hsla(0, 0%, 0%, 1); /* darkest */
  52. }
  53.  
  54. /* box sizing */
  55.  
  56. * {
  57. padding: 0;
  58. margin: 0;
  59. box-sizing: border-box;
  60. }
  61.  
  62. /* body styles */
  63.  
  64. body {
  65. background: radial-gradient(
  66. 100% 100% at center,
  67. var(--bg-color) 20%,
  68. black 100%
  69. );
  70. font-family: Trebuchet MS; /* font */
  71.  
  72. /* center page */
  73. min-height: 100dvh;
  74. width: 100vw;
  75. display: flex;
  76. flex-direction: column;
  77. justify-content: center;
  78. align-items: center;
  79. }
  80.  
  81. /* link styles */
  82.  
  83. a,
  84. a:visited {
  85. color: var(--accent);
  86. text-decoration-style: double;
  87. text-decoration-thickness: 1px;
  88. }
  89.  
  90. /* utilities */
  91.  
  92. .full {
  93. height: 100%;
  94. width: 100%;
  95. }
  96.  
  97. /* container for everything */
  98.  
  99. .container {
  100. max-width: var(--size);
  101. height: calc(var(--size) / 2); /* make height exactly half of width */
  102. filter: drop-shadow(5px 5px 15px var(--shadow));
  103. display: flex;
  104. justify-content: center;
  105. align-items: center;
  106. position: relative;
  107. }
  108.  
  109. /* container for cover and vinyl */
  110.  
  111. .cover-container,
  112. .vinyl-container {
  113. height: 100%;
  114. width: 50%; /* make both half of the container */
  115. background: transparent;
  116. }
  117.  
  118. /* cover styling */
  119.  
  120. .cover-container {
  121. perspective: 1000px; /* gives the flip a 3d effect */
  122. z-index: 90; /* put cover over CD */
  123. }
  124.  
  125. .cover-inner {
  126. position: relative;
  127. box-shadow: 8px 0 15px -1px var(--shadow);
  128. transform: rotateY(0deg);
  129. transform-style: preserve-3d;
  130. transition: all 0.6s;
  131. }
  132.  
  133. .cover-front,
  134. .cover-back {
  135. position: absolute;
  136. backface-visibility: hidden;
  137. -webkit-backface-visibility: hidden;
  138. }
  139.  
  140. .cover-front img {
  141. object-fit: cover; /* make sure image covers entire container */
  142. }
  143.  
  144. .cover-back {
  145. transform: rotateY(180deg); /* make back automatically rotated 180deg */
  146. padding: 1.75em; /* space between border and content */
  147. background: hsla(0, 0%, 3%, 1); /* background color for back */
  148. color: hsla(0, 0%, 100%, 1); /* text color */
  149. box-shadow: inset 0 -3px 30px 0 hsla(0, 0%, 100%, 0.4);
  150. display: flex;
  151. flex-direction: column;
  152. gap: 0.1rem; /* space between header and scroll area */
  153. }
  154.  
  155. .cover-back header {
  156. display: block;
  157. width: 100%;
  158. }
  159.  
  160. /* header text */
  161. .cover-back header span {
  162. --outline-width: 1px; /* width of text outline (technically 2x this amount, since I doubled the drop shadow) */
  163. font-family: "Rameyon";
  164. font-size: 3em;
  165. filter: drop-shadow(var(--outline-width) 0 0 var(--outline))
  166. drop-shadow(0 var(--outline-width) 0 var(--outline))
  167. drop-shadow(calc(var(--outline-width) * -1) 0 0 var(--outline))
  168. drop-shadow(0 calc(var(--outline-width) * -1) 0 var(--outline))
  169. drop-shadow(var(--outline-width) 0 0 var(--outline))
  170. drop-shadow(0 var(--outline-width) 0 var(--outline))
  171. drop-shadow(calc(var(--outline-width) * -1) 0 0 var(--outline))
  172. drop-shadow(0 calc(var(--outline-width) * -1) 0 var(--outline))
  173. drop-shadow(3px 2px 0 hsla(0, 0%, 100%, 1));
  174.  
  175. /* text color */
  176. color: transparent;
  177. background: linear-gradient(
  178. to bottom,
  179. var(--accent) 0% 45%,
  180. var(--accent2) 45% 100%
  181. );
  182. background-clip: text;
  183.  
  184. /* fix text outline getting cut off */
  185. padding: 20px;
  186. margin: -20px;
  187. }
  188.  
  189. /* scroll area */
  190. .cover-back main {
  191. overflow: auto;
  192. margin: 0 auto;
  193. padding: 5% 0; /* top and bottom padding so that text doesn't get completely covered by the fade effect */
  194. line-height: 1.5em; /* line spacing */
  195. mask-image: linear-gradient(
  196. to bottom,
  197. transparent 0% 30%,
  198. white 30% 90%,
  199. transparent 100%
  200. ),
  201. linear-gradient(
  202. to top,
  203. transparent 0% 30%,
  204. white 30% 90%,
  205. transparent 100%
  206. ); /* fade effect on text */
  207. }
  208.  
  209. /* "labels" */
  210. .cover-back main p mark {
  211. padding: 0 0.75em;
  212. width: max-content;
  213. display: inline-block;
  214. background: linear-gradient(
  215. to bottom,
  216. var(--accent) 0% 33%,
  217. var(--accent2) 33% 45%,
  218. var(--accent) 45% 60%,
  219. var(--accent2) 60% 100%
  220. ); /* background for labels */
  221. border-radius: 100px;
  222. border: 2px solid var(--outline);
  223. filter: drop-shadow(1px 1px 0 var(--drop-shadow));
  224. font-weight: bold;
  225. }
  226.  
  227. /* flip animation class */
  228.  
  229. .flip {
  230. transform: rotateY(180deg);
  231. box-shadow: -8px 0 15px -1px var(--shadow);
  232. }
  233.  
  234. /* CD styling */
  235.  
  236. .vinyl-container {
  237. margin-left: var(--gap);
  238. display: flex;
  239. justify-content: center;
  240. align-items: center;
  241. }
  242.  
  243. .vinyl {
  244. height: 95%;
  245. width: 95%;
  246. position: relative;
  247. display: flex;
  248. align-items: center;
  249. justify-content: center;
  250. border-radius: 100%;
  251. animation: spin 3s linear infinite;
  252. animation-play-state: paused; /* make animation paused by default */
  253.  
  254. /* cd background effect */
  255. background-size: 100% 100%;
  256. background-position: 0% 0px;
  257. background: var(--color2);
  258. background-image: conic-gradient(
  259. from 0deg at 50% 50%,
  260. var(--color2) 0%,
  261. var(--color1) 19%,
  262. var(--highlight) 25%,
  263. var(--color1) 31%,
  264. var(--color2) 51%,
  265. var(--color1) 69%,
  266. var(--highlight) 75%,
  267. var(--color1) 81%,
  268. var(--color2) 100%
  269. );
  270. }
  271.  
  272. /* yellow circle at center of CD */
  273. .inner-circle {
  274. height: 20%;
  275. width: 20%; /* you can make this bigger/smaller, just make sure the height and width are the same size! */
  276. background: linear-gradient(
  277. -25deg,
  278. hsla(0, 0%, 100%, 1) 0%,
  279. var(--accent2) 70%
  280. );
  281. border-radius: inherit;
  282. position: relative;
  283. z-index: 20;
  284. box-shadow: 0 0 10px 0 var(--shadow);
  285. }
  286.  
  287. /* gap inside of inner circle */
  288. .inner-circle::after {
  289. content: "";
  290. position: absolute;
  291. top: 50%;
  292. left: 50%;
  293. transform: translate(-50%, -50%);
  294. background: var(--bg-color);
  295. height: 35%;
  296. width: 35%;
  297. border-radius: inherit;
  298. box-shadow: inset 5px 5px 15px -2px var(--shadow);
  299. }
  300.  
  301. /* animations */
  302.  
  303. @keyframes spin {
  304. 0% {
  305. transform: rotate(0deg);
  306. }
  307. 100% {
  308. transform: rotate(360deg);
  309. }
  310. }
  311.  
  312. /* responsiveness */
  313.  
  314. @media screen and (max-width: 600px) {
  315. .container {
  316. width: calc(var(--size) / 2);
  317. height: var(--size); /* switch width and height on mobile */
  318. flex-direction: column; /* change direction of everything */
  319. }
  320. .cover-container,
  321. .vinyl-container {
  322. width: 100%;
  323. height: 50%; /* swap width and height on mobile */
  324. }
  325. .cover-front img,
  326. .flip {
  327. box-shadow: 0 8px 15px -1px var(--shadow); /* change position of box shadow */
  328. }
  329. .vinyl-container {
  330. margin-left: 0;
  331. margin-top: calc(var(--gap) * 2); /* change margin to fit mobile layout */
  332. }
  333. }
  334. </style>
  335. </head>
  336.  
  337. <body>
  338. <!-- start main container -->
  339. <div class="container full">
  340.  
  341. <!-- start cover -->
  342. <div class="cover-container" onclick="flipCard()">
  343. <div class="cover-inner full">
  344.  
  345. <!-- start cover image - replace src with your own image URL (preferrably a square) -->
  346. <div class="cover-front full">
  347. <img
  348. class="full"
  349. src="https://file.garden/ZRgh3nzfnhFDJvPp/IMG_8467.jpeg"
  350. alt="The album cover for BABYMETAL's album, METAL RESISTANCE."
  351. />
  352. </div>
  353. <!-- end cover image -->
  354.  
  355. <!-- start back of cover -->
  356. <div class="cover-back full">
  357. <header>
  358. <span>Name</span>
  359. </header>
  360. <main class="full">
  361. <p>
  362. <mark>about</mark> <a href="#">link</a> <strong>bold</strong> <em>italic</em> ; f2u atomic vinyl themed template by @shellfie on disc! Most attributes are changeable through variables, some are global, some are local. You need at least a <em>little</em> bit of CSS knowledge to use this. Edits are ok! <a href="https://pastebin.com/0A8EE9fM">pastebin with code</a>
  363. <br />
  364. <mark>rules</mark> the only rules are: dont gatekeep the code (its not yours anyways), dont remove the credits in the code, don't use this if you're on my <a href="https://bundlrs.cc/smiski#dni">dni</a>, and thats it!
  365. </p>
  366. </main>
  367. </div>
  368. <!-- end back of cover -->
  369.  
  370. </div>
  371. </div>
  372. <!-- end cover -->
  373.  
  374. <!-- start vinyl cd -->
  375. <div class="vinyl-container">
  376. <div class="vinyl" onclick="playMusic()">
  377. <div class="inner-circle"></div>
  378. </div>
  379. </div>
  380. <!-- end vinyl cd -->
  381.  
  382. </div>
  383. <!-- end main container -->
  384. <script>
  385. // get elements for flip and spin effect
  386. var inner = document.querySelector(".cover-inner");
  387. var vinyl = document.querySelector(".vinyl");
  388.  
  389. // replace URL with your own audio URL
  390. const audio = new Audio("https://file.garden/ZRgh3nzfnhFDJvPp/yava.mp3");
  391. let playing = false;
  392.  
  393. // alert users about how to use page
  394. window.alert(
  395. "click the cover to see info, and click the CD to play a song!",
  396. );
  397.  
  398. // flip cover function
  399. function flipCard() {
  400. inner.classList.toggle("flip");
  401. }
  402.  
  403. function playMusic() {
  404. // change value of playing
  405. playing = !playing;
  406.  
  407. // change animation play state
  408. if (playing) {
  409. vinyl.style.animationPlayState = "running";
  410. } else {
  411. vinyl.style.animationPlayState = "paused";
  412. }
  413.  
  414. // play/pause audio
  415. if (playing) audio.play();
  416. else audio.pause();
  417. }
  418. </script>
  419. </body>
  420. </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!