HALLOW v1

<style>
@import url('https://fonts.googleapis.com/css?family=Cookie|Pacifico');
@import url('https://fonts.googleapis.com/css?family=Mukta|Overpass|Quicksand|Ubuntu');
@import url('https://fonts.googleapis.com/css?family=Didact+Gothic|Gamja+Flower|Jua|Muli|Tenali+Ramakrishna');

body{
background-image:url('http://inn.spb.ru/images/300/DSC100302480.jpg');
background-repeat:no-repeat;
background-size:100%;
}

::-webkit-scrollbar {display: none}

h1{
color:#0028BF;
font-family: 'Pacifico', sans-serif;
}

hr {
	border:0;
	margin-bottom:5px;
	width:90%;
	height:1px;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background-color:#000;
	}
a{
color:#0065FF
}

b{
color:#003E9D;
}

.image img {
bottom: 3vh;
left: 6vh;
 position: absolute;
 height: 75vh;
width:40vh;
overflow:auto;
 filter: drop-shadow(0 0 .9vh #fff);
z-index:1;
 }

.box {
	position:absolute;
background-color:#C5DCFF;
opacity: 0.5;
	height:55vh;
	width:44.1vh;
	right:103vh;
	top:10vh;
border-style:double;
border-color:#0854CA;
z-index:2;
	}
.box2 {
	position:absolute;
background-color:#C5DCFF;
opacity: 0.5;
	height:55vh;
	width:44.1vh;
	right:53vh;
	top:10vh;
border-style:double;
border-color:#0854CA;
	}

.box3 {
	position:absolute;
background-color:#C5DCFF;
opacity: 0.5;
	height:55vh;
	width:44.1vh;
	right:3vh;
	top:10vh;
border-style:double;
border-color:#0854CA;
	}

.stats {
	position:absolute;
	padding: 1px;
	font-family: 'Tenali Ramakrishna', sans-serif;
	font-size:16px;
	color:#262626;
	text-align:justify;
	line-height:24px;
	height:52.3vh;
	width:41vh;
	right:104.7vh;
	top: 12vh;
overflow: auto;
z-index:3;
	}
.rels {
	position:absolute;
	padding: 1px;
	font-family: 'Tenali Ramakrishna', sans-serif;
	font-size:16px;
	color:#262626;
	text-align:justify;
	line-height:24px;
	height:52.3vh;
	width:41vh;
	right:54.7vh;
	top: 12vh;
overflow: auto;
	}
.ooc {
	position:absolute;
	padding: 1px;
	font-family: 'Tenali Ramakrishna', sans-serif;
	font-size:16px;
	color:#262626;
	text-align:justify;
	line-height:24px;
	height:52.3vh;
	width:41vh;
	right:4.7vh;
	top: 12vh;
overflow: auto;
	}

.title{
background: url('https://gifimage.net/wp-content/uploads/2017/09/anime-ocean-gif-14.gif') 0px 0px repeat;
background-repeat:no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'Pacifico', cursive;
font-size:10.6vh;
font-weight:bold;
top:-2.5vh;
left:15vh;
 filter: drop-shadow(0 0 .4vh #0023A9);
line-height:22.8vh;
position: absolute;
z-index:1;
}

.line{
background-color:#0895CA;
height:45vh;
width:250vh;
left:0vh;
top:15.2vh;
position:absolute;
}
.credit {
 overflow:hidden;
 position:fixed;
 text-align:justify;
 bottom:2vh;
 right:2vh;
 height:5vh;
 width:5vh;
 padding:0vh;
 opacity: .8;
 background-image: url('https://i.imgur.com/Ldl49Wz.png');
 background-position:top center;
 background-attachment: absolute;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;}

div.tooltipMessage {
    z-index: 600;
    position: absolute;
    width: 220px;
    font-family: verdana;
    font-variant: small-caps;
    font-size: 10px;
    text-align: justify;
}

div.tooltipMessage > span {
    display: inline-block;
    background: #fff;
    padding: 4px 5px;
    color: #0854CA;
    border: 1px solid #0854CA;
    border-radius: 5px;
}
div.tooltipMessage.left > span {
    float: right;
}
</style>
<a href= "https://roleplay.chat/profile.php?user=Hallow" target="_blank"><div class= "credit"></div></a>


<div class="line"></div>
<div class="title">NAME</div>
<div class="box"></div>

<div class="image">
<img src="https://i.imgur.com/wEABBvM.png">
</div>
<div class="stats">
<h1><center>Stats</center></h1>
<hr>
<center>
<font style=float:left><b>STAT HERE:</b></font> <font style=float:right>STAT HERE</font><br>
<font style=float:left><b>STAT HERE:</b></font> <font style=float:right>STAT HERE</font><br>
<font style=float:left><b>STAT HERE:</b></font> <font style=float:right>STAT HERE</font><br>
<font style=float:left><b>STAT HERE:</b></font> <font style=float:right>STAT HERE</font><br>
<font style=float:left><b>STAT HERE:</b></font> <font style=float:right>STAT HERE</font><br>
<font style=float:left><b>STAT HERE:</b></font> <font style=float:right>STAT HERE</font><br>
<font style=float:left><b>STAT HERE:</b></font> <font style=float:right>STAT HERE</font><br>
<font style=float:left><b>STAT HERE:</b></font> <font style=float:right>STAT HERE</font><br>


<br><br>
<h1>Bio</h1>
<hr>
words
<br><br>
words
<br><br>
words
</center>
</div>

<div class="box2"></div>
<div class="rels">
<center>
<h1>Relationships</h1>
<hr>

<a target="blank" title="Friend here." href="https://roleplay.chat/profile.php?user=USERNAME HERE"><img src="https://i.imgur.com/8zyB92D.png" width="70" height="70" style=border-radius:50px></a>

<a target="blank" title="Friend here." href="https://roleplay.chat/profile.php?user=USERNAME HERE"><img src="https://i.imgur.com/8zyB92D.png" width="70" height="70" style=border-radius:50px></a>

<a target="blank" title="Friend here." href="https://roleplay.chat/profile.php?user=USERNAME HERE"><img src="https://i.imgur.com/8zyB92D.png" width="70" height="70" style=border-radius:50px></a>

</center>
</div>
<div class="box3"></div>
<div class="ooc">
<center>
<h1>OOC</h1>
<hr>
<font style=float:left><b>001.</b></font> <font style=float:right>This code is <a target="_blank" href="https://roleplay.chat/profile.php?user=Hallow" title="">Hallow's.</a>
</font><br><br>
<font style=float:left><b>002.</b></font> <font style=float:right>OOC.</font><br><br>
<font style=float:left><b>003.</b></font> <font style=float:right>OOC.</font><br><br>
<font style=float:left><b>004.</b></font> <font style=float:right>OOC.</font><br><br>
<font style=float:left><b>005.</b></font> <font style=float:right>OOC.</font><br><br>
<font style=float:left><b>006.</b></font> <font style=float:right>OOC.</font><br><br>



</center>
</div>