page 1 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: -405px;
overflow:hidden;
height: 300px;
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;
}

/* UPDATE BOX */
div.box1 {
width:250px;
height:245px;
background-color: rgba(255, 255, 255, 1);
overflow:hidden;
float:left;
border-radius: 15px 0px 0px 15px;
margin-top:-36px;
box-shadow: 3px 3px 0px #FFDAAB;
}
div.content1 {
overflow:auto;
padding:10px 20px 10px 10px;
height:211px;
width:247px;
margin-top:5px;
}
p.updates {
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;
}

/* BOX 2 */
div.box2 {
width:275px;
height:238px;
background-color: rgba(255, 255, 255, 1);
overflow:hidden;
border-radius: 0px 15px 15px 0px;
margin-top:-247px;
box-shadow: -3px 3px 0px #ABE4FF;
float:left;
border-width:3px;
border-color: white;
border-style:solid;
margin-left: 670px;
}
div.content2 {
overflow:auto;
padding:10px 40px 10px 10px;
height:211px;
width:269px;
margin-top:5px;
}
p.title2 {
text-align:center;
font-size:16px;
text-transform:uppercase;
color:#bed897;
font-family: 'Raleway', sans-serif;
margin-top:-3px;
border-style: solid;
width:100%;
border-width: 0px 0px 3px 0px;
border-color: #bed897;
}
p.bullet2 {
font-size: 13px;
color:#bed897;
font-family: 'Raleway', sans-serif;
line-height:14px;
text-align: justify;
}

/* BOX 3 */
div.box3 {
width:250px;
height:245px;
background-color: rgba(255, 255, 255, 1);
overflow:hidden;
border-radius: 15px 0px 0px 15px;
margin-top:17px;
box-shadow: 3px -3px 0px #FFABAB;
margin-left: 400px;
}
div.content3 {
overflow:auto;
padding:10px 20px 10px 10px;
height:211px;
width:247px;
margin-top:5px;
}
p.title3 {
text-align:center;
font-size:16px;
text-transform:uppercase;
color:#c697ed;
font-family: 'Raleway', sans-serif;
margin-top:-3px;
border-style: solid;
width:100%;
border-width: 0px 0px 3px 0px;
border-color: #c697ed;
}
p.bullet3 {
font-size: 13px;
color:#c697ed;
font-family: 'Raleway', sans-serif;
line-height:14px;
text-align: justify;
}

/* BOX 4 */
div.box4 {
width:275px;
height:238px;
background-color: rgba(255, 255, 255, 1);
overflow:hidden;
border-radius: 0px 15px 15px 0px;
margin-top:-247px;
box-shadow: -3px -3px 0px #DDFFAB;
float:left;
border-width:3px;
border-color: white;
border-style:solid;
margin-left: 670px;
}
div.content4 {
overflow:auto;
padding:10px 40px 10px 10px;
height:211px;
width:269px;
margin-top:5px;
}
p.title4 {
text-align:center;
font-size:16px;
text-transform:uppercase;
color:#f2c996;
font-family: 'Raleway', sans-serif;
margin-top:-3px;
border-style: solid;
width:100%;
border-width: 0px 0px 3px 0px;
border-color: #f2c996;
}
p.bullet4 {
font-size: 13px;
color:#f2c996;
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="active">Link 1</a>
  <a href="#" class="l2">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="updates">UPDATES</p>
<p class="bullet">00/00 :: The stars awaken a certain reverence, because though always present, they are inaccessible; but all natural objects make a kindred impression, when the mind is open to their influence.
<br><br>
00/00 :: Nature never wears a mean appearance.
<br><br>
00/00 :: Neither does the wisest man extort her secret, and lose his curiosity by finding out all her perfection.
<br><br>
00/00 :: Nature never became a toy to a wise spirit.
<br><br>
00/00 :: The flowers, the animals, the mountains, reflected the wisdom of his best hour, as much as they had delighted the simplicity of his childhood.
</p>
</div>
</div>
</div>

<div class="box2">
<div class="content2">
<p class="title2">TITLE 2</p>
<p class="bullet2">When we speak of nature in this manner, we have a distinct but most poetical sense in the mind. We mean the integrity of impression made by manifold natural objects. It is this which distinguishes the stick of timber of the wood-cutter, from the tree of the poet. The charming landscape which I saw this morning, is indubitably made up of some twenty or thirty farms. Miller owns this field, Locke that, and Manning the woodland beyond. But none of them owns the landscape. There is a property in the horizon which no man has but he whose eye can integrate all the parts, that is, the poet. This is the best part of these men's farms, yet to this their warranty-deeds give no title.<br><br>
To speak truly, few adult persons can see nature. Most persons do not see the sun. At least they have a very superficial seeing. The sun illuminates only the eye of the man, but shines into the eye and the heart of the child. The lover of nature is he whose inward and outward senses are still truly adjusted to each other; who has retained the spirit of infancy even into the era of manhood.
</p>
</div>
</div>

<div class="box3">
<div class="content3">
<p class="title3">TITLE 3</p>
<p class="bullet3">1 - His intercourse with heaven and earth, becomes part of his daily food. In the presence of nature, a wild delight runs through the man, in spite of real sorrows.<br><br>
2 - Nature says,--he is my creature, and maugre all his impertinent griefs, he shall be glad with me.<br><br>
3 - Not the sun or the summer alone, but every hour and season yields its tribute of delight; for every hour and change corresponds to and authorizes a different state of the mind, from breathless noon to grimmest midnight.<br><br>
4 - Nature is a setting that fits equally well a comic or a mourning piece.<br><br>
5 - In good health, the air is a cordial of incredible virtue.<br><br>
6 - Crossing a bare common, in snow puddles, at twilight, under a clouded sky, without having in my thoughts any occurrence of special good fortune, I have enjoyed a perfect exhilaration.<br><br>
7 - I am glad to the brink of fear.
</p>
</div>
</div>

<div class="box4">
<div class="content4">
<p class="title4">TITLE 4</p>
<p class="bullet4">[+] In the woods too, a man casts off his years, as the snake his slough, and at what period soever of life, is always a child.<br><br>
[+] In the woods, is perpetual youth. <br><br>
[+] Within these plantations of God, a decorum and sanctity reign, a perennial festival is dressed, and the guest sees not how he should tire of them in a thousand years.<br><br>
[+] In the woods, we return to reason and faith.
</p>
</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>