API tools faq
paste
Sky_Blue

MAGI layout

Sky_Blue
Oct 14th, 2022
1,499
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.39 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!---
  6.  
  7. MAGI neocities layout by adilene @ adilene.net
  8.  
  9. credit is not necessary but it is greatly appreciated!
  10.  
  11. if you need any help, feel free to shoot me an email at a@adilene.net!!!!
  12.  
  13. --->
  14.  
  15. <meta charset="UTF-8">
  16.  
  17. <!-- viewport - for mobile screens -->
  18. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  19.  
  20. <!-- favicon & title -->
  21. <link rel="shortcut icon" href="FAVICON LINK HERE">
  22. <title>TITLE HERE</title>
  23.  
  24. <!-- fonts -->
  25. <link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500&display=swap" rel="stylesheet">
  26. </head>
  27. <style>
  28. /****** fonts ******/
  29. @font-face {
  30. font-family:'pmmm';
  31. src:url(https://dl.dropbox.com/s/jw7da2jevt4m7mx/GD-MadoMaruGoJA-Rev001.otf);
  32. }
  33.  
  34. /****** scrollbar ******/
  35. ::-webkit-scrollbar{
  36. width: 10px;
  37. height: 10px;
  38. }
  39.  
  40. ::-webkit-scrollbar-thumb{
  41. background: #f6d695;
  42. border-radius: 0px;
  43. }
  44.  
  45. ::-webkit-scrollbar-track{
  46. background: inherit;
  47. border-radius: 0px;
  48. }
  49.  
  50. /****** select hightlight ******/
  51. ::selection {
  52. background: #f598b5;
  53. color:white;
  54. }
  55.  
  56. ::-moz-selection {
  57. background: #f598b5;
  58. color:white;
  59. }
  60.  
  61. /****** body ******/
  62. body {
  63. background-color:#d2bcd7;
  64. background-image:url();
  65. background-repeat: repeat;
  66. background-position: 0 0;
  67. background-attachment: fixed;
  68. color:#2f215b; /* default font color */
  69. font-family:'Bai Jamjuree'; /* default font */
  70. font-size:20px; /* default font size */
  71. padding:10px;
  72. }
  73.  
  74. /****** links ******/
  75. a{
  76. text-decoration: none;
  77. color:#f6d695;
  78. transition:0.3s;
  79. text-shadow: -1px 0 #f598b5, 0 1px #f598b5, 1px 0 #f598b5, 0 -1px #f598b5;
  80. }
  81.  
  82. a:hover{
  83. cursor:help;
  84. transition:0.3s;
  85. color:#f598b5;
  86. text-shadow: -1px 0 #f6d695, 0 1px #f6d695, 1px 0 #f6d695, 0 -1px #f6d695;
  87. }
  88.  
  89. /****** wrappers ******/
  90. #wrapper{
  91. max-width:900px; /* width of entire page - can be changed but i don't recommend anything bigger than 1000! got to make sure the page fits on the screen */
  92. max-height:100%;
  93. width:fit-content;
  94. height:fit-content;
  95. width: -moz-fit-content;
  96. height: -moz-fit-content;
  97. animation: fadeEffect 1s;
  98. margin: auto;
  99. }
  100.  
  101. @keyframes fadeEffect {
  102. from {opacity: 0;}
  103. to {opacity: 1;}
  104. }
  105.  
  106. #mainwrapper{
  107. margin-top:20px; /* space between containers */
  108. display:flex;
  109. gap:20px; /* space between containers */
  110. justify-content:space-between;
  111. }
  112.  
  113. /****** main containers ******/
  114. #header{
  115. width:100%; /* automatically resizes header image to the size of the wrapper (in this case 900px) */
  116. }
  117.  
  118. #header img{
  119. max-width:100%;
  120. max-height:100%;
  121. display:block;
  122. border:4px solid #f598b5; /* border around header */
  123. object-fit:cover;
  124. box-sizing:border-box;
  125.  
  126. }
  127.  
  128. #title{
  129. color:#f598b5; /* color of title */
  130. text-shadow: -1px 0 #f6d695, 0 1px #f6d695, 1px 0 #f6d695, 0 -1px #f6d695;
  131. font-size:70px; /* font size of title */
  132. text-align:center;
  133. font-family:'pmmm'; /* font of title */
  134. width:100%;
  135. animation: pop 1s ease-in-out infinite alternate;
  136. }
  137.  
  138. @keyframes pop{
  139. from{
  140. transform:scale(0.95)
  141. }
  142.  
  143. 50%{
  144. transform:scale(1)
  145. }
  146.  
  147. to{
  148. transform:scale(0.95)
  149. }
  150. }
  151.  
  152. #main{
  153. width:70%; /* width of main container - should add up to 100 when added to #sidebar width */
  154. max-height:800px; /* you can make this taller if you'd like */
  155. float:left;
  156. border:4px solid #f598b5; /* border of main container */
  157. padding:10px;
  158. overflow:auto;
  159. background-color:#fee8ec; /* background color of main container */
  160. }
  161.  
  162. #sidebar{
  163. width:30%; /* width of sidebar - should add up to 100 when added to #main width */
  164. float:left;
  165. display:flex;
  166. flex-direction:column;
  167. gap:20px; /* space between containers */
  168. position:relative;
  169. }
  170.  
  171. /****** sidebar containers ******/
  172. .subtitle{
  173. text-align:center;
  174. font-family:'pmmm'; /* font of subtitle */
  175. font-size:35px; /* font size of subtitle */
  176. margin-top:-15px; /* should be about half of the subtitle font size */
  177. width:100%;
  178. position:absolute;
  179. color:#f598b5; /* color of subtitle */
  180. text-shadow: -1px 0 #f6d695, 0 1px #f6d695, 1px 0 #f6d695, 0 -1px #f6d695;
  181. animation: pop 1s ease-in-out infinite alternate;
  182. }
  183.  
  184. .updates{
  185. border:4px solid #f598b5;
  186. padding:10px;
  187. height:100px;
  188. overflow:auto;
  189. background-color:#fee8ec;
  190. }
  191.  
  192. .music{
  193. border:4px solid #f598b5;
  194. padding:10px;
  195. background-color:#fee8ec;
  196. text-align: center;
  197. }
  198.  
  199. .links{
  200. border:4px solid #f598b5;
  201. padding:10px;
  202. background-color:#fee8ec;
  203. text-align: center;
  204. }
  205.  
  206. .box{
  207. border:4px solid #f598b5;
  208. padding:10px;
  209. background-color:#fee8ec;
  210. text-align: center;
  211. }
  212.  
  213. .banner{
  214. max-width:100%;
  215. max-height:100%;
  216. }
  217.  
  218. /****** music player ******/
  219. #musicplayer{
  220. width:100%;
  221. }
  222.  
  223. .songtitle{
  224. padding:5px;
  225. display:block;
  226. }
  227.  
  228. .controls{
  229. font-size:25px !important; /* size of controls */
  230. text-align:center;
  231. width:100%;
  232. }
  233.  
  234. .controls td{
  235. padding:8px 5px 0px 5px;
  236. }
  237.  
  238. .seeking{
  239. display:flex;
  240. justify-content: space-evenly;
  241. padding:5px;
  242. }
  243.  
  244. .current-time{
  245. padding-right:5px;
  246. }
  247.  
  248. .total-duration{
  249. padding-left:5px;
  250. }
  251.  
  252. i.fas:hover{
  253. cursor:help;
  254. }
  255.  
  256. i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
  257. color:#2f215b; /* color of controls */
  258. }
  259.  
  260. input[type=range] {
  261. -webkit-appearance: none;
  262. width: 100%;
  263. background-color:inherit;
  264. }
  265.  
  266. input[type=range]:focus {
  267. outline: none;
  268. }
  269.  
  270. /* settings for chrome browsers */
  271. input[type=range]::-webkit-slider-runnable-track {
  272. width: 100%;
  273. height: 4px; /* thickness of seeking track */
  274. cursor: help;
  275. background: #f598b5; /* color of seeking track */
  276. }
  277.  
  278. input[type=range]::-webkit-slider-thumb {
  279. height: 15px; /* height of seeking circle */
  280. width: 15px; /* width of seeking circle */
  281. border-radius: 10px;
  282. background: #2f215b; /* color of seeker circle */
  283. cursor: help;
  284. -webkit-appearance: none;
  285. margin-top: -6px;
  286. }
  287.  
  288. /* settings for firefox browsers */
  289. input[type=range]::-moz-range-track {
  290. width: 100%;
  291. height: 4px; /* thickness of seeking track */
  292. cursor: help;
  293. background: #f598b5; /* color of seeking track */
  294. }
  295.  
  296. input[type=range]::-moz-range-thumb {
  297. height: 15px; /* height of seeking circle */
  298. width: 15px; /* width of seeking circle */
  299. border-radius: 10px;
  300. background: #2f215b; /* color of seeker circle */
  301. cursor: help;
  302. border:none;
  303. }
  304.  
  305. /****** mobile settings ******/
  306. @media only screen and (max-width: 600px) {
  307. #sidebar, #main{
  308. width:100%; /* makes all container 100% to fit screen */
  309. }
  310.  
  311. #mainwrapper{
  312. flex-wrap:wrap;
  313. }
  314.  
  315. .banner{
  316. max-width:60%; /* reduces image size of banners on mobile so they look nicer */
  317. margin:auto;
  318. }
  319. }
  320.  
  321. </style>
  322. <body>
  323. <div id="wrapper">
  324.  
  325. <!-- title -->
  326. <div id="title">WELCOME</div>
  327.  
  328. <!-- header -->
  329. <div id="header"><img src="https://files.catbox.moe/u5ijo7.jpeg"></div>
  330.  
  331. <div id="mainwrapper">
  332. <!-- main -->
  333. <div id="main">
  334. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut placerat orci nulla pellentesque. Erat velit scelerisque in dictum. Dui ut ornare lectus sit. Dignissim sodales ut eu sem. Neque viverra justo nec ultrices dui sapien. Ut morbi tincidunt augue interdum velit euismod in. Sit amet justo donec enim diam vulputate ut. Dui nunc mattis enim ut tellus. Turpis cursus in hac habitasse platea dictumst quisque sagittis purus. Mattis molestie a iaculis at erat. Magna eget est lorem ipsum dolor.<br><br>
  335.  
  336. Praesent tristique magna sit amet purus. Sagittis purus sit amet volutpat consequat. Neque egestas congue quisque egestas diam in arcu. Dapibus ultrices in iaculis nunc sed. Et ligula ullamcorper malesuada proin libero nunc consequat interdum varius. In eu mi bibendum neque egestas congue quisque egestas. Malesuada fames ac turpis egestas integer. In cursus turpis massa tincidunt dui ut ornare lectus sit. Mollis aliquam ut porttitor leo a diam. Egestas sed sed risus pretium.<br><br>
  337.  
  338. Cras ornare arcu dui vivamus arcu. Adipiscing commodo elit at imperdiet dui accumsan sit amet. Aliquam id diam maecenas ultricies mi eget mauris pharetra. Eget nulla facilisi etiam dignissim diam quis. Diam quam nulla porttitor massa id neque aliquam vestibulum morbi. Erat imperdiet sed euismod nisi porta lorem mollis aliquam. Convallis aenean et tortor at risus viverra adipiscing at in. Adipiscing at in tellus integer feugiat scelerisque varius morbi. Hac habitasse platea dictumst vestibulum rhoncus. At varius vel pharetra vel turpis nunc. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Aliquam ut porttitor leo a diam sollicitudin tempor id. Amet volutpat consequat mauris nunc congue.<br><br>
  339.  
  340. <a href="https://www.pixiv.net/en/artworks/101310742">header credit</a>
  341. </div>
  342.  
  343. <!-- sidebar -->
  344. <div id="sidebar">
  345. <!-- updates box -->
  346. <div>
  347. <div class="subtitle">UPDATES</div>
  348. <div class="updates">
  349. 3.14.00 - i was born!<br><br>
  350. 8.15.05 - i started kindergarten!<br><br>
  351. 6.15.14 - i graduated from middle school!<br><br>
  352. 6.9.69 - i exploded
  353. </div>
  354. </div>
  355.  
  356. <!-- links -->
  357. <div>
  358. <div class="subtitle">NAVIGATION</div>
  359. <div class="links">
  360. <a href="/">link one</a><br>
  361. <a href="/">link two</a><br>
  362. <a href="/">link three</a><br>
  363. <a href="/">link four</a><br>
  364. <a href="/">link five</a>
  365. </div>
  366. </div>
  367.  
  368. <!-- music -->
  369. <div>
  370. <div class="subtitle">JUKEBOX</div>
  371. <div class="music">
  372. <div id="musicplayer">
  373. <div>
  374. <marquee scrollamount="8" class="songtitle"></marquee>
  375. </div>
  376.  
  377. <table class="controls">
  378. <tr>
  379. <td>
  380. <div class="prev-track" onclick="prevTrack()"><i class="fas fa-backward"></i></div>
  381. </td>
  382. <td>
  383. <div class="playpause-track" onclick="playpauseTrack()" ><i class="fas fa-play"></i></div>
  384. </td>
  385. <td>
  386. <div class="next-track" onclick="nextTrack()"><i class="fas fa-forward"></i></div>
  387. </td>
  388. </tr>
  389. </table>
  390.  
  391. <div class="seeking">
  392. <div class="current-time">00:00</div>
  393.  
  394. <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
  395.  
  396. <div class="total-duration">0:00</div>
  397. </div>
  398.  
  399. <audio id="music" src=""></audio>
  400. </div>
  401. </div>
  402. </div>
  403.  
  404. <!-- box -->
  405. <div>
  406. <div class="subtitle">TITLE</div>
  407. <div class="box">
  408. they call me peanus cus im delirious
  409. </div>
  410. </div>
  411.  
  412. <!-- banner -->
  413. <img class="banner" src="https://files.catbox.moe/o7qvmu.png">
  414. <img class="banner" src="https://files.catbox.moe/4et0ax.jpeg">
  415. </div>
  416. </div>
  417.  
  418. <center style="margin-top:10px;">template by adilene @ adilene.net</center>
  419.  
  420. </div>
  421.  
  422. <!-- music player code -->
  423. <script>
  424. //
  425. // DEFINE YOUR SONGS HERE!!!!!
  426. // MORE THAN FOUR SONGS CAN BE ADDED!!
  427. // JUST ADD ANOTHER BRACKET WITH NAME AND PATH
  428. // CATBOX.MOE IS RECOMMENDED FOR UPLOADING MP3 FILES
  429. let track_list = [
  430. {
  431. name:"inabakumori feat. kaai yuki - lagtrain",
  432. path:"https://files.catbox.moe/9ywkki.mp3"
  433. },
  434. {
  435. name:"inabakumori feat. kaai yuki - kimi ni kaikisen",
  436. path:"https://files.catbox.moe/1pxdnw.mp3"
  437. },
  438. {
  439. name:"pinocchio-p feat. hatsune miku - god-ish",
  440. path:"https://files.catbox.moe/xv3vdj.mp3"
  441. },
  442. {
  443. name: "syudou feat. hatsune miku - her boyfriend, jude",
  444. path: "https://files.catbox.moe/49iuxl.mp3",
  445. },
  446. ];
  447. //
  448. //
  449. //
  450. //
  451. //
  452. </script>
  453. <script src="https://kit.fontawesome.com/f936906ae0.js" crossorigin="anonymous"></script>
  454. <script type="text/javascript" src="https://adilene.net/musicplayer.js"></script>
  455.  
  456. </body>
  457. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!