Hugging Face's logo

Spaces:
nkjoy
/
harmony-unification
Running

App Files Community
nkjoy commited on
Commit
c7560d3
·
verified ·
1 Parent(s): 5b0df44

갤러리

Browse files
Files changed (1) hide show
  1. gallery.html +173 -0
gallery.html ADDED
@@ -0,0 +1,173 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>갤러리 - 남북한민족예술단</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="components/navbar.js"></script>
12
+ <script src="components/footer.js"></script>
13
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
14
+ </head>
15
+ <body class="bg-gray-50 font-sans">
16
+ <custom-navbar></custom-navbar>
17
+
18
+ <main class="container mx-auto px-4 py-16">
19
+ <!-- Gallery Hero Section -->
20
+ <section class="mb-24 text-center">
21
+ <h1 class="text-5xl font-bold mb-6 font-serif text-gray-800">갤러리</h1>
22
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
23
+ 남북한민족예술단의 공연 순간들을 만나보세요. 무대 위의 감동과 아름다움을 사진 속에서 다시 한번 느껴보실 수 있습니다.
24
+ </p>
25
+ </section>
26
+
27
+ <!-- Photo Gallery -->
28
+ <section class="mb-24">
29
+ <h2 class="text-3xl font-bold text-center mb-16 font-serif text-gray-800">공연 사진</h2>
30
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
31
+ <div class="card group overflow-hidden rounded-xl">
32
+ <div class="relative overflow-hidden">
33
+ <img src="http://static.photos/culture/1024x576/10" alt="공연 사진" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-700">
34
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end opacity-0 group-hover:opacity-100 transition duration-300">
35
+ <h3 class="text-white text-xl font-bold p-6">서울 예술의 전당 공연</h3>
36
+ </div>
37
+ </div>
38
+ </div>
39
+ <div class="card group overflow-hidden rounded-xl">
40
+ <div class="relative overflow-hidden">
41
+ <img src="http://static.photos/culture/1024x576/11" alt="공연 사진" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-700">
42
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end opacity-0 group-hover:opacity-100 transition duration-300">
43
+ <h3 class="text-white text-xl font-bold p-6">부산 문화회관 공연</h3>
44
+ </div>
45
+ </div>
46
+ </div>
47
+ <div class="card group overflow-hidden rounded-xl">
48
+ <div class="relative overflow-hidden">
49
+ <img src="http://static.photos/culture/1024x576/12" alt="공연 사진" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-700">
50
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end opacity-0 group-hover:opacity-100 transition duration-300">
51
+ <h3 class="text-white text-xl font-bold p-6">대전예술의전당 공연</h3>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ <div class="card group overflow-hidden rounded-xl">
56
+ <div class="relative overflow-hidden">
57
+ <img src="http://static.photos/culture/1024x576/13" alt="공연 사진" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-700">
58
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end opacity-0 group-hover:opacity-100 transition duration-300">
59
+ <h3 class="text-white text-xl font-bold p-6">평양 모란봉 극장 공연</h3>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ <div class="card group overflow-hidden rounded-xl">
64
+ <div class="relative overflow-hidden">
65
+ <img src="http://static.photos/culture/1024x576/14" alt="공연 사진" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-700">
66
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end opacity-0 group-hover:opacity-100 transition duration-300">
67
+ <h3 class="text-white text-xl font-bold p-6">뉴욕 링컨 센터 공연</h3>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ <div class="card group overflow-hidden rounded-xl">
72
+ <div class="relative overflow-hidden">
73
+ <img src="http://static.photos/culture/1024x576/15" alt="공연 사진" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-700">
74
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end opacity-0 group-hover:opacity-100 transition duration-300">
75
+ <h3 class="text-white text-xl font-bold p-6">유엔 본부 평화 공연</h3>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </section>
81
+
82
+ <!-- Video Gallery -->
83
+ <section class="mb-24 premium-section">
84
+ <h2 class="text-3xl font-bold text-center mb-16 font-serif text-gray-800">공연 영상</h2>
85
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
86
+ <div class="card overflow-hidden rounded-xl">
87
+ <div class="relative pb-[56.25%] h-0">
88
+ <img src="http://static.photos/culture/1024x576/16" alt="공연 영상" class="absolute inset-0 w-full h-full object-cover">
89
+ <div class="absolute inset-0 bg-black/50 flex items-center justify-center">
90
+ <div class="bg-white rounded-full p-4 cursor-pointer">
91
+ <i data-feather="play" class="w-8 h-8 text-red-700"></i>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ <div class="p-6">
96
+ <h3 class="text-xl font-bold mb-2 text-gray-800">통일의 노래 - 메인 테마</h3>
97
+ <p class="text-gray-600">남북한민족예술단의 주제곡인 "통일의 노래"의 공연 영상입니다.</p>
98
+ </div>
99
+ </div>
100
+ <div class="card overflow-hidden rounded-xl">
101
+ <div class="relative pb-[56.25%] h-0">
102
+ <img src="http://static.photos/culture/1024x576/17" alt="공연 영상" class="absolute inset-0 w-full h-full object-cover">
103
+ <div class="absolute inset-0 bg-black/50 flex items-center justify-center">
104
+ <div class="bg-white rounded-full p-4 cursor-pointer">
105
+ <i data-feather="play" class="w-8 h-8 text-red-700"></i>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ <div class="p-6">
110
+ <h3 class="text-xl font-bold mb-2 text-gray-800">아리랑 합창 무대</h3>
111
+ <p class="text-gray-600">전통 아리랑과 현대 음악이 어우러진 합창단의 무대 영상입니다.</p>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </section>
116
+
117
+ <!-- Behind the Scenes -->
118
+ <section class="mb-24">
119
+ <h2 class="text-3xl font-bold text-center mb-16 font-serif text-gray-800">비하인드 스토리</h2>
120
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
121
+ <div class="card group overflow-hidden rounded-lg">
122
+ <div class="relative overflow-hidden">
123
+ <img src="http://static.photos/culture/320x240/18" alt="비하인드 사진" class="w-full h-48 object-cover transform group-hover:scale-110 transition duration-500">
124
+ <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
125
+ <i data-feather="eye" class="w-8 h-8 text-white"></i>
126
+ </div>
127
+ </div>
128
+ <div class="p-4">
129
+ <h3 class="font-bold text-gray-800">리허설 장면</h3>
130
+ </div>
131
+ </div>
132
+ <div class="card group overflow-hidden rounded-lg">
133
+ <div class="relative overflow-hidden">
134
+ <img src="http://static.photos/culture/320x240/19" alt="비하인드 사진" class="w-full h-48 object-cover transform group-hover:scale-110 transition duration-500">
135
+ <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
136
+ <i data-feather="eye" class="w-8 h-8 text-white"></i>
137
+ </div>
138
+ </div>
139
+ <div class="p-4">
140
+ <h3 class="font-bold text-gray-800">무대 준비</h3>
141
+ </div>
142
+ </div>
143
+ <div class="card group overflow-hidden rounded-lg">
144
+ <div class="relative overflow-hidden">
145
+ <img src="http://static.photos/culture/320x240/20" alt="비하인드 사진" class="w-full h-48 object-cover transform group-hover:scale-110 transition duration-500">
146
+ <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
147
+ <i data-feather="eye" class="w-8 h-8 text-white"></i>
148
+ </div>
149
+ </div>
150
+ <div class="p-4">
151
+ <h3 class="font-bold text-gray-800">예술가들 간의 교류</h3>
152
+ </div>
153
+ </div>
154
+ <div class="card group overflow-hidden rounded-lg">
155
+ <div class="relative overflow-hidden">
156
+ <img src="http://static.photos/culture/320x240/21" alt="비하인드 사진" class="w-full h-48 object-cover transform group-hover:scale-110 transition duration-500">
157
+ <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
158
+ <i data-feather="eye" class="w-8 h-8 text-white"></i>
159
+ </div>
160
+ </div>
161
+ <div class="p-4">
162
+ <h3 class="font-bold text-gray-800">공연 후 배우들</h3>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </section>
167
+ </main>
168
+
169
+ <custom-footer></custom-footer>
170
+ <script>feather.replace();</script>
171
+ <script src="script.js"></script>
172
+ </body>
173
+ </html>