Untitled

<!doctype html>
<html>
    <head>
<title>HI/HELLO</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.css">
  <meta charset="utf-8">
	</head>
	<style>
	#arrow{
    width: 100%;
    height: 50px;
    text-align: center;
    cursor: pointer;
    position: fixed;
    bottom: 0;
    left: 0;
    border: 0;
    outline: 0;
    z-index: 100;
    color: #BBB;
    background: transparent;
    -moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
    -o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
    -webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
    transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
    font: 36px Heiti, 'Lucida Grande', Arial;
    font-weight: bold;
}
#arrow span{
    display: inline-block;
    position: relative;
    top: -18px;
    -moz-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
    -o-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
    transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#arrow:hover{
    background: #EC008C;
}
#arrow:hover span{
    top: 0;
    color: #FFF;
}
</style>
<style>
 #pp-nav li .active span, .pp-slidesNav .active span {
    background: #bbb;
}
#pp-nav span, .pp-slidesNav span {
    border-color: #bbb !important;
}
</style>
<style>
 .section {
    background-attachment: fixed;
    background-size: auto 80%;
    background-position: 50% 0%;
    background-repeat: no-repeat;
}
#section1 {
    background-image: url('http://i.imgur.com/aVDvkXk.jpg?1');
	background-size: cover;
}
</style>
<style>
.intro {
    position: absolute;

    text-align: left;
    width: 100%;
	left: 620px;
	bottom: 390px;
	color: #FFFFFF;

}
.intro h1 {
    font-size: 5em;
    font-weight: bold;
    color: #000;
	position: relative;
    left: -1px;
	top: 27px;

}
#section4 .intro {
    color: #000;
}
/* Content page
	 * --------------------------------------- */
 .header {
    padding-top: 80px;
    text-align: center;
}
.header h1 {
    font-size: 5em;
    font-weight: bold;
    color: #fff;
}
.header p {
    color: #f2f2f2;
    font-size: 1.7em;

}
.page {
    width: 80%;
    margin: 60px auto;
    background:white;
    padding: 60px;
    -webkit-box-sizing: border-box;
    /* Safari<=5 Android<=3 */
    -moz-box-sizing: border-box;
    /* <=28 */
    box-sizing: border-box;
}
.page p {
    font-style: 12px;
    margin: 20px 0 0 0;
    line-height: 1.35em;
    color: #333;

}
</style>
<body>
	<button id="arrow">	<span>↓</span>

</button>
<div id="pagepiling">
    <div class="section" id="section1">
        <div class="intro">
            	<h1><font color="FFFFFF">HI</font></h1>

			<font size="4">
            I believe in pink. I believe that  <br/>
			laughing is the best calorie
			burner. I believe in kissing,
			kissing a lot. I believe in being strong<br/>
			when everything seems
			to be going Wrong. I believe that
			happy girls are the prettiest girls.<br/>
			I believe that tomorrow is another day and I believe in miracles<br/>

        </div>
    </div>
<script>$('#pagepiling').pagepiling({
  verticalCentered: false,
  css3: false,
  sectionsColor: ['white', '#E8E8E8', '#f2f2f2', '#EC008C'],
  onLeave: function(index, nextIndex, direction) {

    //fading out the txt of the leaving section
    $('.section').eq(index - 1).find('h1, p').fadeOut(700, 'easeInQuart');

    //fading in the text of the destination (in case it was fadedOut)
    $('.section').eq(nextIndex - 1).find('h1, p').fadeIn(700, 'easeInQuart');

    //reaching our last section? The one with our normal site?
    if (nextIndex == 4) {
      $('#arrow').hide();

      //fading out navigation bullets
      $('#pp-nav').fadeOut();

      $('#section4').find('.content').animate({
        top: '0%'
      }, 700, 'easeInQuart');
    }

    //leaving our last section? The one with our normal site?
    if (index == 4) {
      $('#arrow').show();

      //fadding in navigation bullets
      $('#pp-nav').fadeIn();

      $('#section4 .content').animate({
        top: '100%'
      }, 700, 'easeInQuart');
    }
  },
});

$('#arrow').click(function() {
  $.fn.pagepiling.moveSectionDown();
});</script>
    </body>
</html>