Browse Source

Merge branch 'feature/kitagataCreaturePage'

furutaNaoki 1 year ago
parent
commit
bad5ed6e6d
2 changed files with 1431 additions and 28 deletions
  1. 105
    7
      css/kitagata_creature_encyclopedia.css
  2. 1326
    21
      second/kitagata_creature_encyclopedia.html

+ 105
- 7
css/kitagata_creature_encyclopedia.css View File

@@ -3,22 +3,116 @@
3 3
 }
4 4
 
5 5
 .overview {
6
-    margin-bottom: 20px;
6
+    margin-bottom: 28px;
7 7
     width: 100%;
8 8
 }
9 9
 
10
-.seasonalCreatures_title {
11
-    margin-bottom: 16px;
10
+.overview p {
11
+    font-size: 1.1rem;
12
+}
13
+
14
+.springCreaturesTitleBar {
15
+    content: '';
16
+    width: 94%;
17
+    height: 4px;
18
+    display: inline-block;
19
+    background-color:	#AEAEAE;
20
+    position: absolute;
21
+    top: 154px;
22
+}
23
+
24
+.springCreaturesTitleBar::after {
25
+    content: '';
26
+    width: 20px;
27
+    height: 20px;
28
+    border-radius: 50%;
29
+    display: inline-block;
30
+    background-color: 	#AEAEAE;
31
+    position: absolute;
32
+    top: -8px;
33
+    right: -4px;
34
+}
35
+
36
+.summerCreaturesTitleBar {
37
+    content: '';
38
+    width: 94%;
39
+    height: 4px;
40
+    display: inline-block;
41
+    background-color: #00AE9D;
42
+    position: absolute;
43
+    top: 1400px;
44
+}
45
+
46
+.summerCreaturesTitleBar::after {
47
+    content: '';
48
+    width: 20px;
49
+    height: 20px;
50
+    border-radius: 50%;
51
+    display: inline-block;
52
+    background-color: #00AE9D;
53
+    position: absolute;
54
+    top: -8px;
55
+    right: -4px;
56
+}
57
+
58
+.autumnCreaturesTitleBar {
59
+    content: '';
60
+    width: 94%;
61
+    height: 4px;
62
+    display: inline-block;
63
+    background-color: #AE0011;
64
+    position: absolute;
65
+    top: 2650px;
66
+}
67
+
68
+.autumnCreaturesTitleBar::after {
69
+    content: '';
70
+    width: 20px;
71
+    height: 20px;
72
+    border-radius: 50%;
73
+    display: inline-block;
74
+    background-color: #AE0011;
75
+    position: absolute;
76
+    top: -8px;
77
+    right: -4px;
12 78
 }
13 79
 
14
-.seasonalCreatures_title::before {
80
+.winterCreaturesTitleBar {
15 81
     content: '';
16 82
     width: 94%;
17 83
     height: 4px;
18 84
     display: inline-block;
19
-    background-color: gray;
85
+    background-color: #0068AE;
20 86
     position: absolute;
21
-    top: 148px;
87
+    top: 3930px;
88
+}
89
+
90
+.winterCreaturesTitleBar::after {
91
+    content: '';
92
+    width: 20px;
93
+    height: 20px;
94
+    border-radius: 50%;
95
+    display: inline-block;
96
+    background-color: #0068AE;
97
+    position: absolute;
98
+    top: -8px;
99
+    right: -4px;
100
+}
101
+
102
+.springCreatures_block {
103
+    margin-bottom: 20px;
104
+}
105
+
106
+.summerCreatures_block {
107
+    margin-bottom: 20px;
108
+}
109
+
110
+.autumnCreatures_block {
111
+    margin-bottom: 20px;
112
+}
113
+
114
+.seasonalCreatures_title {
115
+    margin-bottom: 20px;
22 116
 }
23 117
 
24 118
 .seasonalCreatures_titleText {
@@ -41,9 +135,13 @@
41 135
 }
42 136
 
43 137
 .creatureImage_block {
44
-    width: 50%;
138
+    width: 30%;
45 139
 }
46 140
 
47 141
 .creatureImage {
48 142
     width: 100%;
49 143
 }
144
+
145
+.creatureName {
146
+    width: 50%;
147
+}

+ 1326
- 21
second/kitagata_creature_encyclopedia.html
File diff suppressed because it is too large
View File


Loading…
Cancel
Save