Tails

<style>


@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);

@import url(https://fonts.googleapis.com/css?family=Kreon);



.pfor {display: none;}

#profile {

border-style:none;

background-color: Transparent;}



body {

background-color: orange;

background-image:url("");

background-size: ;

background-attachment:fixed;}



a:link {text-decoration: none;}

a:visited {text-decoration: none;}





#DNA {

position: fixed;

top: 0px;

left: 50px;

height: 100%;

width: 80px;

border-left: 3px solid white;

border-right: 3px solid white;

background-image:url("http://i68.tinypic.com/27zhe74.gif");

background-position: bottom;

background-repeat:repeat;

background-color:  #ffffff;

box-shadow:

0 0 20px red;

}



#Sewer {

position: fixed;

top: 0px;

right: 50px;

height: 100%;

width: 80px;

border-left: 3px solid dark red;

border-right: 3px solid dark red;

background-image:url("http://i66.tinypic.com/29c1d78.gif");

background-position: top;

background-repeat:repeat;

background-color: #000000;

box-shadow:

0 0 20px red;

}



#LizardContent{

position: fixed;

top: 10%;

left: 50%;

width: 0;

height: 500px;

}



#LizardImageBack {

position: absolute;

left: -170px;

width: 340px;

height: 500;

border-top: 2px solid red;

border-left: 2px solid red;

border-right: 2px solid #ff0000;

border-bottom: 2px solid #ff0000;

border-radius: 20px;

background-image:url("");

background-size: 100% 100%

}



#mainimage {

position: absolute;

top: 10px;

left: 10px;

bottom: 10px;

right: 10px;

border: 2px solid #ff0000;

border-radius: 20px;

overflow: hidden;

}



#navbar {

position: absolute;

top: 100px;

left: -53px;

width: 50px;

height: 200px;

}


#navbar2 {

position: absolute;

top: 100px;

right: -53px;

width: 50px;

height: 200px;

}





#navbar3 {

position: absolute;

top: 500px;

right: 150px;

width: 50px;

height: 50px;

}







#ImageScrollOver {

background-color:#transparent;

position:absolute;}



#ImageScrollOut {

background-color:#transparent;

position:absolute;

opacity: 0;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

transition: all 1s ease-in-out;

}



#ImageScrollOut:hover {

position:absolute;

opacity: 1.0;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

transition: all 1s ease-in-out;

}





#buttons a {

display: block;

margin-left: 5px;

margin-top: 20px;

float: left;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}






#buttons2 a {

display: block;

margin-left: 5px;

margin-top: 20px;

float: left;

}


#buttons3 a {

display: block;

margin-left: 6px;

margin-top: 5px;

float: left;

}





.Mainbox {

position: absolute;

left: -1px;

right: 500px;

top: 20px;

height: 465px;

border: 1px solid#ff0000;

border-left: 2px solid yellow;


text-align: center;

overflow: hidden;

opacity: 1;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

transition: all 1s ease-in-out;

background-image:url("");

background-size: 300px 300px;

}





.MainBox:target {

top: 20px;

right: 0px;

left: 0px;

opacity: 1;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

transition: all 1s ease-in-out;

}



.Mainbox2 {

position: absolute;

left: 340px;

right: 0px;

top: 20px;

height: 465px;

border: 1px solid darkred;

text-align: center;

overflow: hidden;

opacity: 0;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

transition: all 1s ease-in-out;

background-image:url("http://i.picpar.com/5pTb.jpg");

background-size: 500px 300px;

}





.MainBox2:target {

top: 20px;

right: 0px;

left: 0px;

opacity: 1;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

transition: all 1s ease-in-out;

}



#contentbox {

position: absolute;

top: 10px;

bottom: 10px;

left: 10px;

right: 10px;

padding: 10px;

border: 2px solid black;

color: white;

background-color: rgba(0,0,0,.8);

font-family: 'Kreon', serif;

font-size: 14px;
}



#header{

left: -10px;

right: -10px;

height: 25px;

background: black;

background-image:url("http://i.picpar.com/QpTb.jpg");

color: white;

