-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
361 lines (359 loc) · 16.9 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
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>慕课问道</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/user.min.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
type="text/css">
</head>
<body>
<!-- Header 顶部Logo栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<div class="container">
<!-- Logo -->
<a class="navbar-brand text-primary" href="#">
<i class="fa d-line fa-lg fa-circle-o">
<b>慕课问道</b>
</i>
</a>
<!-- Collapse 入口 -->
<button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse"
data-target="#user">
<p class="navbar-brand mb-0 text-light">
Log Here
</p>
</button>
<!-- Collapse 内容 -->
<div class="collapse navbar-collapse text-secondary" id="user">
<ul class="navbar-nav mr-auto"></ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-muted text-right" data-toggle="modal" href="#signinmodal">登陆</a>
</li>
<li class="nav-item">
<a class="nav-link text-muted text-right" data-toggle="modal" href="#signupmodal">注册</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 登录模态框的实现 -->
<div class="modal fade" id="signinmodal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>登录</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-12">
<form method="post" action="">
<div class="form-group">
<label>用户名:</label>
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label>密码:</label>
<div class="form-group">
<input type="password" class="form-control" name="pwd" placeholder="请输入密码">
</div>
</div>
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" id="remenberme" value="on">
<label class="form-check-label" for="remenberme">记住登陆状态</label>
</div>
<hr>
<button type="submit" class="btn btn-secondary my-2">登录</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 注册模态框的实现 -->
<div class="modal fade" id="signupmodal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>注册</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-12">
<form method="post" action="">
<div class="form-group">
<label>用户名:</label>
<div class="form-group">
<input type="text" class="form-control" name="username"
placeholder="Like: Edward Fish">
</div>
</div>
<div class="form-group">
<label>邮箱:</label>
<div class="form-group">
<input type="email" class="form-control" name="email"
placeholder="Like: Edward_Fish@gmail.com">
</div>
</div>
<div class="form-group">
<label>密码:</label>
<div class="form-group">
<input type="password" class="form-control" name="pwd"
placeholder="Password Here" id="pwd">
</div>
</div>
<div class="form-group">
<label>确认密码:</label>
<div class="form-group">
<input type="password" class="form-control" name="pwd_check"
placeholder="Password Again" id="pwd_check" onkeyup="validate()">
</div>
</div>
<p class="text-danger form-text" id="error"></p>
<hr>
<button type="submit" class="btn btn-secondary my-2" id="submit">注册</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Header End -->
<!-- Navigator 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- Collapse 入口 -->
<button class="navbar-toggler navbar-toggler-right border-0 p-0" type="button" data-toggle="collapse"
data-target="#navigator">
<p class="navbar-brand mb-0 text-light">
<i class="fa d-inline fa-lg fa-stop-circle"></i>
Navigator
</p>
</button>
<!-- Collapse 内容 -->
<div class="collapse navbar-collapse text-secondary" id="navigator">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="courses.html">在线课程</a>
</li>
<li class="nav-item">
<a class="nav-link" href="teachers.html">师资队伍</a>
</li>
<li class="nav-item">
<a class="nav-link" href="certifications.html">学位证书</a>
</li>
<li class="nav-item">
<a class="nav-link" href="meetings.html">技术会议</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">关于我们</a>
</li>
</ul>
</div>
<!-- 搜索框的实现 -->
<form class="form-inline my-2 my-lg-0" method="get" action="result.html">
<input class="form-control mr-sm-2" type="text" name="key" id="search" placeholder="键入搜索内容">
<button class="btn my-2 my-sm-0 btn-outline-info bg-dark" type="submit" id="submitbutton">
搜索
</button>
</form>
</div>
</nav>
<!-- Navigator End -->
<!-- Body 网页主体 -->
<div class="py-5 text-white"
style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(img/PC.jpg); background-position: center center, center center; background-size: cover, cover; background-repeat: repeat, repeat;">
<div class="container">
<div class="row">
<div class="col-lg-5 p-0">
<div class="embed-responsive embed-responsive-4by3">
<video class="embed-responsive-item" type="video/mp4" controls="controls"
src="video/Typing_dark.mov"> Your browser does not support HTML5 video.
</video>
</div>
</div>
<div class="p-5 col-lg-7 d-flex flex-column justify-content-center">
<h3 class="display-4 mb-3">Funny Company</h3>
<p class="lead mb-0">真正的大师,永远怀着一颗学徒的心。</p>
<br>
<p class="lead mb-0">高水平的教师团队</p>
<p class="lead mb-0">国际化的课程设置</p>
<p class="lead mb-0">超一流的办学水准</p>
<br>
<p class="lead mb-0">我们是Funny Company,你想要的,这里都有!</p>
</div>
</div>
</div>
</div>
<div class="py-5"
style="background-image: url(img/tower.jpg); background-position: right bottom; background-size: cover; background-repeat: repeat; background-attachment: fixed;">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 align="center" class="text-white">网红课程</h1>
<br>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card"><img class="card-img-top" src="img/search/Pizza.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">披萨的系统结构</h4>
<p class="card-text">亲爱的吃货,所谓披萨,其结构多种多样,有曼·伊诺冯结构、佛哈结构,你都了解吗?披萨的使用方式,并行食用、分布式食用、多核食用,你都试过吗?</p>
<a href="#" class="btn btn-primary disabled">进入课程</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card"><img class="card-img-top" src="img/search/kongyiji.jpeg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">茴香豆的“茴”有几种写法</h4>
<p class="card-text">Lemon每逢讲课,必要带学生去镇口的咸亨酒店,他是站着喝酒而穿长衫唯一的人,所有人笑他,他不回答,对柜里说:“温两碗酒,要一碟茴香豆.”</p>
<a href="#" class="btn btn-primary disabled">进入课程</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card"><img class="card-img-top" src="img/search/math.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">C为何鸡和兔子在一个笼子里</h4>
<p class="card-text">
忘记跟你说个秘密了,虽然Janaldo在我司教授数学,他却不是数学系出身哦~他将与大家揭秘他在牛蹄筋大学拿下养殖学学位的论文《如何正确饲养鸡和兔子》.</p> <a href="#"
class="btn btn-primary disabled">进入课程</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-5 text-center text-white"
style=" background-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(img/coding.jpg); background-position: center center, center center; background-size: cover, cover; background-repeat: repeat, repeat;">
<div class="container">
<div class="row">
<div class="mx-auto col-md-12">
<h1 class="mb-3">明星教师</h1>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 p-4">
<a href="https://bye-lemon.github.io">
<img class="img-fluid d-block mb-3 mx-auto rounded-circle"
src="img/ours/Lemon.jpg" alt="Card image cap" width="200">
</a>
<h4><b>Lemon</b></h4>
<p class="mb-0">CEO and founder</p>
</div>
<div class="col-lg-4 col-md-6 p-4">
<a href="https://janaldochen.github.io">
<img class="img-fluid d-block mb-3 mx-auto rounded-circle"
src="img/ours/Janaldo.jpg" alt="Card image cap" width="200">
</a>
<h4><b>Janaldo</b></h4>
<p class="mb-0">Co-founder</p>
</div>
<div class="col-lg-4 p-4">
<a href="https://sultimer.github.io">
<img class="img-fluid d-block mb-3 mx-auto rounded-circle"
src="img/ours/Sultimer.JPG" width="200">
</a>
<h4><b>Sultimer</b></h4>
<p class="mb-0">Evangelist</p>
</div>
</div>
</div>
</div>
<!-- Body End -->
<!-- Footer 网页底部 -->
<div class="py-3 bg-dark text-muted">
<div class="container">
<div class="row">
<div class="col-lg-3 col-6 p-3">
<h5><b>我们的团队</b></h5>
<ul class="list-unstyled">
<li><a href="courses.html">在线课程</a></li>
<li><a href="teachers.html">师资队伍</a></li>
<li><a href="certifications.html">学位证书</a></li>
<li><a href="meetings.html">技术会议</a></li>
</ul>
</div>
<div class="p-3 col-lg-3 col-6">
<h5><b>联系我们</b></h5>
<p class="text-muted">
<i class="fa d-inline mr-3 text-muted fa-phone"></i>+86 - 1234567890
</p>
<p class="text-muted">
<i class="fa d-inline mr-3 text-muted fa-envelope-o"></i>funnycompany.com
</p>
<p class="text-muted">
<i class="fa d-inline mr-3 fa-map-marker text-muted"></i>365 Park Street, DL
</p>
</div>
<div class="col-lg-6 col-md-6 p-3">
<h5><b>我们的理念</b></h5>
<p class="mb-0">
Funny Company
由创始人Edward
Fish爵士于公元1998年创立,致力于将滑稽文化推广到整个世界。我们的教育模式寓教于乐,课程体系覆盖多领域、多年龄段。只有你想不到的,没有你能想到的。我们坚信,努力不一定会成功,但是躺在床上一定很舒服。世上无难事,只要肯放弃。只要我们E得足够快乐,世人的问号就追不上我!
</p>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<p class="mb-0 mt-2">© 1998 - 2018 Funny Company. All rights reserved</p>
</div>
</div>
</div>
</div>
<!-- Footer End -->
<!-- Javascript 脚本 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
// Header 模态框的显示
$('signinmodal').modal('show');
$('signupmodal').modal('show');
// 注册模态框中密码是否一致的判断
function validate() {
var pw1 = document.getElementById("pwd").value;
var pw2 = document.getElementById("pwd_check").value;
if (pw1 !== pw2) {
document.getElementById("error").innerHTML = "两次密码输入不一致";
document.getElementById("submit").disabled = true;
}
else {
document.getElementById("error").innerHTML = "";
document.getElementById("submit").disabled = false;
}
}
// 搜索URL中文乱码的解决
$("submitbutton").click(function () {
var searchText = jQuery.trim($("search").val());
var searchUrl = encodeURI("result.html?key=" + searchText); //使用encodeURI编码
window.location.href = searchUrl;
});
</script>
<!-- Javascript End -->
</body>
</html>