Axis Cat

<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: #1D140F   ;
}

#image{
    position: fixed;
    bottom: 20vh;
    right: 20vw;
    z-index: 5;
}

#image img{
    height: 60vh;
}


#box1, #box2, #info2, #info3, #info4, #info5{
    position: fixed;
    background: #221912;
    border: .5vh #000 solid;
    padding: .5%;
    font-family: 'Gotham';
    font-size: 1.75vh;
    color: #fff;
    overflow: auto;
}

#box1, #info2, #info3, #info4, #info5{
    top: 20vh;
    left: 38.5vw;
    z-index: 5;
    height: 26.25vh;
    width: 16.5vw;
}

#box2{
    bottom: 20vh;
    left: 20vw;
    height: 26.25vh;
    width: 35vw;
}

#nav1, #nav2, #nav3, #nav4, #nav5{
    position: fixed;
    padding: .5%;
    border: .5vh #000 solid;
    left: 20vw;
    height: 2.5vh;
    width: 16.5vw;
    transition: top .75s, height .75s, z-index .75s .75s;
}

#nav1{
    background: url(https://i.imgur.com/ee11Wnj.png);
    background-position: top center;
    background-size: cover;
    top: 20vh;
    z-index: 5;
}

#nav1:hover{
    height: 26.25vh;
    z-index: 10;
    transition: height .75s, z-index .75s -.75s
}


#nav2{
    background: url(https://i.imgur.com/eF0TXIt.jpg);
    background-position: top center;
    background-size: cover;
    top: 25.95vh;
    z-index: 6;
}

#nav2:hover{
    height: 26.25vh;
    top: 20vh;
    z-index: 10;
    transition: top .75s, height .75s, z-index .75s -.75s
}


#nav3{
    background: url(https://i.imgur.com/TVJ9PaK.jpg);
    background-position: top center;
    background-size: cover;
    top: 31.9vh;
    z-index: 7;
}

#nav3:hover{
    height: 26.25vh;
    top: 20vh;
    z-index: 10;
    transition: top .75s, height .75s, z-index .75s -.75s
}


#nav4{
    background: url(https://i.imgur.com/Zh4Yhun.jpg);
    background-position: center;
    background-size: cover;
    top: 37.85vh;
    z-index: 8;
}

#nav4:hover{
    height: 26.25vh;
    top: 20vh;
    z-index: 10;
    transition: top .75s, height .75s, z-index .75s -.75s
}


#nav5{
    background: url(https://i.imgur.com/xFD5Jsi.jpg);
    background-position: top center;
    background-size: cover;
    top: 43.8vh;
    z-index: 9;
}

#nav5:hover{
    height: 26.25vh;
    top: 20vh;
    z-index: 10;
    transition: top .75s, height .75s, z-index .75s -.75s
}


.navigation{
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    padding: 1%;
    height: 88%;
    width: 88%;
    top: 5%;
    left:5%;
    text-align: center;
    font-family: 'Black Nemesis';
    font-size: 7.5vh;
    color: #fff;
    transition: 0.5s;
}

.navigation:hover{
    opacity:1;
    transition: 0.5s;
}





.r{float:right;}

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


h1{
    font-family: 'Black Nemesis';
    font-size: 4vh;
    font-weight: lighter;
}

</style>

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

<div id="nav1"><a href="#info1"><div class="navigation"><br>Tab One</div></a></div>
<div id="nav2"><a href="#info2"><div class="navigation"><br>Tab Two</div></a></div>
<div id="nav3"><a href="#info3"><div class="navigation"><br>Tab Three</div></a></div>
<div id="nav4"><a href="#info4"><div class="navigation"><br>Tab Four</div></a></div>
<div id="nav5"><a href="#info5"><div class="navigation"><br>Tab Five</div></a></div>


<div id="box1">
    <h1>OOC</h1>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li>Layout built by <a href="https://roleplay.chat/profile.php?user=From+Shadows+Codes">From Shadows</a> for Axis Cat's use. Do not steal or appropriate.</li>
    </ol>
</div>

<div id="info2" class="appear"><h1>tab two</h1></div>
<div id="info3" class="appear"><h1>tab three</h1></div>
<div id="info4" class="appear"><h1>tab four</h1></div>
<div id="info5" class="appear"><h1>tab five</h1></div>



<div id="box2">
<h1>Header One</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>