XING [GIFT]

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Charm|Bebas+Neue|Passion+One|Satisfy|Cookie|Redressed');

body {
background-color: #fff;
background-image: url('https://cdn.pixabay.com/photo/2014/04/04/14/55/silver-313347_960_720.jpg');
background-position: center;
background-size: 100%;
background-repeat:repeat;
}

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


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

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

::-webkit-scrollbar {
width:0px;
height:0px;
}

#overlay {
background: url('https://img1.picmix.com/output/stamp/thumb/9/6/4/6/1606469_f1f53.gif');
z-index: -1;
position: fixed;
background-size: 20%;
background-repeat: repeat;
left: 0px; top: 0px; right: 0px; bottom: 0px;
}

#container {
position: absolute;
left: 13.5%;
top: 10%;
height: 500px;
width: 1000px;
border: 2px solid #C1C1C1;
background-color: #E8E8E8;
box-shadow: 0px 0px 18px 18px #ABABAB;
background-image: url('https://img1.picmix.com/output/stamp/thumb/9/6/4/6/1606469_f1f53.gif');
background-size: 14%;
background-repeat: repeat;
border-radius: 4%;
}

#icon {
position: absolute;
z-index: 2;
left: 410px;
top: -40px;
border-radius: 50%;
height: 155px;
width: 155px;
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkofV5GRXLfUjUxS4BoGWv7YDK1eTB7_PGl5Nlx0yYFUKX2TNNMhHGvvyuxFWkn2vq2gA&usqp=CAU%27%27);
background-size: 135%;
background-repeat: no-repeat;
background-position: -30px 0px;
border: 2px solid #C1C1C1;
box-shadow: 0px 0px 8px 8px #ABABAB;
opacity: 0.9;
}

#icon:hover {
background-image: url('https://i.pinimg.com/originals/c4/2a/c1/c42ac162921f9102eacd020f57ca456c.gif');
}

#topicon {
position: absolute;
z-index: 2;
left: -82px;
top: -40px;
border-radius: 50%;
height: 155px;
width: 155px;
background-size: 170%;
background-repeat: no-repeat;
background-position: -60px -45px;
border: 2px solid #C1C1C1;
box-shadow: 0px 0px 8px 8px #ABABAB;
background-image: url('https://i.pinimg.com/originals/55/18/9b/55189ba1bc2da0408519f42f282bf360.jpg');
opacity: 1;
}

#boticon {
position: absolute;
z-index: 2;
right: -82px;
top: -40px;
border-radius: 50%;
height: 155px;
width: 155px;
background-size: 200%;
background-repeat: no-repeat;
background-position: top;
border: 2px solid #C1C1C1;
box-shadow: 0px 0px 8px 8px #ABABAB;
background-image: url('https://pm1.narvii.com/6722/c4978f3eb8aef8df55b9323bf671a80447466257_00.jpg');
opacity: 1;
}

#bigimg {
position: absolute;
z-index: 1;
left: 92px;
top: -50px;
height: 200px;
width: 390px;
background-image: url('https://i.ibb.co/hyFSq53/Xing.png');
background-size: 80%;
background-repeat: no-repeat;
}

#big2 {
position: absolute;
z-index: 1;
left: 605px;
top: -50px;
background-image: url('https://i.ibb.co/QNXbh8c/Zhe.png');
background-size: 71%;
background-repeat: no-repeat;
height: 200px;
width: 390px;
}

#ooc {
position: absolute;
z-index: 2;
left: 12px;
bottom: 12px;
border: 2px solid #C1C1C1;
box-shadow: 0px 0px 8px 8px #ABABAB;
height: 170px;
width: 306px;
background-color: #E7E7E7;
padding: 5px;
overflow-y: auto;
font-family: 'Charm';
font-size: 12px;
color: #333;
line-height: 16px;
border-radius: 3%;
}

#info {
position: absolute;
z-index: 2;
right: 12px;
bottom: 12px;
border: 2px solid #C1C1C1;
box-shadow: 0px 0px 8px 8px #ABABAB;
height: 170px;
width: 318px;
background-color: #E7E7E7;
padding: 5px;
overflow-y: auto;
font-family: 'Charm';
font-size: 12px;
color: #333;
line-height: 16px;
border-radius: 3%;
}

