website-template/techmarathon.html at master · shecodesvietnam/website-template · GitHub

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
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="author" content="SheCodes Vietnam" />
		<meta
			name="description"
			content="SheCodes Vietnam là một chương trình phi lợi nhuận, nhằm khuyến khích phái nữ tham gia vào lĩnh vực Công nghệ thông tin, qua đó dần dần xóa bỏ khoảng cách giới tính trong lĩnh vực này."
		/>
		<meta property="og:image" content="images/logo/logo_shecodesgirl.png" />
		<meta
			property="og:description"
			content="SheCodes Vietnam là một chương trình phi lợi nhuận, nhằm khuyến khích phái nữ tham gia vào lĩnh vực Công nghệ thông tin, qua đó dần dần xóa bỏ khoảng cách giới tính trong lĩnh vực này."
		/>
		<meta property="og:title" content="SheCodes Vietnam" />
		<link rel="icon" href="assets/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" href="css/icon-font.css" type="text/css" />
		<link
			rel="stylesheet"
			href="css/fontawesome-free-5.13.0-web/css/all.min.css"
			type="text/css"
		/>
		<title>SheCodes Vietnam Tech Marathon</title>
	</head>
	<body>
		<header class="header">
			<div class="header__nav u-padding-top-small">
				<div class="header__nav-box">
					<div class="header__logo-box">
						<a href="index.html" class="navigation__link"
							><img
								src="assets/logo-2020.png"
								alt="SheCodes Logo"
								class="header__logo"
						/></a>
					</div>

					<div class="navigation">
						<input
							type="checkbox"
							class="navigation__checkbox"
							id="navi-toggle"
						/>
						<label for="navi-toggle" class="navigation__button">
							<span class="navigation__icon">&nbsp;</span>
						</label>

						<nav class="navigation__nav-box">
							<ul class="navigation__list u-padding-top-extra-small">
								<li class="navigation__item">
									<a href="hackathon.html" class="navigation__link"
										>Hackathon 2020</a
									>
								</li>
								<li class="navigation__item">
									<a href="#" class="navigation__link">Tech Marathon</a>
								</li>
								<li class="navigation__item">
									<a
										href="https://events.shecodesvietnam.tech"
										class="navigation__link"
										>Sự kiện khác</a
									>
								</li>
								<li class="navigation__item">
									<a href="" class="navigation__link">Blogs</a>
								</li>
							</ul>
						</nav>
					</div>
				</div>
			</div>
			<div class="header__tm-image-box">
				<div class="heading__tm-text-box u-center-text">
					<h1 class="heading-primary--main-white">
						Bạn có đủ sức bền chạy theo công nghệ
					</h1>
					<p class="u-size-16 u-margin-top-medium">
						<em>Lần đầu tiên xuất hiện tại SheCodes</em>
					</p>
				</div>
			</div>
		</header>
		<main>
			<article class="article-tm-about">
				<div class="u-center-text u-margin-bottom-medium">
					<h2 class="heading-secondary">
						Giới thiệu
					</h2>
				</div>
				<div class="row">
					<p class="paragraph u-size-20">
						Trong những năm vừa qua, SheCodes Vietnam đã dần khẳng định được vị
						trí của mình trong việc kết nối và xây dựng cộng đồng phái nữ ngành
						Công nghệ thông tin tại Việt Nam - sáng tạo và vô cùng tài năng!
						Tech Marathon là dự án dạy Code được SheCodes Vietnam lập ra với mục
						tiêu đưa công nghệ thông tin đến gần hơn với các bạn, đặc biệt tới
						phái nữ.
					</p>
				</div>
			</article>
			<article class="article-progress">
				<div class="row u-center-text">
					<h2 class="heading-secondary--white">Quy trình tạo ra lớp học</h2>
				</div>
				<div class="row">
					<div class="col-1-of-5">
						<div class="icon">
							<i class="fas fa-heart feature__icon"></i>
						</div>
						<h3 class="heading-tertiary u-margin-bottom-medium">
							Đồng cảm
						</h3>
					</div>
					<div class="col-1-of-5">
						<div class="icon">
							<i class="fas fa-pencil-alt feature__icon"></i>
						</div>
						<h3 class="heading-tertiary u-margin-bottom-medium">
							Xác định vấn đề
						</h3>
					</div>
					<div class="col-1-of-5">
						<div class="icon">
							<i class="fas fa-lightbulb feature__icon"></i>
						</div>
						<h3 class="heading-tertiary u-margin-bottom-medium">
							Hình thành ý tưởng
						</h3>
					</div>
					<div class="col-1-of-5">
						<div class="icon">
							<i class="icon-basic-webpage-img-txt feature__icon"></i>
						</div>
						<h3 class="heading-tertiary u-margin-bottom-medium">
							Tạo mẫu thử
						</h3>
					</div>
					<div class="col-1-of-5">
						<div class="icon">
							<i class="icon-basic-todolist-pen feature__icon"></i>
						</div>
						<h3 class="heading-tertiary u-margin-bottom-medium">
							Thử nghiệm
						</h3>
					</div>
				</div>
			</article>
			<article class="article-features article-features--special">
				<div class="special-features">
					<div class="row u-center-text">
						<h2 class="heading-secondary">Điểm nổi bật</h2>
					</div>
					<div class="row u-margin-bottom-medium">
						<h3 class="heading-tertiary u-margin-bottom-small">
							1. Lớp học ấm cúng, giá cả phải chăng
						</h3>
						<p class="paragraph">
							Ngày nay, Web Programming là một kỹ năng quan trọng để bạn kinh
							doanh, tiếp cận nhiều người, xây dựng thương hiệu cá nhân qua
							viết, thiết kế, trình bày dự án, … từ đó tăng lợi thế cạnh tranh
							trên thị trường tuyển dụng. Hẳn các bạn trẻ trong quá trình phát
							triển bản thân từng ước có một nơi để cất lên tiếng nói của mình
							với nhiều người hơn, website chính là một hình thức đó.
						</p>
						<p class="paragraph">
							499.000VND cho một khóa học lập trình web là mức giá ưu đãi từ
							MindX với các học viên của SheCodes với mong muốn đem công nghệ
							tiếp cận nhiều hơn. Trong khuôn khổ Tech Marathon - khóa học code
							cho newbie theo dạng mentoring step-by-step, bạn sẽ:
						</p>
						<ul class="u-size-16 feature-list">
							<li>
								Có sản phẩm là 1 website cá nhân sau khi hoàn thành khóa học.
							</li>
							<li>
								Được hướng dẫn các tiếp cận khi muốn tạo ra một website, không
								đơn thuần là học syntax của HTML và CSS.
							</li>
							<li>
								Được hỗ trợ 1 - 1, giải đáp, viết code trong suốt quá trình học.
							</li>
							<li>
								Được nhận chứng nhận từ SheCodes khi hoàn thành project cuối
								khóa.
							</li>
							<li>
								Được hướng dẫn để học lên mức khó hơn của các ngôn ngữ lập
								trình.
							</li>
							<li>
								Trò chuyện, định hướng cùng những người có kinh nghiệm về sự
								nghiệp bản thân trong ngành lập trình.
							</li>
						</ul>
					</div>
					<div class="row u-margin-bottom-big">
						<h3 class="heading-tertiary u-margin-bottom-small">
							2. Sắp xếp hình thức học đa dạng
						</h3>
						<p class="paragraph">
							Không chỉ có giờ học trên lớp, Tech Marathon còn đan xen hoạt động
							như:
						</p>
						<ul class="u-size-16 feature-list">
							<li>
								Q&A: Hỏi đáp
							</li>
							<li>
								Giờ chữa bài và định hướng tư duy
							</li>
							<li>
								Group học tập online:
							</li>
							<li>
								Tương tác trong giờ học: hình ảnh, âm thanh, công nghệ. Biết đâu
								học xong bạn lại rinh được vài tips, trang web hay ho có thể ứng
								dụng trong công việc của mình nhỉ.
							</li>
						</ul>
						<p class="paragraph">
							Ngoài ra, các bạn được cung cấp tài liệu, bài giảng trước khi đến
							lớp. Hãy sắp xếp thời gian và chuẩn bị một tâm thế sẵn sàng, tự
							tin nhất tham gia lớp học nhé.
						</p>
					</div>
					<div class="row u-margin-bottom-big">
						<h3 class="heading-tertiary u-margin-bottom-small">
							3. Đội ngũ hỗ trợ thân thiện
						</h3>
						<p class="paragraph">
							Không phải những chuyên gia trong ngành hay giảng viên cao siêu mà
							là những học sinh, sinh viên - thành viên của SheCodes sẽ đi cùng
							các bạn. Họ là những người bạn tầm tuổi bạn, từng trải qua và vượt
							qua những cản trở y như bạn, ở đây đồng lòng mong muốn chia sẻ
							kinh nghiệm cho phái nữ.
						</p>
					</div>
					<div class="row u-margin-bottom-medium">
						<h3 class="heading-tertiary u-margin-bottom-small">
							4. Chú trọng vào chất lượng hơn số lượng
						</h3>
						<p class="paragraph">
							Trong 6 tiếng ngắn ngủi, bạn không thể nhồi nhét ngay lập tức quá
							nhiều kiến thức, công cụ lập trình vì bạn … sẽ quên ngay thôi.
							SheCodes chú trọng:
						</p>
						<ul class="u-size-16 feature-list">
							<li>
								Ai cũng có thể hiểu được, nhất là các bạn chưa có nhiều kinh
								nghiệm về code;
							</li>
							<li>
								Nhớ được nhiều nhất có thể;
							</li>
							<li>
								Ứng dụng trực quan, bạn học làm web nên bạn học xong sẽ code ra
								một trang web!
							</li>
						</ul>
					</div>
					<div class="row u-margin-bottom-big">
						<h3 class="heading-tertiary u-margin-bottom-small">
							5. Learning path sau khi kết thúc khóa học
						</h3>
						<p class="paragraph">
							Bạn hoang mang trong quá nhiều thông tin, bạn sợ học trước quên
							sau không biết để làm gì? Chúng mình đã chuẩn bị những chỉ dẫn cần
							thiết giúp bạn tự học, lựa chọn công nghệ, và lúc nào cũng sẵn
							sàng giúp đỡ trong khả năng khi bạn cần. Đảm bảo các cô gái không
							bị bỏ lại phía sau!
						</p>
					</div>
				</div>
			</article>
			<article class="article-form">
				<div class="row card">
					<form class="form">
						<div class="row u-center-text">
							<h2 class="heading-secondary">Đăng ký tham gia lớp học</h2>
						</div>
						<div class="form__group">
							<label for="name" class="form__label">Họ tên</label>
							<input
								id="name"
								type="text"
								class="form__input"
								placeholder="Your answer"
								required
							/>
						</div>
						<div class="form__group">
							<label for="date-of-birth" class="form__label">Ngày sinh</label>
							<input
								id="date-of-birth"
								type="date"
								class="form__input"
								placeholder="Ngày sinh"
								required
							/>
						</div>
						<div class="form__group">
							<label for="email" class="form__label">Địa chỉ email</label>
							<input
								id="email"
								type="email"
								class="form__input"
								placeholder="Your answer"
								required
							/>
						</div>
						<div class="form__group">
							<label for="phone" class="form__label">Số điện thoại</label>
							<input
								id="phone"
								type="tel"
								class="form__input"
								placeholder="Your answer"
								required
							/>
						</div>
						<div class="form__group">
							<label for="school" class="form__label"
								>Trường học/Nơi bạn công tác</label
							>
							<input
								id="school"
								type="text"
								class="form__input"
								placeholder="Your answer"
								required
							/>
						</div>
						<div class="form__group">
							<label for="facebook-link" class="form__label"
								>Link facebook cá nhân</label
							>
							<input
								id="facebook-link"
								type="url"
								class="form__input"
								placeholder="Your answer"
								required
							/>
						</div>
						<div class="form__group">
							<label for="question" class="form__label"
								>Bạn có câu hỏi gì cho Tech Marathon không?</label
							>
							<input
								id="question"
								type="text"
								class="form__input"
								placeholder="Your answer"
							/>
						</div>
						<div class="form__group">
							<label for="expectation" class="form__label"
								>Bạn mong được học hỏi điều gì nhất từ Tech Marathon?</label
							>
							<input
								id="expectation"
								type="text"
								class="form__input"
								placeholder="Your answer"
							/>
						</div>
						<div class="form__group u-center-text u-margin-top-medium">
							<button class="btn btn--primary">Đăng ký</button>
						</div>
					</form>
				</div>
			</article>
			<article class="article-contact">
				<div class="row">
					<div class="u-center-text">
						<h2 class="heading-secondary--white">
							Mọi thắc mắc vui lòng liên hệ
						</h2>
					</div>
				</div>
				<div class="row u-center-text">
					<h3 class="heading-tertiary u-margin-bottom-extra-small">
						Ms. Nguyễn Vũ Ngân Hà
					</h3>
					<address class="contact__address">
						<a href="mailto:nhitran.shecodes@gmail.com" class="contact__link"
							>hanguyen.shecodes@gmail.com</a
						>
						<a href="tel:+840356640776" class="contact__link">
							0356640776
						</a>
					</address>
				</div>
			</article>
		</main>
		<footer class="footer u-center-text">
			<div class="footer__logo-box">
				<img src="assets/logo-2020.png" alt="SheCodes Logo" />
			</div>
			<div class="row u-margin-bottom-small u-margin-top-big">
				<div class="col-1-of-2">
					<nav class="footer__navigation">
						<ul class="footer__list">
							<li class="footer__item">
								<a href="staffs.html" class="navigation__link">Đội ngũ</a>
							</li>
							<li class="footer__item">
								<a href="contact.html" class="navigation__link">Liên hệ</a>
							</li>
							<li class="footer__item">
								<a href="about.html" class="navigation__link">Giới thiệu</a>
							</li>
							<li class="footer__item">
								<a href="sponsor.html" class="navigation__link">
									Nhà tài trợ
								</a>
							</li>
							<li class="footer__item">
								<a href="faqs.html" class="navigation__link">FAQs</a>
							</li>
						</ul>
					</nav>
				</div>
				<div class="col-1-of-2">
					<div class="footer__social-media u-margin-bottom-medium">
						<p>Follow us</p>
						<ul class="footer__social-media-list">
							<li class="footer__item">
								<a
									href="https://www.facebook.com/shecodesvietnam/"
									class="navigation__link"
									><i class="fab fa-facebook"></i
								></a>
							</li>
							<li class="footer__item">
								<a
									href="https://www.instagram.com/shecodes.vietnam/?hl=en"
									class="navigation__link"
									><i class="fab fa-instagram"></i
								></a>
							</li>
							<li class="footer__item">
								<a
									href="https://www.linkedin.com/company/shecodeshackathon/"
									class="navigation__link"
									><i class="fab fa-linkedin"></i
								></a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<p class="footer__copyright">
				Thiết kế và phát triển với &#x1F496; bởi SheCodes Hà Nội
			</p>
		</footer>
	</body>
</html>