-
Notifications
You must be signed in to change notification settings - Fork 69
/
online.html
610 lines (579 loc) · 23.2 KB
/
online.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
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
<!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" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link
rel="icon"
type="image/png"
sizes="96x96"
href="images/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="images/gcd-favicon-96x96.png"
/>
<title>Girls Coding Day Online</title>
<!-- Plugins style -->
<link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link
href="plugins/font-awesome/css/font-awesome.min.css"
rel="stylesheet"
/>
<link href="plugins/owl-carousel/owl.carousel.css" rel="stylesheet" />
<link href="plugins/owl-carousel/owl.theme.css" rel="stylesheet" />
<link href="plugins/owl-carousel/owl.transitions.css" rel="stylesheet" />
<link
href="plugins/pe-icon-7-stroke/css/pe-icon-7-stroke.css"
rel="stylesheet"
/>
<link href="plugins/lightbox2/dist/css/lightbox.min.css" rel="stylesheet" />
<!--template style-->
<link href="css/style.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
(function (i, s, o, g, r, a, m) {
i["DaoVoiceObject"] = r;
(i[r] =
i[r] ||
function () {
(i[r].q = i[r].q || []).push(arguments);
}),
(i[r].l = 1 * new Date());
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
a.async = 1;
a.src = g;
a.charset = "utf-8";
m.parentNode.insertBefore(a, m);
})(
window,
document,
"script",
("https:" == document.location.protocol ? "https:" : "http:") +
"//widget.daovoice.io/widget/925c1fb3.js",
"daovoice"
);
daovoice("init", {
app_id: "8b3d964e",
});
daovoice("update");
</script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
</head>
<body data-spy="scroll" data-offset="70" data-target=".navbar">
<nav class="navbar navbar-inverse navbar-sticky navbar-static-top">
<div class="container">
<div class="navbar-header">
<button
type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#navbar"
aria-expanded="false"
aria-controls="navbar"
>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./index.html">Girls Coding Day</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right smooth-scroll">
<li class="active navlink"><a href="./index.html">Home</a></li>
<li class="city-dropdown">
<a
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
活动 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="worldquant.html">WorldQuant</a></li>
<li><a href="wuhan.html">武汉</a></li>
<li><a href="shanghai.html">上海</a></li>
<li><a href="guangzhou.html">广州</a></li>
<li><a href="hangzhou.html">杭州</a></li>
<li><a href="chengdu.html">成都</a></li>
<li><a href="xian.html">西安</a></li>
<li><a href="beijing.html">北京</a></li>
<li><a href="shenzhen.html">深圳</a></li>
<li><a href="nanjing.html">南京</a></li>
<li><a href="chongqing.html">重庆</a></li>
<!-- <li><a href="daleintech.html">DaleInTech</a></li> -->
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<div class="container chapter-container">
<div class="chapter-intro">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="chapter-intro__content">
<div class="row">
<div class="col-md-6 col-sm-12">
<h1 class="danger">
Girls Coding Day 线上场
</h1>
</div>
<div class="col-md-3 col-sm-6">
<!-- <a href="https://jinshuju.net/f/gBVYEJ" target="_blank">
<button class="btn btn-lg btn-danger">
押金班报名（20天内学完退款）
</button>
</a> -->
</div>
<div class="col-md-3 col-sm-6">
<a
href="https://www.hackerstart.cn/#/program"
target="_blank"
>
<button class="btn btn-lg btn-info">
报名
</button>
</a>
</div>
</div>
<br />
<p>
Hello World!
</p>
<p>
Girls Coding Day
自2017年开始，全国范围已经有数千人参与线下活动。之前受限于教练资源，我们的活动只允许女性参与。本次编程入门活动采用线上模式，男女均可报名参与。
</p>
<p>
带领零编程基础背景人群入门 Web 开发，掌握基础 Web
编程技巧（HTMl、CSS），学习如何制作和部署一个静态网站。可参考之前
<a href="http://girlscodingday.org/portfolios.html"
>部分学生作品</a
>
</p>
<br />
<div class="row">
<!-- <div class="col-md-6 col-sm-12">
<h4 class="chapter-intro__sub-header">押金班</h4>
<p>
本次的学习提供的教学服务有：
<li>
在线学习平台 + 41张阅读任务卡
</li>
<li>69个练习和一个大项目</li>
<li>导师和助教批改作业</li>
<li>微信群助教即时答疑</li>
<li>班主任督学</li>
<li>视频直播教学（部分内容是录播视频）</li>
</p>
</div> -->
<div class="col-md-6 col-sm-12">
<h4 class="chapter-intro__sub-header">说明</h4>
<p>价格：69元（原价699）</p>
<p>
本次的学习提供的教学服务有：
<li>
在线学习平台 + 41张阅读任务卡
</li>
<li>69个练习和一个大项目</li>
<li>导师和助教批改作业</li>
<li>微信群助教即时答疑</li>
</p>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6 col-sm-12">
<h3 class="chapter-intro__sub-header">报名要求</h3>
<p>
本次活动不需要任何编程基础。我们假设你
<li>完全不了解编写代码</li>
<li>基本掌握了如何操作计算机</li>
<li>有一台联网的电脑</li>
<li>有20个小时自学</li>
</p>
</div>
<div class="col-md-6 col-sm-12">
<h3 class="chapter-intro__sub-header">联系方式</h3>
<div class="chapter-awesome__content row">
<ul>
<li class="chapter-awesome__item">
<span class="chapter-awesome__icon">
<i class="fa fa-envelope" aria-hidden="true"></i>
</span>
<span>
<a href="mailto:[email protected]"
>
</span>
</li>
<li class="chapter-awesome__item">
<span class="chapter-awesome__icon">
<i class="fa fa-weixin" aria-hidden="true"></i>
</span>
<span>
<a
href=""
data-toggle="modal"
data-target=".chapter-share--wechat"
>
codingirls（点击扫码）
</a>
<div
class="modal fade chapter-share--wechat"
tabindex="-1"
role="dialog"
aria-labelledby="mySmallModalLabel"
>
<div class="modal-dialog" role="document">
<div class="modal-body chapter-share__qrcode">
<img src="images/codingirls-wechat.jpg" />
</div>
</div>
</div>
</span>
</li>
</ul>
</div>
</div>
<!-- <div class="col-md-6 col-sm-12">
<h3 class="chapter-intro__sub-header">您需要</h3>
<div class="chapter-awesome__content row">
<ul>
<li class="chapter-awesome__item">
<span class="chapter-awesome__icon">
<i class="fa fa-laptop" aria-hidden="true"></i>
</span>
<span>
笔记本电脑
</span>
</li>
<li class="chapter-awesome__item">
<span class="chapter-awesome__icon">
<i class="fa fa-heart" aria-hidden="true"></i>
</span>
<span>
乐于学习乐于分享的心态
</span>
</li>
</ul>
</div>
</div> -->
</div>
</div>
<div class="row">
<hr />
<div class="col-md-6 col-sm-12 schedule">
<h3 class="chapter-intro__sub-header">日程安排</h3>
<h4>Girls Coding Day</h4>
<table>
<tbody>
<tr>
<th>8:30 - 09:45 PM</th>
<td>
<h5>Kick Off Party</h5>
介绍Girls Coding Day
活动，开发环境预装，活动资料发放，以及预习知识。
</td>
</tr>
</tbody>
</table>
<hr />
<h4>Girls Coding Day - 14 天学习日程</h4>
<table>
<tbody>
<tr>
<th>第 1 天</th>
<td>
<h5>冲刺1:启动</h5>
<ul>
<li>介绍 开黑和 Web 全栈课程</li>
<li>Web 开发工具和开发环境配置</li>
</ul>
<h5>冲刺2: HTML 和 CSS 介绍</h5>
<ul>
<li>1.HTML 和 CSS 是什么？</li>
<li>2.HTML 基础语法</li>
<li>3.HTML 文档结构</li>
</ul>
</td>
</tr>
<tr>
<th>第2天</th>
<td>
<h5>冲刺2: HTML 和 CSS 介绍</h5>
<ul>
<li>4.CSS 语法</li>
<li>5.CSS 选择器</li>
<li>6.冲刺挑战</li>
<li>7.谷歌浏览器调试工具</li>
</ul>
</td>
</tr>
<tr>
<th>第3天</th>
<td>
<h5>冲刺3: HTML 基础</h5>
<ul>
<li>
<p>1.HTML 语义</p>
</li>
<li>
<p>2.块元素和行内元素</p>
</li>
<li>
<p>3.文本元素</p>
</li>
<li>
<p>4.结构元素</p>
</li>
<li>
<p>5.超链接</p>
</li>
<li>
<p>6.HTML 最佳实践</p>
</li>
<li>
<p>7.冲刺挑战e - 实验1</p>
</li>
<li>HTML 测试</li>
</ul>
</td>
</tr>
<tr>
<th>第4天</th>
<td>
<h5>冲刺4: CSS 基础</h5>
<ul>
<li>1.CSS 级联</li>
<li>2.CSS 特异性</li>
<li>3.组合和分层选择器</li>
</ul>
</td>
</tr>
<tr>
<th>第5天</th>
<td>
<h5>冲刺4: CSS 基础</h5>
<ul>
<li>
<p>4.颜色</p>
</li>
<li>
<p>5.长度</p>
</li>
<li>
<p>6.CSS 最佳实践</p>
</li>
<li>
<p>7.冲刺挑战 - 实验2</p>
</li>
<li>CSS 测试</li>
</ul>
</td>
</tr>
<tr>
<th>第6天</th>
<td>
<h5>冲刺5: 定位</h5>
<ul>
<li>1.盒子模型</li>
<li>2.浮动定位</li>
<li>3.行内定位</li>
<li>4.创建网络结构</li>
</ul>
</td>
</tr>
<tr>
<th>第7天</th>
<td>
<h5>冲刺5: 定位</h5>
<ul>
<li>5.精准定位</li>
<li>6.冲刺挑战e- 实验3</li>
<li>7.定位测试</li>
</ul>
</td>
</tr>
<tr>
<th>第8天</th>
<td>
<h5>冲刺6: HTML 和 CSS 进阶</h5>
<ul>
<li>1.文本样式</li>
<li>2.背景和渐变</li>
<li>3.列表</li>
<li>4.媒体</li>
<li>5.表格</li>
</ul>
</td>
</tr>
<tr>
<th>第9天</th>
<td>
<h5>冲刺6: HTML 和 CSS 进阶</h5>
<ul>
<li>6.表单</li>
<li>7.CSS属性选择器</li>
<li>8.冲刺挑战e实验4</li>
<li>9.HTML 和 CSS 进阶</li>
</ul>
</td>
</tr>
<tr>
<th>第 10 -14 天</th>
<td>
<h5>大作业1 - 苹果网址克隆</h5>
</td>
</tr>
</tbody>
</table>
<!--
<div class="chapter-intro__item">
<h3 class="chapter-intro__sub-header">
战略合作伙伴
</h3>
<div class="chapter-partner">
<a href="https://github.com/" target="_blank">
<img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Logo.png">
</a>
</div>
</div> -->
<!-- <div class="chapter-intro__item">
<h3 class="chapter-intro__sub-header">
社区合作伙伴
</h3>
<div class="chapter-partner" style="display: inline-block; margin: 1em;">
<a href="http://https://juejin.im/" target="_blank ">
<img src="images/partners/juejin_logo.png" alt="掘金" width="250">
</a>
</div>
</div> -->
<!-- <div class="chapter-intro__item">
<h3 class="chapter-intro__sub-header">
合作伙伴
</h3>
<div class="chapter-partner">
<a href="https://www.thoughtworks.com/">
<img src="images/partners/th-logo.png" target="_blank">
</a>
</div>
</div> -->
</div>
<div class="col-md-6 col-sm-12">
<!-- <div class="chapter-intro__item">
<h3 class="chapter-intro__sub-header">地点</h3>
<p>地点待定</p>
</div> -->
<!-- <div id="wrap" class="my-map">
<div id="container" style="width:500px; height:300px"></div>
</div> -->
<div class="chapter-intro__item">
<h3 class="chapter-intro__sub-header">合作伙伴</h3>
<div class="chapter-partner">
<a href="https://www.hackerstart.cn/" target="_blank">
<img src="/images/partners/hackerstart.png" />
</a>
<p>
<b>开黑</b>
采用敏捷教学法设计课程，小规模限制性在线课堂（SPOC）模式、一线讲师小班直播教学，助教助学，全球顶尖软件咨询公司合作研发课程，400学时让你成为web全栈工程师！
已经帮助500名非计算机背景学员从零开启科技人生新篇章。
</p>
</div>
<!-- <p>
合作意向咨询请联系
<a href="mailto:[email protected]"
>
</p> -->
</div>
</div>
</div>
<!-- <hr> -->
</div>
</div>
</div>
</div>
<footer id="footer" class="footer footer__copyright">
<div class="container">
<div class="col-sm-8">
<ul class="list-inline">
<li>
Hosted by
<a href="http://www.codingirlsclub.com/">Coding Girls Club</a>
</li>
</ul>
</div>
<div class="col-sm-4 text-right">
<span>© Copyright 2020. Coding Girls Club</span>
</div>
</div>
</footer>
<!-- jQuery-->
<script src="plugins/jquery/dist/jquery.min.js"></script>
<script src="js/jquery-migrate.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/owl-carousel/owl.carousel.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/jquery.countdown.js"></script>
<script src="plugins/lightbox2/dist/js/lightbox.min.js"></script>
<script src="js/custom.js"></script>
<script>
function init() {
var center = new qq.maps.LatLng(30.49212, 114.41048);
var myOptions = {
zoom: 12,
center: center,
mapTypeId: qq.maps.MapTypeId.ROADMAP,
scrollwheel: false,
};
var map = new qq.maps.Map(
document.getElementById("container"),
myOptions
);
var marker = new qq.maps.Marker({
position: center,
map: map,
});
var info = new qq.maps.InfoWindow({
map: map,
});
//获取标记的可拖动属性
info.open();
qq.maps.event.addListener(marker, "click", function () {
info.open();
info.setContent(
'<div style="text-align:center;white-space:nowrap;' +
'margin:10px;">洪山区关山大道332号保利国际中心20层<br/> ThoughtWorks 武汉分公司</div>'
);
info.setPosition(marker.getPosition());
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://map.qq.com/api/js?v=2.exp&callback=init";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<script src="https://wx.duohui.co/js/embed.js"></script>
<!-- 多会 -->
</body>
</html>