#yaten1 {
position: absolute;
z-index: 1;
left: 12px;
bottom: 259px;
border: 2px solid #C1C1C1;
box-shadow: 0px 0px 8px 8px #ABABAB;
height: 150px;
width: 315px;
background-image: url('https://64.media.tumblr.com/d71dd71962a4bfe968397c458e38cdd6/tumblr_nes64wnq7r1u0ed63o3_250.gif');
background-size: 100%;
background-repeat: no-repeat;
opacity: 0.8;
filter: grayscale(10%);
}

#yaten1:hover {
background-image: url('https://data.whicdn.com/images/306247568/original.gif');
background-size: 130%;
}

#yaten2 {
position: absolute;
z-index: 1;
right: 12px;
bottom: 255px;
border: 2px solid #C1C1C1;
box-shadow: 0px 0px 8px 8px #ABABAB;
height: 150px;
width: 330px;
background-image: url('https://i.pinimg.com/originals/13/26/95/1326958f5c7d88e173948f0ea7996972.gif');
background-size: 100%;
background-repeat: no-repeat;
opacity: 0.8;
filter: grayscale(10%);
}

#yaten2:hover {
background-image: url('https://media1.tenor.com/images/73b5479a3ef28bd482799c4be7c63384/tenor.gif?itemid=12936768');
}

#stats {
position: absolute;
z-index: 1;
left: 382px;
bottom: 12px;
border: 2px solid #C1C1C1;
box-shadow: 0px 0px 8px 8px #ABABAB;
height: 370px;
width: 210px;
background-color: #E7E7E7;
padding: 5px;
overflow-y: auto;
font-family: 'Charm';
font-size: 12px;
color: #333;
line-height: 17px;
border-radius: 3%;
}

#tab1 {
position: absolute;
left: 70px;
bottom: 206px;
height: 40px;
width: 40px;
background-image: url('https://media2.giphy.com/media/S9bfFrEDZyayBmIjAK/giphy.gif');
background-size: 100%;
background-repeat: no-repeat;
}

#tab2 {
position: absolute;
left: 230px;
bottom: 206px;
height: 40px;
width: 40px;
background-image: url('https://media2.giphy.com/media/S9bfFrEDZyayBmIjAK/giphy.gif');
background-size: 100%;
background-repeat: no-repeat;
}

#tab3 {
position: absolute;
right: 239px;
bottom: 206px;
height: 40px;
width: 40px;
background-image: url('https://media2.giphy.com/media/S9bfFrEDZyayBmIjAK/giphy.gif');
background-size: 100%;
background-repeat: no-repeat;
}

#tab4 {
position: absolute;
right: 76px;
bottom: 206px;
height: 40px;
width: 40px;
background-image: url('https://media2.giphy.com/media/S9bfFrEDZyayBmIjAK/giphy.gif');
background-size: 100%;
background-repeat: no-repeat;
}

b {
font-family: 'Passion One';
color: #A8A8A8;
font-size: 13px;
letter-spacing: 1px;
}

h1 {
font-family: 'Cookie';
font-size: 20px;
background-color: #A7A7A7;
background-image: url('https://img1.picmix.com/output/stamp/thumb/9/6/4/6/1606469_f1f53.gif');
line-height: 20px;
background-size: 76%;
background-repeat: repeat;
color: #fff;
text-align: center;
margin-top: 6px;
letter-spacing: 2px;
margin-bottom: 0px;
}

h2 {
font-family: 'Bebas Neue';
font-size: 12px;
text-align: right;
color: #009A40;
border-top: 1px dotted #A7A7A7;
margin-top: 0px;
letter-spacing: 2px;
margin-bottom: 4px;
}

a {
font-family: 'Redressed';
color: #A3AA13;
text-decoration: none;
font-size: 12px;
}

a:hover {
color: green;
}

.friend {
width: 65px;
height:41px;
opacity: 1;
border: 1px dashed #000;
border-Radius: 10%;
margin-right: .5px;
margin-top: 4px;
margin-bottom:-5px;
opacity: 0.8;
-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 yellow;
margin-right: .5px;
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;
}

