Somaya

<style>
@import url('https://www.themonster.xyz/styles/fancy-fonts.css');
::-webkit-scrollbar{width:0.5vh;height:0.1vh;}
 ::-webkit-scrollbar-track{border-radius:0;background:transparent;}
 ::-webkit-scrollbar-thumb{border-radius:0;background:transparent;}

#image{
position: fixed;
top: 0vh;
right: 5vw;
}

#image img{
height: 130vh;
}

#box{
position: fixed;
background: #B1C1E2;
border: .35vh #3F3850 solid;
padding: .5%;
height: 30vh;
width: 35vw;
bottom: 20vh;
left: 10vw;
color: #3F3850;
font-family: 'Text Me';
font-size: 1.75vh;
}

#title{
position: fixed;
text-align: center;
padding: .5%;
z-index: 6;
width: 35vw;
height: 9vh;
bottom: 52vh;
left: 10vw;
font-family: 'Brilliantte';
font-size: 12vh;
color: #4F527F;
}

h1{
text-transform: uppercase;
text-align: left;
font-size: 3vh;
font-weight: lighter;
border-bottom: .2vh #3F3850 solid;
}

hr{
background: #3F3850;
height: .2vh;
}

.r{float: right;}

.nav1, .nav2, .nav3, .nav4{
position: fixed;
z-index: 2;
background: #3F3850;
height: 2.5vh;
width: 2.5vh;
left: 46.5vw;
transition: .2s;
}
.nav1{bottom: 29vh;}
.nav1:hover{transition: .2s;background: #B1C1E2;transform: rotate(225deg);}
.nav2{bottom: 26vh;}
.nav2:hover{transition: .2s;background: #B1C1E2;transform: rotate(225deg);}
.nav3{bottom: 23vh;}
.nav3:hover{transition: .2s;background: #B1C1E2;transform: rotate(225deg);}
.nav4{bottom: 20vh;}
.nav4:hover{transition: .2s;background: #B1C1E2;transform: rotate(225deg);}

</style>


<a href="#one"><div class="nav1"></div></a>
<a href="#two"><div class="nav2"></div></a>
<a href="#three"><div class="nav3"></div></a>
<a href="#four"><div class="nav4"></div></a>


<div id="image"><img src="https://i.imgur.com/hmyhUht.png"></div>
<div id="title">Somaya Attia</div>
<div id="box">
<div style="height: 100%; overflow-y: hidden;">
 <a name="one"></a>
 <div style="width:100%; height: 100%; overflow: auto; " text-align="left">
 <h1>Header 1</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Est placerat in egestas erat imperdiet sed euismod nisi porta. Tellus integer feugiat scelerisque varius. Condimentum vitae sapien pellentesque habitant morbi tristique. Eu volutpat odio facilisis mauris sit. Euismod nisi porta lorem mollis aliquam ut porttitor leo. Quisque sagittis purus sit amet volutpat. Sed vulputate odio ut enim blandit volutpat. Non quam lacus suspendisse faucibus interdum. Porttitor lacus luctus accumsan tortor posuere ac. In ornare quam viverra orci sagittis. Aliquam purus sit amet luctus venenatis. Aliquet enim tortor at auctor. Ipsum a arcu cursus vitae. Sed egestas egestas fringilla phasellus faucibus. Ut lectus arcu bibendum at varius vel pharetra vel. Nulla pellentesque dignissim enim sit amet venenatis urna. Sit amet est placerat in egestas erat imperdiet. Egestas pretium aenean pharetra magna ac placerat vestibulum lectus.</p>

 <p>Tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Eget mauris pharetra et ultrices neque ornare aenean euismod. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Enim tortor at auctor urna nunc id cursus metus. Aliquet sagittis id consectetur purus. Facilisis leo vel fringilla est ullamcorper eget. In cursus turpis massa tincidunt dui ut ornare. Turpis tincidunt id aliquet risus feugiat. Porttitor massa id neque aliquam vestibulum morbi blandit. Enim sit amet venenatis urna cursus eget nunc. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Platea dictumst vestibulum rhoncus est pellentesque elit. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh. Vitae aliquet nec ullamcorper sit amet risus.</p>

 <p>Venenatis a condimentum vitae sapien pellentesque. Egestas sed tempus urna et pharetra pharetra. Purus non enim praesent elementum facilisis leo vel fringilla. Feugiat in ante metus dictum at. Tempus iaculis urna id volutpat lacus laoreet non curabitur. Amet consectetur adipiscing elit duis tristique sollicitudin. Odio aenean sed adipiscing diam. Orci ac auctor augue mauris. Felis eget nunc lobortis mattis aliquam. Imperdiet sed euismod nisi porta lorem mollis. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Quis vel eros donec ac odio tempor orci dapibus. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Nibh mauris cursus mattis molestie a iaculis at.</p>
 </div>


 <a name="two"></a>
 <div style="width:100%; height: 100%; overflow: auto; " text-align="left">
 <h1>Stats</h1>
Name - <div class="r">Somaya Attia</div><br>
Age - <div class="r">23</div><br>
Gender - <div class="r">Female</div><br>
Race - <div class="r">Au'ra, Xaela</div><br>
Height - <div class="r">5'1"</div><br>
Weight - <div class="r">115 lbs</div><br>
Eyes - <div class="r">Garnet, Emerald</div><br>
Hair - <div class="r">Raven Black</div><br>
Orientation - <div class="r">Homoflexible</div><br>
Marital Status- <div class="r">Singular</div><br>
Place of Birth - <div class="r">Unknown</div><br>
Home - <div class="r">Radz-at-han, Thavnair</div><br>
Nameday - <div class="r">20th Sun of the Fourth Astral Moon.</div><br>
Occupation - <div class="r">Dancer</div><br>



 </div>

 <a name="three"></a>
 <div style="width:100%; height: 100%; overflow: auto; " text-align="left">
 <h1>Notes and Headcanons</h1>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </div>

 <a name="four"></a>
 <div style="width:100%; height: 100%; overflow: auto; " text-align="left">
 <h1>OOC</h1>
 <ol>
 <li>Golden Rule. Don't be a dick, I won't be a bitch.</li>
 <li>Not entirely attentive to DMs.</li>
 <li>IC is defined by italics and quotation marks. OOC is defined by standard text, or parentheses.</li>
 <li>I can be a horny bitch. I can be a celibate angel. I can be somewhere in between.</li>
 <li>My code, not my art.</li>
 </ol>
 </div>
</div>