Mina Han

<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;}


#background{
 position: fixed;
 z-index: 1;
 height: 100vh;
 width: 100vw;
 bottom: 0vh;
 left: 0vw;
}

.backgroundanimation{
 background: url("https://i.imgur.com/BVnHlJw.jpg");
 background-repeat: repeat;
 top: 0vh;
 width: 5000px;
 height:5000px;
 animation: slide 100s linear infinite;
}


@keyframes slide{
 0%{
 transform: translate3d(0, 0, 0);
 }
 100%{
 transform: translate3d(-1692px, 0px, 0px);
 }
}


#image{
 position: fixed;
 bottom: 0vh;
 left: 10vw;
 z-index: 5;
}

#image img{
 height: 90vh;
}


#white{
position: fixed;
z-index: 2;
height: 100vh;
width: 40vw;
left: 4vw;
top: 0vh;
background: linear-gradient(90deg, transparent, #fff, transparent);
}

#title{
 position:fixed;
 z-index: 4;
 bottom: 25vh;
 right: 7vw;
 filter: drop-shadow(0 0 .5vh rgb(245, 197, 39))
}

#title img{
 height: 60vh;
}

#nav1, #nav2, #nav3, #nav4{
 position: fixed;
 z-index: 5;
 transition: .2s;
}

#nav1{
 background: url(https://i.imgur.com/sHCC6oK.png);
 background-position: center;
 background-size: cover;
 top: 30vh;
 right: 47vw;
 height: 8vh;
 width: 8vh;
}
#nav1:hover{top:29vh;height:10vh;width: 10vh;right:46.5vw;filter: drop-shadow(0 0 1vh rgb(245, 197, 39))}

#nav2{
 background: url(https://i.imgur.com/4nZOR9p.png);
 background-position: center;
 background-size: cover;
 top: 42vh;
 right: 47vw;
 height: 8vh;
 width: 8vh;
}
#nav2:hover{top:41vh;height:10vh;width: 10vh;right:46.5vw;filter: drop-shadow(0 0 1vh rgb(245, 197, 39))}

#nav3{
 background: url(https://i.imgur.com/6KF84o0.png);
 background-position: center;
 background-size: cover;
 top: 54vh;
 right: 47vw;
 height: 8vh;
 width: 8vh;
}
#nav3:hover{top:53vh;height:10vh;width: 10vh;right:46.5vw;filter: drop-shadow(0 0 1vh rgb(245, 197, 39))}

#nav4{
 background: url(https://i.imgur.com/wKkjhEN.png);
 background-position: center;
 background-size: cover;
 top: 66vh;
 right: 47vw;
 height: 8vh;
 width: 8vh;
}
#nav4:hover{top:65vh;height:10vh;width: 10vh;right:46.5vw;filter: drop-shadow(0 0 1vh rgb(245, 197, 39))}



.appear{opacity: 0; z-index: 6; transition: 2s;overflow: auto;}
.appear:target{opacity: 1; z-index: 7; transition: 2s;}





.box{
 position: fixed;
 background: #000;
 border-top: .25vh rgb(245, 197, 39) solid;
 border-bottom: .25vh rgb(245, 197, 39) solid;
 height: 30vh;
 width: 25vw;
 bottom: 34vh;
 right: 12.75vw;
 overflow: auto;
 font-family: 'Helvetica';
 font-size: 2vh;
 color: #fff;
}

.triangle1{
 position: fixed;
 background: #000;
 height: 21.35vh;
 width: 21.35vh;
 border-left: .25vh rgb(245, 197, 39) solid;
 border-bottom: .25vh rgb(245, 197, 39) solid;
 transform: rotate(45deg);
 right: 32.5vw;
 bottom: 38.35vh;
}

.triangle2{
 position: fixed;
 background: #000;
 height: 21.35vh;
 width: 21.35vh;
 border-right: .25vh rgb(245, 197, 39) solid;
 border-top: .25vh rgb(245, 197, 39) solid;
 transform: rotate(45deg);
 right: 7.5vw;
 bottom: 38.35vh;
}

#info1, #info2, #info3, #info4{
 position: fixed;
 height: 30vh;
 width: 35vw;
 right: 7.75vw;
 bottom: 34vh;
}

h1{
 font-family: 'Big Noodle Titling';
 font-size: 5vh;
 font-weight: bolder;
 text-align: center;
}

.r{float: right;}

a{
 color: #fff;
 transition: 0.3s;
}

a:hover{
 color: rgb(245, 197, 39);
 transition: 0.3s;
 text-shadow: 0 0 1vh rgb(245, 197, 39);
}


</style>
<div id="background"><div class="backgroundanimation"></div></div>
<div id="white"></div>
<div id="image"><img src="https://i.imgur.com/tCmPfsM.png"></div>

<div id="title"><img src="https://i.imgur.com/mEC6ilX.png"></div>

<a href="#info1"><div id="nav1"></div></a>
<a href="#info2"><div id="nav2"></div></a>
<a href="#info3"><div id="nav3"></div></a>
<a href="#info4"><div id="nav4"></div></a>


<div id="info1" class="appear">
 <div class="triangle1"></div>
 <div class="triangle2"></div>
 <div class="box">
 <h1>Mina Han</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 </div>
</div>

<div id="info2" class="appear">
 <div class="triangle1"></div>
 <div class="triangle2"></div>
 <div class="box">
 <h1>Stats</h1>
 Name:<div class="r">Mina Han</div><br>
 Race:<div class="r">Human</div><br>
 Gender:<div class="r">Female</div><br>
 Age:<div class="r">Twenty-one</div><br>
 <br>
 Height:<div class="r">5'5"</div><br>
 Weight:<div class="r">125 lbs</div><br>
 Eyes:<div class="r">Onyx</div><br>
 Hair:<div class="r">Raven Black</div><br>
 <br>
 Occupation:<div class="r">Battle Chef</div><br>
 Orientation:<div class="r">Bisexual</div><br>
 Marital:<div class="r">Single</div><br>
 Status:<div class="r">Relaxed</div><br>
 </div>
</div>

<div id="info3" class="appear">
 <div class="triangle1"></div>
 <div class="triangle2"></div>
 <div class="box">
 <h1>Header 1</h1>
 Something'll go here eventually!
 </div>
</div>

<div id="info4" class="appear">
 <div class="triangle1"></div>
 <div class="triangle2"></div>
 <div class="box">
 <h1>Out of Utensils</h1>
 <ol>
 <li>This layout is mine, please don't steal it.</li>
 <li>If it wasn't already obvious, this character is from a game called Battle Chef Brigade. Very fun, highly recommended.</li>
 <li>I'm in Eastern Standard Time, with a very screwy sleep schedule.</li>
 <li>Shitpost to multi-paragraph posts.</li>
 <li>I would really rather you interact with me in-room before DMing me.</li>
 </ol>
 </div>
</div>