Mr Hades

<style>
 body {
 background-image:url(http://cdn.wallpapersafari.com/10/5/8cwBaS.jpg);
 background-size:50%;
 overflow:hidden;
}

#rectangle{
width:600px;
height:400px;
position:absolute;
background-color:#000;
top:50%;
left:50%;
margin-left:-300px;
margin-top:-200px;
background: linear-gradient(to right, #cf1212, #6a1d9b );
z-index:10;
}
#pattern{
background-image: url(http://www.transparenttextures.com/patterns/black-scales.png);
width:400px;
height:600px;
position:absolute;
 transform: rotate(90deg);
 top:-100px;
 left:100px;
 opacity:.6;
 background-size:20px;
}

#frame{
-webkit-clip-path: polygon(0% 0%, 0% 100%, 3% 100%, 3% 4%, 97% 5%, 97% 96%, 2% 96%, 5% 100%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 0% 100%, 3% 100%, 3% 4%, 97% 3%, 97% 96%, 2% 96%, 3% 100%, 100% 100%, 100% 0%);
background-color:#d15a77;
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
z-index:1;
}

#square{
 width:250px;
 height:250px;
 background-color:#a01752;
 z-index:11;
 top:50%;
 left:50%;
 margin-top:-125px;
 margin-left:50px;
 background-image: url("https://www.transparenttextures.com/patterns/axiom-pattern.png");
 background-size:50px;
 position:absolute;
 transform: rotate(45deg);
 box-shadow: 5px 1px 25px 1px rgba(0,0,0,0.75);
}

#square2{
 width:250px;
 height:250px;
 background-color:#6a1d9b;
 z-index:10;
 top:50%;
 left:50%;
 margin-top:-165px;
 margin-left:50px;
 background-image: url("https://www.transparenttextures.com/patterns/subtle-dots.png");
 background-size:30px;
 position:absolute;
 transform: rotate(45deg);
 box-shadow: 5px 1px 25px 1px rgba(0,0,0,0.75);
}

#square3{
 width:250px;
 height:250px;
 background-color:#cf1212;
 z-index:10;
 top:50%;
 left:50%;
 background-image: url("https://www.transparenttextures.com/patterns/diagmonds.png");

 background-size:30px;
 margin-top:-80px;
 margin-left:50px;
 position:absolute;
 transform: rotate(45deg);
 box-shadow: 5px 1px 25px 1px rgba(0,0,0,0.75);
}

#image{
 width:400px;
 height:400px;
 background-image:url(http://i.imgur.com/hBLuYgN.png);
 background-repeat:no-repeat;
 background-size:100%;
 position:absolute;
 top:px;
 left:-60px;
 top:-60px;
 transform: rotate(-45deg);

}

#box{
 width:250px;
 height:400px;
 background-color:#C86374;
 border:solid 1px #fff;
 position:absolute;
 z-index:5;
 top:50%;
 left:50%;
 margin-top:-250px;
 margin-left:-300px;
 transform: rotate(-15deg);
 clip-path: polygon(0 15%, 50% 15%, 50% 30%, 90% 30%, 90% 100%, 0% 100%);
background-image: url("https://www.transparenttextures.com/patterns/cubes.png");

}

#text {

	position: absolute;
	font: 100px Helvetica, Sans-Serif;
 font-weight:700;
 letter-spacing: -5px;
	color: #cf1212;
 top:50%;
 left:50%;
 margin-top:-200px;
 margin-left:-290px;
z-index:99;
width:100px;
height:100px;
 transform: rotate(-15deg) skew(10deg);

}



#text:after {

	content: "Hades";

	position: absolute; left: 0px; top: -10px;

	color: #6a1d9b;


}

#text:before {

 content: "Hades";

	position: absolute; left: 0px; top: -20px;

	color: #a01752;


 }

#photoframe{
 width:160px;
 height:200px;
 background-color:#dadada;
 background-repeat:no-repeat;
 position:absolute;
 top:50%;
 left:50%;
 z-index:99;
 margin-top:150px;
 margin-left:-80px;
 transform: rotate(75deg);
}

#photoframe2{
 width:150px;
 height:200px;
 background-color:#dadada;
 background-repeat:no-repeat;
 position:absolute;
 top:50%;
 left:50%;
 z-index:99;
 margin-top:150px;
 margin-left:150px;
 transform: rotate(15deg);

}

#photoframe3{
 width:150px;
 height:170px;
 background-color:#dadada;
 background-repeat:no-repeat;
 position:absolute;
 top:50%;
 left:50%;
 z-index:99;
 margin-top:185px;
 margin-left:-310px;
 transform: rotate(deg);
}


#ship{
 width:190px;
 height:200px;
 background-image:url(https://cdn.discordapp.com/attachments/306938078113693697/336637566247895040/tumblr_nbk5na9eka1rs1siso1_400.png);
 background-size:100%;
 transform: rotate(-90deg);
 background-repeat:no-repeat;
 position:absolute;
 left:10px;
}

#ship2{
 width:180px;
 height:200px;
 background-image:url(https://images.discordapp.net/attachments/306938078113693697/336637562514964484/b728a74e7343962cbf38e046c569ea4f.jpg);
 background-size:75%;
 background-repeat:no-repeat;
 position:absolute;
 left:8px;
 top:10px;
}

#ship3{
 width:180px;
 height:200px;
 background-image:url(https://cdn.discordapp.com/attachments/306938078113693697/336637561097158657/4ba5bfc1e3bbfeb5d64de6d2da50833e.jpg);
 background-size:75%;
 background-repeat:no-repeat;
 position:absolute;
 left:8px;
 top:10px;
}

</style>
<div id="photoframe"><div id="ship"></div></div>
<div id="photoframe2"><div id="ship2"></div></div>
<div id="photoframe3"><div id="ship3"></div></div>
<div id="frame"></div>
<div id="text"> Hades</div> </h1>
<div id="square">

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


</div>

<div id="rectangle">
<div id="box"> </div>

 <div id="pattern"></div>


</div>
<div id="square2"></div>
<div id="square3"></div>