Laine

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

    body{
        background: url(https://i.imgur.com/lby4gFI.png);
        background-size: cover;
        background-position: center;
    }

    #body{
        position: fixed;
        height: 85vh;
        width: 85vw;
        top: 7.5vh;
        left: 7.5vw;
        z-index: 1;
        background: radial-gradient(#2b0c11, #140709)
    }

    #title{
        position: fixed;
        top: 2vh;
        width: 70vw;
        left: 15vw;
        height: 15vh;
        z-index: 6;
        text-align: center;
    }

    t{
 font-family:'The Blacklist';
 font-size: 15vh;
 background: url(https://i.imgur.com/XIm109i.gif);
 background-size: cover;
 background-position: center;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 filter: drop-shadow(0 0 1vh rgb(88, 88, 88));
 }


    #ooc{
        position: fixed;
        z-index: 6;
        background: #070714;
        height: 50vh;
        width: 10vw;
        top: 30vh;
        left: 45vw;
        color: #fff;
        font-family: 'Whitney';
        font-size: 1.25vh;
        text-transform: uppercase;
        text-align: center;
        overflow: auto;
    }

    #nav1, #nav2, #nav3, #nav4{
        position: fixed;
        z-index: 6;
        height: 8vh;
        width: 8vh;
        transition: 0.3s;
    }

    #nav1{
        background: url(https://xivapi.com//cj/1/astrologian.png);
        background-size: cover;
        background-position: center;
        top: 22vh;
        left: 45vw;
    }
    #nav1:hover{filter: drop-shadow(0 0 .5vh #fff);}

    #nav2{
        background: url(https://xivapi.com//cj/1/dragoon.png);
        background-size: cover;
        background-position: center;
        top: 22vh;
        right: 45vw;
    }
    #nav2:hover{filter: drop-shadow(0 0 .5vh #fff);}

    #nav3{
        background: url(https://xivapi.com//cj/1/warrior.png);
        background-size: cover;
        background-position: center;
        bottom: 12vh;
        left: 45vw;
    }
    #nav3:hover{filter: drop-shadow(0 0 .5vh #fff);}

    #nav4{
        background: url(https://xivapi.com//cj/1/monk.png);
        background-size: cover;
        background-position: center;
        bottom: 12vh;
        right: 45vw;
    }
    #nav4:hover{filter: drop-shadow(0 0 .5vh #fff);}



    #img1, #img2, #img3, #img4{
        position: fixed;
        transition: 0.5s;
        z-index: 3;
        opacity: 0;
    }


    .appear{opacity: 0;z-index: 2;transition: 0.5s;}
    .appear:target{opacity: 1;z-index: 4;}

    #img1{left: 12vw;bottom: 7.5vh;}
    #img1 img{height: 85vh;}
    #info1:target~#img1{opacity: 1;z-index: 4;}
    #img2{right: 5vw;bottom: -2.5vh;}
    #img2 img{height: 105vh;}
    #info2:target~#img2{opacity: 1;z-index: 4;}
    #img3{left: 10vw;bottom: 7.5vh;}
    #img3 img{height: 80vh;}
    #info3:target~#img3{opacity: 1;z-index: 4;}
    #img4{right: 12vw;bottom: 7.5vh;}
    #img4 img{height: 90vh;}
    #info4:target~#img4{opacity: 1;z-index: 4;}


    #info1, #info2, #info3, #info4{
        position: fixed;
        padding: .5%;
        height: 50vh;
        width: 28vw;
        bottom: 19vh;
        background: #070714;
        transition: 0.5s;
        font-family: 'Whitney';
        font-size: 2vh;
        color: #fff;
        overflow: auto;
    }

    #info1, #info3{
        right: 12.5vw;
    }

    #info2, #info4{
        left: 12.5vw;
    }

    a{
        color: #fff;
        text-decoration: underline;
        transition: 0.3s;
    }

    a:hover{
        color: #8d8dc9;
        transition: 0.3s;
    }


    h1{
        font-weight: lighter;
        text-transform: uppercase;
        font-size: 4vh;
        color: #fff;
    }

    .r{float: right;}

    .friend{height: 10vh;width: 10vh;}


