-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
363 lines (348 loc) · 23.2 KB
/
Copy pathindex.html
File metadata and controls
363 lines (348 loc) · 23.2 KB
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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<meta name="title" content="ZET">
<meta name="description" content="제트로 가면 새로운 일상이 열릴 거예요.">
<meta name="keywords" content="ZET, mobility, 제트, 이동 수단 대여, 앱">
<meta property="og:title" content="ZET">
<meta property="og:description" content="제트로 가면 새로운 일상이 열릴 거예요.">
<meta property="og:image" content="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcASSAd%2FbtqNH0eOs16%2FjwNtuIbYLpkX2e9PJg2trk%2Fimg.jpg">
<meta property="og:url" content="http://absolutelyfullycapable.github.io/zet">
<!-- twitter card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="ZET">
<meta name="twitter:description" content="제트로 가면 새로운 일상이 열릴 거예요.">
<meta name="twitter:image" content="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcASSAd%2FbtqNH0eOs16%2FjwNtuIbYLpkX2e9PJg2trk%2Fimg.jpg">
<meta name="twitter:url" content="http://absolutelyfullycapable.github.io/zet">
<title>ZET</title>
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#e31d1a">
<meta name="msapplication-TileColor" content="#e31d1a">
<meta name="theme-color" content="#ffffff">
<!-- fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<!-- font-family:'Noto Sans KR', sans-serif; -->
<!-- CSS 연결 -->
<link rel="stylesheet" href="common/normalize.css">
<link rel="stylesheet" href="common/bootstrap.min.css">
<link rel="stylesheet" href="common/swiper-bundle.min.css">
<link rel="stylesheet" href="css/index.css">
<!-- JS/jQuery 연결 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-dist@1.12.1/jquery-ui.min.js"></script>
<script src="common/bootstrap.min.js"></script>
<script src="common/swiper-bundle.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"><svg viewBox="0 0 85 35"><g class="fill" fill="#E2231A" fill-rule="evenodd"><path d="M6.252 0L4.903 8.287h11.96L1.224 27.66l-.07.087L0 34.835h23.995l1.348-8.287H12.507L28.51 7.089 29.662 0zM33.522 0l-1.317 7.647h22.414L55.935 0zM29.662 21.262h22.414l1.316-7.646H30.98zM29.284 27.189l-1.317 7.646H50.38l1.317-7.646zM59.647 0l-1.322 8.287h7.882L61.97 34.835h9.186l4.237-26.548h7.882L84.597 0z"/></g></svg></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<svg viewBox="0 0 20 12" class="btn-menu"><g fill="none" fill-rule="evenodd"><path class="fill" fill="#000" d="M0 0h20v2H0zM0 10h20v2H0z"/></g></svg>
<svg viewBox="0 0 18 18" class="btn-menu-close"><g fill="#000" fill-rule="evenodd"><path d="M1.929.515L17.485 16.07l-1.414 1.414L.515 1.93z"/><path d="M17.485 1.929L1.93 17.485.515 16.071 16.07.515z"/></g></svg>
</button>
</div> <!-- navbar-header -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html" class="about active">About ZET</a></li>
<li><a href="pricing.html" class="pricing">Pricing</a></li>
<li><a href="support.html" class="support">Support</a></li>
</ul>
</div><!-- #navbar -->
</div>
</nav>
<div class="nav_bg"></div>
<!-- 모바일 화면에서 내비게이션 아이콘 클릭 시 배경 어두워지게 만드는 역할 -->
<!-- main contents -->
<div id="main">
<section id="title" class="sec">
<div class="video">
<video src="video/title.mp4" muted loop autoplay poster="images/thumbnail.jpg">
<source src="video/title.mp4" type="video/mp4">
<source src="video/title.webm" type="video/webm">
</video>
</div> <!-- video -->
<div class="txt">
<h2>possiblities begin with zet</h2>
<h3>제트로 가면 새로운 일상이 열릴 거예요.</h3>
<p>
제트는 더 많은 경험을 하고 더 많은 가능성을<br>
제공하는 오픈 플랫폼으로 이동에 가치를 더해 주니까요.<br>
제트로 달라진 일상을 경험해 보세요.
</p>
<div class="btn_group">
<button type="button" class="btn btn-lg btn-default google_play"><span>Google Play</span></button>
<button type="button" class="btn btn-lg btn-default app_store"><span>App Store</span></button>
</div>
</div> <!-- txt -->
</section> <!-- title -->
<section id="how_to" class="sec container">
<div class="row">
<div class="how_to_txt col-sm-6">
<h3>ZET는<br><span>어떻게</span><br class="br_none"> 이용하나요?</h3>
<p>가까운 거리를 빠르고 재미있게<br>이동해 보세요.</p>
</div><!-- hot to txt -->
<div class="how_to_slide col-sm-6">
<div class="how_to_slide_contents">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/how_to_1.jpg" alt="ZET 찾기">
</div>
<div class="swiper-slide">
<img src="images/how_to_2.jpg" alt="ZET 대여">
</div>
<div class="swiper-slide">
<img src="images/how_to_3.jpg" alt="ZET 출발">
</div>
<div class="swiper-slide">
<img src="images/how_to_4.jpg" alt="ZET 주행">
</div>
<div class="swiper-slide">
<img src="images/how_to_5.jpg" alt="ZET 주차">
</div>
<div class="swiper-slide">
<img src="images/how_to_6.jpg" alt="ZET 반납">
</div><!-- swiper slide-->
</div><!-- swiper wrapper-->
</div><!-- swiper container-->
</div><!-- swper contents-->
</div> <!-- how to slide -->
</div><!-- row end -->
<div class="btn_group_m">
<a href="#" class="btn btn-lg btn-default prev">prev</a>
<a href="#" class="btn btn-lg btn-default next">next</a>
</div> <!-- btnr group mobile (모바일 환경에서 나타나는 버튼) -->
<ul class="indicator">
<li class="active">
<a href="#">
<svg viewBox="0 0 36 35" class="icon-howto01"><g fill="none" fill-rule="evenodd"><path d="M-2-2h40v40H-2z"></path><path d="M27.587 21.007c2.275-4.95 1.375-11.002-2.704-15.081-5.235-5.235-13.722-5.235-18.957 0-5.235 5.235-5.235 13.722 0 18.957 5.235 5.235 13.722 5.235 18.957 0L34.313 34" class="stroke" stroke="#757575" stroke-width="2.6"></path></g></svg>
<p>ZET 찾기</p>
</a>
</li>
<li>
<a href="#">
<svg viewBox="0 0 35 35" class="icon-howto02"><g class="stroke" stroke="#757575" stroke-width="2.3" fill="none" fill-rule="evenodd"><path d="M1.17 12.233h10.11V2.123H1.17zM1.17 33.494h10.11v-10.11H1.17zM22.943 12.233h10.11V2.123h-10.11zM22.942 28.358v-10.11h10.11v10.11"></path><path d="M0 18.248h16.813v15.144h17.252M17.111 1V13.41"></path></g></svg>
<p>ZET 대여</p>
</a>
</li>
<li>
<a href="#">
<svg viewBox="0 0 37 37" class="icon-howto03"><g fill="none" fill-rule="evenodd"><path class="fill" fill="#757575" d="M29.612 19.263L9.298 19.2l.005-2 15.686.048-4.63-4.95 1.46-1.365zM21.828 25.657l-1.48-1.348 3.636-3.99h2.707z"></path><path d="M31.702 7.84A16.925 16.925 0 0 1 35.3 18.3c0 9.39-7.612 17-17 17-9.39 0-17-7.61-17-17 0-9.389 7.61-17 17-17 3.814 0 7.335 1.256 10.17 3.378" class="stroke" stroke="#757575" stroke-width="2.3"></path></g></svg>
<p>ZET 출발</p>
</a>
</li>
<li>
<a href="#">
<svg viewBox="0 0 44 36" class="icon-howto04"><g fill="none" fill-rule="evenodd"><path d="M9.788 30.212a3.975 3.975 0 1 1-7.953 0 3.975 3.975 0 0 1 7.953 0zM42.12 30.212a3.975 3.975 0 1 1-7.953 0 3.975 3.975 0 0 1 7.953 0zM13.142 29.722h13.674l9.264-9.772M37.283 26.236L33.803 7.37" class="stroke" stroke="#757575" stroke-width="2.3"></path><path d="M27.007 1l4.659 2.987"></path><path d="M27.007 1l4.659 2.987M30.999 25.31H12.122" class="stroke" stroke="#757575" stroke-width="2.3"></path></g></svg>
<p>ZET 주행</p>
</a>
</li>
<li>
<a href="#">
<svg viewBox="0 0 37 37" class="icon-howto05"><g class="stroke" stroke="#757575" fill="none" fill-rule="evenodd"><path d="M15.267 20.148h5.876a4.302 4.302 0 0 0 0-8.605H14.897v16.453" stroke-width="3"></path><path d="M29.125 31.236a16.47 16.47 0 0 1-10.59 3.835C9.406 35.071 2 27.667 2 18.536 2 9.403 9.404 2 18.536 2 27.669 2 35.07 9.403 35.07 18.536c0 3.555-1.121 6.85-3.03 9.546" stroke-width="2.3"></path></g></svg>
<p>ZET 주차</p>
</a>
</li>
<li>
<a href="#">
<svg viewBox="0 0 43 37" class="icon-howto06"><g class="stroke" stroke="#757575" fill="none" fill-rule="evenodd"><path stroke-width="2.3" d="M34.261 13.903v19.452H4.893V8.882h30.024M20.082 24.16v-6.922M2 8.88h35.81V2H2z"></path><path stroke-width="2" class="fill" fill="#FFF" d="M27.817 35.03h14.178v-4.596H27.817z"></path><path stroke-width="2" class="fill" fill="#FFF" d="M25.987 31.38h14.178v-4.595H25.987z"></path><path stroke-width="2" class="fill" fill="#FFF" d="M27.816 23.136h14.178v4.596H27.816v-2.851"></path></g></svg>
<p>ZET 반납</p>
</a>
</li>
</ul>
<ul class="description">
<li class="active">
<p>가까운 ZET를 찾은 후 대여 버튼을 선택해 주세요.</p>
</li>
<li>
<p>대여할 ZET의 QR코드를 스캔하거나 고유번호를 입력해주세요.</p>
</li>
<li>
<p>그럼 발을 굴려 가속 레버를 누르고 출발! 출발 전 안전을 위해 헬멧을 착용해주세요.</p>
</li>
<li>
<p>ZET 주행하실 때 차량 및 보행자의 안전에 유의해주세요.</p>
</li>
<li>
<p>ZET 주차는 지도에 표시된 추천 반납 장소를 이용해보세요. (제휴샵,렌탈샵,주차장)</p>
</li>
<li>
<p>반납 버튼을 눌러 반납을 완료해 주세요. 추천 장소에 반납하면 ZET머니를 드립니다.</p>
</li>
</ul>
</section> <!-- how to -->
<section id="caution" class="sec container-fluid">
<div class="row">
<div class="caution_txt col-sm-12">
<img src="images/caution.png" alt="">
<h2>ZET<br class="br_none"> <span>이용 수칙</span></h2>
<p>ZET 이용 시, 안전을 위해 이것만은 꼭 지켜 주세요!</p>
</div> <!-- caution_txt -->
<div class="caution_icon col-sm-12">
<!----------- mobile ----------->
<div class="btn_group btn_group_m">
<a href="#" class="btn btn-lg btn-default caution_btn1 active">탑승 전 확인하세요</a>
<a href="#" class="btn btn-lg btn-default caution_btn2">주행 중 유의하세요</a>
</div> <!-- btnr group mobile (모바일 환경에서 나타나는 버튼) -->
<div class="swiper-container">
<ul class="before swiper-wrapper">
<li class="swiper-slide">
<img src="images/before1.png" alt="">
<p>탑승 정원은 ZET 1대당 1명씩</p>
</li>
<li class="swiper-slide">
<img src="images/before2.png" alt="">
<p>인도에서는 타면 안 돼요!</p>
</li>
<li class="swiper-slide">
<img src="images/before3.png" alt="">
<p>킥보드 사용은 운전면허가 필수!</p>
</li>
</ul>
<div class="swiper-pagination"></div>
</div> <!-- swiper-container -->
<div class="second-container">
<ul class="riding swiper-wrapper">
<li class="swiper-slide">
<img src="images/riding1.png" alt="">
<p>헬멧은 반드시 착용</p>
</li>
<li class="swiper-slide">
<img src="images/riding2.png" alt="">
<p>음주 상태에서 이용 금지</p>
</li>
<li class="swiper-slide">
<img src="images/riding3.png" alt="">
<p>주행 중 이어폰 사용 금지</p>
</li>
</ul>
<div class="swiper-pagination"></div>
</div> <!-- second-container -->
<!----------- pc ----------->
<div class="third-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<div class="box">
<img src="images/before1.png" alt="">
<p>탑승 정원은 ZET 1대당 1명씩</p>
</div>
<div class="box">
<img src="images/before2.png" alt="">
<p>인도에서는 타면 안 돼요!</p>
</div>
<div class="box">
<img src="images/before3.png" alt="">
<p>킥보드 사용은 운전면허가 필수!</p>
</div>
<p class="pc_notification">탑승 전 확인하세요!</p>
</li>
<li class="swiper-slide">
<div class="box">
<img src="images/riding1.png" alt="">
<p>헬멧은 반드시 착용</p>
</div>
<div class="box">
<img src="images/riding2.png" alt="">
<p>음주 상태에서 이용 금지</p>
</div>
<div class="box">
<img src="images/riding3.png" alt="">
<p>주행 중 이어폰 사용 금지</p>
</div>
<p class="pc_notification">주행 중 유의하세요!</p>
</li>
</ul>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="btn_group btn_group_pc">
<a href="#" class="btn btn-lg btn-default caution_btn1 prev"></a>
<a href="#" class="btn btn-lg btn-default caution_btn2 next"></a>
</div> <!-- btnr group pc (PC 환경에서 나타나는 버튼) -->
</div> <!-- caution_icon -->
</div>
</section> <!-- caution -->
<section id="location" class="sec">
<div class="location_box">
<img src="images/location.png" alt="">
<h2>ZET는 <span>어디서</span> <br class="br_none">이용할 수 있나요?</h2>
<p>
ZET는 현재 제주도, 대전 카이스트에서<br class="br_none"> 운영되고 있습니다.<br>
점차적으로 ZET 서비스를 확대해나갈 예정입니다.
</p>
<div class="map">
<div class="jeju active">
<a href="#">
<div>제주도</div>
</a>
</div>
<div class="daejeon">
<a href="#">
<div>대전<br>카이스트</div>
</a>
</div>
</div> <!-- map -->
<div class="btn_group">
<button type="button" class="btn btn-lg btn-default btn_jeju active">제주도</button>
<button type="button" class="btn btn-lg btn-default btn_daejeon">대전<br>카이스트</button>
</div>
</div> <!-- location box -->
</section> <!-- location -->
<section id="coupon" class="sec">
<div class="coupon_box">
<img src="images/coupon.png" alt="">
<h2>ZET만의<br class="br_none"> <span>특별한 혜택,</span> <br class="br_none">제휴된 상점의<br class="br_none">쿠폰을 받으세요!</h2>
<p>
ZET 서비스는 각 지역의 상점과 연계하여<br>쿠폰 서비스를 제공하고 있습니다. 저희 서비스와 제휴를 원하시는<br class="br_none"> 분들은 제휴 문의를 통해 문의하실 수 있습니다.
</p>
<img src="images/coupon_img.png" alt="coupon" class="">
<button type="button" class="btn btn-lg btn-default">제휴 문의</button>
</div> <!-- coupon box -->
</section> <!-- coupon-->
<section id="box">
<div class="bg_box1"></div>
<div class="bg_box2"></div>
<div class="bg_box3"></div>
</section> <!-- box -->
</div> <!-- main -->
<footer>
<div class="footer_box">
<ul class="footer_sub1">
<li>서비스 이용 약관</li>
<li>서비스 보험 약관</li>
<li>개인 정보 수집 / 이용 약관</li>
<li>위치 기반 서비스 이용 약관</li>
<li>위치 정보 사업 약관</li>
<li>개인 정보 처리 방침</li>
</ul>
<ul class="footer_sub2">
<li>사업자 현대자동차㈜</li>
<li>주소 서울특별시 서초구 헌릉로 12</li>
<li>사업자등록번호 101-81-09147</li>
<li>통신판매업신고 2002-01546</li>
<li>고객 센터 02-6302-7151</li>
</ul>
<p class="license">
본 사이트는 비상업적 용도로 만들어진 포트폴리오용 사이트입니다.<br>
사이트 제작 시 사용된 이미지 및 비디오의 라이센스는 ZET에게 있습니다.
</p>
<div class="contact">
<p class="email">bizlab08@gmail.com</p>
<p class="copyright">© Copyright 2019 ZET All rights reserved.</p>
</div>
</div> <!-- footer box -->
</footer> <!-- footer -->
</body>
</html>