crystl snw

<!DOCTYPE html>

<head>
<title>crystal snow</title>
</head>

<style>
* {
cursor:url('https://i.imgur.com/lpLAo58.png'), auto;
}
a, a:hover, a:click {
cursor:url('https://i.imgur.com/lpLAo58.png'), auto;
}

body {
background: url('https://i.imgur.com/cHnGCF9.png') no-repeat center center fixed;
background-size: cover;
}

div.icon {
width: 150px;
height:150px;
ovreflow:hidden;
position: relative;
text-align: center;
float:left;
margin-top: 100px;
margin-left: 100px;
}
img.wutimg {
  display: block;
  position: relative;
height: 150px;
width:150px;
border-radius:100%;
border-width: 3px;
border-style: solid;
border-color: white;
}

div.overlay {
position: absolute;
height:150px;
width:150px;
margin-top:-153px;
margin-left: 3px;
border-radius: 100%;
opacity: 0;
background-color: rgba(0, 0, 0, 0.19);
transition: opacity .35s;
-webkit-transition: opacity .35s;
}
div.overlay:hover {
opacity: 1;
}
p.name {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
text-transform: uppercase;
font-family: 'Sunflower', sans-serif;

color:white;
font-size: 12px;
}
img.arrow {
margin-left:-100px;
margin-top: 270px;
transition: margin-top .35s;
-webkit-transition: margin-top .35s;
}
img.arrow:click {
margin-top: 350px;
}

.vertical-menu {
    width: 150px;
margin-left: 100px;
margin-top: -5px;
}

.vertical-menu a {
    background-color: #FFF;
    color: black;
    display: block; /* Make the links appear below each other */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
margin-top: 5px;
border-style: solid;
border-width: 3px;
border-color: white;
transition: all .7s;
-webkit-transition: all .7s;
text-align: center;
text-transform: uppercase;
font-size: 12px;
font-family: 'Quicksand', sans-serif;
font-weight:light;
letter-spacing: 3px;
}

.vertical-menu a:hover {
    background-color: rgba(255, 255, 255, 0.3);
   color: white;
}
.vertical-menu a.active {
    background-color: transparent;
    color: white;
}
div.quote {
float:left;
margin-left: 350px;
margin-top:-450px;

}
p.quote {
color:white;
font-family: 'Nothing You Could Do', cursive;
font-size:40px;
}
div.story {
background-color: white;
color:black;
font-family: 'Quicksand', sans-serif;
font-size: 12px;
width: 750px;
height: 12px;
padding: 10px;
float:left;
margin-top: -40px;
}
div.box1 {
border-style: solid;
border-color: white;
border-width: 3px;
overflow: hidden;
width:367px;
height:310px;
}
img.aesthetic {
position: 0 0 0 -10;
height: 310px;
width: 386px;
}
div.titlebox {
border-style: solid;
border-color: white;
background-color: transparent;
padding:12px;
width:359px;
height: 20px;
font-family: 'Quicksand', sans-serif;
color: white;
text-transform: uppercase;
font-size: 20px;
text-align: center;
letter-spacing: 3px;
float:left;
margin-left: 381px;
margin-top: -316px;
border-width: 3px 3px 0px 3px;
}
div.letstalk {
background-color:white;
border-style:solid;
border-color: white;
border-width: 3px;
padding: 12px;
width: 359px;
height: 240px;
overflow:hidden;
margin-left: 381px;
margin-top:-270px;
}
div.information {
font-family: 'Oxygen', sans-serif;
font-size: 14px;
line-height:13px;
color:black;
overflow:auto;
padding: 0px 25px 0px 0px;
height:240px;
width: 359px;
}
</style>

<link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nothing+You+Could+Do" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">


<body>
<div class="icon">
<img src="https://i.imgur.com/ZKiFeK4.png" class="wutimg"/>
<div class="overlay">
<p class="name">CRYSTAL<br>SNOW
</p>
</div>
</div>

<img src="https://i.imgur.com/F9Fir6j.png" class="arrow" width="50" height="50" />

<div class="vertical-menu">
  <a href="#" class="active">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="https://www.marasites.com/?name=Kagayama">Credits</a>
</div>

<div class="quote"><p class="quote">The world moves faster than we thought</p>
<div class="story">"Tell me a story," she whispered. To them, they had all the time in the world for each other.</div>
<div class="box1"><img src="https://i.imgur.com/y9WHzcg.png" class="aesthetic" /></div>
<div class="titlebox">TALK</div>
<div class="letstalk">
<div class="information">The sun beams upon the deep valley, it burns also upon the heavy masses of snow; so that after the lapse of years, they melt into shining ice-blocks, and become rolling avalanches and heaped-up glaciers.<br><br>
Far around the peaks of the mountains, the clouds often hang like heavy curtains of smoke; whilst down in the valley, where the many brown wooden houses lie scattered about, a sun-beam shines, and here and there brings out a tiny spot, in radiant green, as though it were transparent. The water roars, froths and foams below, the water hums and tinkles above, and it looks as if silver ribbons were fluttering over the cliffs.<br><br>
On each side of the way, as one ascends, are wooden houses; each house has a little potato-garden, and that is a necessity, for in the door-way are many little mouths. There are plenty of children, and they can consume abundance of food; they rush out of the houses, and throng about the travellers, come they on foot or in carriage. The whole horde of children traffic; the little ones offer prettily carved wooden houses, for sale, similar to those they build on the mountains. Rain or shine, the children assemble with their wares.
</div>
</div>

</body>

</html>