font-family: 'Kaushan Script', cursive;

padding-top: 3px;

padding-left: 5px;

font-size: 18px;

text-align: center;

}



#contentbox2 {

position: absolute;

top: 10px;

bottom: 10px;

left: 10px;

right: 10px;

padding: 10px;

border: 2px solid orange;

color: white;

background-color: rgba(0,0,0,.8);

font-family: 'Kreon', serif;

font-size: 14px;
}



#header2{

left: -10px;

right: -10px;

height: 44px;

background-image:url("http://i.picpar.com/PpTb.jpg");

border: 2px solid black;

color: orange;

font-family: 'Kaushan Script', cursive;

padding-top: 3px;

padding-right: 5px;

font-size: 18px;

text-align: center;

}



</style>





<div id=DNA></div>

<div id=Sewer></div>

<div id=LizardContent>

<div id=LizardImageBack>

<div id=mainimage>

<div id="ImageScrollOver">

<img src="http://i65.tinypic.com/rbed8l_th.jpg" height=444 width=400>

</div>

<div id="ImageScrollOut">

<img src="https://68.media.tumblr.com/034696c237241b206ba1aa61319f9e8d/tumblr_olsoch77Fh1v8x5bno1_500.gif" height=450  width=350>

</div>

</div>



<div id="One" class="MainBox">

<div id=contentbox>

<div id=header>Stats</div>
<br>
<i>“Tails Quote here” </i>
<br>
<br>
<font style=float:left>Name:</font> <font style=float:right>Name here</font>

<br>

<font style=float:left>Age:</font> <font style=float:right>Age here</font>

<br>

<font style=float:left>Gender:</font> <font style=float:right>Gendere here</font>

<br>

<font style=float:left>Orientation</font> <font style=float:right>Orientation here</font>

<br>

<font style=float:left>Alignment:</font> <font style=float:right>What side are you on?</font>

<br>

<font style=float:left>Height:</font> <font style=float:right>Height here</font>

<br>

<font style=float:left>Weight:</font> <font style=float:right>Weight here, optinonal</font>

<br>

<font style=float:left>Fur Color:</font> <font style=float:right>What is the fluff color</font>

<br>

<font style=float:left>Eye Color:</font> <font style=float:right>Eye color</font>

<br>

<font style=float:left>Status:</font> <font style=float:right>I'm a kid.</font>





<br>

<font style=float:left>Species:</font> <font style=float:right>Fox</font>

<br>




</div>

</div>



<div id="Two" class="MainBox">

<div id=contentbox>

<div id=header>About</div>
 <br>
<i><h2>“You want to know about me?~” </h2></i>
<br><br>
About here

</div>

</div>



<div id="Three" class="MainBox">

<div id=contentbox>

<div id=header>Friends</div>
<br>
 <a href="Profile link here"><img style="border-radius: 50%" src="Image link here" align="left" height="60" width="60"></a> <i>"Blurb"</i>

</div>

</div>



<div id="Four" class="MainBox">

<div id=contentbox>

<div id=header>Out of Emeralds</div>
<br>
OOC here

</div>

</div>







<div id=navbar>

<div id="buttons">

<a href="#One"> <img src="http://media.giphy.com/media/yoK20ShoZh25W/giphy.gif" width=35px></a>

<a href="#Two"> <img src="http://media.giphy.com/media/yoK20ShoZh25W/giphy.gif" width=35px></a>

<a href="#Three"><img src="http://media.giphy.com/media/yoK20ShoZh25W/giphy.gif" width=35px></a>

<a href="#Four"> <img src="http://media.giphy.com/media/yoK20ShoZh25W/giphy.gif" width=35px></a>

</div>

</div>







<div id=navbar3>

<div id="buttons3">

<a href="#Close">

<div id="ImageScrollOver">

<img src="https://68.media.tumblr.com/034696c237241b206ba1aa61319f9e8d/tumblr_olsoch77Fh1v8x5bno1_500.gif" width=50>

</div>

<div id="ImageScrollOut">

<img src="http://i.picpar.com/OpTb.png" width=50>

</div>

</a>

</div>

</div>