MALI [GIFT]

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Explora|Fleur+De+Leah|Crushed|Handlee|Satisfy');
@font-face { font-family: "zeitgeist"; src: url('https://dl.dropboxusercontent.com/s/2iuciu8ndwb8br0/Zeitgeist-RegularDemo.ttf'); }
@font-face { font-family: "gloss"; src: url('https://dl.dropboxusercontent.com/s/e097emqjup6jer5/Gloss_And_Bloom.ttf'); }

body {
background-color: #00b89c;
background-image: url('http://trendingdubai.com/wp-content/uploads/2019/04/sakura.gif');
background-position: top left;
background-size: 45%;
background-repeat: no-repeat;
}

#mali {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}

::-webkit-scrollbar-track {
background-color:;
}

::-webkit-scrollbar-thumb {
background-color: pink;
}

::-webkit-scrollbar {
width: 2px;
height: 3px;
}

#container {
position: absolute;
left: 1%;
bottom: 2%;
height: 170px;
width: 480px;
background: #fff;
border-left: 12px solid teal;
border-right: 12px solid teal;
border-radius: 2%;
background-image: url('https://www.transparenttextures.com/patterns/dark-stripes-light.png');

}

#title {
position: absolute;
z-index: 1;
top: -110px;
height: 100px;
left: -9px;
width: 100px;
background-image: url('https://64.media.tumblr.com/916d1c6989da6766570d488b433b6e55/cb3590691eba22f5-37/s400x600/22f42caf033b32535a9571bf6bf48585727d83ad.png');
background-size: 100%;
background-repeat: no-repeat;
border: 1px dotted teal;
box-shadow: -2px 2px teal;
}

#title:hover {
background-image: url('https://64.media.tumblr.com/42e0bd9427e53dfede0c8b625da9ae37/cb3590691eba22f5-ba/s400x600/3a1b3d639c0e49d7b0c3234b1db39522ed537d83.png');
}

#quotebox {
position: absolute;
z-index: 2;
top: -94px;
left: 100px;
height: 76px;
width: 178px;
padding: 5px;
background: ;
box-shadow: ;
text-align: left;
font-family: 'Explora';
font-size: 30px;
line-height: 32px;
color: #fff;
text-shadow: -2px 2px teal;
}

#info {
position: absolute;
z-index: 2;
left: 8px;
top: 8px;
border: 1px dotted teal;
height: 143px;
width: 452px;
padding: 5px;
background: #fff;
overflow-y: auto;
line-height: 15px;
font-family: 'Handlee';
font-size: 11px;
color: #777;
}

#friendo {
position: absolute;
z-index: 1;
border: px solid #000;
left: 500px;
bottom: 14px;
height: 144px;
width: 80px;
text-align: center;
overflow-y: auto;
}

.friend {
width: 70px;
height: 44px;
opacity: 1;
border: 1px solid teal;
border-radius: 5%;
margin-right: 1px;
margin-top: 4px;
margin-bottom: -3px;
opacity: 1;
-webkit-transition: opacity 0.7s linear;
 -webkit-transition: all 0.6s ease-out;
 -moz-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}

.friend:hover {
opacity: 0.7;
border: 1px dashed white;
margin-right: 1px;
margin-top: 4px;
margin-bottom:-5px;
-webkit-transition: opacity 0.7s linear;
 -webkit-transition: all 0.6s ease-out;
 -moz-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}

u {
font-family: "zeitgesit";
font-size: 30px;
color: teal;
text-decoration: none;
text-shadow: -1px 1px #054f43;
}

span {
text-decoration: none;
background: #67c2b4;
color: #415753;
font-family: 'satisfy';
padding: 2px;
border: 1.5px solid teal;
border-radius: 3%;
line-height: 15px;
}

span:hover {
opacity: 0.8;
letter-spacing: 1px;
}

a {
font-family: 'Satisfy';
text-decoration: none;
color: #00b89c;
text-shadow: 0px 0px 3px pink;
}

h1 {
font-family: 'Fleur De Leah';
background-image: linear-gradient(to right, #FBD5E0, #F6A2BA, #D7758E);
text-align: right;
line-height: 11px;
font-size: 25px;
margin-bottom: 8px;
margin-top: 3.5px;
color: teal;
text-shadow: -1.5px 1.5px pink;
}

b {
font-family: 'Crushed';
font-size: 11px;
color: #B9415D;
}

#pt2 {
position: absolute;
z-index: 1;
left: 610px;
bottom: 90px;
height: 420px;
width: 500px;
border-radius: 2%;
background: #fff;
background-image: url('https://www.transparenttextures.com/patterns/dark-stripes-light.png');
box-shadow: -5px -5px teal;
}

