DrWho About

[style]
 //Change your avatar, Max dimensions are 100x100.
    .pic {background-image: url("https://i.imgur.com/B7CJ72M.png");}

 //Change your cover. Width is 310px.
.cover {background-image: url("https://gifgifs.com/res/0117/58694fc600fc9540960162.gif");}

//Adjust height of your cover image
.cover:hover {height: 174px;}
[/style]
[styleclass=frame][styleclass=cover][/styleclass][styleclass=bar][/styleclass][styleclass=pic][/styleclass]


[styleclass=name]Infernapefan2[/styleclass]


[styleclass=home][h3]About me[/h3][size=11][b]♀[/b] | 15 | [img]https://piskel-imgstore-b.appspot.com/img/f1c68b1c-6642-11e6-9fab-3923a4b750a8.gif[/img][/size]

[b]Name:[/b] Jessie, but Infernape works too.
[b]Languages:[/b] [tip=American Sign Language]ASL[/tip] and English

4 hrs behind server time

Full of stress and anxiety (╥﹏╥)
But Anime and Music are lovely stress-relievers
\(⌒▽⌒)/
[/styleclass]


[styleclass=content]
[styleclass=one][pit=More][h3]About me (cont.)[/h3]
For music, I love Panic! At the Disco, My Chemical Romance, Nathan Sharp, etc.

Some Animes I love are [tip=Brotherhood included]Fullmetal Alchemist[/tip], Seven Deadly Sins, Death Note and more.[/pit][/styleclass]

