HTML/CSS/JS Homepage



    <!DOCTYPE html>
    <!--TODO : unweebafy-->
    <!-- homepage by noha javascript by nullbyte -->

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="animations.css">
     <link rel="icon"
      type="image/ico"
      href="firefox.ico" />
    <title>Start Page</title>

    </head>
    <style>

    a {
            color: #999999;
            font-family: "Segoe UI";
            font-size: 25px;
            text-decoration: none;
            margin-left: 5px;
            transition-property: color;
            transition-duration: .1s;
            transition-timing-function: linear;
    }
    body {
            padding-left: 10px;
            padding-right: 10px;
            font-family: "Segoe UI";
            color: #c8c8c8;
            font-size: 34px;
            background: White;
    }

    span {
            margin-left: 10px;
            text-family: "Segoe UI";
            text-align: center;
    }

    a:hover {
			color: #5f5f65
	}

    input[type=text] {
            width: 18px;
            padding: 3px;
            position: absolute;
            right: 5px; bottom: 5px;
            border: 1px solid #e6e6e6;
            transition-property: all;
            transition-duration: .5s;
            transition-timing-function: ease;
            color: #999999;
			background-position: -2px -1px;
			background-image: url('http://i.imgur.com/ziSic3u.png');
			background-repeat: no-repeat;
    }

    input[type=text]:hover {
            border-color: #999999;
            transition-property: all;
            transition-duration: .5s;
            transition-timing-function: ease;
            color: #999999;
			width: 230px;
			background-position: 227px -1px;
			padding-right: 20px;
    }
	input[type=text]:focus {
            border-color: #999999;
            transition-property: all;
            transition-duration: .5s;
            transition-timing-function: ease;
            color: #999999;
			width: 230px;
			background-position: 227px -1px;
			padding-right: 20px;
	}

    .boxed {
            border: 1px solid #e6e6e6;
            padding: 5px;
            color: #494949;
            background-color: #ffffff;
            width: 760px;
            margin-left: -390px;
            margin-right: auto;
            position: absolute;
            left: 50%;
			top: 40%;
    }

    h1 {
          padding-bottom: -600px;
		  position: absolute;
		  visibility: hidden;
		  margin-top: -200px;
		  margin-left: -380px;
		  left: 50%;
		  top: 40%;

    }

    </style>

            <body>

            <h1 align="center" id="message" class="expandUp"></h1>

                <script type="text/javascript">
                        var d = new Date();
                        var n = d.getHours();

                        if ( n == 23 || n == 0) {
                                message = "<img src='goodnight1.png'></img>";
                        } else if ( n >= 1 && n <= 4 ) {
                                message = "<img src='goodnight1.png'></img>";
                        } else if ( n >= 5 && n <= 11 ) {
                                message = "<img src='goodmorning1.png'></img>";
                        } else if ( n >= 12 && n <= 17 ) {
                                message = "<img src='goodafternoon1.png'></img>";
                        } else if ( n >= 18 && n <= 22 ) {
                                message = "<img src='goodevening1.png'></img>";
                        }

                        document.getElementById("message").innerHTML = message;
                </script>

            <div class="boxed" class=slideUp>
            <span> <img src="social.png"></span>
            <a style="padding-left:10px" href="https://www.facebook.com">facebook</a>
			<a href="https://twitter.com">twitter</a>
            </br>

            <span> <img src="email.png"></span>
            <a style="padding-left:10px" href="https://outlook.com">outlook</a>
			<a href="https://mail.google.com">gmail</a>
            </br>

            <span> <img src="media.png"></span>
            <a style="padding-left:10px" href="https://www.youtube.com">youtube</a>
			<a href="http://www.twitch.tv">twitch</a>
			<a href="https://soundcloud.com">soundcloud</a>
			<a href="https://csgolounge.com">csgo lounge</a>
            </br>

			<span> <img src="4chan.png"></span>
			<a style="padding-left:10px" href="https://boards.4chan.org/a/catalog">anime</a>
			<a href="https://boards.4chan.org/w/catalog">wallpapers</a>
			<a href="https://boards.4chan.org/vr/catalog">retro</a>
			<a href="https://boards.4chan.org/gd/catalog">design</a>
			<a href="https://boards.4chan.org/g/catalog">technology</a>
			</br>

			<span> <img src="reddit.png"></span>
			<a style="padding-left:10px" href="http://reddit.com/r/GlobalOffensive">counter strike</a>
			</br>

            <span> <img src="school.png"></span>
            <a style="padding-left:10px" href="https://office365.com">office365</a>
			<form method="get" action="http://encrypted.google.com/search"> <input type="text" placeholder="" value=""
            name="q">
            </div>

				<script>
				$(window).scroll(function() {
					$('#animatedElement').each(function(){
					var imagePos = $(this).offset().top;

					var topOfWindow = $(window).scrollTop();
						if (imagePos < topOfWindow+400) {
							$(this).addClass("slideUp");
						}
					});
				});
				</script>

			</body>