Skull

<style>
/* G O O G L E F O N T S */
@import url('https://fonts.googleapis.com/css?family=Rochester');
@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Carter+One');
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans+SC|Bahiana|Bangers|Cinzel|Cinzel+Decorative|Megrim|Unica+One');
@import url('https://fonts.googleapis.com/css?family=Economica|Poiret+One');
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');


/* P A G E B O D Y */
body {
	background-color: #FDFFFE;
	background-image: url('https://pm1.narvii.com/6229/29382893647729fb23cb57287606527a9b675158_hq.jpg');
	background-position: fixed;
 background-size: %;
	background-repeat:repeat;
	background-position: center ;
 	font-family: ;
	color: #7c7c7c;
 	text-shadow:0px 0px 3px #000;
}


/* S C R O L L B A R */

::-webkit-scrollbar-thumb:vertical {
 background-color: #517295;
}

::-webkit-scrollbar {
 width: 4px;
 background-color: #D5E7EC;
}

::selection {
 color: #ffffff;
 background: #ffecb1;
}


/* T A B S */

.fixed {
 position: absolute;
 top: 320;
 left: 390;
 width: 150px;
 border: ;
 color: #;
 z-index: 1000;
}


.fixed2 {
 position: absolute;
 top: 200;
 left: 390;
 width: 150px;
 border: ;
 color: #;
 z-index: 1000;
}


.fixed3 {
 position: fixed;
 top: 200;
 left: 850;
 width: 150px;
 border: ;
 color: #;
 z-index: 1000;
}


.fixed4 {
 position: absolute;
 top: 320;
 left: 850;
 width: 150px;
 border: ;
 color: #;
 z-index: 1000;
}


.fixed5 {
 position: absolute;
 top: 80;
 left: 850;
 width: 150px;
 border: ;
 color: #;
 z-index: 1000;
}

.fixed6 {
 position: absolute;
 top: 80;
 left: 390;
 width: 150px;
 border: ;
 color: #;
 z-index: 1000;
}

.main {
 position: fixed;
 top: 0%;
 left: 30%;
 width: 150px;
 border: ;
 color: #;
 z-index: 10;
}

/* T A B S H O V E R */

.fixed:hover{
opacity: 0.5;
}

.fixed2:hover{
opacity: 0.5;
}

.fixed3:hover{
opacity: 0.5;
}

.fixed4:hover{
opacity: 0.5;
}

.fixed5:hover{
opacity: 0.5;
}

.fixed6:hover{
opacity: 0.5;
}

/* T E X T B O X */


.textboxcontainer {
 height: 300px;
 width: 330px;

 left: 0;
 position: fixed;
 padding: 5px;
 bottom: 150px;
 font-size: 9px;
 color: #000000;
 text-align: justify;
 z-index: 3;
opacity: 0;

 -webkit-transition: opacity 2s linear;
 -webkit-transition: all 2s ease-out;
 -moz-transition: all 2s ease-out;
 transition: all 2s ease-out;
}

.textboxcontainer:target {
 z-index: 4;
opacity: 1;
}

.textbox {
 height: 200px;
 width: 330px;
 background-color: #E7EEF5;
 background-image: url('');
 left: 10px;
 position: absolute;
 padding: 5px;
 bottom: 30px;
 border: 2px solid #466483;
 box-shadow: 2px 2px 2px #CFD7DF;
 font-size: 9px;
 font-family: 'Alegreya Sans SC', sans-serif;
 text-transform: uppercase;
 overflow: auto;
 color: #000000;
 text-align: justify;
 z-index: 3;
opacity: 1;

 -webkit-transition: opacity 2s linear;
 -webkit-transition: all 2s ease-out;
 -moz-transition: all 2s ease-out;
 transition: all 2s ease-out;
}


#Title {
top: 330px;
 letter-spacing: 10;
 z-index: 2;
 width: 345px;
 position: absolute;
 left: 50px;
 bottom: 100px;
 font-family: 'Luckiest Guy', cursive;
 font-size: 30px;
 color: #466483;
 text-shadow: -1px 1px .5px #000;
 -webkit-animation: talies 8s;
 /* Safari 4.0 - 8.0 */
 animation: talies 8s;
 animation-fill-mode: forwards;
 height: 50px;

text-align: center;
vertical-align: middle;
line-height: 50px;
}
</style>

<body>


<div class="fixed">
<a href="#01"><img src="http://i.picpar.com/YcSc.png"width="100" height=""></a>
</div>

<div class="fixed2">
<a href="#02"><img src="http://i.picpar.com/YcSc.png"width="100" height="100"></a>
</div>

<div class="fixed3">
<a href="#03"><img src="http://i.picpar.com/YcSc.png"width="100" height="100"></a>
</div>

<div class="fixed4">
<a href="#04"><img src="http://i.picpar.com/YcSc.png"width="100" height="100"></a>
</div>

<div class="fixed5">
<a href="#05"><img src="http://i.picpar.com/YcSc.png"width="100" height="100"></a>
</div>

<div class="fixed6">
<a href="#06"><img src="http://i.picpar.com/YcSc.png"width="100" height="100"></a>
</div>

<div class="main">
<img src="http://i.picpar.com/BfSc.png" width="" height="700"></a>
</div>

<div id="01"class="textboxcontainer">
 <div id="title">Skull</div>
<div class="textbox">
Bottom Left
</div>


</div>


<div id="02"class="textboxcontainer">
 <div id="title">Syndey</div>
<div class="textbox">
Middle Left
</div>

</div>

<div id="03"class="textboxcontainer">
 <div id="title">Syndey</div>
<div class="textbox">
Middle Right
</div>

</div>

<div id="04"class="textboxcontainer">
 <div id="title">Syndey</div>
<div class="textbox">
Bottom Right
</div>

</div>


<div id="05"class="textboxcontainer">
 <div id="title">Syndey</div>
<div class="textbox">
Top Right
</div>

</div>

<div id="06"class="textboxcontainer">
 <div id="title">top left</div>
<div class="textbox">
Potato
</div>

</div>


</body>