Dante

<style>
body{
background: linear-gradient(grey, red);
overflow:hidden;
}

@font-face {
 font-family: 'Quadrata';
 src: url('https://dl.dropboxusercontent.com/s/v2kri2upobir1d7/1492_Quadrata_lim.TTF');
}

#block1{
width:200px;
height:400px;
background:
 	linear-gradient(135deg, transparent 20px, #7d0314 0) top left,
		linear-gradient(225deg, #7d0314 10px, #7d0314 0) top right,
		linear-gradient(315deg, #7d0314 10px, #7d0314 0) bottom right,
		linear-gradient(45deg, transparent 20px,#7d0314 0) bottom left;
background-size: 50% 50%;
	background-repeat: no-repeat;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-200px;
}
#block2{
width:200px;
height:400px;
background:
		linear-gradient(135deg, #7d0314 20px, #7d0314 0) top left,
		linear-gradient(225deg, transparent 20px, #7d0314 0) top right,
		linear-gradient(315deg, transparent 20px, #7d0314 0) bottom right,
		linear-gradient(45deg, #7d0314 20px,#7d0314 0) bottom left;
background-size: 50% 50%;
	background-repeat: no-repeat;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:0px;
}

#seal{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
z-index:10;
margin-top:-100px;
margin-left:-100px;
}

#seal a{
width:200px;
height:200px;
background-image:url(http://i.imgur.com/8ClV2OD.png);
background-size:100%;
background-repeat:no-repeat;
display:inline-block;
transition:1s;
}

#seal a:hover {
filter:drop-shadow(0px 0px 20px gold) brightness(150%);
}

.header{
font-family: 'Quadrata';
font-size:30pt;
font-weight:bold;
color:#fff;
position:absolute;
top:50%;
left:50%;
margin-top:-145px;
margin-left:-125px;
z-index:10;
background: url('https://68.media.tumblr.com/395108c9c3fb9ba0e2243cc6095b4dbd/tumblr_oar99zwtKU1qhrm3lo1_500.gif') ;
background-size:150%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
background-position:-200px 0px;

}

#everything{
width:950px;
height:350px;
position:absolute;
top:50%;
left:50%;
margin-top:-175px;
margin-left:-475px;
background-color:#404040;
opacity:0;
z-index:1;
background-image: url("https://www.transparenttextures.com/patterns/classy-fabric.png");
background-size:10%;
border:solid 3px #7d0314;
}

#image{
background-image:url(http://i.imgur.com/wbli3AU.png);
background-size:contain;
background-repeat:no-repeat;
height:550px;
width:400px;
position:absolute;
left:65%;
margin-top:-100px;
opacity:0;

}

#contentbox{
background-color:transparent;
background-image:url(http://i.imgur.com/Zct3Sah.png);
background-size:150px 150px;
background-position:center;
background-repeat:no-repeat;
opacity:.7;
width:500px;
height: 300px;
border:solid 1px #dadada;
position:absolute;
margin-top:25px;
margin-left:15px;

}
#navi{
height:300px;
width:150px;
position:absolute;
margin-top:25px;
margin-left:535px;
z-index:99;
float:left;
}

#navi a{
font-family: 'Quadrata';
font-size:30pt;
background: url(https://68.media.tumblr.com/2950d74ad29f400933e4bbb5eedcced0/tumblr_otq9ulm1Il1twd8ddo1_500.gif) ;
background-size:100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
transition:1s;
}

#navi a:hover{
filter:drop-shadow(0px 0px 10px silver) brightness(150%);
}

#tab1,#tab2,#tab3,#tab4{
background-color:#A7A7A7;
opacity:0;
width:500px;
height: 300px;
position:absolute;
margin-top:25px;
margin-left:15px;
border:solid 1px #fff;
color:#000;
transition:2s;
}

#blanket:target #seal{
opacity:0;
transition:1s;
z-index:1;
}

#blanket:target #block1{
margin-left:-500px;
transition:2s;
}

#blanket:target #block2{
margin-left:300px;
transition:2s;
}

