p2 halsey

<!DOCTYPE html>

<head>
<title>halsey</title>
</head>

<style>
/*SELECTION COLOR*/
::selection {
background: #D9ABFF;
color:white;
}
::-moz-selection {
background: #D9ABFF;
color:white;
}

/* CURSOR */
* {
cursor:url('https://i.imgur.com/WIlDUzI.png'), auto;
}
a, a:hover, a:click {
cursor:url('https://i.imgur.com/WIlDUzI.png'), auto;
}

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

/* MENU */
.vertical-menu {
width: 150px;
margin-left: 100px;
margin-top: 15%;
}
.vertical-menu a {
color: white;
display: block;
padding: 12px;
text-decoration: none;
margin-top: 5px;
transition: all .7s;
-webkit-transition: all .7s;
text-align: center;
text-transform: uppercase;
font-size: 12px;
font-family: 'Montserrat', sans-serif;
font-weight:light;
letter-spacing: 3px;
}
.vertical-menu a:hover {
background-color: transparent;
color: white;
border-color: white;
background-position: -100% 0;
}
.vertical-menu a.active {
background-color: rgba(255, 171, 171, 0.53);
color: white;
border-style: solid;
border-width: 3px;
border-color: #FFFFFF;
}
.vertical-menu a.l1 {
background-image: linear-gradient(to right, transparent 50%, rgba(255, 218, 171, 0.53) 50%);
transition: background-position 1s, border-color 1s;
background-size: 200% 100%;
border-style: solid;
border-width: 3px;
border-color: #FFDAAB;
}
.vertical-menu a.l2 {
background-image: linear-gradient(to right, transparent 50%, rgba(221, 255, 171, 0.53) 50%);
transition: background-position 1s, border-color 1s;
background-size: 200% 100%;
border-style: solid;
border-width: 3px;
border-color: #DDFFAB;
}
.vertical-menu a.l3 {
background-image: linear-gradient(to right, transparent 50%, rgba(171, 228, 255, 0.53) 50%);
transition: background-position 1s, border-color 1s;
background-size: 200% 100%;
border-style: solid;
border-width: 3px;
border-color: #ABE4FF;
}
.vertical-menu a.l4 {
background-image: linear-gradient(to right, transparent 50%, rgba(217, 171, 255, 0.53) 50%);
transition: background-position 1s, border-color 1s;
background-size: 200% 100%;
border-style: solid;
border-width: 3px;
border-color: #D9ABFF;
}

/* CENTER */
div.middle {
margin-left: 400px;
margin-top: -410px;
height: 550px;
width: 550px;
}
p.quote {
font-family: 'Permanent Marker', cursive;
font-size: 40px;
color:white;
text-align:center;
text-shadow: 3px 0px 1px #FFABAB;
margin-top: -10px;
transition: text-shadow .35s;
-webkit-transition: text-shadow .35s;
}
p.quote:hover {
text-shadow: -3px 0px 1px #DDFFAB;
}
p.quote:active {
text-shadow:0px 0px 4px #ABE4FF;
}

/* CONTENT BOX */
div.box1 {
width:545px;
height:490px;
background-color: rgba(255, 255, 255, 1);
overflow:hidden;
float:left;
border-radius: 15px 15px 15px 15px;
margin-top:-36px;
box-shadow: 3px 0px 0px #FFDAAB, -3px 0px 0px #DDFFAB, 0px 3px 0px #ABE4FF, 0px -3px 0px #D9ABFF;
}
div.content1 {
overflow:auto;
padding:10px 40px 10px 10px;
height:455px;
width:533px;
margin-top:5px;
}
p.title1 {
text-align:center;
font-size:16px;
text-transform:uppercase;
color:#FFABAB;
font-family: 'Raleway', sans-serif;
margin-top:-3px;
border-style: solid;
width:100%;
border-width: 0px 0px 3px 0px;
border-color: #FFABAB;
}
p.bullet {
font-size: 13px;
color:#E59C9C;
font-family: 'Raleway', sans-serif;
line-height:14px;
text-align: justify;
}
</style>

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">


<body>

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

