chainsaw's profile (basic)

<style>
@import url('https://fonts.googleapis.com/css?family=Permanent Marker');


.pfor
{display: none;
background-color: transparent;}
body {
background:url('https://i.imgur.com/f3A6pNx.png') top left fixed repeat;
background-color: #e1e1e1;
overflow: hidden;}

#profile {border: 0px; background-color: transparent;}
*{cursor: url('https://i.imgur.com/8QmAMfq.png'), default;}

::-webkit-scrollbar {width: 5px; height: 0px;
background:; }

::-webkit-scrollbar-thumb {
background-color:#f88051; border:1px solid #f2e5c7;
-webkit-border-radius: 10px; border-radius: 10px;
}


/*------» rustle «------*/ /*------» rustle «------*/ /*------» rustle «------*/


#opening {
position:fixed; width:100%; height:100%; left:225px; bottom:180px;}

#opening-img {
position:absolute; background-image:
url('https://i.imgur.com/P2IO07y.png');
background-position:0% 20%; background-size:500px;
background-repeat:no-repeat;
background-attachment: absolute;
width:500px; height:632px;
left:150px; bottom:-100px;
box-shadow: inset 0px 0px 20px #9c9c9c,
 0px 0px 20px #9c9c9c;
filter: blur(0px); opacity:1.0; transition: 1s;}

body:hover #opening-img {filter: blur(10px); opacity:.0; transition: 2.5s;}


/*------» images «------*/ /*------» images «------*/ /*------» images «------*/


#pic {position:absolute;
position:0% 20%;
left:150px; bottom:-100px;
box-shadow:0px 0px 20px #9c9c9c,
 0px 0px 20px #9c9c9c;
opacity:.0; transition: 1s;}


#sprite {position:absolute;
left:180px; bottom:-135px;
opacity:.0; transition: 1s;
}

#melody {position:absolute;
top:15px; left:120px;
}

#bubble {position:absolute;
background-color:#add6ff;
border-radius:180px;
 width:50px; height:50px;
 left:120px; top:30px;
 }

 #arrow {position:absolute;
 color:#add6ff;
 font-size:10px;
 left:-20px; bottom:270px;
 }


/*------» info «------*/ /*------» info «------*/ /*------» info «------*/


#container {
position:absolute;
left:430px; bottom:30px;
opacity:.0; transition: 1s;}

body:hover #pic {opacity:1.0; transition-delay: 1s;}
body:hover #container {opacity:1.0; transition-delay: 1s;}
body:hover #gif {opacity:1.0; transition-delay: 1s;}


#info {
position:absolute;
left:-120px; bottom:6px;
width:290px; height:40px;
background-color: transparent;
 color:#888;
 font-family:'permanent marker';
 font-size:20px;
 line-height:15px;
letter-spacing:1px;
text-transform:uppercase;
text-align:;
float:left;
overflow:auto;
opacity:.0; transition: 1s;
 }

#stats {
position:absolute;
left:-16px; bottom:-48px;
width:110px; height:55px;
background-color: transparent;
 color:#888;
 font-family:'permanent marker';
 font-size:20px;
 line-height:15px;
letter-spacing:1px;
text-transform:uppercase;
text-align:;
float:left;
overflow:auto;
opacity:.0; transition: 1s;
 }

#ability {
position:absolute;
left:91px; bottom:-48px;
width:110px; height:55px;
background-color: transparent;
 color:#888;
 font-family:'permanent marker';
 font-size:20px;
 line-height:15px;
letter-spacing:1px;
text-transform:uppercase;
text-align:;
float:left;
overflow:auto;
opacity:.0; transition: 1s;
 }

#trainer {
position:absolute;
left:-45px; bottom:-90px;
width:290px; height:40px;
background-color: transparent;
 color:#888;
 font-family:'permanent marker';
 font-size:15px;
 line-height:15px;
letter-spacing:1px;
text-transform:uppercase;
text-align:;
float:left;
overflow:auto;
opacity:.0; transition: 1s;
 }

body:hover #bg {
 opacity:1.0; transition-delay: 1s;
 }
body:hover #pic {
 opacity:1.0; transition-delay: 1s;
 }
body:hover #info {
 opacity:1.0; transition-delay: 1s;
 }
body:hover #stats {
 opacity:1.0; transition-delay: 1.8s;
 }
body:hover #ability {
 opacity:1.0; transition-delay: 2.4s;
 }
body:hover #trainer {
 opacity:1.0; transition-delay: 3s;
 }
body:hover #sprite {
 opacity:1.0; transition-delay: 1s;
 }


/*------» rocks «------*/ /*------» rocks «------*/ /*------» rocks «------*/


a {color: red;
text-decoration: none;
font-weight: normal;
display: inline-block;
}

a[data-tooltip] {
 position: relative;
}
a[data-tooltip]::before,
a[data-tooltip]::after {
 position: absolute;
 display: none;
 opacity: 0.7;
}
a[data-tooltip]::before {
 content: attr(data-tooltip);
 background: #999;
 color: #d50000;
 font-family:'courier';
 font-size:15px;
 padding: 2px;
 border-radius: 5px;
 white-space: nowrap;
 text-decoration: none;
}
a[data-tooltip]::after {
 width: 0;
 height: 0;
 border: 6px solid transparent;
 content: '';
}

a[data-tooltip]:hover::before,
a[data-tooltip]:hover::after {
 display: block;
}

a[data-tooltip][data-placement="bottom"]::before {
  top: 100%;
  left: 0;
  margin-top: 10px;
}
a[data-tooltip][data-placement="bottom"]::after {
  border-bottom-color: #999;
  border-top: none;
  top: 100%;
  left: 10px;
  margin-top: 4px;
}


s {
text-decoration:none;
color:#888;
 font-family: "permanent marker";
 font-size:18px;
letter-spacing:2px;
text-transform:lowercase;
text-align:justify;
 padding:1px;
}


</style>



<body>
<div id="opening">
<div id="opening-img">
</div>


<div id="pic">
<img src="https://i.imgur.com/P2IO07y.png" height="632">
</div>


<div id="container">


 <div id="info">
 <br>
 <s>
 name:
 </s>  CHAINSAW
 <font style="float:right;">
 <s>age: </s>   37</font>
 </div>


 <div id="stats">
 <s>
 ht:
 </s>  6'6
 <br><br>
 <s>wt: </s>   89kg
 </div>


 <div id="ability">
 <s>
 ability:
 </s>
 <br><br>
    fur coat
 </div>


 <div id="trainer">
 trainer:
 <a href="profile.php?user=9+inch+snails" target="_blank">
    "lee" donovan</a>
 </div>


 <div id="sprite">
 <a data-tooltip="LVL 57" data-placement="bottom"><img src="https://i.imgur.com/vuyLPLa.gif"></a>


</div>
</body>