-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyle.css
More file actions
210 lines (170 loc) · 9.4 KB
/
style.css
File metadata and controls
210 lines (170 loc) · 9.4 KB
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
/******************* Timeline Demo - 7 *****************/
.main-timeline7{overflow:hidden;position:relative}
.main-timeline7 .timeline{width:50%;float:left;z-index:1;position:relative}
.main-timeline7 .timeline:after,.main-timeline7 .timeline:before{content:"";display:block;clear:both}
.main-timeline7 .timeline:before{content:"";width:40px;height:90%;background:#727cb6;position:absolute;top:10%;right:-20px}
.main-timeline7 .timeline:last-child:before{height:0}
.main-timeline7 .timeline-icon{width:80px;height:80px;border-radius:50%;background:#727cb6;overflow:hidden;text-align:center;position:absolute;top:0;right:-40px;z-index:3}
.main-timeline7 .timeline-icon:before{content:"";width:60px;height:60px;border-radius:50%;background:#fff;border:2px solid #727cb6;box-shadow:0 0 0 4px #a5afe4;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0}
.main-timeline7 .timeline-icon i{font-size:35px;color:#303a3b;line-height:80px;z-index:1;position:relative}
.main-timeline7 .year{display:block;padding:0 60px 0 30px;font-size:30px;color:#303a3b;text-align:right;border-bottom:2px solid #303a3b;z-index:2;position:relative}
.main-timeline7 .year:before{content:"";display:block;width:30px;height:30px;border-radius:50%;background:#727cb6;border:5px solid #fff;box-shadow:0 0 0 4px #727cb6;margin:auto;position:absolute;bottom:-15px;left:4px}
.main-timeline7 .year:after{content:"";border-left:10px solid #303a3b;border-top:10px solid transparent;border-bottom:10px solid transparent;position:absolute;bottom:-11px;left:50px}
.main-timeline7 .timeline-content{padding:18px 60px 18px 40px;text-align:right;position:relative;z-index:1}
.main-timeline7 .timeline-content:after,.main-timeline7 .timeline-content:before{content:"";width:80px;height:10px;border-radius:90%;background:#fff;position:absolute;top:-7%;right:15px;z-index:-1}
.main-timeline7 .timeline-content:after{left:auto;right:-95px}
.main-timeline7 .timeline:last-child .timeline-content:after,.main-timeline7 .timeline:last-child .timeline-content:before{width:0;height:0}
.main-timeline7 .title{font-size:22px;font-weight:700;color:#727cb6;margin-top:0}
.main-timeline7 .description{font-size:15px;color:#7f8386;line-height:25px}
.main-timeline7 .timeline:nth-child(2){margin-top:140px}
.main-timeline7 .timeline:nth-child(even){margin-bottom:80px}
.main-timeline7 .timeline:nth-child(odd){margin:-140px 0 0}
.main-timeline7 .timeline:first-child,.main-timeline7 .timeline:last-child:nth-child(even){margin:0!important}
.main-timeline7 .timeline:nth-child(2n) .timeline-icon,.main-timeline7 .timeline:nth-child(2n):before{right:auto;left:-20px;background:#e77e21}
.main-timeline7 .timeline:nth-child(2n) .timeline-icon{left:-40px}
.main-timeline7 .timeline:nth-child(2n) .year{padding:0 30px 0 60px;text-align:left}
.main-timeline7 .timeline:nth-child(2n) .year:before{left:auto;right:3px}
.main-timeline7 .timeline:nth-child(2n) .year:after{border-left:none;border-right:10px solid #303a3b;right:50px}
.main-timeline7 .timeline:nth-child(2n) .timeline-content{padding:18px 40px 18px 60px;text-align:left}
.main-timeline7 .timeline:nth-child(2n) .timeline-content:before{left:-95px}
.main-timeline7 .timeline:nth-child(2n) .timeline-content:after{left:15px}
.main-timeline7 .timeline:nth-child(2n) .timeline-icon:before{border-color:#e77e21;box-shadow:0 0 0 4px #f1a563}
.main-timeline7 .timeline:nth-child(2n) .year:before{background:#e77e21;box-shadow:0 0 0 4px #e77e21}
.main-timeline7 .timeline:nth-child(2n) .title{color:#e77e21}
.main-timeline7 .timeline:nth-child(3n) .timeline-icon,.main-timeline7 .timeline:nth-child(3n):before{background:#008b8b}
.main-timeline7 .timeline:nth-child(3n) .timeline-icon:before{border-color:#008b8b;box-shadow:0 0 0 4px #50b5b4}
.main-timeline7 .timeline:nth-child(3n) .year:before{background:#008b8b;box-shadow:0 0 0 4px #008b8b}
.main-timeline7 .timeline:nth-child(3n) .title{color:#008b8b}
.main-timeline7 .timeline:nth-child(4n) .timeline-icon,.main-timeline7 .timeline:nth-child(4n):before{background:#ed687c}
.main-timeline7 .timeline:nth-child(4n) .timeline-icon:before{border-color:#ed687c;box-shadow:0 0 0 4px #f798a8}
.main-timeline7 .timeline:nth-child(4n) .year:before{background:#ed687c;box-shadow:0 0 0 4px #ed687c}
.main-timeline7 .timeline:nth-child(4n) .title{color:#ed687c}
@media only screen and (max-width:990px){.main-timeline7 .timeline{width:100%}
.main-timeline7 .timeline:nth-child(even),.main-timeline7 .timeline:nth-child(odd){margin:0}
.main-timeline7 .timeline:before,.main-timeline7 .timeline:nth-child(2n):before{width:30px;height:100%;left:25px}
.main-timeline7 .timeline-icon,.main-timeline7 .timeline:nth-child(2n) .timeline-icon{left:0}
.main-timeline7 .timeline:nth-child(2n) .year,.main-timeline7 .year{text-align:left;padding:0 30px 0 100px}
.main-timeline7 .timeline:nth-child(2n) .year:before,.main-timeline7 .year:before{left:auto;right:4px}
.main-timeline7 .year:after{left:auto;right:50px;border-right:10px solid #303a3b;border-left:none}
.main-timeline7 .timeline-content .description{color:#666}
.main-timeline7 .timeline-content,.main-timeline7 .timeline:nth-child(2n) .timeline-content{text-align:left;padding:18px 40px 18px 100px}
.main-timeline7 .timeline-content:after,.main-timeline7 .timeline-content:before{width:0;height:0}
}
.card {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s ease-in-out;
box-sizing: border-box;
margin-top:10px;
margin-bottom:10px;
background-color:#FFF;
}
.card:hover {
box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.card > .card-inner {
padding:10px;
}
.card .header h2, h3 {
margin-bottom: 0px;
margin-top:0px;
}
.card .header {
margin-bottom:5px;
}
.card img{
width:100%;
}
footer {
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
font-family: Verdana, sans-serif;
font-size: smaller;
margin-top: 100px;
margin-bottom: 100px;
}
.container.footer {
display: flex;
height: 300px;
justify-content: center;
}
.bar {
width: 10px;
padding-left: 8px;
padding-right: 8px;
margin-left: 8px;
margin-right: 8px;
}
.bar.fill1 {
animation: fill-1 4s infinite
}
.bar.fill2 {
animation: fill-2 4s infinite
}
.bar.fill1.p2 {animation-delay: 500ms;}
.bar.fill2.p2 {animation-delay: 500ms;}
.bar.fill1.p3 {animation-delay: 1s;}
.bar.fill2.p3 {animation-delay: 1s;}
.bar.fill1.p4 {animation-delay: 1500ms;}
.bar.fill2.p4 {animation-delay: 1500ms;}
.bar.fill1.p5 {animation-delay: 2s;}
.bar.fill2.p5 {animation-delay: 2s;}
.bar.fill1.p6 {animation-delay: 2500ms;}
.bar.fill2.p6 {animation-delay: 2500ms;}
.bar.fill1.p7 {animation-delay: 3s;}
.bar.fill2.p7 {animation-delay: 3s;}
.bar.fill1.p8 {animation-delay: 3500ms;}
.bar.fill2.p8 {animation-delay: 3500ms;}
@keyframes fill-1 {
5% { height: 69px; background-color: rgb(255,255,255);}
10% { height: 41px; background-color: rgb(255,255,255);}
15% { height: 19px; background-color: rgb(255,255,255);}
20% { height: 5px; background-color: rgb(255,255,255);}
25% { height: 0px; background-color: rgb(255,255,255);}
30% { height: 5px; background-color: rgb(255,255,255);}
35% { height: 19px; background-color: rgb(255,255,255);}
40% { height: 41px; background-color: rgb(255,255,255);}
45% { height: 69px; background-color: rgb(255,255,255);}
0% { height: 100px; background-color: rgb(255,255,255);}
50% { height: 100px; background-color:rgb(255,255,255);}
55% { height: 100px; background-color:rgb(255,255,255);}
60% { height: 100px; background-color:rgb(255,255,255);}
65% { height: 100px; background-color:rgb(255,255,255);}
70% { height: 100px; background-color:rgb(255,255,255);}
75% { height: 100px; background-color:rgb(255,255,255);}
80% { height: 100px; background-color:rgb(255,255,255);}
85% { height: 100px; background-color:rgb(255,255,255);}
90% { height: 100px; background-color:rgb(255,255,255);}
95% { height: 100px; background-color:rgb(255,255,255);}
100% {height: 100px; background-color:rgb(255,255,255);}
}
@keyframes fill-2 {
0% { height: 0px; background-color: rgb(34, 139, 34);}
5% { height: 31px; background-color: rgb(34, 139, 34)}
10% { height: 59px; background-color: rgb(34, 139, 34);}
15% { height: 81px; background-color: rgb(34, 139, 34);}
20% { height: 95px; background-color: rgb(34, 139, 34);}
25% { height: 100px; background-color:rgb(34, 139, 34)n;}
30% { height: 95px; background-color: rgb(34, 139, 34);}
35% { height: 81px; background-color: rgb(34, 139, 34);}
40% { height: 59px; background-color: rgb(34, 139, 34);}
45% { height: 31px; background-color: rgb(34, 139, 34);}
50% { height: 0px; background-color: rgb(34, 139, 34)}
55% { height: 31px; background-color: rgb(34, 139, 34);}
60% { height: 59px; background-color: rgb(34, 139, 34);}
65% { height: 81px; background-color: rgb(34, 139, 34);}
70% { height: 95px; background-color: rgb(34, 139, 34);}
75% { height: 100px; background-color:rgb(34, 139, 34)n;}
80% { height: 95px; background-color: rgb(34, 139, 34);}
85% { height: 81px; background-color: rgb(34, 139, 34);}
90% { height: 59px; background-color: rgb(34, 139, 34);}
95% { height: 31px; background-color: rgb(34, 139, 34);}
100% { height: 0px; background-color: rgb(34, 139, 34);}
}
/* header {
font-size: larger;
margin: 35px;
} */
.info {
margin: 25px;
}