twelve

<style>

@import url('https://fonts.googleapis.com/css?family=Gayathri&display=swap');

body{
background: gray;
overflow: hidden;
background-image:url(https://www.transparenttextures.com/patterns/billie-holiday.png);
}

a{
text-decoration: none;
font-weight: 600;
color: black;}

a:hover{
text-decoration: underline;}

#theswitch{
position: absolute;
margin: auto;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 800px;
height: 300px;
background: white;
background-image:url(https://i.imgur.com/qxe7W31.png);
background-repeat: no-repeat;
background-size: 158% auto;
    background-position: -2px -108px;
box-sizing: border-box;
border: 0px solid black;
box-shadow: 1px 1px 5px black;
overflow: hidden;
}

#theswitchbg{
position: absolute;
top: 15px;
left: 15px;
right: 0px;
bottom: 0px;
margin: auto;
height: 300px;
width: 800px;
background: white;
box-shadow: inset 1px 1px 5px black;
z-index: 0;}

#slice1, #slice2, #slice3, #slice4, #slice5{
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 60px;
box-sizing: border-box;
border: 0px solid red;
background-image:url(https://i.imgur.com/qxe7W31.png);
background-repeat: no-repeat;
background-size: 158%;
transition: all 1s;
z-index: 2;
}

#slice1b, #slice2b,#slice3b,#slice4b,#slice5b{
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 60px;
box-sizing: border-box;
border: 0px solid red;
background-image:url(https://i.imgur.com/Bawj31q.png);
background-repeat: no-repeat;
background-size: 158%;
background-color: white;
transform: rotatex(-90deg) translateZ(-30px);
transition: transform 1s;
 opacity: 1;
z-index: 1;}


#switchkey1:hover ~ #slice1,
#switchkey2:hover ~ #slice2,
#switchkey3:hover ~ #slice3,
#switchkey4:hover ~ #slice4,
#switchkey5:hover ~ #slice5{
transform: rotatex(90deg) translateZ(-30px);
}

#slice1{
background-color: transparent;
background-position: -2px -108px;
opacity: 1;
}

#slice2{
top: 60px;
background-position: -2px -168px;}

#slice3{
top: 120px;
background-position: -2px -228px;}

#slice4{
top: 180px;
background-position: -2px -288px;}

#slice5{
top: 240px;
background-position: -2px -348px;}

#switchkey1:hover ~ #slice1b,
#switchkey2:hover ~ #slice2b,
#switchkey3:hover ~ #slice3b,
#switchkey4:hover ~ #slice4b,
#switchkey5:hover ~ #slice5b{
transform: rotatex(0deg) translateZ(0px);
transition: all 1s;
}

#slice1b{
top: 0px;
background-position: -2px -109px;
}


#slice2b{
top: 60px;
background-position: -2px -168px;}

#slice3b{
top: 120px;
background-position: -2px -228px;}

#slice4b{
top: 180px;
background-position: -2px -288px;}

#slice5b{
top: 240px;
background-position: -2px -348px;}

#switchkey1, #switchkey2, #switchkey3, #switchkey4, #switchkey5{
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 60px;
box-sizing: border-box;
border: 0px solid black;
z-index: 3;
transition: all 1s;
}

#switchkey1:hover,
#switchkey2:hover,
#switchkey3:hover,
#switchkey4:hover,
#switchkey5:hover{
transition: all 1s .8s;
box-shadow: inset 0px 0px 5px 1px black;
}

#switchkey2{
top: 60px;}

#switchkey3{
top: 120px;}

#switchkey4{
top: 180px;}

#switchkey5{
top: 240px;}

#textslide{
position: absolute;
top: 0px;
left: 150%;
height: 60px;
width: 300px;
box-sizing: border-box;
font-family:'Gayathri', Times;
font-size: 16px;
color: black;
padding-top: 23px;
padding-left: 15px;
text-align: left;
opacity: 0;
transition: all 1s .2s, opacity .5s;
}

#switchkey1:hover #textslide,
#switchkey2:hover #textslide,
#switchkey3:hover #textslide,
#switchkey4:hover #textslide,
#switchkey5:hover #textslide{
transition: all 1s 1s, opacity .7s 1.5s;
opacity: 1;
left: 0px;
}

#coverpage{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 4;
overflow: hidden;
transition: all 1s;
}

#coverbg{
position: absolute;
top: 0px;
left: 0px;
height: 300px;
width: 800px;
background: white;
background-image:url(https://i.imgur.com/Bawj31q.png);
background-repeat: no-repeat;
background-size: 158% auto;
    background-position: -2px -108px;
z-index: 0;}

#starterfont{
position: absolute;
top: 20px;
left: 20px;
font-size: 150px;
text-align: left;
font-family:'Gayathri', Times;
letter-spacing: 10px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 100%;
font-weight: 800;
background-image:url(https://i.imgur.com/lqS8uH3.gif);
background-position: center;
}

#addtext{
position: absolute;
    top: 155px;
    left: 18px;
font-family: 'Gayathri', Times;
font-size: 20px;
color: black;
font-style: italic;}

#Switchers:checked ~ #theswitch #coverpage{
height: 0px;
transition: all 2s ease-in-out, opacity 1s 1s;}

#Switchers{
opacity: 0;}

#switchkey5 #textslide{
padding-top: 6px;
font-size: 15px;}

audio{
position: absolute;
top: 5px;
left: 5px;
opacity: .3;
width: 100px;}

#secondbody{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image:url(https://i.imgur.com/KE1fUng.jpg);
background-color: transparent;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: 0;
transition: all 1s;
-webkit-transition: all 1s;}

#Switchers:checked ~ #secondbody{
opacity: 1;}

</style>

<input type="checkbox" id="Switchers">


<div id="secondbody">
</div>


<div id="theswitchbg">
</div>
<div id="theswitch">
<div id="coverpage">
<div id="coverbg">
</div>
<label id="starterfont" for="Switchers" onclick="document.getElementById('myaudio').play()">
XII
</label>
<div id="addtext">
Always remember that you are absolutely unique.<br>
Just like everyone else.
</div>
</div>
<div id="switchkey1">
<div id="textslide">more info to come.</div></div>
<div id="switchkey2">
<div id="textslide">XII / 5'8" / small build / misc. hybrid.</div></div>
<div id="switchkey3">
<div id="textslide">sometimes I chat in main.</div></div>
<div id="switchkey4">
<div id="textslide">I don't really RP much, feel free to DM.</div></div>
<div id="switchkey5">
<div id="textslide">Code is mine.<br>
Art is owned.</div></div>

<div id="slice1"></div>
<div id="slice1b"></div>
<div id="slice2"></div>
<div id="slice2b"></div>
<div id="slice3"></div>
<div id="slice3b"></div>
<div id="slice4"></div>
<div id="slice4b"></div>
<div id="slice5"></div>
<div id="slice5b"></div>
</div>

<audio src="http://puu.sh/EZgMS/e5381c377e.mp3" controls id="myaudio" />