</style>
<div id="profile" oncontextmenu="return false;">
<div id="overlay"></div>
<div id="container">
<div id="topicon"></div>
<div id="icon"></div>
<div id="boticon"></div>
<div id="bigimg"></div>
<div id="big2"></div>
<div id="yaten1"></div>
<div id="yaten2"></div>
<a href="#2"><div id="tab1"></div></a>
<a href="#1"><div id="tab2"></div></a>
<a href="#4"><div id="tab3"></div></a>
<a href="#3"><div id="tab4"></div></a>
<div id="stats"><h1>Statistics</h1><h2>Starlight.</h2>
<b>Name:</B> <font style=float:right>Stat.</font><br>
<B>Gender:</B> <font style=float:right>Male (♂️).</font><br>
<B>D.o.B.:</B> <font style=float:right>Stat.</font><br>
<B>Age:</B> <font style=float:right>Stat.</font><br>
<B>Zodiac:</B> <font style=float:right>Stat.</font><br>
<B>Species:</B> <font style=float:right>Kinmoku Humanoid.</font><br>
<B>Star System:</B> <font style=float:right>Stat.</font><br>
<B>Queen:</B> <font style=float:right><a target="_blank" href="https://roleplay.chat/profile.php?user=" target="_blank">Unknown</a>.</font><br>
<B>P.o.B.:</B> <font style=float:right>Stat.</font><br>
<B>Nationality:</B> <font style=float:right>Stat.</font><br>
<B>Ethnicity:</B> <font style=float:right>Stat.</font><br>
<B>Sexuality:</b> <font style=float:right>Stat.</font><br>
<B>Marital:</B> <font style=float:right>Single.</font><br>
<B>Occupation:</b> <font style=float:right><a title="">Stat</a>.</font><br>
<B>Residence:</B> <font style=float:right>Crystaia City, CA, U.S.A.</font><br>
<B>Hair Color:</B> <font style=float:right>Stat.</font><br>
<B>Eye Color:</b> <font style=float:right>Stat.</font><br>
<B>Skin Tone:</B> <font style=float:right>Fair.</font><br>
<B>Hair Style:</B> <font style=float:right>Stat.</font><br>
<B>Height:</B> <font style=float:right>5'10".</font><br>
<B>Weight:</b> <font style=float:right>Stat.</font><br>
<B>Build:</b> <font style=float:right>Stat.</font><br>
<B>Blood Type:</B> <font style=float:right>Stat.</font><br>
<B>Scent:</B> <font style=float:right>Stat.</font>
</div>
<div id="ooc">
<div style="height: 170px; overflow: hidden;">
<a name="1"></a>
<div style="height: 170px; overflow-y: auto;">
<div style="margin: 0 auto; width: 25em;">
<h1>Out of Character</h1><h2>Typist Notes.</h2>
<B>00.</B> This code was made for Xing Zhe by <a href="//roleplay.chat/profile.php?user=Sailor+Chuu">Chuu</a> exclusively for this character. Do not steal! Friend code was graciously lent to me to use freely by <a href="//roleplay.chat/profile.php?user=Fa">Li Jie</a>.<br>
<B>01.</B> OOC here!<br>
<B>02.</B> OOC here.

</div></div>

<a name="2"></a>
<div style="height: 170px; overflow-y: auto;">
<div style="margin: 0 auto; width: 25em;">
<h1>Connections</h1><h2>Friends & Foes.</h2>
<a href=" " target="_blank"><img src="https://i.pinimg.com/originals/61/cc/f4/61ccf4518ce23d3479b825e0bac97aee.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://i.pinimg.com/originals/61/cc/f4/61ccf4518ce23d3479b825e0bac97aee.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://i.pinimg.com/originals/61/cc/f4/61ccf4518ce23d3479b825e0bac97aee.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://i.pinimg.com/originals/61/cc/f4/61ccf4518ce23d3479b825e0bac97aee.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://i.pinimg.com/originals/61/cc/f4/61ccf4518ce23d3479b825e0bac97aee.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://i.pinimg.com/originals/61/cc/f4/61ccf4518ce23d3479b825e0bac97aee.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://i.pinimg.com/originals/61/cc/f4/61ccf4518ce23d3479b825e0bac97aee.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://i.pinimg.com/originals/61/cc/f4/61ccf4518ce23d3479b825e0bac97aee.gif" title="Info here" class="friend"></a>
</div></div></div></div>

<div id="info">
<div style="height: 170px; overflow: hidden;">
<a name="3"></a>
<div style="height: 170px; overflow-y: auto;">
<div style="margin: 0 auto; width: 26em;">
<h1>Personality</h1><h2>Diva.</h2>
</div></div>

<a name="4"></a>
<div style="height: 170px; overflow-y: auto;">
<div style="margin: 0 auto; width: 26em;">
<h1>Headcanons</h1><h2>Your World.</h2>
</div></div></div></div>
</div>