-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
324 lines (323 loc) · 16.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<header id="header">
<div class="up">
<p>로그인</p>
<div class="h_bar"></div>
<p>회원가입</p>
<div class="h_bar"></div>
<p>사이트맵</p>
</div>
<div class="down">
<img src="./img/logo.png" alt="logo">
<div class="menu">
<ul>
<li><a href="#part1">관광지 소개</a></li>
<li><a href="#part2">먹거리 소개</a></li>
<li><a href="#part3">축제 및 체험</a></li>
<li><a href="#part4">후기</a></li>
</ul>
</div>
</div>
</header>
<section class="main">
<section id="slide">
<input type="radio" name="pos" id="pos1" checked>
<input type="radio" name="pos" id="pos2" checked>
<input type="radio" name="pos" id="pos3" checked>
<input type="radio" name="pos" id="pos4" checked>
<input type="checkbox" name="stop" id="stop">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="zup">
<div class="slogan">
<img src="./txt-slogan.png" alt="해양 관광 휴양 도시, 생명의 푸르름가득한 여수">
</div>
<div class="arrow before">
<label for="#pos4">4</label>
<label for="#pos3">3</label>
<label for="#pos2">2</label>
<label for="#pos1">1</label>
</div>
<div class="arrow next">
<label for="#pos2">2</label>
<label for="#pos3">3</label>
<label for="#pos4">4</label>
<label for="#pos1">1</label>
</div>
</div>
<div class="pos">
<label for="pos1">1</label>
<label for="pos2">2</label>
<label for="pos3">3</label>
<label for="pos4">4</label>
<label for="stop" class="stop"></label>
</div>
</section>
<section id="part1">
<div class="name">
<h3>관광지 소개</h3>
<div class="dash"></div>
</div>
<div class="content">
<div class="box">
<img src="./img/photo1.jpg" alt="photo1">
<div class="wbox">
<h3>오동도</h3>
<p class="grey">섬자체가 하나의 동백꽃 </p>
<p class="hash">#동백꽃 #여수엑스포 #한려해상국립공원</p>
</div>
</div>
<div class="box">
<img src="./img/photo2.jpg" alt="photo2">
<div class="wbox">
<h3>거문도</h3>
<p class="grey">남해안 최초로 불을 밝힌 거문도</p>
<p class="hash">#녹산등대 #백도 #삼호교</p>
</div>
</div>
<div class="box">
<img src="./img/photo3.jpg" alt="photo3">
<div class="wbox">
<h3>향일암</h3>
<p class="grey">떠오르는 해와 함께 희망을 염원하며 하늘로</p>
<p class="hash">#일출 #대웅전 #충무공</p>
</div>
</div>
<div class="box">
<img src="./img/photo4.jpg" alt="photo4">
<div class="wbox">
<h3>금오도 비렁길</h3>
<p class="grey">해안을 따라 끝없이 펼쳐진 벼랑</p>
<p class="hash">#김복남살인사건 #혈의누 #인어공주</p>
</div>
</div>
<div class="box">
<img src="./img/photo5.jpg" alt="photo5">
<div class="wbox">
<h3>여수세계박람회장</h3>
<p class="grey">끝없이 펼쳐진 바다와 공연이벤트</p>
<p class="hash">#여수엑스포 #디지털갤러리 #스카이타워 #아쿠아플라넷</p>
</div>
</div>
<div class="box">
<img src="./img/photo6.jpg" alt="photo6">
<div class="wbox">
<h3>여수밤바다</h3>
<p class="grey">낭만과 황홀함이 넘치는 여수 도심 야경</p>
<p class="hash">#야경 #거북선대교 #이순신대교 #돌산대교</p>
</div>
</div>
</div>
</section>
<section id="part2">
<div class="name">
<h3>먹거리 소개</h3>
<div class="dash"></div>
</div>
<div class="food">
<div class="food1 type">
<img src="./img/food1">
<div class="black">
<h3>게장백반</h3>
<p>달콤 짭조름 대한민국 공식 밥도둑</p>
<div class="hide">
<p>매콤한 맛과 달콤한 맛이 입안에 착착 감겨오는 양념게장과
짜지도않고 달지도 않은 간간한 맛이 입안을 자극하는 간장게장과 전통발효식품 된장에 숙성된 된장게장의 구수함은 입안을 즐겁게 합니다.
매콤한 양념게장과 간간한 간장게장 그리고 구수한 된장게장까지 여수 밥도둑 게장의 진미를 느낄 수 있습니다.</p>
</div>
</div>
</div>
<div class="food2 type">
<img src="./img/food2">
<div class="black">
<h3>장어구이</h3>
<p>힘 좋은 여수바다장어</p>
<div class="hide">
<p>장어 한 마리면 열보약도 부럽지 않다는 장어요리
비타민A의 보고로 노화예방과 동맥경화를 예방하여 허약체질 개선에도 최고입니다.
살아있는 맛에 힘이 솟는 장어구는 소금구이와 양념구이가 있으며 어떻게 먹어도 쫄깃하고 고소한 맛은 모두의 입맛을 사로잡습니다.</p>
</div>
</div>
</div>
<div class="food3 type">
<img src="./img/food3">
<div class="black">
<h3>새조개 샤부샤부</h3>
<p>조개의 황제 100% 자연산</p>
<div class="hide">
<p>많은 영양분을 함유하고 있어 ‘조개의 황제’로 불리는 새조개는 속살이 새의 부리모양과 닮았다하여 붙여진 이름이며
샤브샤브는 버섯, 파, 고추, 마늘 등으로 우러낸 야채국물에 살짝 데쳐 소스와 함께 즐기면 감칠맛과 바다향이 몸속으로 깊게 파고드는 느낌을 받는다.</p>
</div>
</div>
</div>
<div class="food4 type">
<img src="./img/food4">
<div class="black">
<h3>갯장어회</h3>
<p>눈처럼 사르르 녹는 그 맛</p>
<div class="hide">
<p>여름철 인기 만점 보양식인 갯장어 요리, 입에서 살살 녹는 부드러운 갯장어회와
끓는 물에 살짝 데쳐먹는 갯장어 샤브샤브는 여름철 필수 음식 아이템으로 풍부한 맛과 영양을 자랑한다.
</p>
</div>
</div>
</div>
<div class="food5 type">
<img src="./img/food5">
<div class="black">
<h3>전어회</h3>
<p>집나간 며느리도 돌아온다는</p>
<div class="hide">
<p>가을전어 봄 멸치, 가을전어 대가리엔 깨가 서 말, 집나간 며느리 전어 굽는 냄새에 돌아온다는 말이 있다.
사람들이 고소한 맛에 반해 돈(錢)을 생각하지 않고 먹었다는 데서 유래된 전어(錢魚)는 여수의 연근해 청정해역에서 생산되는 또 하나의 명물이다.</p>
</div>
</div>
</div>
<div class="food6 type">
<img src="./img/food6">
<div class="black">
<h3>서대회</h3>
<p>막걸리식초와의 새콤달콤한 콜라보</p>
<div class="hide">
<p>막걸리로 발효시킨 식초와 초고추장, 그리고 온갖 채소와의 조화
부드러우면서도 새콤달콤한 서대회무침
따끈한 밥에 버무려 먹으면 서대회의 진미를 느낄 수 있습니다.</p>
</div>
</div>
</div>
<div class="food7 type">
<img src="./img/food7">
<div class="black">
<h3>굴구이</h3>
<p>청정 여수바다의 맛</p>
<div class="hide">
<p>시간도 멈춰 서서 보글거리는 굴의 싱싱한 맛을 지켜 볼 정도로 맛있는 굴구이 탱글탱글한 굴은 향과 맛이 진해 입안에 촉촉한 여운으로 남습니다.</p>
</div>
</div>
</div>
<div class="food8 type">
<img src="./img/food8">
<div class="black">
<h3>갈치조림</h3>
<p>매콤하고 단백한맛</p>
<div class="hide">
<p>거문도 연근해에서 생산되는 일명 여수‘먹갈치’는 맛과 영양이 뛰어나 별미 중의 별미로 꼽힌다.
가을갈치가 제격인 갈치조림이나 구이는 소화촉진, 식욕증진, 성인병 예방에 도움을 줄뿐더러 필수아미노산이 고루 함유돼 성장기 어린이 발육에 탁월한 식품이다.</p>
</div>
</div>
</div>
<div class="food9 type">
<img src="./img/food9">
<div class="black">
<h3>여수 한정식</h3>
<p>청정지역 남해안의 해산물이 가득 40여가지의 다양한 음식</p>
<div class="hide">
<p>청정지역 남해안의 싱싱한 해산물을 주원료로 하여 40여 개의 다양한 음식들!
맛의 아름다움에 놀라고 싱싱함에 놀라고 다양한 해산물에 놀랍니다.
상차림에 청정해역 여수 앞바다의 싱싱함과 푸짐함에 놓여있고 여수의 정성을 느낄 수 있습니다.</p>
</div>
</div>
</div>
<div class="food10 type">
<img src="./img/food10">
<div class="black">
<h3>돌산 갓김치</h3>
<p>톡 쏘는 맛이 일품</p>
<div class="hide">
<p>돌산 갓은 독특한 향이 있으며 일반갓보다 톡쏘는 매운맛과 섬유질이 적다.
잎과 줄기에는 일반적인 붉은 갓과는 달리 잔털이 없으며 연하고 부드러운 연녹색 채소로 다른 채소에 비해 단백질 함량 또한 높다.</p>
</div>
</div>
</div>
</div>
</section>
<section id="part3">
<div class="sub">
<img src="./img/nature1.jpg">
<div class="title">
<h3>공연 및 축제</h3>
<div class="line"></div>
</div>
</div>
<div class="sub">
<img src="./img/nature2.jpg">
<div class="title">
<h3>공연 및 축제</h3>
<div class="line"></div>
</div>
</div>
<div class="sub">
<img src="./img/nature3.jpg">
<div class="title">
<h3>공연 및 축제</h3>
<div class="line"></div>
</div>
</div>
</section>
<section id="part4">
<div class="name">
<h3>관광 후기</h3>
<div class="dash"></div>
</div>
<div class="review">
<div class="small_re">
<div class="thimg">
<div></div>
<div></div>
<div></div>
</div>
<div class="revi">
<h3>향일암</h3>
<p>2018.07.19 ~ 2018.07.21</p>
<p>
<strong>Lorem ipsum dolor sit amet</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
</p>
</div>
</div>
<div class="small_re">
<div class="thimg">
<div></div>
<div></div>
<div></div>
</div>
<div class="revi">
<h3>향일암</h3>
<p>2018.07.19 ~ 2018.07.21</p>
<p>
<strong>Lorem ipsum dolor sit amet</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
</p>
</div>
</div>
<div class="small_re">
<div class="thimg">
<div></div>
<div></div>
<div></div>
</div>
<div class="revi">
<h3>향일암</h3>
<p>2018.07.19 ~ 2018.07.21</p>
<p>
<strong>Lorem ipsum dolor sit amet</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
</p>
</div>
</div>
</div>
</section>
</section>
<footer class="footer"></footer>
</body>
</html>