blob: f085796781a48b848605786770eb2964eaad96a4 (
plain)
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
|
<!DOCTYPE html>
<title>Time of Crisis - Cards</title>
<style>
html {
background-color: slategray;
}
.list {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 40px;
}
.card {
width: 250px;
height: 350px;
background-size: 250px 350px;
background-repeat: no-repeat;
border-radius: 12px;
box-shadow: 0 0 0 1px #444, 0 0 4px #000;
}
.card.event_back{background-image:url(../cards.1x/event_back.jpg)}
.card.event_1{background-image:url(../cards.1x/event_01.jpg)}
.card.event_2{background-image:url(../cards.1x/event_02.jpg)}
.card.event_3{background-image:url(../cards.1x/event_03.jpg)}
.card.event_4{background-image:url(../cards.1x/event_04.jpg)}
.card.event_5{background-image:url(../cards.1x/event_05.jpg)}
.card.event_6{background-image:url(../cards.1x/event_06.jpg)}
.card.event_7{background-image:url(../cards.1x/event_07.jpg)}
.card.event_8{background-image:url(../cards.1x/event_08.jpg)}
.card.event_9{background-image:url(../cards.1x/event_09.jpg)}
.card.event_10{background-image:url(../cards.1x/event_10.jpg)}
.card.event_11{background-image:url(../cards.1x/event_11.jpg)}
.card.event_12{background-image:url(../cards.1x/event_12.jpg)}
.card.event_13{background-image:url(../cards.1x/event_13.jpg)}
.card.event_14{background-image:url(../cards.1x/event_14.jpg)}
.card.event_15{background-image:url(../cards.1x/event_15.jpg)}
.card.event_16{background-image:url(../cards.1x/event_16.jpg)}
.card.event_17{background-image:url(../cards.1x/event_17.jpg)}
.card.event_18{background-image:url(../cards.1x/event_18.jpg)}
.card.event_19{background-image:url(../cards.1x/event_19.jpg)}
.card.influence_back{background-image:url(../cards.1x/influence_back.jpg)}
.card.influence_m1{background-image:url(../cards.1x/influence_m1.jpg)}
.card.influence_m2{background-image:url(../cards.1x/influence_m2.jpg)}
.card.influence_m3{background-image:url(../cards.1x/influence_m3.jpg)}
.card.influence_m4{background-image:url(../cards.1x/influence_m4.jpg)}
.card.influence_p1{background-image:url(../cards.1x/influence_p1.jpg)}
.card.influence_p2{background-image:url(../cards.1x/influence_p2.jpg)}
.card.influence_p3{background-image:url(../cards.1x/influence_p3.jpg)}
.card.influence_p4{background-image:url(../cards.1x/influence_p4.jpg)}
.card.influence_s1{background-image:url(../cards.1x/influence_s1.jpg)}
.card.influence_s2{background-image:url(../cards.1x/influence_s2.jpg)}
.card.influence_s3{background-image:url(../cards.1x/influence_s3.jpg)}
.card.influence_s4{background-image:url(../cards.1x/influence_s4.jpg)}
@media (min-resolution:97dpi) {
.card.event_back{background-image:url(../cards.2x/event_back.jpg)}
.card.event_1{background-image:url(../cards.2x/event_01.jpg)}
.card.event_2{background-image:url(../cards.2x/event_02.jpg)}
.card.event_3{background-image:url(../cards.2x/event_03.jpg)}
.card.event_4{background-image:url(../cards.2x/event_04.jpg)}
.card.event_5{background-image:url(../cards.2x/event_05.jpg)}
.card.event_6{background-image:url(../cards.2x/event_06.jpg)}
.card.event_7{background-image:url(../cards.2x/event_07.jpg)}
.card.event_8{background-image:url(../cards.2x/event_08.jpg)}
.card.event_9{background-image:url(../cards.2x/event_09.jpg)}
.card.event_10{background-image:url(../cards.2x/event_10.jpg)}
.card.event_11{background-image:url(../cards.2x/event_11.jpg)}
.card.event_12{background-image:url(../cards.2x/event_12.jpg)}
.card.event_13{background-image:url(../cards.2x/event_13.jpg)}
.card.event_14{background-image:url(../cards.2x/event_14.jpg)}
.card.event_15{background-image:url(../cards.2x/event_15.jpg)}
.card.event_16{background-image:url(../cards.2x/event_16.jpg)}
.card.event_17{background-image:url(../cards.2x/event_17.jpg)}
.card.event_18{background-image:url(../cards.2x/event_18.jpg)}
.card.event_19{background-image:url(../cards.2x/event_19.jpg)}
.card.influence_back{background-image:url(../cards.2x/influence_back.jpg)}
.card.influence_m1{background-image:url(../cards.2x/influence_m1.jpg)}
.card.influence_m2{background-image:url(../cards.2x/influence_m2.jpg)}
.card.influence_m3{background-image:url(../cards.2x/influence_m3.jpg)}
.card.influence_m4{background-image:url(../cards.2x/influence_m4.jpg)}
.card.influence_p1{background-image:url(../cards.2x/influence_p1.jpg)}
.card.influence_p2{background-image:url(../cards.2x/influence_p2.jpg)}
.card.influence_p3{background-image:url(../cards.2x/influence_p3.jpg)}
.card.influence_p4{background-image:url(../cards.2x/influence_p4.jpg)}
.card.influence_s1{background-image:url(../cards.2x/influence_s1.jpg)}
.card.influence_s2{background-image:url(../cards.2x/influence_s2.jpg)}
.card.influence_s3{background-image:url(../cards.2x/influence_s3.jpg)}
.card.influence_s4{background-image:url(../cards.2x/influence_s4.jpg)}
}
</style>
<body>
<div class="list">
<div class="card influence_m1"></div>
<div class="card influence_m2"></div>
<div class="card influence_m3"></div>
<div class="card influence_m4"></div>
</div>
<div class="list">
<div class="card influence_p1"></div>
<div class="card influence_p2"></div>
<div class="card influence_p3"></div>
<div class="card influence_p4"></div>
</div>
<div class="list">
<div class="card influence_s1"></div>
<div class="card influence_s2"></div>
<div class="card influence_s3"></div>
<div class="card influence_s4"></div>
</div>
<div class="list">
<div class="card event_back"></div>
<div class="card event_1"></div>
<div class="card event_2"></div>
<div class="card event_3"></div>
<div class="card event_4"></div>
<div class="card event_5"></div>
<div class="card event_6"></div>
<div class="card event_7"></div>
<div class="card event_8"></div>
<div class="card event_9"></div>
<div class="card event_10"></div>
<div class="card event_11"></div>
<div class="card event_12"></div>
<div class="card event_13"></div>
<div class="card event_14"></div>
<div class="card event_15"></div>
</div>
</body>
|
