INO [DONE]

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Oleo+Script|Allura|Bellota|Cormorant+Garamond|Forum|Lilita+One');

body {
background-color: #;
background-image: linear-gradient(to right, #B600FF, #A502E6, #8E00C6, #6C0097, #5B0080);
background-position: center;
background-size: 100%;
background-repeat:no-repeat;
}

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

#triangle {
position: absolute;
z-index: 5;
bottom: 4.3vh;
left: 1vw;
width: 0;
height: 0;
border-bottom: 500px solid #440060;
border-left: 310px solid transparent;
}

#title {
position: absolute;
z-index: 6;
left: 23vw;
bottom: 63.6vh;
transform: rotate(0deg);
background-image: url('http://i.picpar.com/owcf.png');
background-repeat: no-repeat;
height: 110px;
width: 420px;
background-size: 76%;
}

#render {
position: absolute;
z-index: 5;
background-color: transparent;
border-radius: 0%;
bottom: -8.9vh;
left: 66vw;
height: 600px;
width: 310px;
background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/d96b2733-3787-41e3-8341-2824ca800f80/ddmv4qy-c6816cb4-331b-4f92-a0b1-f275e1e471bd.png/v1/fill/w_800,h_1000,strp/ino_yamanaka___the_last_render_by_akawaiichan_ddmv4qy-pre.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD0xMjIwIiwicGF0aCI6IlwvZlwvZDk2YjI3MzMtMzc4Ny00MWUzLTgzNDEtMjgyNGNhODAwZjgwXC9kZG12NHF5LWM2ODE2Y2I0LTMzMWItNGY5Mi1hMGIxLWYyNzVlMWU0NzFiZC5wbmciLCJ3aWR0aCI6Ijw9OTc2In1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.VN3u1vCGsDWhgnID3_kvmCCI1clcPhQLVwqzZy-dP0c');
background-repeat: no-repeat;
background-size: 100%;
}

.opacity {
opacity: 0;
overflow: auto;
}


#container {
position: absolute;
z-index: 4;
bottom: 4.3vh;
left: 23.75vw;
height: 498px;
width: 900px;
background-color: #440060;
border: 1px solid #440060;
background-image: url('');
}

#lowbox {
position: absolute;
z-index: 6;
left: 24vw;
bottom: 6.5vh;
height: 100px;
width: 420px;
background: #fff;
border: 1px dotted #8E00C6;
font-family: 'Cormorant Garamond';
color: #333;
font-size: 10.5px;
overflow-y: auto;
line-height: 12px;
overflow-y: auto;
padding: 5px;
}

#midbox {
position: absolute;
z-index: 6;
left: 45.4vw;
bottom: 24.5vh;
width: 270px;
height: 175px;
background: #fff;
border: 1px dotted #8E00C6;
font-family: 'Cormorant Garamond';
color: #333;
font-size: 10.5px;
overflow-y: auto;
line-height: 12px;
overflow-y: auto;
padding: 5px;
}

#quotebox {
position: absolute;
z-index: 6;
left: 24vw;
bottom: 30vh;
width: 300px;
height: 130px;
background: #8E00C6;
border: 1px dotted #8E00C6;
font-family: 'Oleo Script';
text-align: center;
color: #6C0097;
font-size: 23px;
overflow-y: auto;
line-height: 23px;
overflow-y: auto;
padding: 5px;
}

#smol {
position: absolute;
z-index: 6;
left: 59.8vw;
bottom: 62.5vh;
height: 16.8px;
width: 190px;
background: #8E00C6;
border: 1px dotted #8E00C6;
font-family: 'Oleo Script';
text-align: right;
color: #6C0097;
font-size: 16.5px;
padding: 5px;
box-shadow: 0px 0px 10px 10px #B600FF;
}

#randogif {
position: absolute;
left: 34vw;
background-image: url('http://i.picpar.com/qwcf.gif');
bottom: 50.5vh;
height: 200px;
width: 300px;
background-repeat: repeat;
background-size: 100%;
border-radius: 0%;
z-index: 6;
opacity: 0.8;
}

