-
Notifications
You must be signed in to change notification settings - Fork 36
/
index_o.html
executable file
·1173 lines (883 loc) · 54.4 KB
/
index_o.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
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta name="description" content="">
<meta property="og:description" content="한별과 성섭의 결혼식에 초대합니다."/>
<meta property="og:image" content="https://hanbyeol-sungsub-wedding.github.io/images/title.jpg"/>
<meta name="author" content="Sungchi">
<title>한별 & 성섭</title>
<link rel="icon" href="images/favicon.jpg">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" type="text/css" media="screen" />
<!-- Pace -->
<link rel="stylesheet" href="css/preloader.css" media="screen">
<link rel="stylesheet" href="css/preloader-default.css" media="screen">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider/flexslider.css" type="text/css">
<!-- Animate -->
<link rel="stylesheet" href="css/animate/animate.css" type="text/css">
<!-- Countdown -->
<link rel="stylesheet" href="css/countdown/jquery.countdown.css" type="text/css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup/magnific-popup.css" type="text/css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="css/owlcarousel/owl.carousel.css" type="text/css">
<link rel="stylesheet" href="css/owlcarousel/owl.theme.css" type="text/css">
<!-- Icon -->
<link rel="stylesheet" href="css/fonts/fontello/css/fontello.css" type="text/css" media="screen" />
<!-- Font -->
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<!-- Theme CSS -->
<link href="css/style.css" rel="stylesheet" media="screen">
<!-- Skin CSS -->
<!-- <link href="css/skin/light-teal/light-teal.css" rel="stylesheet" media="screen"> -->
<!-- <link href="css/skin/light-teal/light-teal-reverse-navbar.css" rel="stylesheet" media="screen"> -->
<!-- <link href="css/skin/pattern/pattern-1.css" rel="stylesheet" media="screen"> -->
</head>
<body class="outside-bottom-bar-page">
<!--PRELOADER-->
<div id="preloader">
<div class="alignment">
<div class="v-align center-middle">
<!-- LEFT HEART -->
<div class="heart-animation">
<i class="de-icon-heart"></i>
</div>
<!-- RIGHT HEART -->
<div class="heart-animation-reverse">
<i class="de-icon-heart"></i>
</div>
</div>
</div>
</div> <!--END of PRELOADER-->
<!-- MAIN SLIDER -->
<section id="main-slider" class="flexslider fullscreen">
<!-- MAIN SLIDER TITLE OUTTER WRAPPER -->
<div class="slide-title-outter-wrapper">
<!-- MAIN SLIDER TITLE INNER WRAPPER -->
<div class="slide-title-inner-wrapper">
<!-- TITLE 2 -->
<div class="slide-title">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6 animation delay1 fadeInUp">
<div id="invited">
You're Invited
</div>
<div class="banner-text withlove medium light">
<h1>한별과 성섭이 결혼합니다.</h1>
</div>
<div id="banner-date">
- 2017.02.25 오후 1시 30분 -</br>
해군호텔 W웨딩홀
</div>
</div>
</div>
</div>
</div>
</div><!-- END of MAIN SLIDER TITLE INNER WRAPPER -->
</div> <!-- END of MAIN SLIDER TITLE OUTTER WRAPPER -->
<!-- MAIN SLIDER IMAGES -->
<ul class="slides">
<li>
<!-- SLIDE IMAGE -->
<div data-stellar-ratio="0.5" class="slide-image" style="background-image:url(./images/title.jpg); background-position:top center">
</div>
<!-- SLIDE OVERLAY -->
<div class="slide-overlay" style="opacity:0"> </div>
</li>
</ul><!-- END of MAIN SLIDER IMAGES -->
<!-- NAVIGATION -->
<header id="nav-header">
<nav id="nav-bar" class="bottom-bar outside fluid-width block-color nav-center sticky-nav animation fadeIn">
<div id="nav-wrapper">
<!-- LOGO -->
<div class="logo-wrapper">
<!-- CSS LOGO -->
<a href="index.html">
<div class="css-logo rounded">
<div class="css-logo-text">
<strong>H</strong><i class="de-icon-heart-1"></i><strong>S</strong>
</div>
</div>
</a>
<!-- IMG LOGO
<div class="img-logo">
<img src="images/slide1.jpg">
</div>-->
</div>
<!-- END of LOGO -->
<div id="mobile-nav">
<i class="de-icon-menu"></i>
</div>
<ul id="nav-menu" class="nav-smooth-scroll">
<li class="first-child">
<a href="#main-slider">맨 위로</a>
</li>
<li>
<a href="#our-story">우리 이야기</a>
</li>
<li class="first-child split-margin">
<a href="#where-when">시간과 장소</a>
</li>
<li>
<a href="#gallery-section">갤러리</a>
</li>
</ul>
<div class="clearboth"></div>
</div>
</nav>
</header> <!-- END of NAVIGATION -->
</section><!-- ENF of MAIN SLIDER -->
<!--CONTENT SECTION-->
<section id="content">
<!--COUPLE SECTION-->
<section id="couple">
<div class="container">
<div class="row">
<!-- SECTION CONTENT -->
<div class="col-md-6">
<!--PHOTO-ITEM-->
<div class="photo-item frame-border animation fadeInLeft">
<!--PHOTO-->
<img src="./images/childhood_sub.jpg" alt="" class="hover-animation image-zoom-in">
<!--PHOTO OVERLAY-->
<div class="layer wh100 hidden-black-overlay hover-animation fade-in">
</div><!--END of PHOTO OVERLAY-->
</div><!--END of PHOTO-ITEM-->
<div class="his-her-name">
<h2 class="text-center">우성섭</h2>
<div class="heart-wrapper">
<div class="de-icon circle medium-size custom-heart">
<i class="de-icon-heart"></i>
</div>
</div>
</div>
<p class="blurb animation fadeInLeft text-center">
1982년에 충북 괴산군에서 태어나 서울에서 스타트업-스타트업-창업(망하고)-스타트업의 길을 걸어왔습니다. 그 와중에 나를 인간으로 만들어주러 온 나의 구세주 별님을 만나 참된 인간으로 거듭나게 되었습니다. 별님에게 요리해주고 같이 오버워치 하며 무릎에 앉은 고양이를 쓰다듬어주는 것이 요즘 저의 가장 큰 행복입니다.
</p>
</div>
<div class="col-md-6">
<!--PHOTO-ITEM-->
<div class="photo-item frame-border animation fadeInRight">
<!--PHOTO-->
<img src="./images/childhood_byeol.jpg" alt="" class="hover-animation image-zoom-in">
<!--PHOTO OVERLAY-->
<div class="layer wh100 hidden-black-overlay hover-animation fade-in">
</div><!--END of PHOTO OVERLAY-->
</div><!--END of PHOTO-ITEM-->
<div class="his-her-name">
<h2 class="text-center">강한별</h2>
</div>
<p class="blurb animation fadeInRight text-center">
1989년에 서울에서 태어나 이곳저곳 이사를 다니다 결국 서울에 정착했습니다. 어릴 때는 IT 업계에 종사하게 될 줄 몰랐지만 했던 짓을 생각해보면 나름 아이티키드였던 것 같기도 하고. 평소에 하얗고 동그란 것을 좋아했는데 정말 하얗고 동그란 사람과 결혼하게 되어 무척 기쁩니다. 다정한 친구이면서 존경할 수 있는 사람을 만나게 되어 행운이라고 생각하고 있습니다.
</p>
</div>
</div>
</div>
</section>
<!-- OUR STORY SECTION -->
<section id="our-story">
<div class="container">
<!-- ROW-1 -->
<div class="row">
<!-- SECTION TITLE -->
<div class="col-sm-12 col-md-offset-2 col-md-8 text-center">
<div class="section-title animation fadeInUp">
<h2>
우리 <img src="images/heart-icon.png" alt=""> 이야기
</h2>
</div>
</div>
</div> <!-- END of ROW-1 -->
<!-- STORY ROW-1-->
<div class="row story-row">
<div class="col-sm-12 col-md-offset-1 col-md-4 text-center">
<!--PHOTO-ITEM-->
<div class="photo-item frame-border animation delay1 fadeInLeft">
<!--PHOTO-->
<img src="./images/ourstory1.jpg" alt="" class="hover-animation image-zoom-in">
<!--PHOTO OVERLAY-->
<div class="layer wh100 hidden-black-overlay hover-animation fade-in">
</div><!--END of PHOTO OVERLAY-->
<!--ICON LINK-->
<div class="layer wh100 hidden-link hover-animation delay1 fade-in">
<div class="alignment">
<div class="v-align center-middle">
<a onclick="ga('send', 'event', '스토리', '클릭', '두번째 데이트');" href="./images/ourstory1.jpg" class="magnific-zoom" title="두번째 데이트">
<div class="de-icon circle light medium-size inline">
<i class="de-icon-zoom-in"></i>
</div>
</a>
</div>
</div>
</div><!--END of ICON LINK-->
</div><!--END of PHOTO-ITEM-->
</div>
<div class="col-sm-12 col-md-2 text-center story-date-wrapper animation fadeIn">
<div class="arrow-left"></div>
<div class="story-date">
<div class="date-only">06</div>
<div class="month-year">2014</div>
</div>
<div class="arrow-right"></div>
<div class="clearboth"></div>
</div>
<div class="col-sm-12 col-md-4 animation delay1 fadeInRight">
<h3>두번째 데이트</h3>
<p>한별: 두번째 만남에서 유기견 산책을 함께 했습니다. 이때는 옷도 후드짚업에 늘어난 청바지를 입고 정형돈 크로스백을 하고 와서 놀랐던 기억이 납니다. 강아지와 함께 어린 아이처럼 신나서 달려가는 모습이 인상적입니다. 원래는 강아지가 무섭다고 하셨는데 그 이후로 점차 강아지 공포증을 극복하고 있습니다.</p>
<p>성섭: 그때 가장 편하면서도 예쁜 옷을 골랐습니다. 저 때를 계기로 강아지는 대부분 착하다는 것을 배웠습니다. 나쁜 것은 인간입니다.</p>
</div>
<div class="vertical-line">
</div>
</div><!-- END of STORY ROW-1 -->
<!-- STORY ROW-2-->
<div class="row story-row">
<div class="col-sm-12 col-md-4 col-md-push-6 text-center">
<!--PHOTO-ITEM-->
<div class="photo-item frame-border animation delay1 fadeInLeft">
<!--PHOTO-->
<img src="./images/ourstory3.jpg" alt="" class="hover-animation image-zoom-in">
<!--PHOTO OVERLAY-->
<div class="layer wh100 hidden-black-overlay hover-animation fade-in">
</div><!--END of PHOTO OVERLAY-->
<!--ICON LINK-->
<div class="layer wh100 hidden-link hover-animation delay1 fade-in">
<div class="alignment">
<div class="v-align center-middle">
<a onclick="ga('send', 'event', '스토리', '클릭', '음악행사');" href="./images/ourstory3.jpg" class="magnific-zoom" title="음악 행사">
<div class="de-icon circle light medium-size inline">
<i class="de-icon-zoom-in"></i>
</div>
</a>
</div>
</div>
</div><!--END of ICON LINK-->
</div><!--END of PHOTO-ITEM-->
</div>
<div class="col-sm-12 col-md-2 text-center story-date-wrapper animation fadeIn">
<div class="arrow-left"></div>
<div class="story-date">
<div class="date-only">10</div>
<div class="month-year">2015</div>
</div>
<div class="arrow-right"></div>
<div class="clearboth"></div>
</div>
<div class="col-sm-12 col-md-4 col-md-pull-6 animation delay1 fadeInRight">
<h3>음악 행사</h3>
<p>한별: 음악 페스티벌에 같이 가본 뒤로 재미를 붙여 렛츠락 페스티벌에 갔습니다. 음악 페스티벌을 고르는 기준은 장기하와 얼굴들이 출연하느냐 입니다. 성섭님은 장기하와 얼굴들 정도가 아니면 상대를 안 하십니다. 장기하와 얼굴들이 나오기 전까지는 계속 주무시기만 하지만 괜찮아요. 자장가로 들으신 거니까요.</p>
<p>성섭: 날씨 좋을 때 가는 음악 페스티벌은 누워서 간식먹고 바로 낮잠자기 좋습니다. 비오는 날 갔던 자라섬 무슨 페스티벌이 생각납니다. 비가 오는데도 낮잠은 잤습니다.</p>
</div>
<div class="vertical-line">
</div>
</div><!-- END of STORY ROW-2 -->
<!-- STORY ROW-3-->
<div class="row story-row">
<div class="col-md-offset-1 col-md-4 text-center">
<!--PHOTO-ITEM-->
<div class="photo-item frame-border animation delay1 fadeInLeft">
<!--PHOTO-->
<img src="./images/ourstory2.jpg" alt="" class="hover-animation image-zoom-in">
<!--PHOTO OVERLAY-->
<div class="layer wh100 hidden-black-overlay hover-animation fade-in">
</div><!--END of PHOTO OVERLAY-->
<!--ICON LINK-->
<div class="layer wh100 hidden-link hover-animation delay1 fade-in">
<div class="alignment">
<div class="v-align center-middle">
<a onclick="ga('send', 'event', '스토리', '클릭', '여행');" href="./images/ourstory2.jpg" class="magnific-zoom" title="여행">
<div class="de-icon circle light medium-size inline">
<i class="de-icon-zoom-in"></i>
</div>
</a>
</div>
</div>
</div><!--END of ICON LINK-->
</div><!--END of PHOTO-ITEM-->
</div>
<div class="col-md-2 text-center story-date-wrapper animation fadeIn">
<div class="arrow-left"></div>
<div class="story-date">
<div class="date-only">05</div>
<div class="month-year">2016</div>
</div>
<div class="arrow-right"></div>
<div class="clearboth"></div>
</div>
<div class="col-md-4 animation delay1 fadeInRight">
<h3>여행</h3>
<p>한별: 함께 일본 오사카와 교토로 여행을 갔습니다. 여행 내내 성섭님은 매우 수줍어 하셨지만 마지막에는 스스로 음식 주문도 할 수 있게 되셨습니다. 일본 여행에서 기억에 남는 것은 로프트라고 하시는 성섭님. 이쁜 것이 많아서 좋았다고 하십니다. 우리는 오사카에 더 오래 있었지만 성섭님은 교토가 더 좋다고 하셨습니다.</p>
<p>성섭: 공공연한 비밀이지만 저는 여행을 싫어합니다. 비 오는 교토는 너무나 아름다웠습니다. 그때 찍었던 사진을 한일 교류 사진전에 출품했는데 탈락했습니다. 별님과 여행계획을 세우고 함께 돌아다니는 것은 저의 두번째 행복입니다.</p>
</div>
<div class="vertical-line">
</div>
</div><!-- END of STORY ROW-3 -->
<!-- STORY ROW-4 -->
<div class="row story-row">
<div class="col-sm-12 col-md-4 col-md-push-6 text-center">
<!--PHOTO-ITEM-->
<div class="photo-item frame-border animation delay1 fadeInLeft">
<!--PHOTO-->
<img src="./images/ourstory4.jpg" alt="" class="hover-animation image-zoom-in">
<!--PHOTO OVERLAY-->
<div class="layer wh100 hidden-black-overlay hover-animation fade-in">
</div><!--END of PHOTO OVERLAY-->
<!--ICON LINK-->
<div class="layer wh100 hidden-link hover-animation delay1 fade-in">
<div class="alignment">
<div class="v-align center-middle">
<a onclick="ga('send', 'event', '스토리', '클릭', '마스터');" href="./images/ourstory4.jpg" class="magnific-zoom" title="마스터">
<div class="de-icon circle light medium-size inline">
<i class="de-icon-zoom-in"></i>
</div>
</a>
</div>
</div>
</div><!--END of ICON LINK-->
</div><!--END of PHOTO-ITEM-->
</div>
<div class="col-sm-12 col-md-2 text-center story-date-wrapper animation fadeIn">
<div class="arrow-left"></div>
<div class="story-date">
<div class="date-only">09</div>
<div class="month-year">2016</div>
</div>
<div class="arrow-right"></div>
<div class="clearboth"></div>
</div>
<div class="col-sm-12 col-md-4 col-md-pull-6 animation delay1 fadeInRight">
<h3>마스터</h3>
<p>한별: 남들 다 갈 때 못 가다가 뒤늦게 속초에 포켓몬을 잡으러 갔습니다. 포켓몬 좋아하지도 않으면서 왜 속초까지 가냐고 하셨던 성섭님이 제일 좋아하셨습니다. 포켓몬 알을 까기 위해 평소보다 훨씬 많이 걸으시던 성섭님. 포켓몬 마스터가 되려고 열심히 노력하시던 모습이 기억에 많이 남습니다.</p>
<p>
성섭: 저는 여행을 별로 안좋아하지만 별님과 함께 가는 여행은 아주 좋아합니다. 포켓몬도 별로 안좋아하지만 하루동안 300마리쯤 잡았던 기억이 있습니다. 숙소가 정말 좋았지만 별님이 알려주지 말라고 했습니다. 포켓몬고의 한국 출시를 축하합니다.
</p>
</div>
<div class="vertical-line">
</div>
</div><!-- END of STORY ROW-4 -->
<!-- STORY ROW-5-->
<div class="row story-row">
<div class="col-md-offset-1 col-md-4 text-center">
<!--PHOTO-ITEM-->
<div class="photo-item frame-border animation delay1 fadeInLeft">
<!--PHOTO-->
<img src="./images/ourstory5.jpg" alt="" class="hover-animation image-zoom-in">
<!--PHOTO OVERLAY-->
<div class="layer wh100 hidden-black-overlay hover-animation fade-in">
</div><!--END of PHOTO OVERLAY-->
<!--ICON LINK-->
<div class="layer wh100 hidden-link hover-animation delay1 fade-in">
<div class="alignment">
<div class="v-align center-middle">
<a onclick="ga('send', 'event', '스토리', '클릭', '집 꾸미기');" href="./images/ourstory5.jpg" class="magnific-zoom" title="집 꾸미기">
<div class="de-icon circle light medium-size inline">
<i class="de-icon-zoom-in"></i>
</div>
</a>
</div>
</div>
</div><!--END of ICON LINK-->
</div><!--END of PHOTO-ITEM-->
</div>
<div class="col-md-2 text-center story-date-wrapper animation fadeIn">
<div class="arrow-left"></div>
<div class="story-date">
<div class="date-only">11</div>
<div class="month-year">2016</div>
</div>
<div class="arrow-right"></div>
<div class="clearboth"></div>
</div>
<div class="col-md-4 animation delay1 fadeInRight">
<h3>집 꾸미기</h3>
<p>한별: 집을 먼저 얻게 되어 조금 일찍 이사를 했습니다. 직접 페인트 색을 골라서 칠하고, 몰딩도 칠하는 등 나름대로 깔끔하게 정돈하려고 노력했습니다. 이제는 편안하고 행복한 우리집이라는 생각이 드네요!</p>
<p>성섭: 저는 집을 꾸미는 심즈를 별로 안좋아지만 별님과 함께하는 집 꾸미기는 정말 재밌고 보람있었습니다. 특히 벤자민 무어 페인트는 훌륭한 친환경 페인트입니다. (강추) 사진을 확대하면 고양이가 보입니다.</p>
</div>
<div class="vertical-line">
</div>
</div><!-- END of STORY ROW-5 -->
<!-- STORY ROW-6 -->
<div class="row story-row">
<div class="col-sm-12 col-md-4 col-md-push-6 text-center">
<!--PHOTO-ITEM-->
<div class="photo-item frame-border animation delay1 fadeInLeft">
<!--PHOTO-->
<img src="./images/ourstory6.jpg" alt="" class="hover-animation image-zoom-in">
<!--PHOTO OVERLAY-->
<div class="layer wh100 hidden-black-overlay hover-animation fade-in">
</div><!--END of PHOTO OVERLAY-->
<!--ICON LINK-->
<div class="layer wh100 hidden-link hover-animation delay1 fade-in">
<div class="alignment">
<div class="v-align center-middle">
<a onclick="ga('send', 'event', '스토리', '클릭', '프로포즈');" href="./images/ourstory6.jpg" class="magnific-zoom" title="프로포즈">
<div class="de-icon circle light medium-size inline">
<i class="de-icon-zoom-in"></i>
</div>
</a>
</div>
</div>
</div><!--END of ICON LINK-->
</div><!--END of PHOTO-ITEM-->
</div>
<div class="col-sm-12 col-md-2 text-center story-date-wrapper animation fadeIn">
<div class="arrow-left"></div>
<div class="story-date">
<div class="date-only">12</div>
<div class="month-year">2016</div>
</div>
<div class="arrow-right"></div>
<div class="clearboth"></div>
</div>
<div class="col-sm-12 col-md-4 col-md-pull-6 animation delay1 fadeInRight">
<h3>프로포즈</h3>
<p>한별: 잠깐 집을 비웠다가 돌아와보니 저녁 식사와 함께 꽃다발, 아이패드를 주셔서 깜짝 놀랐습니다. 말로만 프로포즈 준비한다고 하시고 결국 안 하실 줄 알았기 때문에 더 큰 감동이었습니다. 어째 집에 언제 돌아오냐고 계속 물으시던 게 생각납니다.</p>
<p>성섭: 프로포즈에 대한 의미를 이해하는데 1년 정도 걸렸습니다. 저는 프로포즈의 목적을 깨달은 순간 별님에게 뭐가 필요한지도 알게 되었습니다. 주변에서는 다 반지를 하지않으면 후회한다고 했지만 결국 내가 맞았습니다. 사랑합니다.</p>
</div>
<div class="vertical-line">
</div>
</div><!-- END of STORY ROW-6 -->
<div class="row">
<div class="col-md-12 text-center">
<div id="end-of-story" class="animation fadeInUp">
<h2>그리고 드디어 결혼을 하게 되었습니다.</h2>
<div class="heart-divider">
<span class="grey-line"></span>
<i class="de-icon-heart pink-heart"></i>
<i class="de-icon-heart grey-heart"></i>
<span class="grey-line"></span>
</div>
</div>
</div>
</div>
</div><!-- END of CONTAINER -->
</section>
<!-- PHOTO DIVIDER -->
<section id="photo-divider-1">
<div class="image-divider fixed-height" style="background-image:url(./images/placeholder.jpg); height:500px" data-stellar-background-ratio="0.3">
</div>
</section>
<!-- WHERE WHEN SECTION -->
<section id="where-when">
<div class="container">
<!-- ROW-1 -->
<div class="row">
<!-- SECTION TITLE -->
<div class="col-md-offset-2 col-md-8 text-center">
<div class="section-title animation fadeInUp">
<h2>
시간과 장소
</h2>
</div>
</div>
</div> <!-- END of ROW-1 -->
<!-- ROW-2 -->
<div class="row">
<!-- SECTION TITLE -->
<div class="col-md-12 text-center">
<div class="banner-text dark full animation fadeIn">
<div class="row">
<div class="col-md-4">
<h3>2017년 2월 25일</h3>
</div>
<div class="col-md-4">
<div class="border-column">
<h3>오후 1시 30분</h3>
</div>
</div>
<div class="col-md-4">
<h3>해군호텔 W웨딩홀</h3>
</div>
</div>
</div>
</div>
</div> <!-- END of ROW-2 -->
<!-- ROW-3 -->
<div class="row">
<div class="col-md-12 animation fadeIn">
<img src="./images/map.jpg" style="width: 100%; margin-bottom:20px;" />
<div class="de-icon circle small-size inline" style="background-color:#f0394d">
<i class="de-icon-address"></i>
</div>
<h3 class="inline">오시는 길</h3>
<ul><li>(140-750) 서울특별시 영등포구 가마산로 540 ( 신길7동 101-1번지)</li>
<li>TEL 02.841.4114</li>
<li>FAX: 02.842.2646</li></ul>
<div class="de-icon circle small-size inline" style="background-color:#f6700e">
<i class="de-icon-truck"></i>
</div>
<h3 class="inline">무료 셔틀버스</h3>
<ul>
<li>1호선 대방역3번출구 / 7호선 보라매역 5번출구로 나오셔서 셔틀버스를 타시면됩니다.</li>
<li>결혼식 있을때만 운행하며, 예식시간 1시간30분 전부터 10분-15분간격 운행합니다.</li></ul>
<div class="de-icon circle small-size inline" style="background-color:#0d9a48">
<i class="de-icon-rebel"></i>
</div>
<h3 class="inline">지하철</h3>
<ul>
<li>1호선: 대방역 4,5번 출구에서 100m 지점 김재규경찰학원앞 마을버스 (07번 06번) 이용</li>
<li>7호선: 보라매역 - 도보이용 (500m), 택시이용 -8번출구 (기본요금)</li>
<li>도보: 5번출구에서 200m 지나 우신시장 삼거리에서 우회전, 300m직진</li>
</ul>
<div class="de-icon circle small-size inline" style="background-color:#9400d3">
<i class="de-icon-cab"></i>
</div>
<h3 class="inline">승용차</h3>
<ul>
<li>시흥대로 방면에서 오시는 경우: 강남중학교 앞 사거리에서 좌회전이 안되므로 서울지방 병무청앞에서 유(u)턴을 해서 70m지나 사거리에 이정표(신풍시장) 방면으로 우회전 - 직진- 지하차도 통과 하지마시고 옆길(3차선)을 이용하여 올라옴</li>
<li>강남중학교/신풍시장(사러가쇼핑)에서 오시는 경우: 해군호텔 앞 지하차도를 통과하지 마시고 지하차도 옆길(3차선)을 이용하여 올라오시면 됨</li>
<li>경부고속도로 이용시: 한남 IC 김포공항방향 직진 - 여의도 진입 - 원효대교 밑 좌회전- 대방로 직진( 지하차도 통과후 1.2km) - 옛해군 본부 앞 사거리에서 (신풍시장)우회전</li>
<li>중부고속도로 이용시: 상일 IC - 김포공항방향 직진- 여의도 진입후 상기 동일코스로 이동</li>
</ul>
</div>
<!-- <div class="col-md-6 animation fadeIn">
<div id="map-canvas" style="border:15px solid #FFF; margin-top:20px;"></div>
</div> -->
</div> <!-- END of ROW-3 -->
</div>
</section>
<!-- GALLERY SECTION -->
<section id="gallery-section">
<div class="container">
<!-- ROW-1 -->
<div class="row">
<!-- SECTION TITLE -->
<div class="col-md-offset-2 col-md-8 text-center">
<div class="section-title animation fadeInUp">
<h2>
우리 <img src="images/heart-icon.png" alt=""> 갤러리
</h2>
</div>
</div>
</div> <!-- END of ROW-1 -->
<div class="row">
<!--GALLERY-ITEM-1-->
<div class="col-md-4">
<!--PHOTO-ITEM-->
<div class="photo-item frame-border animation fadeIn">
<!--PHOTO-->
<img src="./images/g1.jpg" alt="" class="hover-animation image-zoom-rotate">
<!--PHOTO OVERLAY-->
<div class="layer wh100 hidden-black-overlay hover-animation fade-in">
</div><!--END of PHOTO OVERLAY-->
<!--ICON LINK-->
<div class="layer wh100 hidden-link hover-animation delay1 fade-in">
<div class="alignment">
<div class="v-align center-middle">
<a onclick="ga('send', 'event', '갤러리', '클릭', '클릭해주셔서 고맙습니다');" href="./images/g1.jpg" class="magnific-zoom-gallery" title="클릭해주셔서 고맙습니다.">
<div class="de-icon circle light medium-size inline">
<i class="de-icon-zoom-in"></i>
</div>
</a>
</div>
</div>
</div><!--END of ICON LINK-->
</div><!--END of PHOTO-ITEM-->
</div><!--END of GALLERY-ITEM-1-->
<!--GALLERY-ITEM-2-->
<div class="col-md-4">
<!--PHOTO-ITEM-->
<div class="photo-item frame-border animation fadeIn">
<!--PHOTO-->
<img src="./images/g8.jpg" alt="" class="hover-animation image-zoom-rotate">
<!--PHOTO OVERLAY-->
<div class="layer wh100 hidden-black-overlay hover-animation fade-in">
</div><!--END of PHOTO OVERLAY-->
<!--ICON LINK-->
<div class="layer wh100 hidden-link hover-animation delay1 fade-in">
<div class="alignment">
<div class="v-align center-middle">
<a onclick="ga('send', 'event', '갤러리', '클릭', '집에서 가져간 안경');" href="./images/g8.jpg" class="magnific-zoom-gallery" title="집에서 가져간 안경">
<div class="de-icon circle light medium-size inline">
<i class="de-icon-zoom-in"></i>
</div>
</a>
</div>
</div>
</div><!--END of ICON LINK-->
</div><!--END of PHOTO-ITEM-->
</div><!--END of GALLERY-ITEM-2-->
<!--GALLERY-ITEM-3-->
<div class="col-md-4">
<!--PHOTO-ITEM-->
<div class="photo-item frame-border animation fadeIn">
<!--PHOTO-->
<img src="./images/g3.jpg" alt="" class="hover-animation image-zoom-rotate">
<!--PHOTO OVERLAY-->
<div class="layer wh100 hidden-black-overlay hover-animation fade-in">
</div><!--END of PHOTO OVERLAY-->
<!--ICON LINK-->
<div class="layer wh100 hidden-link hover-animation delay1 fade-in">
<div class="alignment">
<div class="v-align center-middle">
<a onclick="ga('send', 'event', '갤러리', '클릭', 'i love you');" href="./images/g3.jpg" class="magnific-zoom-gallery" title="I Love You를 뜻합니다.">
<div class="de-icon circle light medium-size inline">
<i class="de-icon-zoom-in"></i>
</div>
</a>
</div>
</div>
</div><!--END of ICON LINK-->
</div><!--END of PHOTO-ITEM-->
</div><!--END of GALLERY-ITEM-3-->
<!--GALLERY-ITEM-4-->
<div class="col-md-4">
<!--PHOTO-ITEM-->
<div class="photo-item frame-border animation fadeIn">
<!--PHOTO-->
<img src="./images/g4.jpg" alt="" class="hover-animation image-zoom-rotate">
<!--PHOTO OVERLAY-->
<div class="layer wh100 hidden-black-overlay hover-animation fade-in">
</div><!--END of PHOTO OVERLAY-->
<!--ICON LINK-->
<div class="layer wh100 hidden-link hover-animation delay1 fade-in">
<div class="alignment">
<div class="v-align center-middle">
<a onclick="ga('send', 'event', '갤러리', '클릭', '앉아있기 불편함');" href="./images/g4.jpg" class="magnific-zoom-gallery" title="앉아있기 불편함">
<div class="de-icon circle light medium-size inline">
<i class="de-icon-zoom-in"></i>
</div>
</a>
</div>
</div>
</div><!--END of ICON LINK-->
</div><!--END of PHOTO-ITEM-->
</div><!--END of GALLERY-ITEM-4-->
<!--GALLERY-ITEM-5-->
<div class="col-md-4">
<!--PHOTO-ITEM-->
<div class="photo-item frame-border animation fadeIn">
<!--PHOTO-->
<img src="./images/g5.jpg" alt="" class="hover-animation image-zoom-rotate">
<!--PHOTO OVERLAY-->
<div class="layer wh100 hidden-black-overlay hover-animation fade-in">
</div><!--END of PHOTO OVERLAY-->
<!--ICON LINK-->
<div class="layer wh100 hidden-link hover-animation delay1 fade-in">
<div class="alignment">
<div class="v-align center-middle">
<a onclick="ga('send', 'event', '갤러리', '클릭', '봐도봐도 좋은');" href="./images/g5.jpg" class="magnific-zoom-gallery" title="봐도봐도 좋은">
<div class="de-icon circle light medium-size inline">
<i class="de-icon-zoom-in"></i>
</div>
</a>
</div>
</div>
</div><!--END of ICON LINK-->
</div><!--END of PHOTO-ITEM-->
</div><!--END of GALLERY-ITEM-5-->
<!--GALLERY-ITEM-6-->
<div class="col-md-4">
<!--PHOTO-ITEM-->
<div class="photo-item frame-border animation fadeIn">
<!--PHOTO-->
<img src="./images/g6.jpg" alt="" class="hover-animation image-zoom-rotate">
<!--PHOTO OVERLAY-->
<div class="layer wh100 hidden-black-overlay hover-animation fade-in">
</div><!--END of PHOTO OVERLAY-->
<!--ICON LINK-->
<div class="layer wh100 hidden-link hover-animation delay1 fade-in">
<div class="alignment">
<div class="v-align center-middle">
<a onclick="ga('send', 'event', '갤러리', '클릭', '허허 저것 좀 보세요');" href="./images/g6.jpg" class="magnific-zoom-gallery" title="허허 저것 좀 보세요">
<div class="de-icon circle light medium-size inline">
<i class="de-icon-zoom-in"></i>
</div>
</a>
</div>
</div>
</div><!--END of ICON LINK-->
</div><!--END of PHOTO-ITEM-->
</div><!--END of GALLERY-ITEM-6-->
<!--GALLERY-ITEM-7-->
<div class="col-md-4">
<!--PHOTO-ITEM-->
<div class="photo-item frame-border animation fadeIn">
<!--PHOTO-->
<img src="./images/g7.jpg" alt="" class="hover-animation image-zoom-rotate">
<!--PHOTO OVERLAY-->
<div class="layer wh100 hidden-black-overlay hover-animation fade-in">
</div><!--END of PHOTO OVERLAY-->
<!--ICON LINK-->
<div class="layer wh100 hidden-link hover-animation delay1 fade-in">
<div class="alignment">
<div class="v-align center-middle">
<a onclick="ga('send', 'event', '갤러리', '클릭', '신부가 예쁘다');" href="./images/g7.jpg" class="magnific-zoom-gallery" title="신부가 예쁘다">
<div class="de-icon circle light medium-size inline">
<i class="de-icon-zoom-in"></i>
</div>
</a>
</div>
</div>
</div><!--END of ICON LINK-->
</div><!--END of PHOTO-ITEM-->
</div><!--END of GALLERY-ITEM-7-->
<!--GALLERY-ITEM-8-->
<div class="col-md-4">
<!--PHOTO-ITEM-->
<div class="photo-item frame-border animation fadeIn">
<!--PHOTO-->
<img src="./images/g2.jpg" alt="" class="hover-animation image-zoom-rotate">
<!--PHOTO OVERLAY-->
<div class="layer wh100 hidden-black-overlay hover-animation fade-in">
</div><!--END of PHOTO OVERLAY-->
<!--ICON LINK-->
<div class="layer wh100 hidden-link hover-animation delay1 fade-in">
<div class="alignment">
<div class="v-align center-middle">
<a onclick="ga('send', 'event', '갤러리', '클릭', '너무나 아름다운');" href="./images/g2.jpg" class="magnific-zoom-gallery" title="너무나 아름다운">
<div class="de-icon circle light medium-size inline">
<i class="de-icon-zoom-in"></i>
</div>
</a>
</div>
</div>
</div><!--END of ICON LINK-->
</div><!--END of PHOTO-ITEM-->
</div><!--END of GALLERY-ITEM-8-->
<!--GALLERY-ITEM-9-->
<div class="col-md-4">
<!--PHOTO-ITEM-->
<div class="photo-item frame-border animation fadeIn">
<!--PHOTO-->
<img src="./images/g9.jpg" alt="" class="hover-animation image-zoom-rotate">
<!--PHOTO OVERLAY-->
<div class="layer wh100 hidden-black-overlay hover-animation fade-in">
</div><!--END of PHOTO OVERLAY-->