Scion Shtola

<style>

 @import url('https://www.themonster.xyz/styles/fancy-fonts.css');
 @import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC&family=Harmattan&display=swap');
 ::-webkit-scrollbar{width:0.5vh;height:0.1vh;}
 ::-webkit-scrollbar-track{border-radius:0;background:transparent;}
 ::-webkit-scrollbar-thumb{border-radius:0;background:transparent;}
    body{
    background: #000000;
    }

    #image1, #image2{
    position: fixed;
    top: 0vh;
    transition: 2s;
    }
    #image1{left: 0vw;}
    #image2{right: 0vw;}
    body:hover #image2{opacity: 0;}

    #image1 img{height: 100vh;}
    #image2 img{height: 100vh;}


    #title{
        position: fixed;
        z-index: 5;
        opacity: 0;
        height: 15vh;
        width: 50vw;
        top: 17vh;
        right: 10vw;
        font-family: 'Signature';
        font-size: 17vh;
        color: #fff;
        transition: 1s;
        text-align: center;
    }

    body:hover #title{
        transition-delay: 2.25s;
        opacity: 1;
    }


    #info{
        position: fixed;
        opacity: 0;
        background: #200a36;
        top: 32vh;
        right: 10vw;
        width: 55vw;
        height: 45vh;
        transition: 1s;
    }

    body:hover #info{
        transition-delay: 2.25s;
        opacity: 1;
    }


    #img1, #img2, #img3{
        position: absolute;
        height: 42vh;
        width: 3vw;
        top: 1.5vh;
    }

    #img1{
        left: 1vw;
        background: url(https://i.imgur.com/xe2veID.png);
        background-size: cover;
        background-position: center;
    }

    #img2{
        left: 5vw;
        background: url(https://i.imgur.com/mkoXxDQ.png);
        background-size: cover;
        background-position: center;
    }

    #img3{
        left: 9vw;
        background: url(https://i.imgur.com/mWQGFDX.png);
        background-size: cover;
        background-position: center;
    }


    #nav1, #nav2, #nav3{
        position: absolute;
        opacity: 0;
        height: 42vh;
        width: 3vw;
        top: 1.5vh;
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba( 0, 0, 0, 0.5));
        transition: 0.3s;
    }
    #nav1{left: 1vw;}
    #nav1:hover{opacity: 1;}
    #nav2{left: 5vw;}
    #nav2:hover{opacity: 1;}
    #nav3{left: 9vw;}
    #nav3:hover{opacity: 1;}


    #ooc, #infotabs{
        position: absolute;
        background: #1a1321;
        padding: 1%;
        height: 40vh;
        top: 1.5vh;
        width: 18.5vw;
        font-family: 'Alegreya Sans SC';
        font-size: 1.75vh;
        color: #fff;
        overflow: auto;
    }
    #ooc{right: 1vw;}
    #infotabs{right: 21.5vw;}

    h1{
        font-family: 'Friz Quadrata';
        font-size: 4vh;
        font-weight: lighter;
        text-align: center;
        border-bottom: .25vh #fff solid;
    }

</style>


<div id="image1"><img src="https://i.imgur.com/TBBdLXg.jpg"></div>
<div id="image2"><img src="https://i.imgur.com/hIzpOiU.png"></div>

<div id="title">The Scion</div>
<div id="info">
    <div id="img1"></div>
    <div id="img2"></div>
    <div id="img3"></div>
    <a href="#one"><div id="nav1"></div></a>
    <a href="#two"><div id="nav2"></div></a>
    <a href="#three"><div id="nav3"></div></a>


    <div id="ooc">
        <h1>Out of Character</h1>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <div id="infotabs">
    <div style="height: 100%; overflow-y: hidden;">
    <a name="one"></a>
    <div style="width:100%; height: 100%; overflow: auto; " text-align="center">
     <h1>Y'shtola Rhul</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Dictum non consectetur a erat nam at lectus urna duis. Mi sit amet mauris commodo. Sed risus ultricies tristique nulla aliquet enim tortor. Egestas maecenas pharetra convallis posuere morbi leo urna. Enim diam vulputate ut pharetra sit. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Egestas sed sed risus pretium quam. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. Nisi vitae suscipit tellus mauris a diam maecenas. Faucibus scelerisque eleifend donec pretium. Congue eu consequat ac felis donec. Et netus et malesuada fames ac turpis egestas integer. Cursus mattis molestie a iaculis at erat pellentesque adipiscing. Id consectetur purus ut faucibus pulvinar elementum. Bibendum arcu vitae elementum curabitur vitae nunc. Accumsan sit amet nulla facilisi morbi tempus iaculis urna id. Fermentum leo vel orci porta non pulvinar neque laoreet. Proin sagittis nisl rhoncus mattis.</p>

    <p>Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Aliquam faucibus purus in massa tempor nec. Tincidunt augue interdum velit euismod. Mattis enim ut tellus elementum sagittis vitae et leo. Porttitor leo a diam sollicitudin tempor id eu. Purus gravida quis blandit turpis cursus in. Condimentum mattis pellentesque id nibh tortor id aliquet lectus. Tristique sollicitudin nibh sit amet. Nibh mauris cursus mattis molestie. Nulla facilisi nullam vehicula ipsum.</p>
    </div>


     <a name="two"></a>
     <div style="width:100%; height: 100%; overflow: auto; " text-align="center">
     <h1>Stats</h1>
     <u>Name:</u> Y'shtola Rhul<br>
     <u>Age:</u> 23 years<br>
     <u>Gender:</u> Female<br>
     <u>Race:</u> Miqo'te, Seeker of the Sun<br>
     <br>
     <u>Height:</u> 5'1"<br>
     <u>Weight:</u> 120 lbs.<br>
     <u>Eyes:</u> Silver<br>
     <u>Hair:</u> White<br>
     <br>
     <u>Occupation:</u> Scion of the Seventh Dawn/Sorceress for the Night's Blessed<br>
     <u>Orientation:</u> Bisexual<br>
     <u>Marital:</u> Singular<br>
     <u>Status:</u> On Standby
     </div>

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

     <li> </li>
     <li> </li>
     <li> </li>
     <li> </li>
     <li> </li>
     <li> </li>

     </div>
    </div>


</div>