-
Notifications
You must be signed in to change notification settings - Fork 6
/
prototype.html
76 lines (72 loc) · 3.54 KB
/
prototype.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
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.flex-container {
display: flex;
flex-wrap: wrap;
}
.card-image {
width: 20%;
max-height: 25%;
flex: 1 1 20%;
text-align: center;
}
.card-image img {
max-height: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 5px;
border-radius: 7%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="card-image">barrens<img src="images/monster-barrens.png"></div>
<div class="card-image">cavern<img src="images/monster-cavern.png"></div>
<div class="card-image">desert<img src="images/monster-desert.png"></div>
<div class="card-image">forest<img src="images/monster-forest.png"></div>
<div class="card-image">glacier<img src="images/monster-glacier.png"></div>
<!-- <div class="card-image"><img src="images/monster-hills.png"></div> -->
<!-- <div class="card-image"><img src="images/monster-mountains.png"></div> -->
<!-- <div class="card-image"><img src="images/monster-oasis.png"></div> -->
<!-- <div class="card-image"><img src="images/monster-ruins.png"></div> -->
<!-- <div class="card-image"><img src="images/monster-swamp.png"></div> -->
<!-- <div class="card-image"><img src="images/monster-tundra.png"></div> -->
<!-- <div class="card-image"><img src="images/monster-undead-samurai.png"></div> -->
<!-- <div class="card-image"><img src="images/monster-valley.png"></div> -->
<!-- <div class="card-image"><img src="images/monster-volcano.png"></div> -->
<!-- <div class="card-image"><img src="images/01-cleric.png"></div> -->
<div class="card-image"><img src="images/01-monk.png"></div>
<!-- <div class="card-image"><img src="images/01-summoner.png"></div> -->
<!-- <div class="card-image"><img src="images/02-bard.png"></div> -->
<!-- <div class="card-image"><img src="images/02-blacksmith.png"></div> -->
<div class="card-image"><img src="images/02-merchant.png"></div>
<!-- <div class="card-image"><img src="images/03-alchemist.png"></div> -->
<div class="card-image"><img src="images/03-mercenary.png"></div>
<!-- <div class="card-image"><img src="images/03-sorceress.png"></div> -->
<!-- <div class="card-image"><img src="images/04-archer.png"></div> -->
<div class="card-image"><img src="images/04-barbarian.png"></div>
<!-- <div class="card-image"><img src="images/04-wizard.png"></div> -->
<div class="card-image"><img src="images/05-alt-peasant.png"></div>
<!-- <div class="card-image"><img src="images/05-peasant.png"></div> -->
<!-- <div class="card-image"><img src="images/06-alt-knight.png"></div> -->
<div class="card-image"><img src="images/06-knight.png"></div>
<!-- <div class="card-image"><img src="images/07-08-kings-guard.png"></div> -->
<div class="card-image"><img src="images/07-condottiere.png"></div>
<!-- <div class="card-image"><img src="images/07-rogue.png"></div> -->
<!-- <div class="card-image"><img src="images/07-thief.png"></div> -->
<div class="card-image"><img src="images/08-bogatyr.png"></div>
<!-- <div class="card-image"><img src="images/08-champion.png"></div> -->
<!-- <div class="card-image"><img src="images/08-warlord.png"></div> -->
<!-- <div class="card-image"><img src="images/09-10-paladin.png"></div> -->
<div class="card-image"><img src="images/09-10-priestess.png"></div>
<!-- <div class="card-image"><img src="images/09-10-templar.png"></div> -->
<!-- <div class="card-image"><img src="images/11-12-baker.png"></div> -->
<div class="card-image"><img src="images/11-12-butcher.png"></div>
<!-- <div class="card-image"><img src="images/11-12-miner.png"></div> -->
</div>
</body>
</html>