JEOSEUNG SAJA CODE [DONE]

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=East+Sea+Dokdo|Do+Hyeon|Pirata+One|Trade+Winds');

body {
background-color: white;
background-image: url('https://i.ibb.co/87FkSDh/Background-Reaper.jpg');
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
}

#grimly {
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;
}

#container {
position: absolute;
left: 11%;
top: 13%;
height: 400px;
width: 1000px;
border: 3px solid #000;
background: #000;
box-shadow: 0px 0px 3px 3px #010;
background-image: url('https://wallpaperaccess.com/full/1934093.jpg');
background-size: 100%;
background-repeat: no-repeat;
background-position: top;
}

#img {
position: absolute;
left: 400px;
height: 180px;
width: 180px;
top: 120px;
border-radius: 50%;
border: 10px solid #000;
box-shadow: 0px 0px 10px 10px #222;
background-image: url('https://i.ibb.co/hKtdnn0/Lee-Dong-Wook.jpg');
background-size: 100%;
background-repeat: no-repeat;
background-position: top;
filter: blur(0px);
}

#img:hover {
filter: blur(1px);
-webkit-transition: opacity 0.8s linear;
 -webkit-transition: all 0.7s ease-out;
 -moz-transition: all 0.7s ease-out;
 transition: all 0.7s ease-out;
}

#title {
position: absolute;
opacity: 0.9;
z-index: 1;
right: 130px;
bottom: -15px;
height: 150px;
width: 200px;
background-image: url('https://i.imgur.com/OR41dw3.png');
background-size: 100%;
background-repeat: no-repeat;
filter: grayscale(100%);
}

#title:hover {
opacity: 1;
filter: blur(0px);
}

#tab1 {
position: absolute;
left: 620px;
top: 140px;
height: 40px;
width: 40px;
background: #000;
box-shadow: 0px 0px 5px 5px #222;
border-radius: 50%;
z-index: 1;
}

#tab1:hover {
opacity: 0.8;
background: #333;
filter: blur(1px);
}

#tab2 {
position: absolute;
z-index: 1;
left: 630px;
top: 200px;
height: 40px;
width: 40px;
background: #000;
box-shadow: 0px 0px 5px 5px #222;
border-radius: 50%;
}

#tab2:hover {
opacity: 0.8;
background: #333;
filter: blur(1px);
}

#tab3 {
position: absolute;
left: 617px;
top: 260px;
height: 40px;
z-index: 1;
width: 40px;
background: #000;
box-shadow: 0px 0px 5px 5px #222;
border-radius: 50%;
}

#tab3:hover {
opacity: 0.8;
background: #333;
filter: blur(1px);
}

#tab4 {
position: absolute;
z-index: 1;
left: 580px;
top: 310px;
height: 40px;
width: 40px;
background: #000;
box-shadow: 0px 0px 5px 5px #222;
border-radius: 50%;

}

#tab4:hover {
opacity: 0.8;
background: #333;
filter: blur(1px);
}

#tab5 {
position: absolute;
z-index: 1;
left: 527px;
bottom: 18px;
height: 40px;
width: 40px;
background: #000;
box-shadow: 0px 0px 5px 5px #222;
border-radius: 50%;
}

#tab5:hover {
opacity: 0.8;
background: #333;
filter: blur(1px);
}

#tab6 {
position: absolute;
z-index: 1;
left: 466px;
bottom: 11px;
height: 40px;
width: 40px;
background: #000;
box-shadow: 0px 0px 5px 5px #222;
border-radius: 50%;
}

#tab6:hover {
opacity: 0.8;
background: #333;
filter: blur(1px);
}

#friendbox {
position: absolute;
z-index: 1;
left: 12px;
top: 105px;
height: 50px;
width: 340px;
background: #111;
border: 1px solid #000;
box-shadow: 0px 0px 5px 5px #222;
border-radius: 3%;
padding: 5px;
overflow-y: auto;
}

#mainbox {
position: absolute;
z-index: 1;
left: 12px;
bottom: 12px;
height: 185px;
width: 340px;
background: #111;
border: 1px solid #000;
box-shadow: 0px 0px 5px 5px #222;
border-radius: 3%;
padding: 5px;
overflow-y: auto;
font-family: 'East Sea Dokdo';
font-size: 16px;
color: #888;
line-height: 16px;
}

#topbox {
position: absolute;
z-index: 1;
left: 12px;
top: 12px;
height: 60px;
width: 125px;
background: #111;
border: 1px solid #000;
box-shadow: 0px 0px 5px 5px #222;
border-radius: 3%;
padding: 5px;
overflow-y: auto;
font-family: 'East Sea Dokdo';
font-size: 16px;
color: #888;
line-height: 14px;
}

