H3rm

<link href="https://fonts.googleapis.com/css?family=Jim+Nightshade" rel="stylesheet">
<style>
* {
  margin: 0px;
  padding: 0px;
font-family: 'Jim Nightshade', cursive;

}
::-webkit-scrollbar{
width:0em;
}
html {
background:gray;
  width: 100%;
  height: 100%;
  text-align: center;
}

#container {
  position: relative;
  margin: 0 auto;
  width: 950px;
  padding: 20px;
}

#header {
  position: relative;
  min-height: 150px;
  text-align: center;
  padding: 10px;
}

#header img {
  max-width: 355px;
  postion: relative;
}

#ribbon {
  background-color: #0bea25;
  width: 335px;
  padding: 5px;
  position: relative;
  margin-top: -88px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Shadows Into Light Two', cursive;
  font-size: 26px;
  letter-spacing: 2px;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 2px 6px #999999;
}

/*Ribbon Ends*/
#ribbon:before,
#ribbon:after {
  content: "";
  width: 3px;
  bottom: 18px;
  position: absolute;
  display: block;
  border: 25px solid #0bea25;
  box-shadow: 0 8px 6px -6px #999999;
  z-index: -2;
}

/*Left Ribbon End*/
#ribbon:before {
  left: -42px;
  border-right-width: 35px;
  border-left-color: transparent;
}

/*Right Ribbon End*/
#ribbon:after {
  right: -42px;
  border-left-width: 35px;
  border-right-color: transparent;
}

/*Wrap*/
#nav:before,
#nav:after {
  content: "";
  bottom: 48px;
  position: absolute;
  display: block;
  border-style: solid;
  z-index: -1;
}

/*Left Ribbon Wrap*/
#nav:before {
  left: 0;
  border-width: 0px 0px 20px 20px;
  border-color: transparent transparent #1fad2f transparent;
}

/*Right Ribbon Wrap*/
#nav:after {
  right: 0;
  border-width: 20px 0px 0px 20px;
  border-color: transparent transparent transparent #1fad2f;
}

/*Nav Styles*/
#nav ul {
  width: 100%;
  list-style: none;
  margin: 0px;
  text-align: center;
}

#nav li {
  display: inline;
  padding: 10px;
}

#nav a {
  text-decoration: none;
  color: white;
  text-align: center;
}

#nav a:hover {
  color: navy;
  </style>
<div style="position:fixed;width:100%;height:100%;">
<div id="container" class="section">
  <div id="header">
    <img src="https://h3rmyoutube.000webhostapp.com/Banner.png" alt="H3rm Youtube">
  </div>
<div style="position:absolute;top:20%;font-size:230px;left:-14%;">H3rm</div>
<div style="position:absolute;top:10%;font-size:180px;right:-12%;" id="hacker">Hacker</div>
<div style="position:absolute;top:10%;font-size:180px;right:-100%;" id="about">About</div>
<div style="position:absolute;top:10%;font-size:180px;right:-100%;" id="channel">Youtube</div>
<div style="position:absolute;top:10%;font-size:180px;right:-100%;" id="contact">Contact</div>
<div id="aboutsection" style="position:absolute;left:0;left:35%;bottom:-32%;font-size:30px;text-align:left;"><ul><li>
Roblox hacks & exploits</li><li>Have been on Roblox for 4 years</li><li>Roblox username: mrhacks_rc71</li></ul>
</div>
<div id="channelsection" style="position:absolute;left:0;left:28%;bottom:-32%;font-size:50px;text-align:left;">
Youtube channel: <u style="color:lightgray;cursor:pointer;font-size:50px;" onclick="window.open('https://www.youtube.com/channel/UCcuJlVfFc4KNM68QuRSWFDg');">H3rmhacker</u>
</div>
<div id="contactsection" style="position:absolute;left:0;left:23%;bottom:-32%;font-size:50px;text-align:left;"><center>
<span style="color:lightgray;cursor:pointer;font-size:50px;" onclick="window.open('mailto:[email protected]');">[email protected]</span><br>
<span style="color:lightgray;cursor:pointer;font-size:50px;margin:50px;" onclick="window.open('https://discord.gg/Xtv6HSB');">https://discord.gg/Xtv6HSB</span>
</center>
</div>
  <div id="ribbon">
    <div id="nav">
      <ul class="nav">
        <li class="flavors"><a href="#about" data-menu-top="1200">About</a></li>
        <li class="locations"><a href="#Channel" data-menu-top="2400">Channel</a></li>
        <li class="contact"><a href="#Contact" data-menu-top="3600">Contact</a></li>
      </ul>
    </div>
  </div>
<br><br><br><hr>
</div><br><br>
<br><div style="font-size:100px;" id="scrolldown">Scroll down for more</div>


</div>
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
<script src="https://prinzhorn.github.io/skrollr-menu/dist/skrollr.menu.min.js"></script>
<script>
setTimeout(function() {
		var s = skrollr.init({
			forceHeight: false,
			smoothScrolling: true
		});
		skrollr.menu.init(s, {
		  updateUrl: false,
		  animate: true,
	easing: 'sqrt',
	scale: 1,
		  duration: function(currentTop, targetTop) {
		//By default, the duration is hardcoded at 500ms.
		if (currentTop < targetTop){
		return (targetTop - currentTop) / 2;
} else {
  return (currentTop - targetTop) / 2;
}
		//But you could calculate a value based on the current scroll position (`currentTop`) and the target scroll position (`targetTop`).
		//return Math.abs(currentTop - targetTop) * 10;
	},
			change: function(hash, top) {
				//console.log(hash, top);
			}

		});
	}, 500);

var setSkrollr = function($el, data) {
    for (var i = 0, l = data.length; i < l; i++) {
        var d = data[i],
            px = d[0];
            css = d[1];
        $el.attr('data-' + px, css);
    }
}



jQuery(function($) {
    setSkrollr($('#hacker'), [[0, 'right:-12%;'], [1200, 'right:-100%;']]);
setSkrollr($('#channel'), [[0, 'right:-100%;'], [1700, 'right:-100%;'], [2400, 'right:-12%;'],[3100, 'right:-12%;'],  [3600, 'right:-100%;']]);
setSkrollr($('#contact'), [[0, 'right:-100%;'], [1700, 'right:-100%;'], [2400, 'right:-100%;'],[3100, 'right:-100%;'],  [3600, 'right:-12%;']]);
setSkrollr($('#aboutsection'), [[0, 'top:300%;'], [1200, 'top:100%;'], [1700, 'top:100%;'], [2400, 'top:300%;']]);
setSkrollr($('#channelsection'), [[0, 'top:300%;'],[1200, 'top:300%;'], [2400, 'top:100%;'], [3100, 'top:100%;'], [3600, 'top:300%;']]);
setSkrollr($('#contactsection'), [[0, 'top:300%;'],[1200, 'top:300%;'], [2400, 'top:300%;'], [3100, 'top:300%;'], [3600, 'top:100%;']]);
    setSkrollr($('#about'), [[0, 'right:-100%;'], [1200, 'right:-12%;'], [1700, 'right:-12%;'], [2400, 'right:-100%;']]);
setSkrollr($('#scrolldown'), [[0, 'opacity:1;'], [1200, 'opacity:-10;']]);
    skrollr.init({
        smoothScrolling: true
    });
});





/*setTimeout(function(){
animateTo(top);
alert('hi');
}, 4000);
*/

</script>