#blanket:target #everything{
opacity:1;
transition:1s;
transition-delay:2s;
z-index:10;
}

#blanket:target #image{
opacity:1;
transition:1s;
transition-delay:2s;
}

#blanket:target .header{
opacity:0;
transition:1s;

}

#blanket2:target #seal{
opacity:0;
transition:1s;
z-index:1;
}

#blanket2:target #block1{
margin-left:-500px;
transition:2s;
}

#blanket2:target #block2{
margin-left:300px;
transition:2s;
}

#blanket2:target #everything{
opacity:1;
transition:1s;
transition-delay:2s;
z-index:10;
}

#blanket2:target #image{
opacity:1;
transition:1s;
transition-delay:2s;
}

#blanket2:target .header{
opacity:0;
transition:1s;
}

#blanket2:target #tab1{
opacity:.9;
transition:1s;
}
#blanket2:target #seal{
opacity:0;
transition:1s;
z-index:1;
}

#blanket2:target #block1{
margin-left:-500px;
transition:2s;
}

#blanket2:target #block2{
margin-left:300px;
transition:2s;
}

#blanket2:target #everything{
opacity:1;
transition:1s;
transition-delay:2s;
z-index:10;
}

#blanket2:target #image{
opacity:1;
transition:1s;
transition-delay:2s;
}

#blanket2:target .header{
opacity:0;
transition:1s;
}

#blanket2:target #tab1{
opacity:.9;
transition:2s;
}
#blanket3:target #seal{
opacity:0;
transition:1s;
z-index:1;
}

#blanket3:target #block1{
margin-left:-500px;
transition:2s;
}

#blanket3:target #block2{
margin-left:300px;
transition:2s;
}

#blanket3:target #everything{
opacity:1;
transition:1s;
transition-delay:2s;
z-index:10;
}

#blanket3:target #image{
opacity:1;
transition:1s;
transition-delay:2s;
}

#blanket3:target .header{
opacity:0;
transition:1s;
}

#blanket3:target #tab2{
opacity:.9;
transition:2s;
}


#blanket4:target #seal{
opacity:0;
transition:1s;
z-index:1;
}

#blanket4:target #block1{
margin-left:-500px;
transition:2s;
}

#blanket4:target #block2{
margin-left:300px;
transition:2s;
}

#blanket4:target #everything{
opacity:1;
transition:1s;
transition-delay:2s;
z-index:10;
}

#blanket4:target #image{
opacity:1;
transition:1s;
transition-delay:2s;
}

#blanket4:target .header{
opacity:0;
transition:1s;
}

#blanket4:target #tab3{
opacity:.9;
transition:2s;
}

#blanket5:target #seal{
opacity:0;
transition:1s;
z-index:1;
}

#blanket5:target #block1{
margin-left:-500px;
transition:2s;
}

#blanket5:target #block2{
margin-left:300px;
transition:2s;
}

#blanket5:target #everything{
opacity:1;
transition:1s;
transition-delay:2s;
z-index:10;
}

#blanket5:target #image{
opacity:1;
transition:1s;
transition-delay:2s;
}

#blanket5:target .header{
opacity:0;
transition:1s;
}

#blanket5:target #tab4{
opacity:.9;
transition:2s;
}

</style>
<div id="blanket"><div id="blanket2"><div id="blanket3"><div id="blanket4"><div id="blanket5">
<div class="header">Abandon all hope,<br><br><br><br><br><br> ye who enter here.</div>
<div id="seal"><a href="#blanket"></a></div>

<div id="everything">

<div id="image"></div>

<div id="contentbox"></div>
<div id="navi">
<a href="#blanket2">I</a><br><br><br>
<a href="#blanket3">II</a><br><br><br>
<a href="#blanket4">III</a><br><br><br>
<a href="#blanket5">IV</a><br><br><br>
</div>
<div id="tab1">test1</div>
<div id="tab2">test2</div>
<div id="tab3">test3</div>
<div id="tab4">test4</div>
</div>
<div id="block1"></div>
<div id="block2"></div>