#rando2 {
position: absolute;
left: 18.2vw;
background-image: url('http://i.picpar.com/qwcf.gif');
bottom: 28vh;
height: 200px;
width: 300px;
background-repeat: repeat;
background-size: 99%;
border-radius: 0%;
z-index: 6;
opacity: 0.8;
}

#rando3 {
position: absolute;
left: 10.2vw;
background-image: url('http://i.picpar.com/qwcf.gif');
bottom: 4.3vh;
height: 200px;
width: 300px;
background-repeat: repeat;
background-size: 100%;
border-radius: 0%;
z-index: 6;
opacity: 0.8;
}

#lowbox2 {
position: absolute;
z-index: 6;
left: 57vw;
bottom: 6.5vh;
height: 100px;
width: 420px;
background: #fff;
border: 1px dotted #8E00C6;
font-family: 'Cormorant Garamond';
color: #333;
font-size: 10.5px;
line-height: 12px;
overflow-y: auto;
padding: 5px;
}

#icon {
position: absolute;
z-index: 7;
left: 52.5vw;
bottom: 55vh;
height: 90px;
width: 90px;
border-radius: 50%;
background-color: transparent;
border: 8px solid #440060;
box-shadow: 1px 1px 10px #000;
background-image: url('https://i.pinimg.com/564x/f6/70/92/f6709233d7bc21df6442ec2967aba593.jpg');
background-repeat: no-repeat;
background-size: 100%;
}

#icon2 {
position: absolute;
z-index: 7;
left: 23vw;
bottom: 55vh;
height: 90px;
width: 90px;
border-radius: 50%;
background-color: transparent;
border: 8px solid #440060;
box-shadow: 1px 1px 10px #000;
background-image: url('https://i.pinimg.com/564x/6e/6d/95/6e6d9534d7801535e9bb97241a9d05cd.jpg');
background-repeat: no-repeat;
background-size: 100%
}

h1 {
font-family: 'Allura';
text-align: center;
font-size: 16px;
background-color: #B600FF;
line-height: 14px;
margin-top: 1px;
margin-bottom: 3px;
color: #6C0097;
}

b {
font-family: 'Forum';
color: #5B0080;
font-size: 10px;
}

a {
font-family: 'Indie Flower';
color: #81B7FF;
font-size: 10px;
text-decoration: none;
}

a:hover {
color: purple;
text-decoration: underline;
}

#tab1 {
position: absolute;
z-index: 6;
left: 56.5vw;
bottom: 73vh;
background-image: url('https://fc07.deviantart.net/fs71/f/2014/072/2/8/200px_yamanaka_symbol_svg_by_inopwned-d7a3r1e.png');
background-repeat: no-repeat;
height: 50px;
width: 50px;
border-radius: 0%;
background-size: 100%;
opacity: 0.9;
}

#tab2 {
position: absolute;
z-index: 6;
left: 62vw;
bottom: 73vh;
background-image: url('https://fc07.deviantart.net/fs71/f/2014/072/2/8/200px_yamanaka_symbol_svg_by_inopwned-d7a3r1e.png');
background-repeat: no-repeat;
height: 50px;
width: 50px;
border-radius: 0%;
background-size: 100%;
opacity: 0.9;
}

#tab3 {
position: absolute;
z-index: 6;
left: 67.5vw;
bottom: 73vh;
background-image: url('https://fc07.deviantart.net/fs71/f/2014/072/2/8/200px_yamanaka_symbol_svg_by_inopwned-d7a3r1e.png');
background-repeat: no-repeat;
height: 50px;
width: 50px;
border-radius: 0%;
background-size: 100%;
opacity: 0.9;
}

