-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
97 lines (88 loc) · 3.49 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<html>
<head>
<title>CSS Hero</title>
<link rel="stylesheet" href="css/master.css" type="text/css" media="screen">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<img src="images/css-hero.png" id="reference" style="display:none;position:absolute;top:0px;left:0px">
<div class="content">
<div class="header">
<div class="star-five right">★</div>
<div class="star-five">★</div>
<div class='text'>CSS Hero</div>
</div>
<div class="square-holder">
<div class ="sq-red">
</div>
<div class ="sq-purple">
</div>
<div class ="sq-green">
</div>
<div class ="sq-blue">
</div>
</div>
<div class='birdbox'>
<div class="heymistereagle pictext">HEY MISTER EAGLE</div>
<img src="images/example.jpg" class='bird' />
<div class="icanflytoo pictext">I CAN FLY TOO!</div>
</div>
<div class='copy'>
<p>
Aliquam erat volutpat. Sed pellentesque orci. Etiam lacus lorem, iaculis sit amet, pharetra quis, imperdiet sit amet, lectus. Integer quis elit ac mi aliquam pretium. Nullam mauris orci, porttitor eget, sollicitudin non, vulputate id, risus. Donec varius enim nec sem. Nam aliquam lacinia enim. Quisque eget lorem eu purus dignissim ultricies. Fusce porttitor hendrerit ante
</p>
<p>
Vivamus blandit, magna et luctus accumsan, eros ligula venenatis tellus, et pulvinar dolor.
Vivamus blandit, magna et luctus accumsan, eros ligula venenatis tellus, et pulvinar dolor.
Vivamus blandit, magna et luctus accumsan. <strong>Donec id arcu risus.</strong>
Vivamus blandit, magna et luctus accumsan, eros ligula venenatis tellus, et pulvinar dolor.
</p>
<p>
Nothing flies faster than an <strong><em>eagle</em></strong>, unless it's an eagle being chased by a <strong><em>cat</em></strong>.
</p>
</div>
<div class='tetris'>
<div class="left">
<div class='line horiz' id='p1'></div>
<div class='line horiz' id='p2'></div>
<div class='square' id='p3'></div>
<div class='z horiz2' id='p4'><div class='left'></div><div class='right'></div></div>
<div class='backwardsl horiz' id='p5'><div class='left'></div><div class='right'></div></div>
<div class='l horiz' id='p6'><div class='left'></div><div class='right'></div></div>
<div class='s' id='p7'><div class='left'></div><div class='right'></div></div>
<div class='backwardsl' id='p8'><div class='left'></div><div class='right'></div></div>
<div class='square' id='p9'></div>
<div class='l' id='p10'><div class='left'></div><div class='right'></div></div>
<div class='s horiz' id='p11'><div class='left'></div><div class='right'></div></div>
</div>
<div class='middle'>
<!--
<div class='square'>
</div>
<div class='l'><div class='left'></div><div class='right'></div></div>
<div class='z'><div class='left'></div><div class='right'></div></div>
<div class='line'></div>
<div class='s'><div class='left'></div><div class='right'></div></div>
<div class='backwardsl'><div class='left'></div><div class='right'></div></div> -->
</div>
</div>
<div class="left ribbon-holder">
<a href="#" class="red ribbon">
<span class="text"> NOW IN BETA </span>
</a>
</div>
</body>
<script src="js/jquery.js"></script>
<script>
window.onkeydown = function(ev)
{
if (ev.keyCode == 16)
$('#reference').show();
}
window.onkeyup = function(ev)
{
if (ev.keyCode == 16)
$('#reference').hide();
}
</script>
</html>