Karolina Dean Code

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed|Raleway|Montserrat|Meie+Script');

::-webkit-scrollbar-thumb {background: #000000;}
::-webkit-scrollbar {width: 0px;}

#extra {position: fixed;top: 0px; left: 0px;bottom: 0px; right: 0px;z-index:999;}

body{
background: #f9f9f9;
overflow: hidden;
}

#box{
position: absolute;
left: 10%;
top: 10%;
height: 90%;
width: 30%;
background: #FFD1F6;
opacity: 0.6;
-webkit-clip-path: polygon(80% 0, 100% 17%, 100% 100%, 0 100%, 0 0);
clip-path: polygon(80% 0, 100% 17%, 100% 100%, 0 100%, 0 0);
}

#decobox{
position: absolute;
top: 27%;
left: 0;
height: 36%;
width: 39%;
border-top: 1px solid #FFD1F6;
border-right: 1px solid #FFD1F6;
border-bottom: 1px solid #FFD1F6;
}

#img{
position: absolute;
top: 25%;
left: 0;
height: 40%;
width: 40%;
background: url(https://img00.deviantart.net/5242/i/2014/235/0/4/rainbow_eyes___speedpainting_tutorial____by_pixiecold-d7wcdac.jpg) no-repeat;
background-size: 100% auto;
background-position: center center;
}


#title{
position: absolute;
top: 55%;
left: 0%;
height: 5%;
width: 30%;
background: #ffd1f6;
font: 6vh meie script;
color: #ffffff;
text-align: right;
line-height: 5vh;
padding-right: 2%;
}

#boxbox a, #boxbox a:visited, #boxbox a:active{
position: absolute;
bottom: 5px;
left: 5px;
font: 2.5vh arial;
color: #ffd1f6;
text-decoration: none;
}

#stats{
position: absolute;
top: 67%;
left: 12%;
height: 10%;
width: 13%;
font: 1vh roboto condensed;
color: #595956;
text-shadow: 2px 2px #fff;
line-height: 1.5vh;
text-align: right;
padding: 1%;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
overflow: scroll;
}

#stats b{
font: 1.1vh times new roman;
color: #FF7DC2;
font-style: italic;
float: left;
}

#stats a, #stats a:visited, #stats a:target{
color: #000;

}

#stats tr{
width: 100%;
}

#stats td{
border-bottom: 1px solid #ffffff;
}

#txt1{
position: absolute;
top: 65%;
left: 25%;
height: 20%;
width: 11%;
background: #ffffff;
font: 1.1vh times new roman;
color: #595956;
font-style: italic;
text-align: center;
padding: 2% 1% 1% 1%;
overflow: scroll;
opacity: 1;
visibility: visible;
}

#txt2{
position: absolute;
top: 65%;
left: 25%;
height: 20%;
width: 11%;
background: #ffffff;
font: 1.1vh times new roman;
color: #595956;
font-style: italic;
text-align: center;
padding: 2% 1% 1% 1%;
overflow: scroll;
opacity: 0;
visibility: hidden;
transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-webkit-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
}

#txt2:target{
visibility: visible;
opacity: 1;
transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-webkit-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
}

#txt1 a, #txt2 a, #txt1 a:visited, #txt2 a:visited, #txt1 a:active, #txt2 a:active{
color: #999999;
text-decoration: none;
transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-webkit-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
}

#txt1 a:hover, #txt2 a:hover{
color: #FF7DC2;
transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-webkit-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
}

#tri{
position: absolute;
top: 90.8%;
left: 25%;
height: 6%;
width: 13%;
background: #ffffff;
-webkit-clip-path: polygon(100% 0, 0 0, 50% 100%);
clip-path: polygon(100% 0, 0 0, 50% 100%);
}

#friend{
position: absolute;
top: 87%;
left: 12%;
height: 9%;
width: 10%;
font: 1vh roboto condensed;
font-style: italic;
background: rgba(255,255,255,0.5);
padding-left: 1%;
padding-right: 1%;
overflow: scroll;
text-align: right;
}

#friend a, #friend a:target, #friend a:visited{
font: 0.9vh montserrat;
text-shadow: 1px 1px #ffffff;
text-decoration: none;
color: #FF7DC2;
float: left;
font-weight: bold;
text-transform: uppercase;
}

#friend a:hover{
background: none;
color: #000;
}

#friend p{
padding-top: 1%;
margin-bottom: 0;
border-bottom: 1px solid #fff;
}

h1{
font: 2vh meie script;
color: #ff7dc2;
line-height: 2vh;
border-bottom: 1px solid #ffd1f6;
}

</style>

<div id="extra">
<div id="box"></div>
<div id="img"></div><div id="decobox"></div>

<div id="title">lucy in the sky.</div>
<div id="boxbox"><a target="_blank" href="https://roleplay.chat/profile.php?user=Spicy" title="-- Coded by Spicy. ">🌶</a></div>
<table id="stats">
<tr><td><b>Name.</b>Karolina Dean</td></tr>
<tr><td><b>Age.</b>Eighteen</td></tr>
<tr><td><b>Gender.</b>Female</td></tr>
<tr><td><b>Race.</b>Majesdanian</td></tr>
<tr><td><b>Orientation</b>Homosexual</td></tr>
<tr><td><b>Relationship</b>Single. ♥</td></tr>
<tr><td><b>Occupation</b>Runaway; Hero</td></tr>
</table>

<div id="tri"></div>
<div id="txt1">
<a href="#txt2">next >></a>
<h1>powers & abilities</h1>

</div>

<div id="txt2">
<a href="#txt1"><< prev</a>
<h1>out of sunlight</h1>
<br><br>
</div>

<div id="friend">
<p><a href="friendslinkhere">Friend Name</a>.</p>
<p><a href="friendslinkhere">Friend Name</a>.</p>
<p><a href="friendslinkhere">Friend Name</a>.</p>
<p><a href="friendslinkhere">Friend Name</a>.</p>
</div>

</div>