PRO STANDARD #1

1) IMAGE INDEX. cr solieilos and biogger99

<style>
.hae {
border-radius: 5px;
width: 100%;
height: 270px;
padding: 2px;
font-size: 1.5em;
color: #353235;
overflow: auto;
-webkit-transform: rotate(0deg);
position: relative;
overflow: hidden;
text-align:center;
}

.hae:hover .sip {
height: 0%;
}

.hea {
text-align: left;
color: #15111E;
font-size: 20px;
width: 100%;
height: 100%;
background: #ffffff00;
}

.sip {
color: #ffffff00;
font-size: 20px;
width: 100%;
height: 270px;
line-height: 100px;
position: absolute;
top: 0;
left: 0;
transition: 0.8s;
-moz-transition: 0.8s;
-webkit-transition: 0.8s;
-o-transition: 0.8s;
object-fit: cover;
z-index: 1;
text-align:left;
overflow: scroll;
overflow-x: hidden;

}

#choco {
width: 100%;
height: 100%;
background: #ffffff00;
position: relative;
top: 0;
padding: 10px;
white-space: nowrap;
}

.tem {
height: 270px;
object-fit: cover;
white-space: normal;
float: left;
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

#fart {
height: 250px;
width: auto;
padding: 6px;
font-size: 0.5em;
font-family: inter;
color: #353235;
overflow: auto;
position: relative;
bottom: 0;
right: 0;
text-align:left;
z-index: 1;

#image01 .frame {width: 100vw;transition: none;

}#image01 .frame img {transition: none;
}
}

</style>
<div class="hae">
<div class="hea">
<br>
<div class="tem">
<center>
<div id="fart">
<strong>update log</strong><br><br />
<strong>date today whtever</strong> what info
</div>
</center>
<div id="image01"><img class="sip" src="xxxxximage_linkxxxxx" class="full"></div>


------------------------------------------------

2) ABOUT, RULES SCROLLBOXES

<STYLE>
#scrollbox{
height:270px;
width: 100%;
padding: 3px;
overflow: scroll;
overflow-x: hidden;
font-family: inter;
font-size:1.5em;
text-align: left;
font-weight:500;
line-height: 1.25;
}
::-webkit-scrollbar {
width: 0; /* remove scrollbar space */
background: transparent; /* to make scrollbar invisible */
}
::-webkit-scrollbar-thumb {
background: transparent;
}
</style>

<div id="scrollbox">
<strong>RULES</strong>
<br><strong>xxxxxinfoxxxxxxx</strong> xxxsubinfoxxxxxxxxx
</div>

------------------------------------------------

3) CHAT BOX

<div style=" height: 270px;
width: 100%;
padding: 3px;
overflow: scroll;
overflow-x: hidden;
font-family: inter;
font-size:1em;
text-align:left;
font-weight:500;
">

/*insert your chatbox link (it's the <iframe>), go visit cbox.ws to get your own chat box!*/

------------------------------------------------

4) BUTTONS (WITH SOUNDS!)

<style>.buttons {cursor: default;display: flex;justify-content: var(--flex-alignment);letter-spacing: 0;padding: 0;}.buttons li {max-width: 100%;}.buttons li a {align-items: center;justify-content: center;max-width: 100%;text-align: center;text-decoration: none;vertical-align: middle;white-space: nowrap;}#buttons01 {justify-content: flex-start;gap: 0.25rem;flex-direction: row;flex-wrap: wrap;}#buttons01 li a {display: flex;width: auto;height: 3.5rem;line-height: 3.5rem;padding: 0 1.75rem;vertical-align: middle;font-family: 'Inter', sans-serif;font-size: 1.875em;font-weight: 500;border-radius: 0.875rem;direction: var(--site-language-direction);transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;}#buttons01 .button {background-color: transparent;color: #353235;}#buttons01 .button:hover {background-color: #2B8FFC !important;}#buttons02 {justify-content: center;gap: 0.75rem;flex-direction: row;flex-wrap: wrap;}#buttons02 li a {display: flex;width: auto;height: 3.25rem;line-height: 3.25rem;padding: 0 1.5625rem;vertical-align: middle;font-family: 'Inter', sans-serif;font-size: 1.875em;font-weight: 500;border-radius: 0.875rem;direction: var(--site-language-direction);transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;}#buttons02 .button {background-color: transparent;color: #353235;}#buttons02 .button:hover {background-color: #2B8FFC; !important;}
#buttons02 :hover {color:#ffffff;}
#buttons01 li a {letter-spacing: 0rem;font-size: 1.875em;}#buttons02 li a {letter-spacing: 0rem;font-size: 1.875em;}
#buttons01 {gap: 0.1875rem;}#buttons02 {gap: 0.46875rem;}}
</style><ul id="buttons02" class="buttons"><li><a href="#about" class="button n01" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">About</a></li><li><a href="#rules" class="button n02" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">Rules</a></li><li><a href="#chatbox" class="button n03" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">Chat Box</a></li></ul></div>
<script>

// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code

//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
//** Call: uniquevar.playclip() to play sound

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:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}

function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}

//Initialize two sound clips with 1 fallback file each:

var mouseoversound=createsoundbite("https://a.tumblr.com/tumblr_ojrn7aGBii1w2e2oyo1.mp3")
var clicksound=createsoundbite("https://a.tumblr.com/tumblr_ojrmy55yUN1w2e2oyo1.mp3")

</script>