Wolf remake code

<div align=center>
<h3 class="pfor">Profile for "Work in progress"</h3>
</div>
<center>
<div id="profile">


<style type="text/css">

.pfor {
display: none;
}


::-webkit-scrollbar {
 width: 3px;
}

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 3px;
}

::-webkit-scrollbar-thumb {
border-radius: 13px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

#profile {
background-color: transparent;
border: none;
}

body {
background-color: #330000;
background-image: url("https://wallpaperscraft.com/image/line_scratches_cuts_metal_paint_50725_3840x2400.jpg");
background-repeat: no-repeat;
background-position: bottom;
background-size: 256%;
background-attachment: fixed;
cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur);
}

@font-face { font-family: "chopin"; src: url('http://static.tumblr.com/uj36o7b/pr6m9fa5b/_lds_chopinscript.ttf');}
a.first, a.first:link, a.first:active, a.first:visited
{
font-family:arial;
font-size:6pt;
line-height:7pt;
letter-spacing:2px;
font-weight: normal;
color:gold;
text-decoration:none;
text-transform:none;
width:200%px;
background-color:grey;
text-align:center;
display:block;
 border-right: 3px solid white;
                border-left: 3px solid white;
margin-bottom:1px;}

a.first:hover {
font-family:small fonts;
font-size:5pt;
line-height:7pt;
letter-spacing:2px;
font-weight: normal;
border-bottom:;
border-color:331133;
color:grey;
text-decoration:none;
text-transform:uppercase;
width:200%px;
background-color:#FFFF97;
text-align:center;
display:block;
border-left-style:solid;
border-left-color:000000;
border-left-width:4px;
border-right-style:solid;
border-right-color:000000;
border-right-width:4px;
margin-bottom:1px;
cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur);}

#OOC{

left: 213px;
top:50%;
padding: 5px;
width: 400px;
height: 180px;
opacity:0.0;
z-index:99;
color:yellow;
position:fixed;
font-size: 11px;
line-height: 14px;
overflow: auto;
text-align:justify;
font-family: fangsong;
background-color:#e6b800;
border: 3px solid #FFD8D5;
border-radius: 0px 0px 0px 0px;
transition:0.9s ease-in;
-o-transition:0.9s ease-in;
-moz-transition:0.9s ease-in;
-webkit-transition:0.9s ease-in;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 2);
-moz-box-shadow:    0px 0px 20px rgba(0, 0, 0, 2);
box-shadow:         0px 0px 20px rgba(0, 0, 0, 2);
}


#OOC:hover {

left: 113px;
top:30%;
padding: 5px;
width: 400px;
height: 280px;
padding: 5px;
opacity:0.8;
z-index:999;
color:black;
position:fixed;
font-size: 20px;
line-height: 20px;
overflow: auto;
text-align:justify;
font-family: fangsong;
background-color:#f5efed;
border: 3px solid #000000;
border-radius:0px 0px 0px 0px;
transition:0.9s ease-in;
-o-transition:0.9s ease-in;
-moz-transition:0.9s ease-in;
-webkit-transition:0.9s ease-in;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 2);
-moz-box-shadow:    0px 0px 20px rgba(0, 0, 0, 2);
box-shadow:         0px 0px 20px rgba(0, 0, 0, 2);
}

#gif{
left:113px;
top:30%;
padding: 5px;
width: 400px;
height: 280px;
opacity:0.8;
z-index:9;
position:fixed;
border: 2px solid #000000;
background-image: url('https://scontent-atl3-1.xx.fbcdn.net/v/t34.0-12/14011922_271246516592475_1541486205_n.jpg?oh=9bd320df5a1ebe7257e280eb6c0629dd&oe=57B6F157');
background-size: 100% 100%;


-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 10px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 10px rgba(0, 0, 0, 1);
}
a.info{
    position:relative;
    color:white;
    text-decoration:none;
    text-align:center;
  }

a.info span{display: none}

