-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
66 lines (60 loc) · 2.64 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<div>
<img alt="" src="bg.jpg">
<h1 aria-hidden="true" id="lol">wat</h1>
</div>
<p>*Warning, this page not safe for consumption on US-bound American Airlines flights
<p>**phiggins points out that Crockford might be holding a detonation device
<p>Image courtesy of <a href="http://www.flickr.com/photos/jsconf/4575469297/">jsconf</a>
<style>
div {position:relative; width: 1024px; margin: 0 auto; }
p { text-align: center; }
body {background-color: #333;}
img {margin:35px 0 0;box-shadow: 0 0 55px rgba(255,255,255,0.5);}
h1 {
width:513px;text-align:center;position:absolute;top:70px;left:15px;
color:#fff;font-family: BaskerVille;font-size:165px;margin:0;
text-shadow: 0 0 2px white, 0 0 1px rgba( 0, 0, 0, .6 );
-o-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg); -ms-transform: rotate(-1deg); transform: rotate(-1deg);
}
p {color:#888;font-family:sans-serif;font-size:10px;margin-bottom:2px;}
@media all and (max-width: 800px) {
h1 {
width:513px;text-align:center;position:absolute;top:135px;left:12px;
color:rgba(255,255,255,0.95);font-family: BaskerVille;font-size:49px;margin:0;
text-shadow: 0 0 10px rgba(255,255,255,0.8);
-o-transform: rotate(12deg) skew(13deg, 2deg) scale(0.8,1.3); -webkit-transform: rotate(12deg) skew(13deg, 2deg) scale(0.8,1.3); -moz-transform: rotate(12deg) skew(13deg, 2deg) scale(0.8,1.3); -ms-transform: rotate(12deg) skew(13deg, 2deg) scale(0.8,1.3); transform: rotate(12deg) skew(13deg, 2deg) scale(0.8,1.3);
}
img, p {display:none;}
div {width:612px;height:612px;background-image:url(hipster.jpg);}
/*
Image courtesy of @placenamehere: http://www.flickr.com/photos/placenamehere/5663055774/
CSS too, thanks Chris!
*/
}
</style>
<script>
(function(doc){
var word = doc.getElementById('lol'),
img = doc.querySelector('img'),
thingsThatNecessarilyMustDie = [
'IE', 'FF', 'NN', 'CH', 'O', 'XML', 'HTML', 'CSS', 'PHP',
'RUBY', 'XSLT','XBL', 'DOM', 'RDF', 'RFDA', 'HTTP', 'CGI',
'XHR', 'CORS','SQL', 'REST', 'RSS', 'ATOM', 'SOA', 'SOAP',
'JSON', 'YAML'
], length = thingsThatNecessarilyMustDie.length;
function findSomethingToComplainAbout(){
var seed = thingsThatNecessarilyMustDie[Math.floor(Math.random() * length)];
return seed + versionNum();
};
function versionNum(){
return Math.ceil(Math.random() * 9);
};
function injectDrama(drama){
//poor man's 'permalinks'
if (location.search) drama = decodeURIComponent(location.search).slice(1).toUpperCase();
word.textContent = img.alt = drama;
};
injectDrama(findSomethingToComplainAbout());
}(document));
</script>