info/units.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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242

<!DOCTYPE html>
<style>
body {
	background-color: slategray;
	margin: 40px;
}
.row {
	width: 620px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px auto;
}
.unit {
	width: 51px;
	height: 51px;
	background-repeat: no-repeat;
	border-style: solid;
	border-width: 4px;
	box-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
	background-image: url(../units.svg);
}
.unit.italian {
	background-color: #f9e3b3;
	border-color: hsl(80, 20%, 50%);
}
.unit.german {
	background-color: #abba8e;
	border-color: hsl(80, 20%, 50%);
}
.unit.allied {
	background-color: #e4d1ab;
	border-color: hsl(35, 40%, 50%);
}

.unit.u0{background-position:-0px -0px}
.unit.u1{background-position:-51px -0px}
.unit.u2{background-position:-102px -0px}
.unit.u3{background-position:-153px -0px}
.unit.u4{background-position:-204px -0px}
.unit.u5{background-position:-255px -0px}
.unit.u6{background-position:-306px -0px}
.unit.u7{background-position:-357px -0px}
.unit.u8{background-position:-408px -0px}
.unit.u9{background-position:-459px -0px}
.unit.u10{background-position:-0px -51px}
.unit.u11{background-position:-51px -51px}
.unit.u12{background-position:-102px -51px}
.unit.u13{background-position:-153px -51px}
.unit.u14{background-position:-204px -51px}
.unit.u15{background-position:-255px -51px}
.unit.u16{background-position:-306px -51px}
.unit.u17{background-position:-357px -51px}
.unit.u18{background-position:-408px -51px}
.unit.u19{background-position:-459px -51px}
.unit.u20{background-position:-0px -102px}
.unit.u21{background-position:-51px -102px}
.unit.u22{background-position:-102px -102px}
.unit.u23{background-position:-153px -102px}
.unit.u24{background-position:-204px -102px}
.unit.u25{background-position:-255px -102px}
.unit.u26{background-position:-306px -102px}
.unit.u27{background-position:-357px -102px}
.unit.u28{background-position:-408px -102px}
.unit.u29{background-position:-459px -102px}
.unit.u30{background-position:-0px -153px}
.unit.u31{background-position:-51px -153px}
.unit.u32{background-position:-102px -153px}
.unit.u33{background-position:-153px -153px}
.unit.u34{background-position:-204px -153px}
.unit.u35{background-position:-255px -153px}
.unit.u36{background-position:-306px -153px}
.unit.u37{background-position:-357px -153px}
.unit.u38{background-position:-408px -153px}
.unit.u39{background-position:-459px -153px}
.unit.u40{background-position:-0px -204px}
.unit.u41{background-position:-51px -204px}
.unit.u42{background-position:-102px -204px}
.unit.u43{background-position:-153px -204px}
.unit.u44{background-position:-204px -204px}
.unit.u45{background-position:-255px -204px}
.unit.u46{background-position:-306px -204px}
.unit.u47{background-position:-357px -204px}
.unit.u48{background-position:-408px -204px}
.unit.u49{background-position:-459px -204px}
.unit.u50{background-position:-0px -255px}
.unit.u51{background-position:-51px -255px}
.unit.u52{background-position:-102px -255px}
.unit.u53{background-position:-153px -255px}
.unit.u54{background-position:-204px -255px}
.unit.u55{background-position:-255px -255px}
.unit.u56{background-position:-306px -255px}
.unit.u57{background-position:-357px -255px}
.unit.u58{background-position:-408px -255px}
.unit.u59{background-position:-459px -255px}
.unit.u60{background-position:-0px -306px}
.unit.u61{background-position:-51px -306px}
.unit.u62{background-position:-102px -306px}
.unit.u63{background-position:-153px -306px}
.unit.u64{background-position:-204px -306px}
.unit.u65{background-position:-255px -306px}
.unit.u66{background-position:-306px -306px}
.unit.u67{background-position:-357px -306px}
.unit.u68{background-position:-408px -306px}
.unit.u69{background-position:-459px -306px}
.unit.u70{background-position:-0px -357px}
.unit.u71{background-position:-51px -357px}
.unit.u72{background-position:-102px -357px}
.unit.u73{background-position:-153px -357px}
.unit.u74{background-position:-204px -357px}
.unit.u75{background-position:-255px -357px}
.unit.u76{background-position:-306px -357px}
.unit.u77{background-position:-357px -357px}
.unit.u78{background-position:-408px -357px}
.unit.u79{background-position:-459px -357px}
.unit.u80{background-position:-0px -408px}
.unit.u81{background-position:-51px -408px}
.unit.u82{background-position:-102px -408px}
.unit.u83{background-position:-153px -408px}
.unit.u84{background-position:-204px -408px}
.unit.u85{background-position:-255px -408px}
.unit.u86{background-position:-306px -408px}
.unit.u87{background-position:-357px -408px}
.unit.u88{background-position:-408px -408px}
.unit.u89{background-position:-459px -408px}
.unit.u90{background-position:-0px -459px}
.unit.u91{background-position:-51px -459px}
.unit.u92{background-position:-102px -459px}
.unit.u93{background-position:-153px -459px}

