this code can aslo be copied into https://htmlpasta.com/, https://pste.eu/ or wherever

<html>
<head>
<title></title>

<!-- this is area that revealed when click on corner image -->
<style>
#myDIV {
width:100vw;
margin:auto;
position: absolute;
max-height:100px;
}
</style>

<!-- this css that makes area revealed by hitting corner image very transparent rgba colour -->
<style>
table#t01 {
width:100%;
background:#7f7f7f;
background:rgba(0,0,0,0.5);
}
</style>

<!-- this css changes button colour on hover over-->
<style>
.button:hover {
background-image:none;
background-color:#ff00ff;
}
</style>

<!-- made so can change position loading image -->
<style>
body {
background: #ffffff url("https://i.imgur.com/tRIdlVB.png ") repeat;
height: 100%;
}
</style>



<!-- this make button bigger making easier to hit when using cellphone -->
<style type="text/css">
.button { background-color:#02C90F;
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>

<!-- this is the line of code changes font family, now dropbox used for font change url dl.dropboxusercontent as most httaccess prevent 'cross reference' -->
<style>
@font-face {
font-family: myFirstFont;
src: url();
}
</style>

<!-- this code for hit here button centred horizontal vertical -->
<style type="text/css">
/* centreing click here and all held in it */
#C {
width:500px;
height:230px;
background-color:black;
border-style:solid;
border-color:#0DFF00;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
overflow:hidden;
}
/* centreing you chose message display on loader */
#show {
width:500px;
height:230px;
background:black;
border-style:solid;
border-color:#0DFF00;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
overflow:hidden;
}
</style>

<!-- code sloppy, change height of box all stay vertically centred -->
<style>
/* centres click to play contents for resizing height bigger */
.jewww {
margin:auto;
width:auto;
background-image: none;
background-color: transparent;
white-space: nowrap;
position: absolute;
top: 50%;
left: 50%;
/* transform: amazing function much more www.w3schools.com/Css/css3_2dtransforms.asp */ -ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Safari */
transform: translate(-50%, -50%);
}
/* centre message page load resizing the height bigger */
.jewww2 {
margin:auto;
position: absolute;
top: 50%;
left: 50%;
/* transform: amazing function much more www.w3schools.com/Css/css3_2dtransforms.asp */ -ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Safari */
transform: translate(-50%, -50%);
overflow: hidden;
}
/* box holding text within, centreing while centreing div text within, resized by user input */
.yard {
height:100px;
width:auto;
white-space: nowrap;
}
</style>
<!-- change h1 to p scale font size, keep appearance beautiful -->
<style>
p.thicker {
line-height: 8px;
}
.center {text-align: center;} /* this is for centreing as center depreciated */
</style>
</head>

<!-- background image onload creative background with click here button -->
<body onload="document.body.style.background='url(https://i.imgur.com/OcB1aIv.jpg) repeat';document.body.style.backgroundColor='white';C.style.display='block';">

<!-- audio hidden revealed button pressed -->
<!-- z-index:1 keep all above -->
<div id=F style="display:none;position:absolute;z-index:1">
<div id="democlick">
<div id=poo>
<img src="https://i.imgur.com/tSNFVA4.png" alt="">
</div>
</div>
<div id="myDIV" style="display:none;">
<table id=t01>
<tr>
<td>
<div id="democlick2">
<img src="https://i.imgur.com/iVAXU0O.png" alt="">
</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>

<div id=KK style="position:absolute;z-index:1;"><input type="button" class="button" value="Click to show site loaded page" onClick="document.body.style.background='url(https://i.imgur.com/OcB1aIv.jpg) repeat';document.body.style.backgroundColor='white';show.style.display='none';C.style.display='block';KK.style.display='none';"></div>

<div id=show style=display:none>
<!-- this user chose on loader -->
<div class=center>
<div class=jewww2>
<div class=yard>
<p class="thicker" style="color:#0DFF00;font-size:32px;">
<br><br><br><br>
<br><br><br><br>

</p>
</div>
</div>
</div>
</div>

<!-- script button click reveal show me hide me -->
<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>

<!-- corner image manipulated revealed corner image manipulated hidden -->
<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>


<!-- image preload for document -->
<img src="https://i.imgur.com/OcB1aIv.jpg" style="display:none" alt=""> <!-- click to play default background -->
<img src="https://i.imgur.com/tSNFVA4.png" style="display:none" alt=""><!-- corner image outer -->
<img src="https://i.imgur.com/iVAXU0O.png" style="display:none" alt=""><!-- corner image inner -->

<!-- functions onclick, height='100% makes all better, A.play audio -->
<!-- document.body.style.margin='0' corner image exact top -->
<!-- nbsp; vertically centre beautiful -->
<div id=C style=display:none>
<div class=jewww>
<div class=center>
<p class="thicker" style="color:#0DFF00;font-size:32px;font-weight:bold;"> site loaded</p>
<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==) 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';show.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;"><br> <br>  </div>
</div>
</div>

<!-- fontfamily 'myFirstFont' made a choice -->
<div id=T style="text-align:center;font-family:Tahoma,sans-serif" hidden> </div>

<!-- made by Will Musayev, 2017 site expressions -->
</body>
</html>
#site title
 #site description

 #site description text color