#stats {
position: absolute;
z-index: 2;
left: 8px;
top: 8px;
border: 1px dotted teal;
height: 185px;
width: 225px;
padding: 5px;
background: #fff;
overflow-y: auto;
line-height: 16px;
font-family: 'Handlee';
font-size: 11px;
color: #777;
}

#boximgtop {
position: absolute;
z-index: 2;
right: 8px;
top: 8px;
border: 1px dotted teal;
height: 185px;
width: 225px;
padding: 5px;
background-image: url('https://64.media.tumblr.com/7c88d221e29e8ef9341b117e6219d5db/06e91ddd3010d25c-69/s400x600/f481a56c3abadae385f6b7ca361517e3be885527.png');
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}


#boximgbot {
position: absolute;
z-index: 2;
left: 8px;
bottom: 8px;
border: 1px dotted teal;
height: 185px;
width: 225px;
padding: 5px;
background-image: url('https://64.media.tumblr.com/c3235f3a2677dd361b9d412c352738ff/a1d286b11861669a-4c/s1280x1920/d37bd1d0a0341622e807c57896779e24f4f5bbfc.jpg');
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}

#magic {
position: absolute;
z-index: 2;
right: 8px;
bottom: 8px;
border: 1px dotted teal;
height: 185px;
width: 225px;
padding: 5px;
background: #fff;
overflow-y: auto;
line-height: 16px;
font-family: 'Handlee';
font-size: 11px;
color: #777;
}

</style>
<div id="mali" oncontextmenu="return false;">
<div id="container">
<div id="title"></div>
<div id="quotebox"><u>❝</u> don't count your days, make your days count. <u>❞</u></div>
<div id="info">
<h1>Out of Character</h1>
<B>Credit</B> goes to <a href="//roleplay.chat/profile.php?user=Sailor+Chuu">Chuu</a> for the code! Do not take any part of it. If you're interested in something similar, leave mail! <br>
<B>01.</B> Words words words.<br>
<B>02.</b> Words words words words. <span>Test this here</span>
</div>
<div id="friendo">
<a href="//roleplay.chat/profile.php?user=Channarong" target="_blank"><img src="https://64.media.tumblr.com/75bc17bb17dc50e3214146b629b5e996/99f4deffdd2108a3-c4/s540x810/7f5c7407dad4334b231bb1aac436532b69356c5e.gif" title="Chan." class="friend"></a><br>
<a href="//roleplay.chat/profile.php?user=Khemkaeng" target="_blank"><img src="https://c.tenor.com/xsBwhbf4PaoAAAAC/bambam-got7.gif" title="Scorpio." class="friend"></a><br>
<a href="//roleplay.chat/profile.php?user=Henry+Lim" target="_blank"><img src="https://i.pinimg.com/originals/e2/63/37/e26337d814ded2056eef377e91d77563.gif" title="Henry." class="friend"></a><br>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/9c2f7316bfde47dee69814e0070f30f8/5ea8e1f4301ca1cf-07/s400x600/c8f2853a4f489a93c2e094c12ed0485caa51c866.gif" title="Info here" class="friend"></a><br>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/9c2f7316bfde47dee69814e0070f30f8/5ea8e1f4301ca1cf-07/s400x600/c8f2853a4f489a93c2e094c12ed0485caa51c866.gif" title="Info here" class="friend"></a><br>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/9c2f7316bfde47dee69814e0070f30f8/5ea8e1f4301ca1cf-07/s400x600/c8f2853a4f489a93c2e094c12ed0485caa51c866.gif" title="Info here" class="friend"></a>
</div>
<div id="pt2">
<div id="stats">
<h1>Statistics</h1>
<B>Name.</B> <font style=float:right>Malivalaya.</font><br>
<B>Surname.</B> <font style=float:right>Luo-Bunchai.</font><br>
<B>Nickname.</B> <font style=float:right>Mali, Chan Jr.</font><br>
<B>Alias.</B> <font style=float:right>TBD.</font><br>
<B>Age.</B> <font style=float:right>20.</font><br>
<B>D.o.B.</B> <font style=float:right>##.</font><br>
<B>Zodiac.</b> <font style=float:right>##.</font><br>
<B>Orient.</B> <font style=float:right>Heterosexual.</font><br>
<B>Alignment:</B> <font style=float:right>Good.</font><br>
<B>Affiliation:</B> <font style=float:right>Vidon Guild.</font><br>
<B>Hair Color:</B> <font style=float:right>Brunette.</font><br>
<B>Eye Color:</B> <font style=float:right>Brown.</font><br>
<B>Height:</B> <font style=float:right>##.</font><br>
<B>Build:</B> <font style=float:right>Petite.</font>
</div>
<div id="boximgtop"></div>
<div id="boximgbot"></div>
<div id="magic">
<h1>Magic</h1>

</div>
</div>
</div>