[styleclass=two][pit=Links][h3]Shops/Other Links[/h3]
[url=https://pokefarm.com/forum/thread/30457/Dewbro-s-Shop-of-Wonders-Open]Trade Shop[/url]

[url=https://pokefarm.com/forum/thread/29561/Jessie-s-Art-Shop-OPEN]Art Shop[/url]

[url=https://pokefarm.com/forum/thread/30524/Jessie-s-Freebies-OPEN]Freebies[/url]

[url=https://pokefarm.com/forum/thread/30764/Jessie-s-Journal]Journal[/url][/pit][/styleclass]

[styleclass=three][pit=Pals][h3]Friends[/h3][url=https://pokefarm.com/user/Beemoji]Bee[/url]

[url=https://pokefarm.com/user/hunterrex11]Haille[/url]

[url=https://pokefarm.com/user/Esmathekey]Esma[/url]

[url=https://pokefarm.com/user/Weasel]Weasel[/url]

Feel free to PM me!
I usually reply, esspcially to any questions/comments.[/pit][/styleclass]
[styleclass=four][pit=Credit][h3]Credit[/h3]
Background image: Offical Seven Deadly Sins gif

Circled Image: Made for me by [url=https://pokefarm.com/user/Kawasemi]Kawasemi[/url][/pit][/styleclass]


[/styleclass]
[styleclass=x][url=http://pfq.link/~7MLY][styleclass=linktoforum]♥ code[/styleclass][/url][/styleclass]
[/styleclass]


[style]
//Color change starts here.
@outerBGColor: #689DAB;
@linesColor: #fff;
@linesBorder: 4px double #297280; //enter 'none' for no border

@nameColor: #fff;

@contentBGColor: #E4EFF1;
@contentTextColor: #09292E;
@contentLinkColor: #297280;
@tabBGColorOdd: #C6E7F0;
@tabBGColorEven: #297280;
@fontFamily: Georgia, Geneva, sans-serif;

@heartColor: #fff;
//Color change ends here.


//Height - increase equally
@contentHeight: 170px;
@frameHeight: 340px; //contentHeight +170px;

//Mosty layout stuff below here.

//Homepage
.home {
    position: absolute;
    top: 145px;
    left: 9px;
    border:none;
    border-radius: 0px;
    height: @contentHeight;
    width: 288px;
    border-radius: none;
    background-color: @contentBGColor;
    padding: 10px 2px 2px 2px;
    text-align: center;
    font-family: @fontFamily;
    color: @contentTextColor;
    overflow: hidden;
    font-size: 12px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

//Tabs
.content {
    position: absolute;
    top: 115px;
    left: 146px;
    height: 30px;
    width: 148px;
}
.one,.two,.three,.four {
    position: absolute;
    height: 100%;
    width: 30%;
    top: 0px;
    text-align: center;
    line-height: 30px;
    border-bottom: none;
    font-size: 12px;
    text-decoration: underline;
    font-family: @fontFamily;
    color: @contentTextColor;
}
.one {left:-15.%}
.two {left: 15%;}
.three {left: 45.1%;}
.four {left: 75%;}
.one > .bbcode_tooltip, .two > .bbcode_tooltip, .three > .bbcode_tooltip,  .four > .bbcode_tooltip {
    border-bottom: none;
    color: @contentTextColor;
}
.content > div:nth-of-type(odd) {background-color: @tabBGColorOdd;}
.content > div:nth-of-type(even) {background-color: @tabBGColorEven;}
.one {border-top-left-radius: 15px;}
.four {border-top-right-radius: 15px;}

//Content
.one > .tooltip_content, .two > .tooltip_content, .three > .tooltip_content, .four > .tooltip_content {
    position: absolute;
    top: 30px;
    border:none;
    border-radius: 0px;
    height: @contentHeight;
    width: 288px;
    background-color: @contentBGColor;
    padding: 10px 2px 2px 2px;
    text-align: center;
    font-family: @fontFamily;
    color: @contentTextColor;
    overflow: hidden;
    font-size: 12px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.one > .tooltip_content {
        left: -114px;
}
.two > .tooltip_content {
        left: -159px;
}
.three > .tooltip_content {
        left: -203px;
}
.four > .tooltip_content {
        left: -248px;
}

//Frame, General
.frame {
   height: @frameHeight; //@contentHeight + 170px;
   width: 310px;
   position: relative;
   background-color: @outerBGColor;

}
a {
   color: @contentLinkColor;
   font-weight: bold;
   text-decoration: underline;
}

//Cover
.cover {
   height: 100px;
   width: 100%;
   position: absolute;
   top:0px;
   left:0px;
   background-color: @outerBGColor;
   opacity: 0.7;
   transition: height 0.4s, opacity 0.4s, top 0.4s, opacity 0.4s;
   -webkit-transition: height 0.4s, opacity 0.4s, top 0.4s, opacity 0.4s;
   -o-transition: height 0.4s, opacity 0.4s, top 0.4s, opacity 0.4s;
   -moz-transition: height 0.4s, opacity 0.4s, top 0.4s, opacity 0.4s;
}
.cover:hover {
   z-index: 99;
   opacity: 1;
   box-shadow: 0 5px 5px rgba(0,0,0,0.75);

}
.cover:hover ~ .bar {top:176px; height: 0px;}
.cover:hover ~ .pic {top: 130px;}
.cover:hover ~ .name {top: 176px;}


//Bar
.bar {
   height: 0px;
   width: 100%;
   position: absolute;
   top: 100px;
   background-color: white;
   border:  @linesBorder;
   transition: top 0.4s, height 0.4s;
   margin-left: -3px;
}

//Avatar
.pic {
    height: 100px;
    width: 100px;
    border: 6px solid @linesColor;
    border-radius: 100%;
    position: absolute;
    top: 25px;
    left: 15px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: @outerBGColor;
    transition: top 0.4s;
}

//Username
.name {
    font-size: 20px;
    font-family: @fontFamily;
    color: @nameColor;
    position: absolute;
    top: 76px;
    left: 146px;
    transition: top 0.4s;
}


//Heart
.x {font-size: 10px; font-family: @fontFamily; position: absolute; bottom: 1.5px; right: 20px; height: 11px; width: 11px; line-height: 11px; overflow: hidden; text-align: center; letter-spacing: 1px;
    transition: width 0.4s, right 0.4s, background-color 0.4s, right 0.4s;
    }
.x a {
    color:  @heartColor;
    text-decoration: none;
    font-weight: normal;
}
.x:hover {
    width: 45px;
    background-color: @heartColor;
}
.x:hover a{
    color: @outerBGColor;
}


//Browser support
.x {
	 -webkit-transition: width 0.4s, right 0.4s, background-color 0.4s, right 0.4s;
    -o-transition: width 0.4s, right 0.4s, background-color 0.4s, right 0.4s;
    -moz-transition: width 0.4s, right 0.4s, background-color 0.4s, right 0.4s;
}
.name {
    -webkit-transition: top 0.4s;
    -o-transition: top 0.4s;
    -moz-transition: top 0.4s;
}
.pic {-webkit-transition: top 0.4s;
    -o-transition: top 0.4s;
    -moz-transition: top 0.4s;
}
.bar {
	-webkit-transition: top 0.4s, height 0.4s;
   -o-transition: top 0.4s, height 0.4s;
   moz-transition: top 0.4s, height 0.4s;
}
.cover:hover {
	-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.75);
   -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.75);
}
.tooltip_content {
border:1px solid #297280;
background-color: #E4EFF1;
color: #297280;}
[/style]