a.info:hover span{
    display:block;
    position:absolute;
    top:-24px;
    width:15px;
    z-index: 1000;
    border:1px solid black;
    background-color:white; color:#000;
    text-align: center;
    opacity:0.8;
    padding:1px;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 10px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 10px rgba(0, 0, 0, 1);
  }

  a.info:hover span:after{
    content:'';
    position:absolute;
    bottom:0px;
    width:10px;
    height:10px;
    background:none;
    z-index: 999;
    left:1%;
    opacity:0.8;
    margin-left:-2px;
border-radius: 20px 20px 20px 20px;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 10px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 10px rgba(0, 0, 0, 1);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
  }

a.nava:link, a.nava:active, a.nava:visited{
width:70px;
height:10px;
color: white;
display:block;
font-family: small-fonts;
font-size: 9px;
line-height: 9px;
letter-spacing: 3px;
padding-left: 20px;
text-decoration:none;
border-left: 3px solid #1e1e1e;
text-align: left;
background-color:white;
transition:0.9s ease-out;
-o-transition:0.9s ease-out;
-moz-transition:0.9s ease-out;
-webkit-transition:0.9s ease-out;
box-shadow: 0px 0px 4px black;}

a.nava:hover{
width:70px;
color:grey;
font-size:9px;
text-align:left;
font-family:small-fonts;

background-repeat: repeat;
border-left: 3px solid #1e1e1e;
transition:0.9s ease-in;
-o-transition:0.9s ease-in;
-moz-transition:0.9s ease-in;
-webkit-transition:0.9s ease-in;}




a.nav:link, a.nav:active, a.nav:visited{
width:170px;
height:15px;
color: grey;
display:block;
margin-bottom:4px;
font-family: fangsong;
font-size: 11px;
text-decoration:none;
text-align: center;
background-color:white;
transition:0.9s ease-out;
-o-transition:0.9s ease-out;
-moz-transition:0.9s ease-out;
-webkit-transition:0.9s ease-out;
box-shadow: 0px 0px 4px black;}

a.nav:hover{
width:170px;
color:white;
font-size:11px;
text-align:center;
font-family:fangsong;
background-image: url('http://24.media.tumblr.com/def2fca8ae9feefd520428d412d98169/tumblr_midq15Fvfl1r32k3yo1_500.gif');
background-size: cover;
transition:0.9s ease-in;
-o-transition:0.9s ease-in;
-moz-transition:0.9s ease-in;
-webkit-transition:0.9s ease-in;}

h1 {
    border-bottom: 1px solid #8B8B8B;
    font-size: 11px;
    font-family: Segoe Script;
    color: #e6b800;
    text-align: center;
    letter-spacing: 1px;
    text-transform: lowercase;
    }

#stats{
position: fixed;
width:410px;
height: 280px;
left:600px;
top:60px;
z-index:1;
overflow: auto;
border: 2px #000000 solid;
background-color:#800000;
font-size:10px;
text-align:left;
color:#e6b800;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 10px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 10px rgba(0, 0, 0, 1);
}

h2{

color: Gold;
font-family: Arial Narrow  ;
font-size: 12px;
text-align: right;
font-weight: light;
font-variant: small-caps;
letter-spacing: 1px;
border-bottom: 1px dashed grey;
Text-shadow: #000000 0px 0px 1px;
}

#min{
position:fixed;
width: 420px;
height:17px;
left: 600px;
top: 505px;
z-index:9;
padding:5px;
opacity:0.9;
color:#000000;
font-size:12px;
line-height:4px;
text-align:left;
font-weight:normal;
font-family:fangsong;
font-variant:smallcaps;
text-transform:none;
text-decoration:none;
position:fixed;
overflow:hidden;
background-color:#e1e1e1;
border-top: none;
border-bottom: 1px solid grey;

box-shadow: 0px 0px 4px black;
}

#mini{
background-color: transparent;
width: 7px;
float:center;
color: #e1e1e1;
font-family: fangsong;
font-size: 12px;
line-height: 10px;
text-align: center;
padding: 10px;
z-index: 99;
height: 273px;
opacity: 0.8;
border-radius: 0px 45px 45px 0px;
border-right: 5px solid #1e1e1e;
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
box-shadow: 0px 0px 4px black;
overflow: auto;
left:1015px;
top:60px;
z-index:9;
padding:5px;
position:fixed;
overflow-x:hidden;
background-color:#000000;
box-shadow: 0px 0px 2px black;}

