-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
384 lines (352 loc) · 25.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>옥, 춘천과 만나다</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body class="d-flex flex-column h-100">
<main class="flex-shrink-0">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container px-5">
<a class="navbar-brand" href="index.html">옥, 춘천과 만나다. </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="index.html">홈</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">체험하기</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
<li><a class="dropdown-item" href="blog-home.html">옥 원데이 클래스</a></li>
<li><a class="dropdown-item" href="blog-post.html">옥산가</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">펀딩프로젝트</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownPortfolio" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">옥 여행코스</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownPortfolio">
<li><a class="dropdown-item" href="portfolio-overview.html">에디터 추천</a></li>
<li><a class="dropdown-item" href="portfolio-item.html">사용자 추천</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
</ul>
</div>
</div>
</nav>
<!-- Header-->
<header class="bg-dark py-5" style="background-image: url('./img/jade3.jpeg')">
<div class="container px-5" >
<div class="row gx-5 align-items-center justify-content-center">
<div class="col-lg-8 col-xl-7 col-xxl-6">
<div class="my-5 text-center text-xl-start">
<h1 class="display-5 fw-bolder text-white mb-2">옥과 함께하는 춘천 여행</h1>
<p class="lead fw-normal text-white-50 mb-4">닭갈비는 지겨우시죠? 국내 유일 옥광산이 있는 춘천에서 옥 코스로 관광하세요. 체험과 펀딩프로젝트가 준비되어있습니다.</p>
<div class="d-grid gap-3 d-sm-flex justify-content-sm-center justify-content-xl-start">
<a class="btn btn-primary btn-lg px-4 me-sm-3" href="#features">Get Started</a>
<a class="btn btn-outline-light btn-lg px-4" href="#!">Learn More</a>
</div>
</div>
</div>
<div class="col-xl-5 col-xxl-6 d-none d-xl-block text-center"></div>
</div>
</div>
</header>
<!-- Features section-->
<div class="container px-5 my-5">
<div class="row gx-5 justify-content-center">
<div class="col-lg-8 col-xl-6">
<div class="text-center" id="features">
<h2 class="fw-bolder2">옥과 떠나는 여행 </h2>
<p class="lead fw-normal text-muted mb-5">가장 인기 있는 옥 관광 코스를 소개합니다.</p>
</div>
</div>
</div>
<div class="row gx-5">
<div class="col-lg-4 mb-5">
<div class="card h-100 shadow border-0">
<img class="card-img-top" src="./img/dalasil.png" alt="..." />
<div class="card-body p-4">
<div class="badge bg-primary bg-gradient rounded-pill mb-2">Hits</div>
<a class="text-decoration-none link-dark stretched-link" href="./dalasil.html"><h5 class="card-title mb-3">달아실 미술관</h5></a>
<p class="card-text mb-0">장난감 박물관, 근대사 박물관으로 구성되어있는 재미는 물론 학습에도 유익한 시설입니다.</p>
</div>
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
<div class="d-flex align-items-end justify-content-between">
<div class="d-flex align-items-center">
<div class = "small">
<div class="fw-bold">이용 시간</div>
<div class="text-muted">10:00 ~ 18:00 <br> 연중무휴</div>
</div>
<div class ="small2">
<div class="fw-bold">이용 요금</div>
<div class="text-muted"> 대인 : 15,000 <br> 대학생&중고생 : 13,000 <br> 소인 : 11,000</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-5">
<div class="card h-100 shadow border-0">
<img class="card-img-top" src="./img/okatea.png" alt="..." />
<div class="card-body p-4">
<div class="badge bg-primary bg-gradient rounded-pill mb-2">Hot Place</div>
<a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">카페 옥앳티</h5></a>
<p class="card-text mb-0">옥산가 바로 옆에 있는 한식 디저트 카페 옥앳티 입니다.</p>
</div>
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
<div class="d-flex align-items-end justify-content-between">
<div class="d-flex align-items-center">
<div class = "small">
<div class="fw-bold">이용 시간</div>
<div class="text-muted">11:00 ~ 20:00 <br> 연중무휴</div>
</div>
<div class ="small2">
<div class="fw-bold">주요 메뉴</div>
<div class="text-muted"> 옥아메리카노 : 5,000 <br> 옥테라떼 : 5,500 <br> 옥로차 : 8,000</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-5">
<div class="card h-100 shadow border-0">
<img class="card-img-top" src="./img/okjim.png" alt="..." />
<div class="card-body p-4">
<div class="badge bg-primary bg-gradient rounded-pill mb-2">Hits</div>
<a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">옥산가 찜질방/사우나</h5></a>
<p class="card-text mb-0">옥광산 찜질방에서 사용되는 물은 옥광산 갱내 깊은 곳에서 용출되는 옥정수로 각종 미네랄이 풍부한 천연 알칼리 환원수 입니다.</p>
</div>
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
<div class="d-flex align-items-end justify-content-between">
<div class="d-flex align-items-center">
<div class = "small">
<div class="fw-bold">이용 시간</div>
<div class="text-muted">11:00 ~ 20:00 <br> 연중무휴</div>
</div>
<div class ="small2">
<div class="fw-bold">이용 요금</div>
<div class="text-muted">찜질방&사우나 : 12,000 <br> 사우나(목욕) : 7,000 <br> 옥동굴 체험장 : 5,000</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="py-5">
<div class="container px-4 px-lg-5 mt-5">
<div class="text-center" id="features2">
<h2 class="fw-bolder2">옥 펀딩 프로젝트 </h2>
<p class="lead fw-normal text-muted mb-5">옥과 관련된 펀딩 프로젝트를 진행합니다. 가장 인기 있는 펀딩 프로젝트를 구경하세요.</p>
</div>
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="./img/jade_pal2.png" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">옥산가 귀걸이 , 팔찌 세트 </h5>
<!-- Product description-->
<p class="card-text mb-0">급이 다른 고급스러움! 춘천옥 귀걸이&팔찌 세트</p>
<div class ="small">
<div class="text-muted2">[악세사리]</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 35%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="text-muted2">25% · 500,000원</div>
<div class="text-muted2">15일 남음</div>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Sale badge-->
<div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
<!-- Product image-->
<img class="card-img-top" src="./img/jade_shampbar.png" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">제이드 샴푸바 쟈스민&화이트머스크 향</h5>
<!-- Product description-->
<p class="card-text mb-0">춘천 천역 옥과 자연정화된 옥정수로 자연의 순함을 느껴보세요.</p>
<div class ="small">
<div class="text-muted2">[화장품]</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="text-muted2">300% · 2,020,000원</div>
<div class="text-muted2">5일 남음</div>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Sale badge-->
<div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
<!-- Product image-->
<img class="card-img-top" src='./img/jade_mist.png' alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">옥산가 백옥 미스트&마스크팩 세트</h5>
<!-- Product description-->
<p class="card-text mb-0">미네랄이 듬뿍 담긴 옥정수로 깨끗하고 부드러운 피부를 느껴보세요.</p>
<div class ="small">
<div class="text-muted2">[화장품]</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="text-muted2"> 240% · 1,020,000원</div>
<div class="text-muted2">6일 남음</div>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="./img/jade_pal.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">슈렉 스타일 옥 팔찌</h5>
<!-- Product description-->
<p class="card-text mb-0">작은 연옥을 엮어 만든 옥팔찌.</p>
<div class ="small">
<div class="text-muted2">[악세사리]</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 65%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="text-muted2"> 65% · 920,000원</div>
<div class="text-muted2">20일 남음</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Blog preview section-->
<section class="py-5">
<div class="container px-5 my-5">
<div class="row gx-5 justify-content-center">
<div class="col-lg-8 col-xl-6">
<div class="text-center">
<h2 class="fw-bolder2">옥 체험여행</h2>
<p class="lead fw-normal text-muted mb-5">색다른 옥 체험 여행을 즐겨보세요! </p>
</div>
</div>
</div>
<div class="row gx-5">
<div class="col-lg-4 mb-5">
<div class="card h-100 shadow border-0">
<img class="card-img-top" src="./img/okatea_ex1.png" alt="..." />
<div class="card-body p-4">
<div class="badge bg-primary bg-gradient rounded-pill mb-2">음식</div>
<a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">옥정수로 만드는 디저트, 카페라떼 만들기</h5></a>
<p class="card-text mb-0">춘천 백옥광산에서 용출되는 최고급 옥정수, 옥소금으로 만드는 디저트 만들기 체험.</p>
</div>
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
<div class="d-flex align-items-end justify-content-between">
<div class="d-flex align-items-center">
<div class="small">
<div class="fw-bold">체험 비용</div>
<div class="text-muted">디저트 만들기 : 30,000 <br> 카페라뗴 만들기: 20,000 <br> 디저트&카페라떼 만들기 : 40,000</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-5">
<div class="card h-100 shadow border-0">
<img class="card-img-top" src="./img/okjim.png" alt="..." />
<div class="card-body p-4">
<div class="badge bg-primary bg-gradient rounded-pill mb-2">건강</div>
<a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">옥산가 찜질방/사우나</h5></a>
<p class="card-text mb-0">옥광산 찜질방에서 사용되는 물은 옥광산 갱내 깊은 곳에서 용출되는 옥정수로 각종 미네랄이 풍부한 천연 알칼리 환원수 입니다.</p>
</div>
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
<div class="d-flex align-items-end justify-content-between">
<div class="d-flex align-items-center">
<div class="small">
<div class="fw-bold">체험 비용</div>
<div class="text-muted">찜질방&사우나 : 12,000 <br> 사우나(목욕) : 7,000 <br> 옥동굴 체험장 : 5,000</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-5">
<div class="card h-100 shadow border-0">
<img class="card-img-top" src="./img/okpal3.png" alt="..." />
<div class="card-body p-4">
<div class="badge bg-primary bg-gradient rounded-pill mb-2">악세사리</div>
<a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">옥 원석 팔찌 만들기</h5></a>
<p class="card-text mb-0">옥과 원석이 만나다 . 춘천 옥으로 만드는 옥 원석 팔찌 만들기 체험. 10차시 진행중 입니다.</p>
</div>
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
<div class="d-flex align-items-end justify-content-between">
<div class="d-flex align-items-center">
<div class="small">
<div class="fw-bold">체험 비용</div>
<div class="text-muted">옥 팔찌 만들기 :30,000 <br> 옥 원석 팔찌 만들기 : 40,000</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Call to action-->
</div>
</section>
</main>
<!-- Footer-->
<footer class="bg-dark py-4 mt-auto">
<div class="container px-5">
<div class="row align-items-center justify-content-between flex-column flex-sm-row">
<div class="col-auto"><div class="small m-0 text-white">Copyright © Your Website 2022</div></div>
<div class="col-auto">
<a class="link-light small" href="#!">Privacy</a>
<span class="text-white mx-1">·</span>
<a class="link-light small" href="#!">Terms</a>
<span class="text-white mx-1">·</span>
<a class="link-light small" href="#!">Contact</a>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>