<div class="middle">
<p class="quote">Take me to the new world</p>
<div class="box1">
<div class="content1">
<p class="title1">title</p>
<p class="bullet">
1 :: There I feel that nothing can befall me in life,--no disgrace, no calamity, (leaving me my eyes,) which nature cannot repair.<br><br>
2 :: Standing on the bare ground,--my head bathed by the blithe air, and uplifted into infinite space,--all mean egotism vanishes.<br><br>
3 :: I become a transparent eye-ball; I am nothing; I see all; the currents of the Universal Being circulate through me; I am part or particle of God.<br><br>
4 :: The name of the nearest friend sounds then foreign and accidental: to be brothers, to be acquaintances,--master or servant, is then a trifle and a disturbance.<br><br>
5 :: I am the lover of uncontained and immortal beauty.<br><br>
6 :: In the wilderness, I find something more dear and connate than in streets or villages.<br><br>
7 :: In the tranquil landscape, and especially in the distant line of the horizon, man beholds somewhat as beautiful as his own nature.<br><br>
8 :: The greatest delight which the fields and woods minister, is the suggestion of an occult relation between man and the vegetable. I am not alone and unacknowledged.<br><br>
9 :: They nod to me, and I to them.<br><br>
10 :: The waving of the boughs in the storm, is new to me and old. It takes me by surprise, and yet is not unknown. Its effect is like that of a higher thought or a better emotion coming over me, when I deemed I was thinking justly or doing right.<br><br>
11 :: Yet it is certain that the power to produce this delight, does not reside in nature, but in man, or in a harmony of both.<br><br>
12 :: It is necessary to use these pleasures with great temperance. For, nature is not always tricked in holiday attire, but the same scene which yesterday breathed perfume and glittered as for the frolic of the nymphs, is overspread with melancholy today.<br><br>
13 :: Nature always wears the colors of the spirit. To a man laboring under calamity, the heat of his own fire hath sadness in it. Then, there is a kind of contempt of the landscape felt by him who has just lost by death a dear friend. The sky is less grand as it shuts down over less worth in the population.
</p>
</div>
</div>
</div>

</div>

</body>
<script type="text/javascript">
// <![CDATA[
var colour="#FFFFFF";
var sparkles=120;

/****************************
*  DONT EDIT BELOW THIS BOX *
****************************/

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();

window.onload=function() { if (document.getElementById) {
  var i, rats, rlef, rdow;
  for (var i=0; i<sparkles; i++) {
    var rats=createDiv(3, 3);
    rats.style.visibility="hidden";
    document.body.appendChild(tiny[i]=rats);
    starv[i]=0;
    tinyv[i]=0;
    var rats=createDiv(5, 5);
    rats.style.backgroundColor="transparent";
    rats.style.visibility="hidden";
    var rlef=createDiv(1, 5);
    var rdow=createDiv(5, 1);
    rats.appendChild(rlef);
    rats.appendChild(rdow);
    rlef.style.top="2px";
    rlef.style.left="0px";
    rdow.style.top="0px";
    rdow.style.left="2px";
    document.body.appendChild(star[i]=rats);
  }
  set_width();
  sparkle();
}}

function sparkle() {
  var c;
  if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<sparkles; c++) if (!starv[c]) {
      star[c].style.left=(starx[c]=x)+"px";
      star[c].style.top=(stary[c]=y)+"px";
      star[c].style.clip="rect(0px, 5px, 5px, 0px)";
      star[c].style.visibility="visible";
      starv[c]=50;
      break;
    }
  }
  for (c=0; c<sparkles; c++) {
    if (starv[c]) update_star(c);
    if (tinyv[c]) update_tiny(c);
  }
  setTimeout("sparkle()", 40);
}

function update_star(i) {
  if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
  if (starv[i]) {
    stary[i]+=1+Math.random()*3;
    if (stary[i]<shigh+sdown) {
      star[i].style.top=stary[i]+"px";
      starx[i]+=(i%5-2)/5;
      star[i].style.left=starx[i]+"px";
    }
    else {
      star[i].style.visibility="hidden";
      starv[i]=0;
      return;
    }
  }
  else {
    tinyv[i]=50;
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
    tiny[i].style.width="2px";
    tiny[i].style.height="2px";
    star[i].style.visibility="hidden";
    tiny[i].style.visibility="visible"
  }
}

function update_tiny(i) {
  if (--tinyv[i]==25) {
    tiny[i].style.width="1px";
    tiny[i].style.height="1px";
  }
  if (tinyv[i]) {
    tinyy[i]+=1+Math.random()*3;
    if (tinyy[i]<shigh+sdown) {
      tiny[i].style.top=tinyy[i]+"px";
      tinyx[i]+=(i%5-2)/5;
      tiny[i].style.left=tinyx[i]+"px";
    }
    else {
      tiny[i].style.visibility="hidden";
      tinyv[i]=0;
      return;
    }
  }
  else tiny[i].style.visibility="hidden";
}

document.onmousemove=mouse;
function mouse(e) {
  set_scroll();
  y=(e)?e.pageY:event.y+sdown;
  x=(e)?e.pageX:event.x+sleft;
}

function set_scroll() {
  if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
	sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
}

window.onresize=set_width;
function set_width() {
  if (typeof(self.innerWidth)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
  }
  else if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
  }
  else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
  }
}

function createDiv(height, width) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";
  div.style.backgroundColor=colour;
  return (div);
}
// ]]>
</script>
</html>