Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[HTML] 404 No Signal
04-12-2012, 02:10 PM, (This post was last modified: 04-12-2012, 02:14 PM by sykess.)
Post: #1
[HTML] 404 No Signal
Code untuk 404 page.

Code:
<!DOCTYPE html>
<html>

<head><script type="text/javascript">var NREUMQ=NREUMQ||[];NREUMQ.push(["mark","firstbyte",new Date().getTime()]);</script>

  <meta charset="UTF-8">

  <title>404 No signal</title>


  <style>
* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    overflow: hidden;
}

canvas {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.caps {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: asd 12s linear infinite;
}

.caps img {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes as {
    0% {
        opacity: 0;
    }
    10% {
        opacity: .3;
    }
    20% {
        opacity: .1;
    }
    30% {
        opacity: .5;
    }
    40% {
        opacity: 0;
    }
    50% {
        opacity: .8;
    }
    55% {
        opacity: 0;
    }
    55% {
        opacity: 0;
    }
}

.frame {
    z-index: 3;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(19%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.9))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#00000000', endColorstr = '#e6000000', GradientType = 1); /* IE6-9 fallback on horizontal gradient */

}

.frame div {
    position: absolute;
    left: 0;
    top: -20%;
    width: 100%;
    height: 20%;
    background-color: rgba(0, 0, 0, .12);
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    animation: asd 12s linear infinite;
}

.frame div:nth-child(1) {
    animation-delay: 0;
}

.frame div:nth-child(2) {
    animation-delay: 4s;
}

.frame div:nth-child(3) {
    animation-delay: 8s;
}

@keyframes asd {
    0% {
        top: -20%;
    }
    100% {
        top: 100%;
    }
}

h1 {
    z-index: 3;
    position: absolute;
    font: bold 200px/200px Arial, sans-serif;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    width: 100%;
    margin-left: -50%;
    height: 200px;
    text-align: center;
    color: transparent;
    text-shadow: 0 0 30px rgba(0, 0, 0, .5);
    animation: asdd 2s linear infinite;
}

@keyframes asdd {
    0% {
        text-shadow: 0 0 30px rgba(0, 0, 0, .5);
    }
    33% {
        text-shadow: 0 0 10px rgba(0, 0, 0, .4);
    }
    66% {
        text-shadow: 0 0 20px rgba(0, 0, 0, .2);
    }
    100% {
        text-shadow: 0 0 40px rgba(0, 0, 0, .8);
    }
}
  </style>


  <script>
    window.confirm = function(){};
    window.prompt  = function(){};
    window.open    = function(){};
    window.print   = function(){};
  </script>

  <script src="http://gilacode.org/css/js/prefixfree.min.js"></script>

</head>

<body>

  <h1>404</h1>

<div class="frame">
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="caps"><img src="http://ademilter.com/caps.png" alt=""></div>
<canvas id="canvas"></canvas>

  <script>
(function() {


var Application = ( function () {
        var canvas;
        var ctx;
        var imgData;
        var pix;
        var WIDTH;
        var HEIGHT;
        var flickerInterval;

        var init = function () {
            canvas = document.getElementById('canvas');
            ctx = canvas.getContext('2d');
            canvas.width = WIDTH = 700;
            canvas.height = HEIGHT = 500;
            ctx.fillStyle = 'white';
            ctx.fillRect(0, 0, WIDTH, HEIGHT);
            ctx.fill();
            imgData = ctx.getImageData(0, 0, WIDTH, HEIGHT);
            pix = imgData.data;
            flickerInterval = setInterval(flickering, 30);
        };

        var flickering = function () {
            for (var i = 0; i < pix.length; i += 4) {
                var color = (Math.random() * 255) + 50;
                pix[i] = color;
                pix[i + 1] = color;
                pix[i + 2] = color;
            }
            ctx.putImageData(imgData, 0, 0);
        };

        return {
            init: init
        };
    }());

    Application.init();

})();
  </script>

  <script>
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-30102653-1']);
    _gaq.push(['_trackPageview']);
    (function() {
      var ga = document.createElement('script'); ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  </script>

<script type="text/javascript">if (!NREUMQ.f) { NREUMQ.f=function() {
NREUMQ.push(["load",new Date().getTime()]);
var e=document.createElement("script");
e.type="text/javascript";
e.src=(("http:"===document.location.protocol)?"http:":"https:") + "//" +
  "d1ros97qkrwjf5.cloudfront.net/42/eum/rum.js";
document.body.appendChild(e);
if(NREUMQ.a)NREUMQ.a();
};
NREUMQ.a=window.onload;window.onload=NREUMQ.f;
};
NREUMQ.push(["nrfj","beacon-1.newrelic.com","6e5edccabe",522852,"IgoLR0YJXA1RFxdRRw0JFVJTAx8SXApP",0,303,new Date().getTime(),"","","","",""]);</script></body>

</html>

Live Demo : http://gilacode.org/css/404.htm
[Image: 2Rx5OJM.png]
Reply
04-12-2012, 03:23 PM,
Post: #2
RE: [HTML] 404 No Signal
Nice Bro Thumbs Up
Jangan disebabkan ‪#‎Cingey‬ ia menjadi batu yang menghalang untuk kita terus ke depan...
boss
Reply


Possibly Related Threads...
Thread Author Replies Views Last Post
  Safari 7 Tidak Support HTML 5 Web Socket? biborn 0 361 26-10-2013, 05:56 PM
Last Post: biborn
  [HELP] VBscript in html (kira markah gpa) blackoni2 6 1,085 24-05-2013, 08:29 PM
Last Post: Dadu
  [HTML] Help Ujang 6 769 22-02-2013, 10:21 PM
Last Post: PistolCodez
  [ASK] encrypte html anthrax 5 823 11-01-2013, 04:59 PM
Last Post: anthrax
  TBD Clock [Basic HTML] sykess 8 1,070 26-08-2012, 11:42 AM
Last Post: darknite
  [help html]hyperlink to another page pron3t 8 872 19-08-2012, 02:08 PM
Last Post: PistolCodez
  Mintak tolong pasal jQuery/html Mojo 2 984 13-05-2012, 01:45 AM
Last Post: Mojo
  [help] tolong fix bug kat webpage html aku pron3t 8 1,230 12-04-2012, 03:08 PM
Last Post: sil
  <ask pasal html>nk buat label select tp x jd pron3t 11 2,608 09-02-2012, 03:48 PM
Last Post: cecikut
  [tolong]html connect ms access using javascript jamil992 4 989 01-02-2012, 11:12 AM
Last Post: paley

Forum Jump: