-
Notifications
You must be signed in to change notification settings - Fork 0
/
magic-clock.html
116 lines (102 loc) · 2.75 KB
/
magic-clock.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE HTML>
<html>
<head>
<title>Magic Clock</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="bg">
<div class="container">
<p>
<span class="it">I T</span>
R
<span class="is">I S</span>
</p>
<div class="hour">
<p>
X
<span class="eleven">E L E V E N</span>
<span class="five">F I V E</span><br>
<span class="seven">S E V E N</span>
<span class="three">T H R E E</span>
Q
<span class="eight">E I G H T</span><br>
<span class="four">F O U R</span>
<span class="ten">T E N</span>
<span class="six">S I X</span>
C A
<span class="nine">N I N E</span><br>
L
<span class="twelve">T W E L V E</span>
G H I M K O
<span class="two">T W O</spanp><br>
H
<span class="one">O N E</span>
</p>
</div>
<div class="minutes">
<p>
M X
<span class="forty">F O R T Y</span>
<span class="fifty">F I F T Y</span><br>
<span class="thirty">T H I R T Y</span>
<span class="twenty">T W E N T Y</span>
<span class="ten">T E N</span>
V<br>
<span class="eleven">E L E V E N</span>
D
<span class="oh">O</span>
Y G V L I K E I<br>
<span class="fourteen">
<span class="four">F O U R</span> T E E N
</span>
<span class="nineteen">
<span class="nine">N I N E</span> T E E N
</span><br>
<span class="sixteen">
<span class="six">S I X</span> T E E N
</span>
<span class="thirteen">T H I R T E E N</span>
C<br>
W
<span class="fifteen">f i f t e e n</span>
<span class="eighteen">
<span class="eight">e i g h t</span> e e n
</span><br>
<span class="seventeen">
<span class="seven">s e v e n</span> t e e n
</span>
<span class="one">o n e</span>
<span class="five">f i v e</span><br>
<span class="o">O</span> A
<span class="clock">c l o c k</span>
W O R K
<span class="two">T W O</span>
R B<br>
<span class="three">t h r e e</span>
I R N E
<span class="twelve">t w e l v e</span>
o<br>
</p>
</div>
<div class="ofday">
<p>
g i a t w b y x
<span class="midnight">m i d n i g h t</span><br>
<span class="in">i n</span>
B
<span class="the">t h e</span>
c
<span class="afternoon">a f t e r n o o n</span><br>
p
<span class="evening">e v e n i n g</span>
F
<span class="morning">m o r n i n g</span>
</p>
</div>
</div>
</div>
</body>
</html>