Astolfo

<style>
@import url('https://fonts.googleapis.com/css?family=Bonbon');
@import url('https://fonts.googleapis.com/css?family=Kalam');
@import url('https://fonts.googleapis.com/css?family=Kodchasan');


/*
PLEASE DO NOT REMOVE THIS CREDIT
DO NOT REMOVE THE CREDIT AT THE BOTTOM EITHER!
CREATOR: GREEN BEAN.
Please do not use this code as a base or any other code without asking Green Bean first.

*/



 body {

background-color: #636363;
background-image: url("https://i.imgur.com/tHE5NeM.png");
 background-position: center;
    background-repeat: no-repeat;
    background-size: contain,cover;
margin: 0px;
overflow: hidden;
}



  .shield{
margin:auto;
width:340px;
height:230px;
overflow:hidden;
}

  .lunar{
width:340px;
height: 230px;
overflow:auto;
}

  .griffon{
color: #826548;
font-size:14px;
text-align:justify;
line-height:14px;
font-family: 'Kodchasan', cursive;
letter-spacing:0.3px;
margin: 5px;
}


  b{
color: #130f10;
font-weight:bold;
letter-spacing: 1px;
}

  i{
color:#ffffff;
font-style:italic;
}

  u{
font-style:italic;
text-decoration:noneunderline;
}

  a:active, a:link, a:visited{
color:#fff;
text-decoration:none;
}

  a:hover{
cursor:all-scroll;
color:#af9775;
}

  h1 {
font-family: 'Kalam',cursive;
size: 40px;
text-align:center;
letter-spacing: 7px;
color:#e85ae3;
}
::-webkit-scrollbar {width: 3px;}
::-webkit-scrollbar-thumb:vertical {
height: 10px;background-color: #130f10;}
::-webkit-scrollbar-thumb:horizontal {
height: 10px;background-color: #D98878;border: 0px ;width: 15px;}

 .shimmer{
position: absolute;
overflow: hidden;
top: 20%;
left: 35%;
}


  #circle{
width: 430px;
height: 430px;
background: #transparent;
background-image: url("https://i.imgur.com/en2DDUC.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: bottom right;
z-index: 4;
}



#sparkle {
pointer-events:none;
position: absolute;
bottom: 0%;
right: 15%;
width: 309px;
height: 550px;
background: url(https://i.imgur.com/FD4rffu.png);
background-size: 100%;
background-repeat: no-repeat;
z-index: 5;}





  #credit {
position: fixed;
bottom: 20px;
right: 0px;
background-color: transparent;
}


.title{
position:absolute;
z-index:4;
height:14%;
width:35%;
bottom:5%;
left:10%;
font-family: 'Bonbon', cursive;
font-size: 4.5vw;
color:#FFF;
background-image:url(https://i.imgur.com/nPfj5D8.gif);
background-size:100%;
background-repeat:no-repeat;
background-position:center;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: #ff82b8;
-ms-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}



.navi1{
 float: left;
 -webkit-animation-name: Floatingx;
 -webkit-animation-duration: 4s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;
 -moz-animation-name: Floating;
 -moz-animation-duration: 3s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: ease-in-out;
 margin-left: 5%;
 margin-bottom: 2%;
 z-index:57;
}
.navi2{
 float: left;
 -webkit-animation-name: Floatingx;
 -webkit-animation-duration: 1s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;
 -moz-animation-name: Floating;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: ease-in-out;
 margin-left: 4%;
 margin-bottom:5%;
 z-index:500;
}

.navi3{
 float: left;
 -webkit-animation-name: Floatingx;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;
 -moz-animation-name: Floating;
 -moz-animation-duration: 5s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: ease-in-out;
 margin-left: 6%;
 margin-bottom:4%;
 z-index:503;
}


.floating3{
 float: right;
 -webkit-animation-name: Floatingx;
 -webkit-animation-duration: 4s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;
 -moz-animation-name: Floating;
 -moz-animation-duration: 6s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: ease-in-out;
 margin-right: 1%;
 margin-top: 40%;
 z-index:343;

}

 .navi4{
 float: left;
 -webkit-animation-name: Floatingx;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;
 -moz-animation-name: Floating;
 -moz-animation-duration: 6s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: ease-in-out;
 margin-left: 6%;
 margin-bottom:4%;
 z-index:503;

}

@-webkit-keyframes Floatingx{
 from {-webkit-transform:translate(0, 0px);}
 65% {-webkit-transform:translate(0, 15px);}
 to {-webkit-transform: translate(0, -0px); }
}

@-moz-keyframes Floating{
 from {-moz-transform:translate(0, 0px);}
 65% {-moz-transform:translate(0, 15px);}
 to {-moz-transform: translate(0, -0px);}
}


 .navi{
position: absolute;
top: 20%;
left: 15%;
width: 400px;
z-index:99;
overflow:hidden;
}

</style>
<body>

<div id="container">

<div class="title">
✾Astolfo✾
</div>
<div id="sparkle" class="floating3"></div>

<div id="circle" class="shimmer">

<br><br><br>
<br><br><div class="shield">
<div id="we" class="lunar"><div class="griffon">

<h1>tab1</h1>
<font style="float:left"><b>Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>Stat</b></font>
<font style="float:right">Stat</font><br>


</div></div>

<div id="all" class="lunar"><div class="griffon">
<h1>tab2</h1>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Integer in ipsum non tortor aliquet malesuada.</li>
<li>Curabitur tincidunt nunc ut metus accumsan tempor ac vel odio.</li>
<li>Praesent malesuada eros ac erat sollicitudin, sit amet sodales felis scelerisque.</li>
<li>Donec id libero pretium neque facilisis dictum.</li>
<li>Suspendisse sagittis justo vitae maximus pretium.</li>
<li>Sed tempus ligula eget tortor aliquam, eu pretium nibh eleifend.</li>
<li>Etiam viverra neque convallis hendrerit venenatis.</li>
<li>Etiam suscipit turpis quis ornare porta.</lil>
<li>Nullam fringilla metus sed pretium ornare.</li>
<li>Morbi faucibus nibh vel nisl tincidunt, at maximus urna aliquam.</li>
<li>Etiam vel nisl sed risus laoreet mattis.</li></div></div>
<div id="float" class="lunar"><div class="griffon"><h1>tab3</h1><br>
styss</div></div>
<div id="down" class="lunar"><div class="griffon">
<h1>stuff</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat ligula ac odio laoreet congue. Ut tortor dolor, elementum sed magna eget, condimentum lobortis sapien. Phasellus fringilla, mi sit amet fermentum bibendum, turpis augue ultricies felis, ac ullamcorper urna leo nec justo. In auctor blandit orci, nec bibendum tortor molestie non. Morbi orci diam, semper quis enim eget, euismod consequat massa. Nulla nisl metus, commodo sit amet nisl et, feugiat varius purus. Pellentesque at suscipit urna. Donec rhoncus quam ligula, vitae egestas nisi consectetur eget. Aenean finibus sed odio sit amet tincidunt. Vestibulum eu justo velit. Fusce dictum, eros non vulputate finibus, est elit semper enim, et eleifend elit sem sed tortor. Fusce vulputate ut libero commodo porttitor. Ut quis tincidunt ligula. Suspendisse ligula sapien, lobortis non tempus vitae, auctor et ex. In eu augue ullamcorper, pellentesque diam id, tincidunt turpis. Quisque ac diam suscipit, tempor tortor eget, vehicula erat.</p>

<p>Nulla facilisi. Sed tristique, ante eu ullamcorper commodo, purus nibh placerat turpis, nec dignissim eros diam vel leo. Quisque nec lorem id magna sagittis laoreet. Nunc gravida lorem purus. Suspendisse bibendum, nisi eget mattis imperdiet, nibh justo posuere turpis, non congue nisi leo eu augue. Maecenas ante mi, porttitor ut ligula ac, tempus molestie tellus. In vel consectetur ex. Nam dui lectus, dignissim in tincidunt a, consequat in enim. Vivamus at placerat lorem. Donec ornare, justo ut tempus dapibus, nibh elit bibendum lectus, id dignissim est sapien at purus. Suspendisse lacinia sem elit. Praesent sed augue purus. Suspendisse volutpat nulla quis euismod ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in sodales justo.</p>

<p>Morbi feugiat faucibus hendrerit. Curabitur odio felis, vulputate nec dictum eget, tincidunt vitae neque. Duis sed velit a erat posuere interdum vitae non risus. Nulla facilisi. Duis scelerisque ac orci non sollicitudin. Aliquam pellentesque mattis magna eget iaculis. Aliquam mollis semper quam non porta. Quisque auctor gravida mi nec lobortis. Sed ac ligula quis dolor lobortis mollis at a sapien. In tristique eget orci vel rhoncus. Proin augue arcu, mollis vitae nisi in, placerat consequat sapien. Curabitur rutrum mi id urna vulputate malesuada. Etiam dictum augue urna, eu cursus leo semper ut. Mauris blandit, turpis et pulvinar mollis, ante justo feugiat ligula, et pulvinar risus diam quis tellus. Curabitur mi tellus, interdum semper cursus in, tincidunt ac mauris.</p>
 </div></div>


<div id="here" class="lunar"><div class="griffon">
<h1>Rules</h1>
<b>01.</b>2 <Br>
<b>02.</b>1<br>
<b>03.</b>1<br>
<b>04.</b>1<br>
<b>05.</b> <br>
<b>06.</b> 1<br>
<b>07.</b> 1<br>


</div></div>
</div></div>
<div class="navi">
<a href="#we" class="navi1"><img src="https://i.imgur.com/OKD9shN.png" width="250px"></a>
 <a href="#all" class="navi2"><font size="24">✧</font></a><bR>
<a href="#float" class="navi3"><font size="24">✦</font></a>
 <a href="#down" class="navi2"><font size="24">✧</font></a>
<a href="#here" class="navi4"><font size="24">✦</font></a></div>


<div id="credit">
<a target="_blank" href="https://roleplay.chat/profile.php?user=Green+Bean" target="_blank" title="Code was created by Green Bean. Do NOT touch, this Please! If you want a code just mail Green Bean directly. She will gladly hook you up. With some freebies or cheapo comissions."><img src="https://i.imgur.com/uP9E5Pz.png" height="90px"></a></div></body>





</div>