#tab4 {
position: absolute;
z-index: 6;
left: 73vw;
bottom: 73vh;
background-image: url('https://fc07.deviantart.net/fs71/f/2014/072/2/8/200px_yamanaka_symbol_svg_by_inopwned-d7a3r1e.png');
background-repeat: no-repeat;
height: 50px;
width: 50px;
border-radius: 0%;
background-size: 100%;
opacity: 0.9;
}

</style>

<div id="whole" oncontextmenu="return false;">
<div id="triangle"></div>
<div id="triangle2"></div>
<div id="title"></div>
<div id="render"></div>
<div id="icon"></div>
<div id="icon2"></div>
<div id="randogif"></div>
<div id="rando2"></div>
<div id="rando3"></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="#1"><div id="tab4"></div></a>
<div id="smol">No matter what, I'm doing it!</div>
<div id="quotebox">Believe you have the potential <br><br>to bloom into the most <br><br>
beautiful thing in the cosmos.</div>
<div id="container"></div>
<div id="lowbox"><h1>OOC</h1>
<B>00.</B> This code was made for Yamanaka by <a href="//roleplay.chat/profile.php?user=Sailor+Chuu" target="_blank">Chuu</a>, so do not touch! It is best viewed in 100% zoom.<br><br>
<B>01.</B> OOC text here!</div>
<div id="lowbox2"><h1>Statistics</h1>
<B>Given Name:</B> <font style=float:right>Yamanaka Ino.</font><br>
<B>Kanji:</B> <font style=float:right>山中いの.</font><br>
<B>Nickname(s):</B> <font style=float:right>Inopig ; Mrs. Beauty.</font><br>
<B>Age:</B> <font style=float:right>18-22.</font><br>
<B>D.o.B.:</B> <font style=float:right>September 23rd (♎︎).</font><br>
<B>P.o.B.:</B> <font style=float:right>Konohagakure, Ho no Kuni.</font><br>
<B>Gender:</B> <font style=float:right>Female (♀).</font><br>
<B>Species:</B> <font style=float:right>Humanoid.</font><br>
<B>Classification:</B> <font style=float:right>Analysis Team.</font><br>
<B>Orientation:</B> <font style=float:right>Heterosexual.</font><br>
<B>Marital:</B> <font style=float:right>Single.</font><br>
<B>Alignment:</B> <font style=float:right>Good.</font><br>
<B>Affiliation:</b> <font style=float:right>Konohagakure ; ASF.</font><br>
<B>Former:</b> <font style=float:right>Team 10.</font><br>
<B>Occupation:</B> <font style=float:right>Botanist.</font><br>
<h1> Appearance </h1>
<B>Hair Color:</B> <font style=float:right>Blonde.</font><br>
<B>Hair Style:</B> <font style=float:right>Long.</font><br>
<B>Eye Color:</B> <font style=float:right>Robin's Egg Blue.</font><br>
<B>Skin Tone:</B> <font style=float:right>Milky White.</font><br>
<B>Complexion:</B> <font style=float:right>Normal.</font><br>
<B>Height:</B> <font style=float:right>164 cm / 5'4".</font><br>
<B>Blood Type:</b> <font style=float:right>B.</font><br>
<B>Scent:</B> <font style=float:right>Pig Juice.</font>
</div>

<div id="midbox">
<div style="height: 175px; overflow-y: hidden;">
<a name="1"></a>
<div style="height: 175px; overflow: auto;">
<div style="margin: 0 auto; width: 25.2em;">
<h1>Headcanons</h1>
</div></div>

<a name="2"></a>
<div style="height: 175px; overflow: auto;">
<div style="margin: 0 auto; width: 25.2em;">
<h1>Personality</h1>

</div></div>

<a name="3"></a>
<div style="height: 175px; overflow: auto;">
<div style="margin: 0 auto; width: 25.2em;">
<h1>Bingo Book</h1>

</div></div>

<a name="4"></a>
<div style="height: 175px; overflow: auto;">
<div style="margin: 0 auto; width: 25.2em;">
<h1>Connections</h1>
</div></div></div></div>