-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
235 lines (206 loc) · 9.99 KB
/
index.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
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
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My2020</title>
<!-- Main fucntion -->
<script src="js/loading.js"></script>
<!-- Loading Jquery -->
<script src="js/jquery-3.2.1.js"></script>
<!-- CSS Sources -->
<link rel="stylesheet" href="css/transformation.css">
<link rel="stylesheet" href="css/loading.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/FloatPhoto.css">
<link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />
<!-- Bootstraps -->
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
</head>
<body>
<div id="content">
<header class="hero">
<div class="container">
<div class="col-md-6 col-md-offset-6 col-xs-12">
<nav>
<ul class="main-nav">
<li><a target="_blank" href="index.html">Home</a></li>
<li><a target="_blank" href="Timeline.html">Timeline</a></li>
<li><a target="_blank" href="Pics.html">Pics</a></li>
<li><a target="_blank" href="About.html">About</a></li>
</ul>
</nav>
<div class="search-box">
<input class="search-txt" type="text" placeholder="Type to search" />
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
<div class="hero-text">
<h1>
<span>It is,</span>
<br>
<p id="our2020">
Our 2020
</p>
</h1>
<h3>如果可以选择重来……</h3>
<div class="btn-o">
<a target="_blank" href="Timeline.html" class="btn-p">Time-Line-></a>
</div>
<div class="SocialLink">
<p class="contact">Contact to me:</p>
<a href="https://zlhad.github.io/">
<img src="img/wechat.png">
</a>
<a href="https://github.com/ZLHad">
<img src="img/github.png">
</a>
</div>
</div>
</div>
</div>
</header>
<section class="case-study">
<div class="container">
<div class="row">
<div class="col-md-12">
<h4 class="sub-heading">Firstly</h4>
<h1 class="heading purple">
<span class="purple">Nobody</span> cared about <br>This disaster</h1>
<div class="swiper-container client-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide client-box">
<img src="img/P1.jpeg" class="client-logo">
<h3 class="text-left title">中国·武汉</h3>
<p class="text-left tag">2019年12月</p>
<p class="text-left tag">最先遭受了疫情的攻击</p>
<p class="text-left tag">这是一座英雄的城市</p>
<p class="text-left"><a target="_blank" href="Timeline.html">Know More →</a>
</p>
</div>
<div class="swiper-slide client-box">
<img src="img/P2.jpeg" class="client-logo">
<h3 class="text-left title">病毒迅速扩散</h3>
<p class="text-left tag">2020年1月下旬</p>
<p class="text-left tag">全国饱和式救援疫区</p>
<p class="text-left tag">全国开启抗疫之路</p>
<p class="text-left"><a target="_blank" href="Timeline.html">Know More →</a>
</p>
</div>
<div class="swiper-slide client-box">
<img src="img/P3.png" class="client-logo">
<h3 class="text-left title">春节·冷清的街道</h3>
<p class="text-left tag">全面的隔离措施</p>
<p class="text-left tag">保护好自己</p>
<p class="text-left"><a target="_blank" href="Timeline.html">Know More →</a>
</p>
</div>
<div class="swiper-slide client-box">
<img src="img/P4.jpeg" class="client-logo">
<h3 class="text-left title">数字·冰冷与热情</h3>
<p class="text-left tag">感染人数的波动</p>
<p class="text-left tag">一个个生命的符号</p>
<p class="text-left tag">一场场感动的事迹</p>
<p class="text-left"><a target="_blank" href="Timeline.html">Know More →</a>
</p>
</div>
<div class="swiper-slide client-box">
<img src="img/P5.jpg" class="client-logo">
<h3 class="text-left title">中国·逐渐解封</h3>
<p class="text-left tag">不负众望，不忘初心</p>
<p class="text-left tag">永远铭记</p>
<p class="text-left"><a target="_blank" href="Timeline.html">Know More →</a>
</p>
</div>
</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</section>
<!-- Statistics -->
<section class="stats">
<div class="container">
<div class="row">
<h1 class="heading purple">中国疫情数字</h1>
<div class="col-md-4 text-center stat-box">
<h1 class="ststs_a">
<span class="counter">92417</span>
</h1>
<h3>累计确诊</h3>
</div>
<div class="col-md-4 text-center stat-box">
<h1 class="ststs_b">
<span class="counter">87070</span>
</h1>
<h3>累计治愈</h3>
</div>
<div class="col-md-4 text-center stat-box">
<h1 class="ststs_c">
<span class="counter">4750</span>
</h1>
<h3>累计死亡</h3>
</div>
</div>
</div>
</section>
<!-- Pics -->
<section class="case-study">
<div class="container">
<div class="row">
<div class="col-md-12">
<h4 class="sub-heading">Picture</h4>
<h1 class="heading pink">
<span class="pink">英雄</span> 值得被 <br>记住</h1>
<br>
<div class="img-container"></div>
<div class="image">
<img src="img/P1.jpeg" alt="" />
<div class="image-content">
<h1>中国加油</h1>
<div class="icons">
<a href="#" class="icon fas fa-heart"></a>
<a href="#" class=" icon fas fa-comment"></a>
<a href="#" class="icon fas fa-share"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootom -->
<footer>
<div class="container-fluid">
<div class="row footer">
<div class="col-md-12 text-center">
<p>Copyright © 2020 ZhangLinghao All rights reserved.</p>
</div>
</div>
</div>
</footer>
</div>
<!-- Some Javascript -->
<script src="js/jquery-3.2.1.js"></script>
<!-- Initialize Client Swiper -->
<script src="js/swiper.jquery.min.js"></script>
<script src="js/client.swiper.js"></script>
<!-- ConuterUp -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.countup.min.js"></script>
<script>
// Counterup
$('.counter').countUp({
time: 2000
});
</script>
</body>
</html>