-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
204 lines (179 loc) · 8.47 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
<!DOCTYPE HTML>
<html>
<head>
<title>慈善活动</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body>
<!--加载动画--
<div id="preloader">
<iframe src='loading.html' style='width:100%;height:100%;position:fixed;top:0px;left:0px;border:0px;' id='status'></iframe>
</div>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<div class="logo">
<span class="icon fa-diamond"></span>
</div>
<div class="content">
<div class="inner">
<h1>慈善活动</h1>
<p>活动开展于2017年11月15日</p>
<p>请大家宣传一下，让更多的人捐款</p>
<p>本活动主要给贫困山区的孩子经济辅助</p>
</div>
</div>
<nav>
<ul>
<li><a href="#intro">介 绍</a></li>
<li><a href="#help">帮 助</a></li>
<li><a href="#donate">我要捐助</a></li>
<li><a href="#contact">留 言</a></li>
<!--<li><a href="#elements">Elements</a></li>-->
</ul>
</nav>
</header>
<!-- Main -->
<div id="main">
<!-- Intro -->
<article id="intro">
<h2 class="major">介绍</h2>
<span class="image main"><img src="images/pic01.jpg" alt="" /></span>
<p>如果您现在正在享用荣华富贵或是过着美好生活</p>
<p>可否考虑一下身在山区的孩子们</p>
<p>虽然世界并不是公平的，但是爱心可以使这个世界变得比较公平</p>
<p>山区的孩子们也是祖国的花朵</p>
<p>本捐款完全公益，捐出的现金将会定期以现金的形式捐给处于困难山区的孩子</p>
<p>您的留言也会定期发送</p>
<p> </p>
<p> </p>
</article>
<!-- Work -->
<article id="help">
<h2 class="major">帮助</h2>
<span class="image main"><img src="images/pic02.jpg" alt="" /></span><div>
<p>捐款有支付宝和微信两种支付方式</p>
<p>推荐使用支付宝支付</p>
<p>支付时如果您有什么话想说可以直接留言，比留言板留言更好</p>
<p>发现问题请反馈，以便添加帮助</p>
</div>
</article>
<!-- About -->
<article id="donate">
<h2 class="major">捐助</h2>
<span class="image main"><img src="images/pic03.jpg" alt="" /></span>
<h2 align="center">捐助有支付宝和微信两种捐助方式 </h2>
<div style="float:left">
<a href="#zfb">
<div style="float:left"><img src="images/zfbtb.png" width="150" height="150" id="img1"></p><p>支付宝</p>
</div>
</a>
</div>
<div style="float:right">
<a href="#wx">
<div style="float:right"><img src="images/wxtb.png" width="150" height="150" id="img1"></p><p>微信</p></div></a>
</div>
<div>
<p> </p>
<h3 align="center">推荐使用支付宝</h3>
<p>点击图标选择</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</article>
<!-- Contact -->
<article id="contact">
<h2 class="major">留言板</h2>
<form method="post" action="#">
<div class="field half first">
<label for="name">姓名</label>
<input type="text" name="name" id="name" />
</div>
<div class="field half">
<label for="email">电子邮箱</label>
<input type="text" name="email" id="email" />
</div>
<div class="field">
<label for="message">留言</label>
<textarea name="message" id="message" rows="4"></textarea>
</div>
<ul class="actions">
<li><a href="#upload"><input type="button" class="special" value="提交留言" /></a></li>
<li><input type="reset" value="重置" /></li>
</ul>
</form>
<ul class="icons">
<li><a href="#unopened" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#unopened" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#unopened" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#unopened" class="icon fa-github"><span class="label">GitHub</span></a></li>
</ul>
</article>
<article id="upload">
<h2 class="major" id="h21">留言提交成功</h2>
<div>
</div>
<div style="float:left">
<p><img src="images/ok.png" width="100" height="100" id="img1"></p>
</div><div>
<h4>您已成功提交留言</h4>
<h6>您的留言将被审核</h6>
<h6>看到您的留言的将是居住在深山里的孩子</h6>
</div>
</article>
<article id=unopened>
<h2 class="major" id="h21">功能尚未开启</h2>
<div style="float:left">
<p><img src="images/error.png" width="100" height="100" id="img1"></p>
</div>
<h4>功能未开启</h4>
<h6> </h6>
<h6>敬请期待</h6>
</article>
<article id=wx>
<h2 class="major" id="h21">微信捐助</h2>
<p><img src="images/wxtb.png" width="200" height="200"></p>
<h3 align="center">微信</h3>
<p align="center">请扫描下面的二维码来支付您要捐助的金额</p>
<P align="center"><img src="images/wxbewm.png" width="300" height="300"></P>
<p align="center">在此代表深山中的孩子感谢您</p>
<p>
</p>
</article>
<article id=zfb>
<h2 class="major" id="h21">支付宝捐助</h2>
<p><img src="images/zfbtb.png" width="200" height="200"></p>
<h3 align="center">支付宝</h3>
<p align="center">请扫描下面的二维码来支付您要捐助的金额</p>
<P align="center"><img src="images/zfbewm.png" width="300" height="300"></P>
<p align="center">在此代表深山中的孩子感谢您</p>
<p>
</p>
</article>
</div>
<!--音乐播放器-->
<div id="dg" style="z-index: 9999; position: relative ! important ">
<table width=""100% style="position: absolute; left: 0;">
<iframe class="music" src="music/music.html"></iframe>
</table>
</div>
<!-- Footer -->
<footer id="footer">
<p class="copyright">© 大山里的孩子</p>
</footer>
</div>
<!-- BG -->
<div id="bg"></div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>