-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathletters.html
78 lines (70 loc) · 3.7 KB
/
letters.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
<!DOCTYPE html>
<html>
<head>
<title>LETTERS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="lettersStyle.css">
</head>
<body>
<ul id="container">
<li class="numLets" id="a" data-number=0>Aa</li>
<li class="numLets" id="b" data-number=1>Bb</li>
<li class="numLets" id="c" data-number=2>Cc</li>
<li class="numLets" id="d" data-number=3>Dd</li>
<li class="numLets" id="e" data-number=4>Ee</li>
<li class="numLets" id="f" data-number=5>Ff</li>
<li class="numLets" id="g" data-number=6>Gg</li>
<li class="numLets" id="h" data-number=7>Hh</li>
<li class="numLets" id="i" data-number=8>Ii</li>
<li class="numLets" id="j" data-number=9>Jj</li>
<li class="numLets" id="k" data-number=10>Kk</li>
<li class="numLets" id="l" data-number=11>Ll</li>
<li class="numLets" id="m" data-number=12>Mm</li>
<li class="numLets" id="n" data-number=13>Nn</li>
<li class="numLets" id="o" data-number=14>Oo</li>
<li class="numLets" id="p" data-number=15>Pp</li>
<li class="numLets" id="q" data-number=16>Qq</li>
<li class="numLets" id="r" data-number=17>Rr</li>
<li class="numLets" id="s" data-number=18>Ss</li>
<li class="numLets" id="t" data-number=19>Tt</li>
<li class="numLets" id="u" data-number=20>Uu</li>
<li class="numLets" id="v" data-number=21>Vv</li>
<li class="numLets" id="w" data-number=22>Ww</li>
<li class="numLets" id="x" data-number=23>Xx</li>
<li class="numLets" id="y" data-number=24>Yy</li>
<li class="numLets" id="z" data-number=25>Zz</li>
<li class="numLets" id="blank"></li>
<li class="numLets pair" id="sh" data-number=26>sh</li>
<li class="numLets pair" id="ch" data-number=27>ch</li>
<li class="numLets pair" id="th" data-number=28>th</li>
<li class="numLets pair" id="ing" data-number=29>ing</li>
<div id="cover"></div>
</ul>
<br>
<div id="ui-box">
<div id="button-box">
<div class="button" id="startBtn"><h2>GET LETTER</h2><img class="icon-btn" src="images/alphabet.png"></div>
<div class="button" id="replay"><h2>REPLAY</h2><img class="icon-btn" id="icon-replay" src="images/replay.png"></div>
</div>
<div id="unicorn-box">
<img class="unicorns" src="images/unicorn.png">
<img class="unicorns" src="images/unicorn.png">
<img class="unicorns" src="images/unicorn.png">
<img class="unicorns" src="images/unicorn.png">
<img class="unicorns" src="images/unicorn.png">
<!--<img class="unicorns" src="images/unicorn.png">
<img class="unicorns" src="images/unicorn.png">
<img class="unicorns" src="images/unicorn.png">
<img class="unicorns" src="images/unicorn.png">
<img class="unicorns" src="images/unicorn.png">-->
</div>
</div>
<a href="index.html"><img id="castle" src="images/castle.png"></a>
<div id="gameover"></div>
<h1 id=congrats>GREAT JOB!</h1>
<h1 id='playagain'>Play Again</h1>
<img id='unicorn-win' src="images/unicorn_big.png">
</body>
<script src='letters-script.js'></script>
</html>