diff options
Diffstat (limited to 'info/cards.html')
-rw-r--r-- | info/cards.html | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/info/cards.html b/info/cards.html new file mode 100644 index 0000000..f085796 --- /dev/null +++ b/info/cards.html @@ -0,0 +1,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> |