-
Notifications
You must be signed in to change notification settings - Fork 0
/
sample.html
51 lines (43 loc) · 3.62 KB
/
sample.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
<html><head><meta charset='utf-8'> <style>
body {
margin: 40px;
font-size: 48px;
}
#encoded {
overflow: hidden;
}
.divWord {
float: left;
}
.divChar {
margin-top: 20px;
padding: 5px;
float: left;
text-align: center;
min-width: 45px;
}
#divKey {
clear: both;
margin-top: 80px;
}
#tabKey {
border-spacing: 0;
border-collapse: collapse;
}
.keyContainer {
font-size: 30px;
padding: 2px;
margin: 0px;
border: 1px solid silver;
}
.keyLetter {
text-align: center;
}
.keyEmoji {
text-align: center;
}
</style>
</head><body>
<div id='encoded'><div class='divWord'><div class='divChar'>___<br>🏥</div><div class='divChar'>___<br>🚅</div><div class='divChar'>___<br>🌷</div><div class='divChar'>___<br>👱</div><div class='divChar'> </div></div><div class='divWord'><div class='divChar'>___<br>🌷</div><div class='divChar'>___<br>👱</div><div class='divChar'> </div></div><div class='divWord'><div class='divChar'>___<br>🐋</div><div class='divChar'> </div></div><div class='divWord'><div class='divChar'>___<br>🏥</div><div class='divChar'>___<br>🎊</div><div class='divChar'>___<br>👱</div><div class='divChar'>___<br>🏥</div></div></div>
<div id='divKey'><table id='tabKey'><tr><td class='keyContainer'><div class='keyLetter'>A</div><div class='keyEmoji'>🐋</div><td class='keyContainer'><div class='keyLetter'>B</div><div class='keyEmoji'>🌼</div><td class='keyContainer'><div class='keyLetter'>C</div><div class='keyEmoji'>🔦</div><td class='keyContainer'><div class='keyLetter'>D</div><div class='keyEmoji'>🌄</div><td class='keyContainer'><div class='keyLetter'>E</div><div class='keyEmoji'>🎊</div><td class='keyContainer'><div class='keyLetter'>F</div><div class='keyEmoji'>🎅</div><td class='keyContainer'><div class='keyLetter'>G</div><div class='keyEmoji'>📆</div><td class='keyContainer'><div class='keyLetter'>H</div><div class='keyEmoji'>🚅</div><td class='keyContainer'><div class='keyLetter'>I</div><div class='keyEmoji'>🌷</div><td class='keyContainer'><div class='keyLetter'>J</div><div class='keyEmoji'>♨</div><td class='keyContainer'><div class='keyLetter'>K</div><div class='keyEmoji'>🚤</div><td class='keyContainer'><div class='keyLetter'>L</div><div class='keyEmoji'>📱</div><td class='keyContainer'><div class='keyLetter'>M</div><div class='keyEmoji'>🔓</div><td class='keyContainer'><div class='keyLetter'>N</div><div class='keyEmoji'>🍚</div><td class='keyContainer'><div class='keyLetter'>O</div><div class='keyEmoji'>🚲</div><td class='keyContainer'><div class='keyLetter'>P</div><div class='keyEmoji'>✉</div><td class='keyContainer'><div class='keyLetter'>Q</div><div class='keyEmoji'>💩</div><td class='keyContainer'><div class='keyLetter'>R</div><div class='keyEmoji'>☔</div><td class='keyContainer'><div class='keyLetter'>S</div><div class='keyEmoji'>👱</div><td class='keyContainer'><div class='keyLetter'>T</div><div class='keyEmoji'>🏥</div><td class='keyContainer'><div class='keyLetter'>U</div><div class='keyEmoji'>👑</div><td class='keyContainer'><div class='keyLetter'>V</div><div class='keyEmoji'>🌜</div><td class='keyContainer'><div class='keyLetter'>W</div><div class='keyEmoji'>🚦</div><td class='keyContainer'><div class='keyLetter'>X</div><div class='keyEmoji'>😋</div><td class='keyContainer'><div class='keyLetter'>Y</div><div class='keyEmoji'>🌋</div><td class='keyContainer'><div class='keyLetter'>Z</div><div class='keyEmoji'>👂</div></td></tr></table></div>
</body></html>