Hekate

<!DOCTYPE html>
<body>

<style type="text/css">

@import url(https://fonts.googleapis.com/css?family=Indie+Flower|Pacifico|Shadows+Into+Light|Dancing+Script|Architects+Daughter|Kaushan+Script|Gloria+Hallelujah|Satisfy|Courgette|Handlee|Rock+Salt|Cookie|Shadows+Into+Light+Two|Tangerine|Pinyon+Script|Great+Vibes|Bad+Script|Marck+Script|Damion|Niconne|Alex+Brush|Yellowtail|Nothing+You+Could+Do|Kalam|Sacramento|Homemade+Apple|Calligraffitti|Just+Another+Hand|Waiting+for+the+Sunrise|Allura|Rancho|Crafty+Girls|Reenie+Beanie|Parisienne|Rochester|Leckerli+One|Grand+Hotel|Merienda+One|Italianno|Montez|Petit+Formal+Script|Give+You+Glory|Delius|Mr+Dafoe|The+Girl+Next+Door|Arizonia|La+Belle+Aurore|Qwigley|Norican|Euphoria+Script|Dawning+of+a+New+Day|Bilbo+Swash+Caps|Meddon|Fondamento|Clicker+Script|Aladin|Delius+Swash+Caps|Rouge+Script|Engagement|Redressed|Aref+Ruqaa);


html, body {
background: #f2f2f2;
background-image:url("");
background-size:400px;
background-repeat:no-repeat;
background-position:center bottom;
}

::-webkit-scrollbar-button:vertical:{
background-color: #000000;}

::-webkit-scrollbar-thumb:vertical {
background-color:#000000;
height:150px;}

::-webkit-scrollbar-thumb:horizontal {
background-color:#transparent;
height:60px;}


::-webkit-scrollbar {
height:60px;
width:5px;
background-color:#transparent;}

#image {
width: 330px;
margin: -5px;
border: none;
height: 650px;
background-color:transparent;
position: fixed;
right: 5%;;
top: 0%;
background-image:url("http://i.picpar.com/YREc.png");
background-repeat:no-repeat;
background-position: bottom;
background-size: 90%;
animation: bounce 3s infinite;
-webkit-animation: bounce 3s infinite;
-o-animation: bounce 3s infinite;
image-shadow: 0 0 25px #CC20FF;
}

@keyframes bounce{
 0% {top: 0px;}
 50% {top: 10px;}
 100% {top: 0px;}}

@-webkit-keyframes bounce {
 0% {top: 0px;}
 50% {top: 10px;}
 100% {top: 0px;}}

.image img{ image-shadow: 0 0 25px #CC20FF;}


#image1 {
width: 250px;
margin: 0px;
border: none;
height: 350px;
background-color:transparent;
position: absolute;
left: -20%;
top: -25%;
background-image:url("http://i.picpar.com/KREc.png");
background-repeat:no-repeat;
background-position: top left;
background-size: 100%;
}

#image2 {
width: 250px;
margin: 0px;
border: none;
height: 350px;
background-color:transparent;
position: absolute;
right: -20%;
bottom: -25%;
background-image:url("http://i.picpar.com/MREc.png");
background-repeat:no-repeat;
background-position: bottom right;
background-size: 100%;
}

#name {
z-index:15;
position: absolute;
left: 15%;
top: 11%;
margin: auto;
background: #transparent;
width: 55vw;
height: 100px;
font-family: Great Vibes;
font-size: 43px;
background: url(https://i.giphy.com/media/2C8Kf24dnrYNW/giphy.webp) -20px -20px repeat;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display:block;
text-align: center;
letter-spacing: 1px;
-webkit-transition:opacity 2s linear;
line-height:3.6vw;
}

#nameunder{
z-index:15;
position: absolute;
left: 15%;
top: 11%;
margin: auto;
background: #transparent;
width: 55vw;
height: 100px;
font-family: Great Vibes;
font-size: 43px;
-webkit-text-fill-color: transparent;
text-transform: none;
-webkit-background-clip: text;
display:block;
text-shadow: -1px 0 #def5ff, 0 1px #def5ff,1px 0 #def5ff, 0 -1px #def5ff;
text-align: center;
letter-spacing: 1px;
-webkit-transition:opacity 2s linear;
line-height:3.6vw;
}

#content {
background-color:transparent;
width: 500px;
height: 400px;
margin:auto;
position: absolute;
left: 20%;
bottom: 20%;
border: #000 solid 1px;
z-index:1;
}

#nav {
background-color: transparent;
width: 25px;
height:45px;
margin:auto;
position: absolute;
left: 17%;
top: 55%;
text-align:right;
z-index:1;
}

.header{
position:absolute;
bottom:20px;
right:0px;
width:900px;
background:#transparent;
height:50px;
overflow:hidden;
font-family: Impact;
font-size:35px;
font-weight:lighter;
font-style:none;
color:#2e2c4f;
letter-spacing: 1px;
text-transform:none;
text-align:center;
}

.h1 {
 font-family: Arial;
 font-size: 25px;
 color:#999999;
 letter-spacing:1px;
 word-spacing:-1px;
 text-decoration:none!important;
}

#nav a, #nav a:link, #nav a:visited {
display:inline-block;
background: #000;
color: #000;
height: 20px;
width:20px;
margin: 3px;
border-radius: 5px;
}

#nav a:active, #nav a:hover {
display:inline-block;
height: 20px;
width:20px;
text-decoration:none;
background: #999;
color: #999;
}

.font {
font-family: Arial;
font-size: 8px;
font-weight:none;
font-style:none;
color:#999999;
letter-spacing: 2px;
text-transform:none;
text-align:center;
}

i{color: #75478A;}
b{color: #553672;}
a{color: #415091;}

</style>

<div id="nameunder">Hekate The Goddess</div><div id="name">Hekate The Goddess</div>


<div id="nav">
<a href="#one">1</a>
<a href="#two">2</a>
<a href="#three">3</a>
<a href="#four">4</a>
<a href="#five">5</a>
</div>

<div id="content">

<div id="image1"></div>
<div id="image2"></div>


<div style="width: 400px; height: 177px; overflow-y: hidden;">

<a name="one"></a>
<div style="width: 400px; height: 177px; overflow: auto;" align="center">

</div>

<a name="two"></a>
<div style="width: 400px; height: 177px; overflow: auto;" align="center">

</div>

<a name="three"></a>
<div style="width: 400px; height: 177px; overflow: auto;" align="center">

</div>

<a name="four"></a>
<div style="width: 400px; height: 177px; overflow: auto;" align="center">

</div>

<a name="five"></a>
<div style="width: 400px; height: 177px; overflow: auto;" align="center">


</div>
</div>
</div>

<div id="image"></div>

</body>
</html>