</style>
<html>
<body>

<div id="units">

<div class="row">
<div class="unit italian u0"></div>
<div class="unit italian u1"></div>
<div class="unit italian u2"></div>
<div class="unit italian u3"></div>
<div class="unit italian u4"></div>
<div class="unit italian u5"></div>
<div class="unit italian u6"></div>
<div class="unit italian u7"></div>
<div class="unit italian u8"></div>
<div class="unit italian u9"></div>
<div class="unit italian u10"></div>
<div class="unit italian u11"></div>
<div class="unit italian u12"></div>
<div class="unit italian u13"></div>
</div><div class="row">
<div class="unit german u14"></div>
<div class="unit german u15"></div>
<div class="unit german u16"></div>
<div class="unit german u17"></div>
<div class="unit german u18"></div>
<div class="unit german u19"></div>
<div class="unit german u20"></div>
<div class="unit german u21"></div>
<div class="unit german u22"></div>
<div class="unit german u23"></div>
<div class="unit german u24"></div>
<div class="unit german u25"></div>
<div class="unit german u26"></div>
<div class="unit german u27"></div>
<div class="unit german u28"></div>
</div><div class="row">
<div class="unit german u29"></div>
<div class="unit german u30"></div>
<div class="unit german u31"></div>
<div class="unit german u32"></div>
<div class="unit german u33"></div>
</div>

<div class="row">
<div class="unit allied u34"></div>
<div class="unit allied u35"></div>
<div class="unit allied u36"></div>
<div class="unit allied u37"></div>
<div class="unit allied u38"></div>
<div class="unit allied u39"></div>
<div class="unit allied u40"></div>
<div class="unit allied u41"></div>
<div class="unit allied u42"></div>
<div class="unit allied u43"></div>
<div class="unit allied u44"></div>
<div class="unit allied u45"></div>
<div class="unit allied u46"></div>
<div class="unit allied u47"></div>
<div class="unit allied u48"></div>
<div class="unit allied u49"></div>
<div class="unit allied u50"></div>
<div class="unit allied u51"></div>
<div class="unit allied u52"></div>
<div class="unit allied u53"></div>
<div class="unit allied u54"></div>
<div class="unit allied u55"></div>
<div class="unit allied u56"></div>
<div class="unit allied u57"></div>
<div class="unit allied u58"></div>
<div class="unit allied u59"></div>
<div class="unit allied u60"></div>
<div class="unit allied u61"></div>
<div class="unit allied u62"></div>
<div class="unit allied u63"></div>
<div class="unit allied u64"></div>
<div class="unit allied u65"></div>
<div class="unit allied u66"></div>
<div class="unit allied u67"></div>
<div class="unit allied u68"></div>
<div class="unit allied u69"></div>
<div class="unit allied u70"></div>
</div><div class="row">
<div class="unit allied u71"></div>
<div class="unit allied u72"></div>
<div class="unit allied u73"></div>
<div class="unit allied u74"></div>
<div class="unit allied u75"></div>
<div class="unit allied u76"></div>
<div class="unit allied u77"></div>
<div class="unit allied u78"></div>
<div class="unit allied u79"></div>
</div><div class="row">
<div class="unit allied u80"></div>
<div class="unit allied u81"></div>
<div class="unit allied u82"></div>
<div class="unit allied u83"></div>
<div class="unit allied u84"></div>
</div><div class="row">
<div class="unit allied u85"></div>
<div class="unit allied u86"></div>
<div class="unit allied u87"></div>
<div class="unit allied u88"></div>
</div><div class="row">
<div class="unit allied u89"></div>
<div class="unit allied u90"></div>
<div class="unit allied u91"></div>
</div><div class="row">
<div class="unit allied u92"></div>
<div class="unit allied u93"></div>
</div>