Astolfo

<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: linear-gradient(-35deg, #678460, #A2B59F, #678460);
    overflow: hidden;
    }

    #background{
     position: fixed;
    background: url(https://i.imgur.com/Bz0wMdf.jpg);
    background-size: cover;
    background-position: center;
    z-index: -1;
    filter: blur(15px);
    height: 110vh;
    width: 110vw;
    top: -5vh;
    left: -5vw;
    }


    #nav1, #nav2, #nav3, #nav4, #nav5, #nav6{
     position: fixed;
     box-shadow: 0 0 3vh #000;
     height: 70vh;
     width: 5vh;
     bottom: 5vh;
     transition: left .75s, width .75s, z-index .75s .75s;
    }

    #nav1{
     background: url(https://i.imgur.com/ZvkqM5U.png);
     background-position: center;
     background-size: auto 70vh;
     left: 42vw;
     z-index: 4;
    }

    #nav1:hover{z-index: 10;width: 36.25vh;transition: left .75s, width .75s, z-index .75s -.75s;}

    #nav2{
     background: url(https://i.imgur.com/R84dAPy.png);
     background-position: center;
     background-size: auto 70vh;
     left: 45vw;
     z-index: 5;
    }

    #nav2:hover{z-index: 10;left: 42vw;width: 36.25vh;transition: left .75s, width .75s, z-index .75s -.75s;}

    #nav3{
     background: url(https://i.imgur.com/stdTmyH.png);
     background-position: center;
     background-size: auto 70vh;
     left: 48vw;
     z-index: 6;
    }

    #nav3:hover{z-index: 10;left: 42vw;width: 36.25vh;transition: left .75s, width .75s, z-index .75s -.75s;}

    #nav4{
     background: url(https://i.imgur.com/WYqCtLB.png);
     background-position: center;
     background-size: auto 70vh;
     left: 51vw;
     z-index: 7;
    }

    #nav4:hover{z-index: 10;left: 42vw;width: 36.25vh;transition: left .75s, width .75s, z-index .75s -.75s;}

    #nav5{
     background: url(https://i.imgur.com/u7va3ec.png);
     background-position: center;
     background-size: auto 70vh;
     left: 54vw;
     z-index: 8;
    }

    #nav5:hover{z-index: 10;left: 42vw;width: 36.25vh;transition: left .75s, width .75s, z-index .75s -.75s;}

    #nav6{
     background: url(https://i.imgur.com/brv0x0B.jpg);
     background-position: center;
     background-size: auto 70vh;
     left: 57vw;
     z-index: 9;
    }

    #nav6:hover{z-index: 10;left: 42vw;width: 36.25vh;transition: left .75s, width .75s, z-index .75s -.75s;}


    .info{
     position: absolute;
     padding: .5%;
     height: 88%;
     width: 88%;
     bottom: 5%;
     left: 5%;
     background: rgba(0, 0, 0, 0.5);
     opacity: 0;
     transition: opacity 0.75s;
     overflow: auto;
     font-family: 'Helvetica';
     font-size: 1.75vh;
     color: #fff;
     transition: opacity 0.75s;
    }

    .info:hover{opacity: 1;transition: opacity 0.75s 0.75s;}

    .r{float: right;}

    #title{
     position: fixed;
     z-index: 11;
     text-align: center;
     padding: 1%;
     height: 20vh;
     width: 50vw;
     top: 5vh;
     right: 24vw;
     }



     t{
     font-family:'Graceland';
     font-size: 18vh;
     background: url(https://i.imgur.com/s3zX0Pb.gif);
     background-size: cover;
     background-position: center;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     filter: drop-shadow(0 0 1vh #f0cbff);
     }

     h1{
     font-family: 'Athena';
     font-size: 8vh;
     font-weight: lighter;
     }

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

    a:hover{
    transition: 0.4s;
    color:#c74de6;
    }

    </style>

    <div id="background"></div>
    <div id="title"><t>Astolfo</t></div>
    <div id="nav1"><div class="info">
     <center><h1>Paladin of Charlemagne</h1></center>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh tellus molestie nunc non blandit massa enim. Fringilla urna porttitor rhoncus dolor purus. Ut sem nulla pharetra diam sit. Arcu non odio euismod lacinia. Amet luctus venenatis lectus magna. Vestibulum lorem sed risus ultricies tristique nulla aliquet. Amet commodo nulla facilisi nullam vehicula ipsum. Massa id neque aliquam vestibulum morbi blandit cursus risus at. Massa tincidunt dui ut ornare lectus sit amet. Enim eu turpis egestas pretium aenean pharetra magna ac placerat.</p>

     <p>Sapien eget mi proin sed. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Sagittis orci a scelerisque purus semper eget. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Quis hendrerit dolor magna eget est. Tortor posuere ac ut consequat semper. Ornare lectus sit amet est placerat in egestas. Molestie ac feugiat sed lectus vestibulum. Lobortis elementum nibh tellus molestie nunc non blandit massa. Amet massa vitae tortor condimentum lacinia quis vel. Odio ut enim blandit volutpat maecenas. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Augue lacus viverra vitae congue eu consequat ac felis donec.</p>

     <p>At volutpat diam ut venenatis tellus in metus vulputate. Duis ultricies lacus sed turpis. Aliquam purus sit amet luctus venenatis lectus. Cras fermentum odio eu feugiat pretium nibh ipsum. Eget magna fermentum iaculis eu non diam phasellus. Ultrices eros in cursus turpis. Ornare arcu odio ut sem nulla. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Vestibulum mattis ullamcorper velit sed ullamcorper. Dapibus ultrices in iaculis nunc sed augue. Faucibus interdum posuere lorem ipsum dolor sit. Justo laoreet sit amet cursus sit amet dictum sit. Quam adipiscing vitae proin sagittis nisl. Volutpat lacus laoreet non curabitur gravida arcu. Nibh tortor id aliquet lectus proin nibh nisl condimentum id.</p>
    </div></div>


    <div id="nav2"><div class="info">

     <center><h1>Stats</h1></center>
     Name:<div class="r">Stat</div><br>
     Also Known As:<div class="r">Stat</div><br>
     Race:<div class="r">Stat</div><br>
     Gender:<div class="r">Stat</div><br>
     Origin:<div class="r">Stat</div><br>
     Master:<div class="r">Stat</div><br>
    <br>
     Height:<div class="r">Stat</div><br>
     Weight:<div class="r">Stat</div><br>
     Hair:<div class="r">Stat</div><br>
     Eyes:<div class="r">Stat</div><br>
    <br>
     Class:<div class="r">Stat</div><br>
     Likes:<div class="r">Stat</div><br>
     Dislikes:<div class="r">Stat</div><br>
     Orientation:<div class="r">Stat</div><br>
     Marital:<div class="r">Stat</div><br>
     Status:<div class="r">Stat</div><br>

    </div></div>


    <div id="nav3"><div class="info"></div></div>


    <div id="nav4"><div class="info"></div></div>


    <div id="nav5"><div class="info"></div></div>


    <div id="nav6"><div class="info">
     <h1>Out of Character</h1>
     <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li>Profile was made by <a href="https://roleplay.chat/profile.php?user=Archer+of+Red">Atalanta,</a> and is being used by Astolfo with her permission.</li>
    </div></div>