API tools faq
paste
amalfigin

Miku Miku ♡ neocities layout

amalfigin
Oct 8th, 2023 (edited)
526
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.54 KB | None | 1 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4.  
  5. <!---
  6.  
  7. Miku Miku ♡ neocities layout by amalfigin
  8.  
  9. if you need help, just ask me on my tumblr blog: https://www.tumblr.com/amalfigintonic/
  10.  
  11. --->
  12.  
  13. <meta charset="UTF-8">
  14.  
  15. <!-- favicon & title -->
  16. <title> Miku Miku ♡ </title>
  17. <link rel="icon" type="image/x-icon" href="https://i.postimg.cc/Bb959LSz/cd825e5e.png">
  18.  
  19. <!-- css please don't touch this -->
  20. <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  21. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  22.  
  23.  
  24. <!-- moving title -->
  25. <script>
  26.  
  27. var documentTitle = document.title + " ˚｡୨୧˚ ";
  28.  
  29. (function titleMarquee() {
  30. document.title = documentTitle = documentTitle.substring(1) + documentTitle.substring(0,1);
  31. setTimeout(titleMarquee, 200);
  32. })();
  33.  
  34. </script>
  35.  
  36.  
  37. <!-- mouse sound effect -->
  38. <script>
  39.  
  40. // Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
  41. // Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
  42.  
  43. //** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
  44. //** Call: uniquevar.playclip() to play sound
  45.  
  46. var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
  47. "mp3": "audio/mpeg",
  48. "mp4": "audio/mp4",
  49. "ogg": "audio/ogg",
  50. "wav": "audio/wav"
  51. }
  52.  
  53. function createsoundbite(sound){
  54. var html5audio=document.createElement('audio')
  55. if (html5audio.canPlayType){ //check support for HTML5 audio
  56. for (var i=0; i<arguments.length; i++){
  57. var sourceel=document.createElement('source')
  58. sourceel.setAttribute('src', arguments[i])
  59. if (arguments[i].match(/\.(\w+)$/i))
  60. sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
  61. html5audio.appendChild(sourceel)
  62. }
  63. html5audio.load()
  64. html5audio.playclip=function(){
  65. html5audio.pause()
  66. html5audio.currentTime=0
  67. html5audio.play()
  68. }
  69. return html5audio
  70. }
  71. else{
  72. return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
  73. }
  74. }
  75.  
  76. //Initialize two sound clips with 1 fallback file each:
  77.  
  78. var mouseoversound=createsoundbite("https://a.tumblr.com/tumblr_ojrn7aGBii1w2e2oyo1.mp3")
  79. var clicksound=createsoundbite("https://a.tumblr.com/tumblr_ojrmy55yUN1w2e2oyo1.mp3")
  80.  
  81. </script>
  82.  
  83. <script>
  84. document.getElementById("img").addEventListener("click", function(){
  85. document.getElementById("audio").play();
  86. });
  87. </script>
  88.  
  89.  
  90.  
  91.  
  92. <style>
  93.  
  94.  
  95. /****** scrollbar ******/
  96.  
  97. * {
  98. scrollbar-width: none;
  99. }
  100.  
  101. ::-webkit-scrollbar { display: none; }
  102.  
  103.  
  104. /****** selection ******/
  105.  
  106. ::selection {
  107. background: #ADD8E6;
  108. color:white;
  109. }
  110.  
  111. ::-moz-selection {
  112. background: #ADD8E6;
  113. color:white;
  114. }
  115.  
  116.  
  117. /****** fonts ******/
  118.  
  119. @font-face{
  120. font-family:mamemoji;
  121. src:url(https://dl.dropbox.com/s/y0um53c5m3g66dn/mamemoji.ttf?);
  122. }
  123.  
  124. @font-face {
  125. font-family: to japan;
  126. src: url(https://dl.dropbox.com/s/kdr109v6f0scyh6/To%20Japan.ttf);
  127. }
  128.  
  129. #japon {
  130. font-family: to japan;
  131. font-size:20px;
  132. }
  133.  
  134. @font-face{
  135. font-family: Rounded;
  136. src: url(https://files.catbox.moe/ur2f53.ttf);
  137. }
  138.  
  139.  
  140. /****** cursor ******/
  141.  
  142. * {cursor: url('https://i.postimg.cc/VsJ06MW3/tumblr-inline-p8c0ynqh-Yk1rhwzwl-75sq.gif'), auto !important;}
  143.  
  144. * {a:hover url('https://i.postimg.cc/VsJ06MW3/tumblr-inline-p8c0ynqh-Yk1rhwzwl-75sq.gif'), pointer !important;}
  145.  
  146.  
  147. /****** body ******/
  148.  
  149. body{
  150. background-image: url("https://i.postimg.cc/jjSkYk2F/tumblr-8a201533a10d8c6a1044780cfc122b43-fa21c5f1-100.webp");
  151. color: #87CEEB;
  152. font-family: mamemoji;
  153. font-size: 20px;
  154. }
  155.  
  156.  
  157. /****** links ******/
  158.  
  159. a:link {
  160. color: #ADD8E6;
  161. background-color: transparent;
  162. text-decoration: none;
  163. }
  164.  
  165. a:visited {
  166. color: #ADD8E6;
  167. background-color: transparent;
  168. text-decoration: none;
  169. }
  170.  
  171. a:hover {
  172. color: #ADD8E6;
  173. text-shadow: #A7C7E7 0 0 10px;
  174. text-decoration: underline;
  175. }
  176.  
  177.  
  178. /****** divider ******/
  179.  
  180. hr {
  181. border-top: 1px solid #87CEEB;
  182. border-bottom: none;
  183. }
  184.  
  185.  
  186. /****** title ******/
  187.  
  188. #title{
  189. font-family:Rounded;
  190. font-size: 50px;
  191. position: absolute;
  192. top: 5px;
  193. left: 5px;
  194. }
  195.  
  196.  
  197. /****** containers ******/
  198.  
  199. .sidebar{
  200. width: 150px;
  201. height: 500px;
  202. background-color: white;
  203. border: 3px double #ADD8E6;
  204. padding: 10px;
  205. position: absolute;
  206. top: 100px;
  207. left: 300px;
  208. }
  209.  
  210. .minibox{
  211. width: 125px;
  212. height: 100px;
  213. background-color: white;
  214. border: 3px double #ADD8E6;
  215. padding: 10px;
  216. overflow: auto;
  217. }
  218.  
  219. .header{
  220. width: 502px;
  221. height: 70px;
  222. background-image: linear-gradient(white,#ADD8E6);
  223. border: 2px solid #ADD8E6;
  224. border-radius:10px 10px 0px 0px;
  225. padding: 10px;
  226. position: absolute;
  227. top: 100px;
  228. left: 500px;
  229.  
  230. }
  231.  
  232. .bigbox{
  233. width: 500px;
  234. height: 390px;
  235. background-color: white;
  236. border: 3px double #ADD8E6;
  237. padding: 10px;
  238. position: absolute;
  239. top: 210px;
  240. left: 500px;
  241. overflow: auto;
  242. }
  243.  
  244. .rightsidebar{
  245. width: 150px;
  246. height: 500px;
  247. background-color: white;
  248. border: 3px double #ADD8E6;
  249. padding: 10px;
  250. position: absolute;
  251. top: 100px;
  252. left: 1050px;
  253. overflow: auto;
  254. }
  255.  
  256.  
  257. </style>
  258.  
  259.  
  260. </head>
  261.  
  262. <body>
  263. <div>
  264.  
  265.  
  266. <div class="sidebar">
  267. <div id="japon"> LINKS !!</div>
  268. <img src="https://i.postimg.cc/gJPrGvh3/4238bc75.gif"> <a href="/" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">link</a><br>
  269. <img src="https://i.postimg.cc/gJPrGvh3/4238bc75.gif"> <a href="/" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">link</a><br>
  270. <img src="https://i.postimg.cc/gJPrGvh3/4238bc75.gif"> <a href="/" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">link</a><br>
  271. <img src="https://i.postimg.cc/gJPrGvh3/4238bc75.gif"> <a href="/" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">link</a><br>
  272. <img src="https://i.postimg.cc/gJPrGvh3/4238bc75.gif"> <a href="/" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">link</a><br>
  273. <img src="https://i.postimg.cc/gJPrGvh3/4238bc75.gif"> <a href="/" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">link</a><br>
  274. feel free to add as many links as you want! :3c
  275. <hr>
  276. <div id="japon">Updates !!</div>
  277.  
  278.  
  279. <div class="minibox">
  280. 10/24/2023: you can write a lot of things here!<br>
  281. 10/10/2023: bleh :p<br>
  282. 10/8/2023: hii world!
  283. </div>
  284.  
  285. <center><a href="/"><img src="https://web.archive.org/web/20091026221332/http://geocities.com/germicidalfury/email.gif"></a></center>
  286.  
  287. </div>
  288.  
  289. <div class="header">
  290. <div id="title">初音ミク</div>
  291. </div>
  292.  
  293.  
  294. <div class="bigbox">
  295.  
  296. <div id="japon">Welcome to name.org !!</div> <br>
  297. This is a box, you can write and add whatever you want here!<br><br>
  298. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum eu facilisis sed odio. Curabitur gravida arcu ac tortor dignissim. Elementum tempus egestas sed sed risus. Pellentesque sit amet porttitor eget dolor morbi non arcu risus. Viverra aliquet eget sit amet. In cursus turpis massa tincidunt dui ut ornare lectus. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Ridiculus mus mauris vitae ultricies leo integer malesuada. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus. Gravida quis blandit turpis cursus in hac habitasse platea. Non sodales neque sodales ut etiam sit. In cursus turpis massa tincidunt dui ut ornare lectus. Dui sapien eget mi proin. Scelerisque fermentum dui faucibus in ornare quam.<br>
  299. Faucibus et molestie ac feugiat. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Nisl nisi scelerisque eu ultrices. Et egestas quis ipsum suspendisse ultrices gravida dictum. Rutrum quisque non tellus orci.<br><br>
  300.  
  301. <center><img src="https://i.postimg.cc/kg0VyGpz/neo-webdesign.gif" width="88" height="31">
  302. <img src="https://i.postimg.cc/15fX33TY/Miku.gif" width="88" height="31"><br>
  303. Here you can add buttons, blinkies and graphics! Go crazy!
  304. </center>
  305.  
  306. </div>
  307.  
  308. <div class="rightsidebar">
  309. Inside this sidebar you can add as many graphics as you want!<br>
  310. Wait, you don't want to use it to store your sparkling buttons and blinkies? Then you can use this to add your status, site button ecc...
  311. <hr>
  312. Here, take this free site button as a gift!<br>
  313. <center>
  314. <img src="https://i.postimg.cc/rpDFcD3q/freebutton.gif">
  315. <textarea rows="3" readonly="" style="resize:none;width:150px"><a href="/" target="_blank"><img src="https://i.postimg.cc/rpDFcD3q/freebutton.gif"></a></textarea><br><br>
  316.  
  317. </center>
  318.  
  319.  
  320. </div>
  321.  
  322.  
  323. <img src="https://i.postimg.cc/Kz5NKGdv/7705-1-1.png" width="300px" style="position:absolute;left:725px;top:25px;">
  324.  
  325.  
  326.  
  327. <!--- music player --->
  328.  
  329. <div class="song">
  330. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  331. <style>
  332. #img:hover,
  333. #img:focus {
  334. -webkit-animation-name:bounce;
  335. animation-name:bounce;
  336. -webkit-transform-origin:center bottom;
  337. transform-origin:center bottom;
  338.  
  339. }
  340. </style>
  341.  
  342. <center>
  343. <audio id="audio" src="https://dl.dropbox.com/scl/fi/l0m5fx9884ew5oovbr0ng/Hatsune-Miku-Patchwork-Staccato-Eng-sub.mp3?rlkey=al7x0s5b3260k00ihzgtzhewl&"></audio>
  344. <img id="img" src="https://gelbooru.com/counter/6.gif" width=auto height=auto class="animate__animated" style="position:absolute;top:630px;left:0px">
  345. </center>
  346.  
  347. <script>
  348. document.getElementById("img").addEventListener("click", function(){
  349. document.getElementById("audio").play();
  350. });
  351. </script>
  352. </div>
  353.  
  354. <!--- end of music player --->
  355.  
  356. </div>
  357.  
  358. </body>
  359. </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!