-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
592 lines (582 loc) · 30 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
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
<!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>카카오뱅크 모작_김보람</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
<!-- 제이쿼리 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 구글 폰트 불러오기 -->
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&family=Roboto:wght@400;700;900&display=swap"
rel="stylesheet"
/>
<!-- 폰트어썸 불러오기 -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"
/>
<!-- 슬릭 슬라이더 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="top-bar con-min-width">
<div class="con flex height-100p">
<a href="#" class="logo flex flex-ai-c">
<img src="https://www.kakaobank.com/static/images/web/logo_black.svg" alt="">
</a>
<div class="flex-grow-1"></div>
<nav class="menu-box-1">
<ul class="flex height-100p">
<!--은행소개--> <li>
<a href="#" class="height-100p flex flex-ai-c">은행소개</a>
<div class="con-min-width">
<div class="con">
<ul class="flex">
<li>
<a class="block" href="#">카카오뱅크</a>
<ul>
<li><a href="#" class="block">브랜드</a></li>
<li><a href="#" class="block">주주사 소개</a></li>
<li><a href="#" class="block">오시는 길</a></li>
<li><a href="#" class="block">제휴문의</a></li>
</ul>
</li>
<li>
<a href="#" class="block">윤리경영</a>
<ul>
<li><a href="#" class="block">윤리강령</a></li>
<li><a href="#" class="block">임직원행동기준</a></li>
</ul>
</li>
<li>
<a href="#" class="block">인재영입 ></a>
</li>
<li>
<a href="#" class="block">새소식</a>
<ul>
<li><a href="#" class="block">공지사항</a></li>
<li><a href="#" class="block">보도자료</a></li>
<li><a href="#" class="block">보도자료</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="height-100p flex flex-ai-c">IR투자정보</a>
<div class="con-min-width">
<div class="con">
<ul class="flex">
<li>
<a href="#" class="block">공시정보</a>
<ul>
<li><a href="#" class="block">전자공시</a></li>
<li><a href="#" class="block">경영공시</a></li>
<li><a href="#" class="block">바젤공시</a></li>
<li><a href="#" class="block">기타공시</a></li>
<li><a href="#" class="block">공시규정</a></li>
</ul>
</li>
<li>
<a href="#" class="block">경영정보</a>
<ul>
<li><a href="#" class="block">이사회</a></li>
<li><a href="#" class="block">지속가능경영</a></li>
</ul>
</li>
<li>
<a href="#" class="block">재무정보</a>
<ul>
<li><a href="#" class="block">재무제표</a></li>
<li><a href="#" class="block">감사보고서</a></li>
<li><a href="#" class="block">영업보고서</a></li>
<li><a href="#" class="block">신용등급</a></li>
</ul>
</li>
<li>
<a href="#" class="block">IR자료실</a>
<ul>
<li><a href="#" class="block">실적발표</a></li>
<li><a href="#" class="block">주가정보</a></li>
</ul>
</li>
<li>
<a href="#" class="block">IR일정</a>
<ul>
<li><a href="#" class="block">IR행사</a></li>
<li><a href="#" class="block">IR미팅예약</a></li>
<li><a href="#" class="block">주주총회</a></li>
</ul>
</li>
<li>
<a href="#" class="block">공고</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="height-100p flex flex-ai-c">상품안내</a>
<div class="con-min-width">
<div class="con">
<ul class="flex">
<li>
<a href="#" class="block">예적금</a>
<ul>
<li><a href="#" class="block">입출금통장</a></li>
<li><a href="#" class="block">모임통장</a></li>
<li><a href="#" class="block">세이프박스</a></li>
<li><a href="#" class="block">저금통</a></li>
<li><a href="#" class="block">정기예금</a></li>
<li><a href="#" class="block">자유적금</a></li>
<li><a href="#" class="block">26주적금</a></li>
</ul>
</li>
<li>
<a href="#" class="block">대출</a>
<ul>
<li><a href="#" class="block">비상금대출</a></li>
<li><a href="#" class="block">마이너스 통장대출</a></li>
<li><a href="#" class="block">신용대출</a></li>
<li><a href="#" class="block">전월세보증금 대출</a></li>
<li><a href="#" class="block">주택담보대출</a></li>
</ul>
</li>
<li>
<a href="#" class="block">서비스</a>
<ul>
<li><a href="#" class="block">내 신용정보</a></li>
<li><a href="#" class="block">해외송금 보내기</a></li>
<li><a href="#" class="block">해외송금 받기</a></li>
<li><a href="#" class="block">프렌즈 체크카드</a></li>
</ul>
</li>
<li>
<a href="#" class="block">제휴서비스</a>
<ul>
<li><a href="#" class="block">증권사 주식계좌</a></li>
<li><a href="#" class="block">제휴 신용카드</a></li>
</ul>
</li>
<li>
<a href="#" class="block">mini</a>
<ul>
<li><a href="#" class="block">카카오뱅크 mini</a></li>
<li><a href="#" class="block">mini 카드</a></li>
<li><a href="#" class="block">mini 26일 적금</a></li>
</ul>
</li>
<li>
<a href="#" class="block">사업자</a>
<ul>
<li><a href="#" class="block">개인사업자통장</a></li>
<li><a href="#" class="block">개인사업자 신용대출</a></li>
<li><a href="#" class="block">개인사업자 체크카드</a></li>
<li><a href="#" class="block">개인사업자 제휴 신용카드</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="height-100p flex flex-ai-c">고객센터</a>
<div class="con-min-width">
<div class="con">
<ul class="flex">
<li>
<a href="#" class="block">이용안내</a>
<ul>
<li><a href="#" class="block">자주 묻는 질문</a></li>
<li><a href="#" class="block">이용시간 안내</a></li>
<li><a href="#" class="block">ATM 이용안내</a></li>
<li><a href="#" class="block">금리안내</a></li>
<li><a href="#" class="block">금리인하요구권 안내</a></li>
<li><a href="#" class="block">수수료안내</a></li>
<li><a href="#" class="block">상담안내</a></li>
</ul>
</li>
<li>
<a href="#" class="block">상담하기</a>
<ul>
<li><a href="#" class="block">고객의 소리</a></li>
<li><a href="#" class="block">1:1 문의</a></li>
</ul>
</li>
<li>
<a href="#" class="block">소비자보호</a>
<ul>
<li><a href="#" class="block">소비자보호체계</a></li>
<li><a href="#" class="block">소비자보호 우수사례</a></li>
<li><a href="#" class="block">전자민원</a></li>
<li><a href="#" class="block">소비자보호공시</a></li>
<li><a href="#" class="block">민원사무편람</a></li>
<li><a href="#" class="block">금융정보</a></li>
<li><a href="#" class="block">보안취약점 신고 안내</a></li>
</ul>
</li>
<li>
<a href="#" class="block">금융사기대응</a>
<ul>
<li><a href="#" class="block">금융사기예방</a></li>
<li><a href="#" class="block">피해대처방법</a></li>
<li><a href="#" class="block">피해신고관련서식</a></li>
<li><a href="#" class="block">카카오뱅크 사칭제보</a></li>
</ul>
</li>
<li>
<a href="#" class="block">증명서</a>
<ul>
<li><a href="#" class="block">나의 증명서 발급내역</a></li>
<li><a href="#" class="block">증명서 진위 확인</a></li>
</ul>
</li>
<li>
<a href="#" class="block">약관 ∙ 서식</a>
<ul>
<li><a href="#" class="block">약관</a></li>
<li><a href="#" class="block">서식</a></li>
<li><a href="#" class="block">상품설명서</a></li>
<li><a href="#" class="block">상품공시</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
<a href="#" class="btn-go-submit flex flex-ai-c flex-as-c">서류제출하기</a>
<a href="#" class="global-logo flex flex-ai-c">
<img src="https://www.kakaobank.com/static/images/web/icon_eng.svg" alt="">
</a>
</div>
</div>
<div class="top-banner-box-1 con-min-width">
<div class="bg"></div>
<div class="con relative">
<div class="txt-box">
<h1>이미 모두의 은행<br>지금은 카카오뱅크</h1>
<h2>한 사람, 한 사람을 위해 시작한 은행이<br>더 많은 사람들이 찾는 모두의 은행이 되었습니다.</h2>
<h2>보내고, 받고, 모으고, 쓰는<br>당신의 모든 일이 바뀌고 있습니다.</h2>
<ul class="btns flex">
<li>
<a href="#"><span class="ico ico-1"></span>Google Play</a>
</li>
<li>
<a href="#"><span class="ico ico-2"></span>App store</a>
</li>
</ul>
</div>
</div>
<div class="con img-box">
<img src="https://www.kakaobank.com/static/images/web/renewal/main-bg3.png" alt="">
</div>
</div>
<div class="top-banner-box-2 top-banner-box-type-1 con">
<div>
<div class="img-box"><img src="https://www.kakaobank.com/static/images/web/renewal/main-withdrawal.png" alt=""></div>
</div>
<div>
<div class="txt-box">
<h1>모바일로 더 손쉬운
<br>
계좌개설, 간편한 이체
</h1>
<div class="des">
인증서, OTP 없이 계좌 개설이 간편합니다.
<br>
여러 건의 이체도 몇 번의 터치로 손쉽게 보낼 수 있습니다.
</div>
<div class="btn-box">
<a href="#"><span>카카오뱅크 입출금통장</span></a>
</div>
</div>
</div>
</div>
<div class="top-banner-box-type-1-between-pad"></div>
<div class="top-banner-box-3-wrap overflow-hidden con-min-width">
<!--이미지 등장시 숨겨져 있는 부분을 보이는 것 방지하기 위해 overflow:hidden을 걸어주기 위함-->
<div class="top-banner-box-3 top-banner-box-type-1 con">
<div>
<div class="txt-box">
<h1>
우대조건 없이
<br>
합리적인 예금과 적금
</h1>
<div class="des">
기대했던 금리와 다르게 복잡한 우대조건에 실망한 적이 있었나요?
<br>
카카오뱅크의 예금, 적금은 숨겨진 우대조건 없이 누구에게나 편리하고 합리적입니다.
</div>
<div class="btn-box">
<a href="#"><span>정기예금</span></a>
<a href="#"><span>자유적금</span></a>
</div>
<div class="img-box-1">
<img src="https://www.kakaobank.com/static/images/web/renewal/main-savings-money.png" alt="">
</div>
</div>
</div>
<div>
<div class="img-box active-on-visible can-active-once" data-active-on-visible-diff-y="-200">
<img src="https://www.kakaobank.com/static/images/web/renewal/main-savings.png" alt="">
</div>
</div>
</div>
</div>
<div class="top-banner-box-type-1-between-pad"></div>
<div class="top-banner-box-4 top-banner-box-type-1 con">
<div>
<div class="img-box"><img src="https://www.kakaobank.com/static/images/web/renewal/main-moim.png" alt=""></div>
</div>
<div>
<div class="txt-box">
<h1>함께 쓰고 같이 보는
<br><span class="txt-logo-1"></span>
모임통장
<span class="txt-logo-2"></span>
</h1>
<div class="des">
카카오톡 친구를 바로 모임통장으로 초대하고
<br>
친구들과 함께 잔액과 입출금 현황을 확인할 수 있습니다.
<br>
재미있는 메시지 카드로 회비 입금 요청도 해보세요.
</div>
<div class="btn-box">
<a href="#"><span>모임통장</span></a>
</div>
</div>
</div>
</div>
<div class="top-banner-box-type-1-between-pad"></div>
<div class="top-banner-box-5 top-banner-box-type-1 con">
<div>
<div class="txt-box">
<h1>
함께 도전해서
<br>
재미있는 26주적금
</h1>
<div class="des">
26주동안 변화하는 재미에 빠져있는 사이
<br>
어느덧 만기 달성 경험을 맛보게 됩니다.
</div>
<div class="btn-box">
<a href="#"><span>26주적금</span></a>
</div>
</div>
</div>
<div>
<div class="img-box">
<img src="https://www.kakaobank.com/static/images/web/renewal/main-26weeks.png" alt="">
</div>
</div>
</div>
<div class="top-banner-box-type-1-between-pad"></div>
<div class="top-banner-box-6-wrap con-min-width">
<!--배경지도를 넣어야 해서 wrap을 만들어 top-banner-box-6 top-banner-box-type-1 con을 감쌌다. 배경지도는 top-banner-box-6와 달리 1080을 넘어도 되기 때문에 con-min-width 해줌. 부모에게 해준다-->
<div class="top-banner-box-6 top-banner-box-type-1 con">
<div>
<div class="img-box active-on-visible can-active-once" data-active-on-visible-diff-y="-200">
<img src="https://www.kakaobank.com/static/images/web/renewal/main-foreignRemittance-new.png" alt="">
</div>
</div>
<div>
<div class="txt-box">
<h1>
해외계좌송금과
<br>
WU빠른해외송금을
<br>
더 쉽고, 저렴하게
</h1>
<div class="des">
해외계좌송금이 가능한 22개국을 포함하여
<br>
전세계 200여개국으로
<br>
WU빠른해외송금이 가능합니다.
</div>
<div class="btn-box">
<a href="#"><span>해외송금</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="loan-box con-min-width active-on-visible" data-active-on-visible-delay="1000">
<!--대출박스는 1080 범위 이상이기 때문에-->
<div class="sky">
<div class="stars">
<span class="ico-star ico-star-1"></span>
<span class="ico-star ico-star-2"></span>
<span class="ico-star ico-star-3"></span>
<span class="ico-star ico-star-4"></span>
<span class="ico-star ico-star-5"></span>
<span class="ico-star ico-star-6"></span>
<span class="ico-star ico-star-7"></span>
</div>
<div class="blue"></div>
<div class="moon">
<!--달의 본판과 달을 가릴 그림자를 자식으로 만든다. base는 낮에 해 역할-->
<div class="base"></div>
<div class="shadow"></div>
</div>
<div class="stars"></div>
</div>
<div class="con">
<!--글자는 1080 범위 안에 있기 때문에-->
<h1 class="txt-al-c">복잡한 서류 제출을 간편하게, 내가 원하는 시간에</h1>
<div class="des txt-al-c">이사 날짜가 주말이나 공휴일이어도 전월세보증금 대출을 신청할 수 있습니다.</div>
<div class="menu-box-1">
<ul class="flex flex-jc-c">
<!--li들을 가로 한줄로 놓고, justify center 한 것-->
<li><a href="#"><span>마이너스 통장대출</span></a></li>
<li><a href="#"><span>신용대출</span></a></li>
<li><a href="#"><span>개인사업자 대출</span></a></li>
<li><a href="#"><span>전월세보증금 대출</span></a></li>
</ul>
</div>
<div class="img-box-1"><img src="https://www.kakaobank.com/static/images/web/renewal/main-loan.png" alt=""></div>
</div>
</div>
<div class="checkcard-box con-min-width">
<!--대출박스는 1080 범위 이상이기 때문에-->
<div class="con txt-al-c">
<h1>프렌즈 체크카드, <br> 내가 고르는 선택의 즐거움</h1>
<div class="des txt-al-c">
프렌즈 디자인부터 멋스러운 블랙 컬러 카드까지 원하는 디자인과 기능을 선택할 수 있습니다.
</div>
<div class="btn-box">
<a href="#"><span>카카오뱅크 프렌즈 체크카드</span></a>
</div>
</div>
<div class="slider-box-1">
<div class="arrows">
<div class="btn-arrow btn-arrow-left"><img src="https://www.kakaobank.com/static/images/web/img-left.png" alt=""></div>
<div class="btn-arrow btn-arrow-right"><img src="https://www.kakaobank.com/static/images/web/img-right.png" alt=""></div>
</div>
<div class="slick">
<div class="item">
<div class="img-box"><img src="https://www.kakaobank.com/static/images/web/renewal/card-1.png" alt=""></div>
</div>
<div class="item">
<div class="img-box"><img src="https://www.kakaobank.com/static/images/web/renewal/card-2.png" alt=""></div>
</div>
<div class="item">
<div class="img-box"><img src="https://www.kakaobank.com/static/images/web/renewal/card-3.png" alt=""></div>
</div>
<div class="item">
<div class="img-box"><img src="https://www.kakaobank.com/static/images/web/renewal/card-4.png" alt=""></div>
</div>
<div class="item">
<div class="img-box"><img src="https://www.kakaobank.com/static/images/web/renewal/card-5.png" alt=""></div>
</div>
</div>
</div>
</div>
<div class="itskill-box con-min-width">
<div class="con">
<h1 class="txt-al-c">IT 기술로 카카오뱅크를<br>만들어 갑니다.</h1>
<div class="divider"></div>
<!--위의 글과 info-box 사이 짧은 가로선-->
<div class="info-box">
<div class="img-box"><img src="https://www.kakaobank.com/static/images/web/home_it.png" alt=""></div>
<ul class="flex flex-jc-sb">
<li>
<h1>간결하고, 유려하게</h1>
<div class="des">작은 모바일 화면에 적합하도록<br>
복잡함을 덜어낸<br>
유려하고 친화적인 UX</div>
</li>
<li>
<h1>간편한 인증, 철저한 보안</h1>
<div class="des">지문, 비밀번호로 간편한 인증<br>
IT 기술의 강력한 보안 검증과<br>
데이터 암호화</div>
</li>
<li class="flex-grow-1"></li>
<!--중간 간격 공간-->
<li>
<h1>Mobile First, One App</h1>
<div class="des">모바일에서 뱅킹이 더 쉽고 편리하게<br>
여러 앱을 설치할 필요 없이<br>
하나의 앱으로</div>
</li>
</ul>
</div>
</div>
</div>
<div class="bottom-bar con-min-width">
<div class="con">
<div class="box-1">
<div class="menu-box-1">
<ul class="flex flex-wrap">
<li class="not"><a href="#">모바일뱅킹 서비스 이용약관</a></li>
<li><span class="txt-bar"></span></li>
<li><a href="#"></a>전자금융거래 기본약관</li>
<li><span class="txt-bar"></span></li>
<li class="strong black">위치기반 서비스 이용약관<a href="#"></a></li>
<li><span class="txt-bar"></span></li>
<li class="strong black"><a href="#">개인정보처리방침</a></li>
<li><span class="txt-bar"></span></li>
<li class="strong black"><a href="#">전자민원접수</a></li>
<li><span class="txt-bar"></span></li>
<li><a href="#"></a>보호금융상품등록부</li>
<li><span class="txt-bar"></span></li>
<li><a href="#"></a>상품공시실</li>
<li><span class="txt-bar"></span></li>
<li><a href="#"></a>경영공시</li>
<li><span class="txt-bar"></span></li>
<li><a href="#"></a>공지사항</li>
<li class="not"><a href="#">전자서명인증업무준칙</a></li>
<li><span class="txt-bar"></span></li>
<li><a href="#">카카오뱅크 인증서 서비스 이용약관</a></li>
<li><span class="txt-bar"></span></li>
<li class="strong black"><a href="#">개인정보처리방침</a></li>
<li class="flex-grow-1"></li>
</ul>
</div>
</div>
<div class="box-2">
<a href="tel:375-88-00197" class="kakao-tel">(주)카카오뱅크∙윤호영∙사업자번호 375-88-00197</a>
<a href="tel:1599-3333" class="rep-contact black">대표전화 1599-3333</a>
<a href="tel:+82-2-6420-3333" class="overseas-contact">(해외 +82-2-6420-3333)</a>
<div class="copyright strong">Copyright © KakaoBank Corp. All rights reserved.</div>
</div>
<div class="box-3 flex flex-ai-c">
<a href="#" class="auth-mark-1 flex flex-ai-c"><img src="https://www.kakaobank.com/static/images/web/footer/webaccessibility.png" alt=""><span>웹 접근성 품질인증</span></a>
<a href="#" class="auth-mark-2 flex flex-ai-c"><img src="https://www.kakaobank.com/static/images/web/footer/web_trust_seal.png" alt=""><span>웹 트러스트 인증</span></a>
<div class="flex-grow-1"></div>
<nav class="menu-box-2">
<!--sns 마크-->
<ul class="flex">
<li><a href="#" class="block"><span class="block ico-2 ico-2-facebook"></span></a></li>
<li><a href="#" class="block"><span class="block ico-2 ico-2-instagram"></span></a></li>
<li><a href="#" class="block"><span class="block ico-2 ico-2-youtube"></span></a></li>
<li><a href="#" class="block"><span class="block ico-2 ico-2-branch"></span></a></li>
</ul>
</nav>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>