[style]
//Make sure you have permission to display the images you want to use. More on Art Theft and Permissions here http://pfq.link/~TrV
 //Change your avatar. Max dimensions are 100x100.
    .pic {background-image: url("https://pokefarm.com/upload/DrWho/espeonavatar.png");}

 //Change your cover. Width is 310px.
.cover {background-image: url("https://pokefarm.com/upload/DrWho/espeonheader.gif");}

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


[styleclass=name]Username[/styleclass]


[styleclass=home][h3]Home[/h3]
This is your homepage. Click the tabs above to explore.

[b]bold[/b] [i]italic[/i] [url=https://pokefarm.com]link[/url] [pit=pit]text[/pit]

[img]https://pfq-static.com/img/pkmn/7/5/n.png[/img]
Image[/styleclass]


[styleclass=content]
[styleclass=one][pit=one][h3]Title One[/h3]Text One[/pit][/styleclass]

[styleclass=two][pit=two][h3]Title Two[/h3]Text Two[/pit][/styleclass]

[styleclass=three][pit=three][h3]Title Three[/h3]Text Three[/pit][/styleclass]

[styleclass=four][pit=four][h3]Title Four[/h3]Official art from the Pokémon anime, manga and games used.[/pit][/styleclass]


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


[style]
//Color change starts here.
//Change Colors. All changes must conform with the legibility guidelines. http://pfq.link/~pJQ4
@outerBGColor: #3d395e;
@linesColor: #fff;
@linesBorder: 1px dashed #847aa4; //enter 'none' for no border

@nameColor: #fff;

@contentBGColor: #bcaaf4;
@contentTextColor: #4f4369;
@contentLinkColor: #616eba;
@tabBGColorOdd: #847aa4;
@tabBGColorEven: #b4aac4;
@fontFamily: Georgia, Geneva, sans-serif;

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


//More Height - increase equally
@contentHeight: 345px;
@frameHeight: 515px; //contentHeight +170px;


//------------------------------
//Mosty layout stuff below here.
//You are free to edit anything you want, no matter how small or big your changes are. You are free to use this as a base. You are free to inspect this and see if you find anything useful for your own projects. You don't have to credit me.
//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;
}

//Tabs
.content {
    position: absolute;
    top: 115px;
    left: 153px;
    height: 30px;
    width: 148px;
}
.one,.two,.three,.four {
    position: absolute;
    height: 100%;
    width: 25%;
    top: 0px;
    text-align: center;
    line-height: 30px;
    border-bottom: none;
    font-size: 12px;
    text-decoration: underline;
    font-family: @fontFamily;
    color: @contentTextColor;
}
.two {left: 25%;}
.three {left: 50%;}
.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: 50%;}
.four {border-top-right-radius: 50%}

//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;
    border-radius: none;
    background-color: @contentBGColor;
    padding: 10px 2px 2px 2px;
    text-align: center;
    font-family: @fontFamily;
    color: @contentTextColor;
    overflow: hidden;
    font-size: 12px;
}
.one > .tooltip_content {
        left: -144px;
}
.two > .tooltip_content {
        left: -181px;
}
.three > .tooltip_content {
        left: -218px;
}
.four > .tooltip_content {
        left: -255px;
}

//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.4;
   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:200px; height:0px;}
.cover:hover ~ .pic {top: 130px;}
.cover:hover ~ .name {top: 176px;}


//Bar
.bar {
   height: 7px;
   width: 100%;
   position: absolute;
   top: 100px;
   background-color: @linesColor;
   border:  @linesBorder;
   transition: top 0.4s, height 0.4s;
}

//Avatar
.pic {
    height: 100px;
    width: 100px;
    border: 6px solid @linesColor;
    border-radius: 100%;
    position: absolute;
    top: 30px;
    left: 26.5px;
    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: 9px; 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;
}
[/style]