Create a YTMND

<html> <head> <title></title> <style> #myDIV { /* 100vw; makes it the lenth of the window yet no futher */ width:100vw; margin:auto; position: absolute; max-height:100px; } </style> <style> table#t01 { width:100%; background:#7f7f7f; background:rgba(0,0,0,0.5); } </style> <style> body { background: #ffffff url("https://i.imgur.com/utKpCIj.gif") repeat; } </style> <link rel="preload" href="" as="font" type="font/ttf" crossorigin> <style type="text/css"> .button { background-color:#4CAF50;border:none;color:white;padding: 15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size: 40px;margin: 4px 2px;cursor: pointer; } </style> <style> @font-face { font-family: myFirstFont; src: url(); } </style> <style type="text/css"> /* this for centering the id=C div both horizotinal and vertial */ #C { width:500px;height:230px;background-color:black;border-style:solid;border-color:#ff6633;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;max-width:100%;max-height:100%;overflow:auto; } </style> </head> <body onload="document.body.style.background='url(https://i.imgur.com/OcB1aIv.jpg) repeat';C.style.display='block';zz.style.display='none';"> <div id=zz style=text-align:center;font-family:Tahoma,sans-serif;display:none; ></div> <div id=F style=display:none;position:absolute;z-index:1;> <div id="democlick"> <div id=poo> <img src="https://i.imgur.com/kNG8t2V.gif" > </div> </div> <div id="myDIV" style="display:none;"> <table id=t01> <tr> <td> <div id="democlick2"> <img src="https://i.imgur.com/SMvpaXK.gif" > </div> </td> <td> <audio id=A src="https://archive.org/download/78_aloha-land_wallie-herzer-helen-louise-frank-ferera-athenian-mandolin-quartet_gbia0000271a/_78_aloha-land_wallie-herzer-helen-louise-frank-ferera-athenian-mandolin-quartet_gbia0000271a_01_3.8-ct_eq.mp3" controls loop type="audio/mpeg" ></audio> </td> <td> <div style="color:grey">site discription:</div> <br> <div style="height:50px;max-width:500px;overflow:auto;color:grey"></div> </td> </tr> </table> </div> </div> <script> document.getElementById("democlick").onclick = function() {myFunction()}; function myFunction() { var x = document.getElementById("myDIV"); var p = document.getElementById("poo"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } if (p.style.display === "none") { p.style.display = "block"; } else { p.style.display = "none"; } } </script> <script> document.getElementById("democlick2").onclick = function() {myFunction()}; function myFunction() { var x = document.getElementById("myDIV"); var p = document.getElementById("poo"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } if (p.style.display === "none") { p.style.display = "block"; } else { p.style.display = "none"; } } </script> <img src="https://i.imgur.com/OcB1aIv.jpg" style=display:none> <img src="https://media.discordapp.net/attachments/406286039653679110/458502753820475393/score_logo_4.png" style=display:none> <img src="https://media.discordapp.net/attachments/406286039653679110/458502481010229268/unknown.png" style=display:none> <img src="" style=display:none> <img src="" style=display:none> <img src="" style=display:none> <img src="" style=display:none> <img src="" style=display:none> <img src="" style=display:none> <img src="" style=display:none> <img src="" style=display:none> <img src="" style=display:none> <img src="" style=display:none> <div id=C style=display:none><center><h1 style=color:orange >site loaded</h1> <input type="button" class="button" value="Click to Play Site" onClick="document.body.style.background='url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat center,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) repeat';document.body.style.height='100%';document.body.style.margin='0';document.body.style.backgroundColor='black';A.play();F.style.display='block';C.style.display='none';T.hidden=0;t=['','','']; l=Math.max(t[0].length,t[1].length,t[2].length); s=19<l?21:14<l?25:12<l?30:11<l?35:9<l?40:7<l?45:50; l=''; for(j in t){ c=(s*2+25)*j*2; for(i=0;i++<s;){ z=i==s?0:(i<4?0:'')+(i*4).toString(16); l+='<div style=position:absolute;width:810;left:'+i*2+';top:'+(i+c)+';color:'+z+z+z+';font-size:'+i*2+'pt>'+t[j]+'</div>'}}; T.innerHTML=l;"> </center></div> <div id=T style="text-align:center;font-family:Tahoma,sans-serif" hidden> </div> <script> (Z=t=>{setTimeout(function(){ l=''; for(i=0;i++<50;){z=i==50?0:(i<4?0:'')+(i*4).toString(16); l+=`<div style=position:absolute;width:810;left:${i*2};top:${i};color:${z+z+z};font-size:${i*2}pt>${t}%</div>`} zz.innerHTML=l; if(++t<101)Z(t)},100)})(0); </script> </body> </html>