forked from nahbee10naver/nahbee10naver.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathold_index.html
352 lines (336 loc) · 17.8 KB
/
old_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
<!DOCTYPE html>
<html lang="ko" class="no-js">
<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, maximum-scale=1.0, user-scalable=no">
<title>I WILL SEOUL YOU.</title>
<meta name="author" content="Lucas Bebber for Codrops" />
<!--<link rel="shortcut icon" href="favicon.ico">-->
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="main">
<header class="codrops-header">
<div class="codrops-links">
<span class="icon_map" style="color:#09c; font-size:20px;"></span>
<span class="icon_pin" style="color:#47dbb4; font-size:20px;"></span>
</div>
<h1 class="header-title"><span class="header-title__main">I Will Seoul You.</span> <span class="header-title__part">엉망진창 서울 가이드</span>
</header>
<div class="intro">
<blockquote><em>“미사일, 울컥해서 쏘는 것…전쟁할 마음 없다”</em><span>Jeong-eun Kim</span></blockquote>
</div>
<div id ="nh_ele" style="margin-top:50px; margin-left:100px; z-index:5000; position:fixed;"><h1>nhnhnh</h1></div>
<div class="container"></div>
<div class="text">
<section class="js-section" data-zoom-middle="2">
<h2><span class="title-up">종로구</span><span class="title-down">여행의 시작</span></h2>
<figure>
<div class="js-gallery-content">
<div id="tester"><img class="js-image" data-pos="0.25" src="img/jongno/jongno1.jpg"/><p style="position:relative; top:-100px; ;left:300px; z-index:6000;">ksjdlfk</p></div>
<img class="js-image" data-pos="0.25" src="img/jongno/jongno2.jpg"/>
<img class="js-image" data-pos="0.25" src="img/jongno/jongno3.jpeg"/>
</div>
<figcaption></figcaption>
</figure>
<figure>
<div class="js-gallery-content">
<img src="img/jongno/jongno4.jpg"/>
<img src="img/jongno/jongno4_1.jpg"/>
</div>
<figcaption>K K K</figcaption>
</figure>
<figure>
<div class="js-gallery-content">
<img src="img/jongno/jongno5.jpg"/>
<img src="img/jongno/jongno6.jpg"/>
<img src="img/jongno/jongno7.jpg"/>
<img src="img/jongno/jongno8.jpg"/>
</div>
<figcaption></figcaption>
</figure>
<figure>
<div class="js-gallery-content">
<img src="img/jongno/jongno9.jpg"/>
<img src="img/jongno/jongno10.jpg"/>
<img src="img/jongno/haechi.jpg"/>
</div>
<figcaption></figcaption>
</figure>
</section>
<section class="js-section" data-zoom-middle="2">
<h2><span class="title-up">마포구</span><span class="title-down"></span></h2>
<figure>
<div class="js-gallery-content">
<img src="img/mapo/DMC1.jpg"/>
<img src="img/mapo/DMC2.jpg"/>
<img src="img/mapo/DMC3.jpg"/>
</div>
<figcaption></figcaption>
</figure>
<figure>
<div class="js-gallery-content">
<img src="img/mapo/DMC4.JPG"/>
<img src="img/mapo/DMC5.png"/>
<img src="img/mapo/DMC6.png"/>
<img src="img/mapo/DMC7.jpg"/>
</div>
<figcaption></figcaption>
</figure>
</section>
<section class="js-section" data-zoom-start="2">
<h2><span class="title-up">영등포구</span><span class="title-down">개저씨</span></h2>
<figure>
<div class="js-gallery-content">
<img src="img/yeongdeungpo/yeo_monster.jpg"/>
<img src="img/yeongdeungpo/young_church.png"/>
<img src="img/yeongdeungpo/young_church2.png"/>
</div>
<figcaption></figcaption>
</figure>
</section>
<section class="js-section" data-zoom-start="2.5" data-stay="true">
<h2><span class="title-up">동작구</span><span class="title-down">동작찬가<br>(노들의노래)</span></h2>
<figure>
<div class="js-gallery-content">
<img src="img/dongjak/noryangjin.jpg"/>
<img src="img/dongjak/noryangjin2.jpg"/>
</div>
<figcaption>학원가 핔닉</figcaption>
</figure>
<figure>
<div class="js-gallery-content">
<img src="img/dongjak/noryangjin_fish.png"/>
<img src="img/dongjak/noryangjin_fish2.jpg"/>
<img src="img/dongjak/noryangjin_fish3.jpg"/>
</div>
<figcaption>언늬~ 바가지 쪼금만 씌울게;)</figcaption>
</figure>
</section>
<section class="js-section" data-zoom-start="1.5">
<figure>
<div class="js-gallery-content">
<img src="img/dongjak/natl_sem.png"/>
<img src="img/dongjak/natl_sem2.JPG"/>
</div>
<figcaption>묵념</figcaption>
</figure>
<figure>
<div class="js-gallery-content">
<img src="img/dongjak/daebang_donkatsu.jpg"/>
<img src="img/dongjak/daebang_tea.jpg"/>
</div>
<figcaption>돈캇추 먹고 차두 마시구</figcaption>
</figure>
</section>
<section class="js-section" data-zoom-start="1.5">
<h2><span class="title-up">관악구</span><span class="title-down">Humans of 괴식</span></h2>
<p>
<blockquote><em>어쩌다가 짜장면에 딸려오는 단무지 안 뜯은걸 발견하면 그 날 저녁 반찬은 따로 걱정할 필요 없어요.</em><span> — Christopher Oh</span></blockquote>
</p>
<p class="text-intro">관악구 서림동</p>
<figure>
<div class="js-gallery-content">
<img src="img/goesick/bozon1.JPG"/>
</div>
<figcaption>보존1</figcaption>
</figure>
<p>
“관악구 서림동에서 ‘잠만 자는 방’ 거주 중이에요. 개인 냉장고는 없고 층마다 공용 냉장고 썼었는데 작정하고 훔쳐가는 사람이 있더라구요. 몇 번 경찰도 불렀었는데 증거가 없어서 누군지 잡을 수가 없었어요.”</p>
<figure>
<div class="js-gallery-content">
<img src="img/goesick/bozon2_1.JPG"/>
</div>
<figcaption>보존2</figcaption>
</figure>
<p>
“그때부터 열받아서 공용 냉장고 안 쓰고 동네 실개천에다가 물건들 묶어놓기 시작했어요. 사실 동네 개천을 유심히 들여다보는 사람이 없잖아요. 산책할 때 옆에 물 흐르면 기분 좋으니까 있는 거지. 그래서 새벽같이 일어나서 음료수 등등 노끈으로 묶어서 담궈놓고 와요.”</p>
<figure>
<div class="js-gallery-content">
<img src="img/goesick/bozon2_2.JPG"/>
<img src="img/goesick/bozon3.JPG"/>
</div>
<figcaption>보존3</figcaption>
</figure>
<p>
“계속 둥둥 떠서 돌덩이를 넣어놔야 해요.” </p>
<p class="text-intro">관악구 청림동</p>
<figure>
<div class="js-gallery-content">
<img src="img/goesick/ggini2.JPG"/>
</div>
<figcaption>끼니1</figcaption>
</figure>
<p>
“저는 종교인입니다. 사실 군대 다닐 때부터 종교를 가지기로 마음을 먹었어요. 교회가 참 좋더라구요. 일요일에 들를 때마다 간식이니 밥이니 다 챙겨주시고.
이렇게 당장 허기진 자부터 구제를 해주시는데 어찌 주 예수를 안믿을 수 있겠어요?
제대하고 나서도 고민을 좀 하다가 계속 다니기로 했어요. 1년 365일을 7로 나누면 52주죠. 그럼 일요일이 52번 정도 온다는 건데, 그럼 1년에 52끼를 예수님께서 주시는 거잖아요. 그런 생각이 딱 드니까 하느님 나라에 안갈 수가 없더라구요.”</p>
<p>
“그래서 본격적으로 기독교인이 되기 전 견학을 가서 조리 시설이 구비되어 있는지를 다 살폈어요. 그러니까 보통 이 정도 (교회의) 사이즈면 얼만큼 (급식을) 주겠다 싶은 감이 생기더라구요. 그렇게 해서 이곳 집사님 등등과 인연을 맺은 게 벌써 2년째예요. 이곳 사람들과 따로 봐야할 일이 생기면 주일 11시 예배 끝나고 급식실에서 보자구 하죠.”</p>
<p class="text-intro">관악구 대학동</p>
<figure>
<div class="js-gallery-content">
<img src="img/goesick/jaeryo1.JPG"/>
</div>
<figcaption>재료1</figcaption>
</figure>
<p>
“3월이나 9월, 학기 초가 되면 다같이 모여서 음식을 시켜먹는 일이 많아지잖아요. 그럴 때면 저도 덩달아 바빠져요. 이 때 부지런히 돌아다니면서 모아두면 최소 두 달치 식재료는 확보할 수 있거든요. 과방이나 라운지 같은 곳들 잘 살펴보면 안 먹고 버리고 간 핫소스나 치즈 가루, 피클 같은 것들이 많아요. 저는 돌아다니면서 그걸 주워 모으아서 집에서 요리할 때 활용하는거죠. 어쩌다가 짜장면에 딸려오는 단무지 안 뜯은걸 발견하면 그 날 저녁 반찬은 따로 걱정할 필요 없어요. 아, 이 케찹이요? 케찹은 학교 밖에서 햄버거 먹으러 갈 때 항상 많이 달라고 해서 챙겨나와요. 맞다, 커피숍이나 식당에서 공짜로 주는 냅킨 주워 모으면 화장지 따로 살 필요 없는 것 정도는 알고 계시죠?”</p>
<figure>
<div class="js-gallery-content">
<img src="img/goesick/jaeryo2.JPG"/>
</div>
<figcaption>재료2</figcaption>
</figure>
<p>
“요즘 라면값도 엄청 오른거 아시죠. 이제 1000원 짜리 한 장으로 라면 하나 사기 아슬아슬해요. 그래서 전 라면을 완제품으로 사지 않고 항상 업소용 사리와 대용량 스프를 따로 사서 요리해 먹죠. 그런데 요즘은 이렇게 먹는게 너무 질려서, 다른 요리도 이것저것 만들어 먹어요. 제일 쉬운건 물 없이 라면 스프랑 파마산 치즈를 넣어 볶아 먹는 치즈볶이에요. 이게 쭉쭉 늘어나는 모짜렐라 치즈는 아니지만, 치즈향은 충분히 느낄 수 있어서 좋더라구요. 너무 느끼하다 싶으면 핫소스 뿌려도 맛있구요. 면만 먹는게 질린다 싶으면 햇반 사다가 데우고 라면스프로 국을 끓여서 같이 먹어요. 단무지나 김치 같은거 있으면 따로 반찬도 필요 없구요. 파스타 이런거 먹고 싶을때는 케찹을 좀 졸여서 삶은 라면사리랑 비벼먹어요. 스파게티가 뭐 별건 아니잖아요.”</p>
<figure>
<div class="js-gallery-content">
<img src="img/goesick/jaeryo3.JPG"/>
</div>
<figcaption>치즈볶이 (라면스프 + 파마산 치즈)<br>
케찹으로 소스 만들어서 유사 스파게티</figcaption>
</figure>
<p class="text-intro">관악구 청룡동</p>
<figure>
<div class="js-gallery-content">
<img src="img/goesick/baedal1_1.JPG"/>
<img src="img/goesick/baedal1_2.JPG"/>
</div>
<figcaption>배달1</figcaption>
</figure>
<p>
<span class="highlight">“맨날 라면 끓여먹고, 볶아먹고, 라면스프국 끓여서 밥이랑 먹고, 하다보면 지겨워질 때가 오죠. 너무 한 가지 음식만 먹으면 건강에도 안 좋구요. 그런데 가진 돈으로 구할 수 있는 식재료는 한정적이고, 밖에 나가서 사먹을 돈도 없잖아요.”<span> </p>
<figure>
<div class="js-gallery-content">
<img src="img/goesick/baedal2_1.JPG"/>
<img src="img/goesick/baedal2_2.JPG"/>
<img src="img/goesick/baedal2_3.JPG"/>
</div>
<figcaption>배달2</figcaption>
</figure>
<p>
“그런데 아파트에서 짜장 그릇 발견하기가 쉬워요. 한 층에 10가구, 총 23층이니까 이 동에만 230세대가 살아요. 확률적으로 하루에 한 집도 짜장면을 안 시켜 먹기는 힘들죠.”</p>
<figure>
<div class="js-gallery-content">
<img src="img/goesick/baedal3.JPG"/>
</div>
<figcaption>배달3</figcaption>
</figure>
<p>
“짜장밥 먹으려구요.”</p>
<figure>
<!--<div class="js-gallery-content">
<img src="img/gwanak/gamchan1.jpg" />
<img src="img/gwanak/gamchan2.jpg" />
<img src="img/gwanak/nokdu.jpeg" />
<img src="img/gwanak/nokdu2.jpg" />
<img src="img/gwanak/snu.jpg" />
<img src="img/gwanak/snu2.jpeg" />
</div>-->
<figcaption> </figcaption>
</figure>
</section>
<section class="js-section" data-zoom-start="1.5">
<h2><span class="title-up">강남구</span><span class="title-down">능력계발센터</span></h2>
<iframe width="480" height="360" src="https://www.youtube.com/embed/IGsveBxvoBE" frameborder="0" allowfullscreen></iframe>
<iframe width="480" height="360" src="https://www.youtube.com/embed/LZpscBhs0bY" frameborder="0" allowfullscreen></iframe>
<figure>
<div class="js-gallery-content">
<!--<img src="img/gangnam/apgu.jpeg" />
<img src="img/gangnam/gangnam_anma.gif" />
<img src="img/gangnam/gangnam_design.jpg" />
<img src="img/gangnam/gangnam_doctor.gif" />
<img src="img/gangnam/gangnam_goodclub.png" />
<img src="img/gangnam/gangnam_kstar.png" />
<img src="img/gangnam/gangnam_logo.jpg" />
<img src="img/gangnam/gangnam_missystyle.png" />
<img src="img/gangnam/gangnam_skin.png" />
<img src="img/gangnam/gangnam_skin2.png" />
<img src="img/gangnam/malchoom.png" />
<img src="img/gangnam/malchoom_arch.JPG" />
<img src="img/gangnam/malchoom_big.jpg" />
<img src="img/gangnam/malchoom_intro.png" />
<img src="img/gangnam/malchoom_small.jpeg" />
<img src="img/gangnam/missy_gangnam.png" />-->
</div>
<figcaption>갱 냄</figcaption>
</figure>
</section>
<section class="js-section" data-zoom-start="1.5" data-zoom-middle="1">
<h2><span class="title-up">송파구</span><span class="title-down">샤롯데월드~</span></h2>
<figure>
<div class="js-gallery-content">
<img src="img/journey/lotte-news.jpg" />
<img src="img/journey/lotte-fashion.jpeg" />
</div>
<figcaption>멋지다 롯데.</figcaption>
</figure>
<figure>
<!--<div class="js-gallery-content">
<img src="img/songpa/gardenfive.jpg" />
<img src="img/songpa/gardenfive2.jpg" />
<img src="img/songpa/gardenfive_gongsil.jpg" />
<img src="img/songpa/gardenfive_gongsil2.jpg" />
<img src="img/songpa/gardenfive_gongsil3.jpg" />
<img src="img/songpa/songpa_3monyo.png" />
<img src="img/songpa/songpa_fb.png" />
<img src="img/songpa/songpa_gardenfive.jpg" />
<img src="img/songpa/songpa_mascot.png" />
<img src="img/songpa/songpa_mascot_silsa.png" />
</div>-->
<figcaption></figcaption>
</figure>
</section>
<section class="js-section" data-zoom-start="1.2">
<h2><span class="title-up">강동구</span><span class="title-down">드 높은 기상속에 역사 이룬 곳</span></h2>
<figure>
<div class="js-gallery-content">
<img src="img/gangdong/gdchar.jpg"/>
</div>
<figcaption>강동구의 마스코트 강동이와 강동미</figcaption>
</figure>
<figure>
<div class="js-gallery-content">
<img src="img/gangdong/gangpool.jpg"/>
</div>
<figcaption>어서와~</figcaption>
</figure>
<figure>
<!--<div class="js-gallery-content">
<img src="img/gangdong/amsa_yujuk.jpg"/>
<img src="img/gangdong/amsa_yujuk2.jpg"/>
<img src="img/gangdong/amsa_yujuk3.jpg"/>
<img src="img/gangdong/amsa_yujuk4.jpg"/>
</div>-->
<figcaption>묻다.</figcaption>
</figure>
</section>
<section class="js-section" data-stay="true" data-zoom-start="0.8"></section>
</div>
<!-- Related demos -->
<section class="content content--related">
<p class="info">Filler text from <a href="http://www.gutenberg.org/ebooks/46772">William Bisiker's "Across Iceland"</a></p>
<p><strong>If you enjoyed this demo you might also like:</strong></p>
<a class="media-item" href="http://tympanus.net/Development/ArticleIntroEffects/">
<img class="media-item__img" src="img/related/ArticleIntroEffects.png">
<h3 class="media-item__title">Article Intro Effects</h3>
</a>
<a class="media-item" href="http://tympanus.net/Development/SlidingHeaderLayout/">
<img class="media-item__img" src="img/related/SlidingHeaderLayout.jpg">
<h3 class="media-item__title">Sliding Header Layout</h3>
</a>
</section>
</div>
<!-- /main -->
<script src="dist/app.js"></script>
<script src="src/jquery-2.2.1.min.js"></script>
<script src="src/custom.js"></script>
</body>
</html>