b {
font-family: 'Do Hyeon';
color: white;
font-size: 10px;
text-shadow: 0px 0px 3px #777;
}

a {
font-family: 'Pirata One';
font-size: 10px;
letter-spacing: 0.5px;
color: #695e75;
text-decoration: none;
}

h1 {
font-family: 'Trade Winds';
font-size: 17px;
color: #;
text-align: right;
letter-spacing: 2px;
border-left: 175px solid #000;
text-shadow: 0px 0px 3px #fff;
margin-top: 0px;
margin-bottom: 4px;
line-height: 20px;
}

.friend {
width: 40px;
height: 40px;
opacity: 1;
border: 1px dashed #695e75;
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;
filter: grayscale(100%);
}

.friend:hover {
opacity: 0.7;
border: 1px dashed #eee;
margin-right: .5px;
margin-top: 4px;
margin-bottom:-5px;
filter: grayscale(0%);
-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="grimly" oncontextmenu="return false;">
<div id="container">
<div id="img"></div>
<div id="title"></div>
<a href="#2"><div id="tab1"></div></a>
<a href="#3"><div id="tab2"></div></a>
<a href="#4"><div id="tab3"></div></a>
<a href="#5"><div id="tab4"></div></a>
<a href="#6"><div id="tab5"></div></a>
<a href="#1"><div id="tab6"></div></a>
<div id="topbox"><B>00.</B> <a href="//roleplay.chat/profile.php?user=Boram" target="_blank">Boram</a> coded this. Do not touch! This box scrolls. FC is Lee Dong Wook.
<br>
</div>
<div id="friendbox"><center>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/d74fdcf310611c8782a432e0c4bf73b5/tumblr_pl325xXSzT1x6x3yto2_400.png" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/d74fdcf310611c8782a432e0c4bf73b5/tumblr_pl325xXSzT1x6x3yto2_400.png" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/d74fdcf310611c8782a432e0c4bf73b5/tumblr_pl325xXSzT1x6x3yto2_400.png" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/d74fdcf310611c8782a432e0c4bf73b5/tumblr_pl325xXSzT1x6x3yto2_400.png" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/d74fdcf310611c8782a432e0c4bf73b5/tumblr_pl325xXSzT1x6x3yto2_400.png" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/d74fdcf310611c8782a432e0c4bf73b5/tumblr_pl325xXSzT1x6x3yto2_400.png" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/d74fdcf310611c8782a432e0c4bf73b5/tumblr_pl325xXSzT1x6x3yto2_400.png" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/d74fdcf310611c8782a432e0c4bf73b5/tumblr_pl325xXSzT1x6x3yto2_400.png" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/d74fdcf310611c8782a432e0c4bf73b5/tumblr_pl325xXSzT1x6x3yto2_400.png" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/d74fdcf310611c8782a432e0c4bf73b5/tumblr_pl325xXSzT1x6x3yto2_400.png" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/d74fdcf310611c8782a432e0c4bf73b5/tumblr_pl325xXSzT1x6x3yto2_400.png" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/d74fdcf310611c8782a432e0c4bf73b5/tumblr_pl325xXSzT1x6x3yto2_400.png" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/d74fdcf310611c8782a432e0c4bf73b5/tumblr_pl325xXSzT1x6x3yto2_400.png" title="Info here" class="friend"></a>
</center></div>
<div id="mainbox">
<div style="height: 185px; overflow-y: hidden;">
<a name="1"></a>
<div style="height: 185px; overflow: auto;">
<div style="margin: 0 auto; width: 21em;">
<h1>Statistics</h1>

</div></div>

<a name="2"></a>
<div style="height: 185px; overflow: auto;">
<div style="margin: 0 auto; width: 21em;">
<h1>Headcanons</h1>
</div></div>

<a name="3"></a>
<div style="height: 185px; overflow: auto;">
<div style="margin: 0 auto; width: 21em;">
<h1>Abilities</h1>
</div></div>

<a name="4"></a>
<div style="height: 185px; overflow: auto;">
<div style="margin: 0 auto; width: 21em;">
<h1>Personality</h1>
</div></div>

<a name="5"></a>
<div style="height: 185px; overflow: auto;">
<div style="margin: 0 auto; width: 21em;">
<h1>Stuff</h1>
</div></div>

<a name="6"></a>
<div style="height: 185px; overflow: auto;">
<div style="margin: 0 auto; width: 21em;">
<h1>Stuff</h1>

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

</div>
</div>