</style>
<div id="body"></div>
<div id="title"><t>Warrior of Darkness</t></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="ooc">
    <h1>OOC</h1>
    <li>Lorem ipsum dolor sit amet,</li>
    <li>consectetur adipiscing elit,</li>
    <li>sed do eiusmod tempor incididunt ut</li>
    <li>labore et dolore magna aliqua.</li>
    <li>Ut enim ad minim veniam,</li>
    <li>quis nostrud exercitation ullamco</li>
    <li>laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Duis aute irure dolor in reprehenderit</li>
    <li>in voluptate velit esse cillum</li>
    <li>dolore eu fugiat nulla pariatur.</li>
    <li>Excepteur sint occaecat cupidatat non proident,</li>
    <li>sunt in culpa qui officia deserunt</li>
    <li>mollit anim id est laborum.</li>
    <br><br><br>
    <a href="#reset">Reset</a>
</div>

<div id="info1" class="appear">
    <h1>Her Story</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet. Gravida neque convallis a cras. Viverra maecenas accumsan lacus vel facilisis volutpat est. Eget dolor morbi non arcu risus. Placerat in egestas erat imperdiet sed euismod nisi porta lorem. Condimentum id venenatis a condimentum. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Ut tellus elementum sagittis vitae et leo. Sollicitudin nibh sit amet commodo nulla. Ac turpis egestas integer eget. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Sagittis orci a scelerisque purus. Senectus et netus et malesuada fames ac turpis. Vitae tempus quam pellentesque nec nam aliquam sem. Habitant morbi tristique senectus et netus et malesuada. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim.</p>

    <p>Neque viverra justo nec ultrices dui sapien eget. Interdum consectetur libero id faucibus. Est placerat in egestas erat imperdiet sed euismod nisi. Aliquet bibendum enim facilisis gravida neque convallis a cras semper. Enim sit amet venenatis urna. Tincidunt lobortis feugiat vivamus at augue eget arcu. Nulla facilisi morbi tempus iaculis. Convallis convallis tellus id interdum velit. Nunc id cursus metus aliquam eleifend mi in nulla posuere. Ut tortor pretium viverra suspendisse. Integer vitae justo eget magna fermentum iaculis eu non. Cursus turpis massa tincidunt dui ut.</p>

    <p>Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Erat nam at lectus urna. Nam aliquam sem et tortor consequat id porta. In hac habitasse platea dictumst vestibulum rhoncus. Massa tincidunt dui ut ornare lectus sit amet est. Venenatis tellus in metus vulputate eu. Elementum sagittis vitae et leo duis ut diam. Non pulvinar neque laoreet suspendisse interdum consectetur. Felis eget nunc lobortis mattis aliquam faucibus purus in. Leo duis ut diam quam nulla. Tortor consequat id porta nibh venenatis cras sed felis. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Ultrices in iaculis nunc sed augue lacus viverra vitae congue. In nisl nisi scelerisque eu ultrices vitae. Ullamcorper malesuada proin libero nunc consequat interdum varius. Mattis vulputate enim nulla aliquet porttitor. Eget nullam non nisi est sit amet facilisis.</p>
</div>
<div id="img1"><img src="https://i.imgur.com/LFJn3a9.png"></div>
<div id="info2" class="appear">
    <h1>Her Stats</h1>
    Name<div class="r">Stat</div><br>
    Name<div class="r">Stat</div><br>
    Name<div class="r">Stat</div><br>
    Name<div class="r">Stat</div><br>
    <br>
    Name<div class="r">Stat</div><br>
    Name<div class="r">Stat</div><br>
    Name<div class="r">Stat</div><br>
    Name<div class="r">Stat</div><br>
    <br>
    Name<div class="r">Stat</div><br>
    Name<div class="r">Stat</div><br>
    Name<div class="r">Stat</div><br>
    Name<div class="r">Stat</div><br>

</div>
<div id="img2"><img src="https://i.imgur.com/NHVqSzu.png"></div>
<div id="info3" class="appear">
    <h1>Her Notes/Headcanons</h1>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>
<div id="img3"><img src="https://i.imgur.com/360LmTQ.png"></div>
<div id="info4" class="appear">
    <h1>Her Friends</h1>
    <img class="friend" src="FRIEND'S ICON HERE" title="Put some shiet here">
    <img class="friend" src="FRIEND'S ICON HERE" title="Put some shiet here">
    <img class="friend" src="FRIEND'S ICON HERE" title="Put some shiet here">
    <img class="friend" src="FRIEND'S ICON HERE" title="Put some shiet here">
    <img class="friend" src="FRIEND'S ICON HERE" title="Put some shiet here">
    <img class="friend" src="FRIEND'S ICON HERE" title="Put some shiet here">
    <img class="friend" src="FRIEND'S ICON HERE" title="Put some shiet here">
    <img class="friend" src="FRIEND'S ICON HERE" title="Put some shiet here"></div>
<div id="img4"><img src="https://i.imgur.com/Q5ozUMJ.png"></div>