#mini:hover
{width:190px;;
z-index: 99;
color: #ffffff;
overflow: auto;
background-color: #000000;
border-radius: 0px 0px 0px 0px;
overflow: auto;
}

#namae{
    margin: 0 auto;
    width: 900px;
    height:10px;
    top: 50px;
    left: 20px;
    font-family: 'chopin', cursive;
    font-size: 70px;
    color: #e6b800;
text-shadow:0px 2px 3px #201d1f;
z-index: 3;
    }

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:600;
  top:50;
  height: 500px;
-webkit-transition: opacity 1s ease-in;
    -moz-transition: opacity 1s ease-in;
    -o-transition: opacity 1s ease-in;
    -ms-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;

}

#cf img:first-child {
opacity: 0;
-webkit-transition: opacity 1s ease-in;
    -moz-transition: opacity 1s ease-in;
    -o-transition: opacity 1s ease-in;
    -ms-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
 }

#cf:hover img:last-child{opacity:0;
-webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}


#cf:hover img:first-child{display:inline-block;
 opacity: 1;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


</style>


<div id="gif">
</div>

<div id="namae">
<h1><i>~The Girl That Scratches Until You Bleed~</i></h1>
</div>



<div id="OOC">
<h1>the out of character.</h1>
<br>
<center>



<img src="http://vignette2.wikia.nocookie.net/creepypasta/images/b/be/Image-1396959010.jpg/revision/latest?cb=20140408121010" width="250"><br>

<small>Do I have your Attention?</small><br><br>


<small>1) UNDER CONSTRUCTION</small><br><br>

<small>2) ~</small><br><br>

<small>3) </small><br><br>

<small>4) .</small><br><br>

<small>5) </small><br><br>

<small>6) </small><br><br>

<small>7)  ALL RIGHTS BELONG TO THE ARTIST. </small><br><br>

<small>8)   I'd like to give a special thanks to <a href="profile.php?user=Sinthia" target="_blank">Sin~</a>  for this code   </small><br><br>

<small>09</small><br><br>

<small>10</small><br><br>

</center>
</div>

<div id="stats">

<br>
<center><img src="https://s-media-cache-ak0.pinimg.com/236x/64/94/1d/64941df5c4b3b8c85e90b3027f902c3c.jpg" width="200"></center><br><br>

<h1> Statistics </h1>


<center><li><b>Name:</b>  </li>
<li><b>Gender:</b> Male. </li>
<li><b>Species:</b> Wolf </li>

<br>

<li><b>Hair/Fur:</b>  </li>
<li><b>Height:</b>  </li>
<li><b>Weight:</b> </li>

<br>

<li><b>Mental Status:</b> .</li>
<li><b>Physical Condition:</b> Healthy.</li>

<li><b>Dominant Hand:</b> .</li>
<br>
<li><b>Relatives:</b> <a href="profile.php?user=Name here " target="_blank">Words </a>. </li>
<li><b>Orientation:</b>  </li>
<li><b>Attachment:</b> Unattached. </li>
<li><b>This Heart:</b> <a href="profile.php?user=namehere" target="_blank">Is Unclaimed </a>.</center>

<br><br>
<h1> Likes and Dislikes:</h1>
<br>
<center>Under construction</center><br><br>

<center>WORDS HERE</center>

 <br><br>


<br><br>
<h1> History:</h1>
<br>
<center>Under construction</center><br><br>



<center> WORDS HERE

</center>

 <br><br>
</div>
<div id="min">


<h2>


"QUOTE HERE"



</h2>



</div>

<div id="mini">
<br>
Friends: <br>
<h1> </h1><br>




 <a href="profile.php?user=Sinthia" target="_blank">Friends name.~</a> <br> <br>




</div>

<div id="cf">
  <img src="http://saucepls.info/A/59/2468l95.jpg" />
  <img src="http://wallup.net/wp-content/uploads/2015/12/2333-anime-wolf-Anthro-736x459.jpg" />
</div>