Sin

<style>

@import url('https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond');

body{
 background-color:#eee;
 overflow:hidden;
}
#box{
 width:50%;
 height:100%;
 background-color:#111;
 position:absolute;
 top:0px;
 left:0px;
 margin-left:-100px;
  z-index:10;
  transition:1s;
  overflow:hidden;
}

body:hover #box{
 margin-left:0px;
}

#image{
 background-image:url(https://i.imgur.com/PnwoIkl.png);
 background-size:contain;
 background-repeat:no-repeat;
 position:absolute;
 bottom:0%;
 left:50%;
 width:300px;
 height:500px;
 margin-left:-103px;
}


  #image2{
 background-image:url(https://i.imgur.com/h0s10rD.png);
 background-size:contain;
 background-repeat:no-repeat;
 position:absolute;
 bottom:0%;
 left:100%;
 width:300px;
 height:500px;
 margin-left:-3px;
 margin-bottom:px;
 transition:1s;
}

body:hover #image2{
  margin-left:-103px;

}


#one,#two,#three,#four{
 background-color:transparent;
 width:140px;
 height:440px;
 z-index:99;
 position:absolute;
 top:50%;
 left:50%;
 margin-top:-100px;
 margin-left:-300px;
 padding:5px;
 opacity:0;
 transition:1s;
 color:#eee;
 font-size:10pt;
 text-align:left;
 font-family: 'Cormorant Garamond', serif;
}
#one:target,#two:target,#three:target,#four:target{
 opacity:1;
 transition:1s;
 transition-delay:1s;
}
#infobox2{
 background-color:transparent;
 width:140px;
 height:100px;
 z-index:99;
 position:absolute;
 top:50%;
 right:50%;
 margin-top:100px;
 margin-right:-300px;
 padding:5px;
  opacity:0;
 transition:1s;
 float:left;

}
body:hover #infobox2{
 opacity:1;
 transition:1s;
 transition-delay:2s;
}

#infobox2 a{
  font-family: 'Cormorant Garamond', serif;
  color:#000;
  text-align:left;
  position:absolute;
  margin-bottom:10px;
  font-size:10pt;
  text-decoration:none;
  transition:1s;

}

#infobox2 a:hover{
 background:#000;
 color:#fff;
}

  #line{
   height:4px;
   width:0px;
   background-color:#eee;
   position:absolute;
   top:50%;
   right:50%;
   margin-right:0px;
   margin-top:-115px;
   z-index:99;
     transition:1s;
  }

  body:hover #line{
   width:300px;
   transition:1s;
   transition-delay:1s;
  }

    #line2{
   height:4px;
   width:0px;
   background-color:#111;
   position:absolute;
   top:50%;
   left:50%;
   margin-left:0px;
   margin-top:-115px;
   z-index:99;

  }

  body:hover #line2{
   width:300px;
   transition:1s;
   transition-delay:1s;
  }

  h1{
    font-size:40pt;
    font-family: 'Libre Barcode 39 Text', cursive;
    color:#eee;
    text-align:right;
    height:400px;
    width:300px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-300px;
    margin-top:-300px;
    z-index:99;
    opacity:0;
     transition:.5s;
  }

  body:hover h1{
   transition:1s;
   transition-delay:2s;
   opacity:1;
  }
    h2{
    font-size:40pt;
    font-family: 'Libre Barcode 39 Text', cursive;
    color:#111;
    text-align:left;
    height:400px;
    width:300px;
    position:absolute;
    top:50%;
    right:50%;
    margin-right:-300px;
       margin-top:-300px;
    z-index:99;
    opacity:0;
       transition:1s;
  }

  body:hover h2{
   transition:1s;
   transition-delay:2s;
   opacity:1;
  }

h3{
 font-family: 'Cormorant Garamond', serif;
font-weight: bold;
font-size:15pt;
text-align:center;
margin-top:0px;
margin-bottom:5px;

}
  b{
color:#d60000;
text-shadow:0px 0px 5px #eee;
}

a{
color:#d60000;
text-decoration:none;
transition:1s;
}

a:hover{
color:gold;
}
</style>
<h1>Look<br> Behind<br> the mask</h1>
<h2>Look<br> Behind<br> the man</h2>
<div id="one"><h3>Thing</h3>
<font style="float:left"><b>Stat</b></font> <font style="float:right">Stat</font><br>
<font style="float:left"><b>Stat</b></font> <font style="float:right">Stat</font><br>
<font style="float:left"><b>Stat</b></font> <font style="float:right">Stat</font><br>
<font style="float:left"><b>Stat</b></font> <font style="float:right">Stat</font><br>
<font style="float:left"><b>Stat</b></font> <font style="float:right">Stat</font><br>
<font style="float:left"><b>Stat</b></font> <font style="float:right">Stat</font><br>
<font style="float:left"><b>Stat</b></font> <font style="float:right">Stat</font><br>
<font style="float:left"><b>Stat</b></font> <font style="float:right">Stat</font><br>
<font style="float:left"><b>Stat</b></font> <font style="float:right">Stat</font><br>
<h3> Maybe something else? </h3>
</div>
<div id="two"><h3>Thing2</h3>meme2</div>
<div id="three"><h3>Thing3</h3>meme3</div>
<div id="four"><h3>OOC?</h3>
<b>00</b> This code was made for Sin by <a href="https://roleplay.chat/profile.php?user=Hound+of+Tindalos">The Hound of Tindalos </a> PM him or send him an rpc mail for inquiries on prices custom profiles.
<b></div>
<div id="infobox2">
  <a href="#one">it was obama</a><br>
   <a href="#two">he was the one</a><br>
    <a href="#three">that turned</a><br>
     <a href="#four">the frogs gay</a><br>
<a href="#r">reset</a><br>
</div>
<div id="line"></div>
<div id="line2"></div>
<div id="box">
  <div id="image2"></div>
</div>
<div id="image"></div>