Hugging Face's logo

Spaces:
nkjoy
/
harmony-unification
Running

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

공연페이지도 만들어줘

Browse files
Files changed (1) hide show
  1. performances.html +207 -0
performances.html ADDED
@@ -0,0 +1,207 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <!-- Performances 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
+ 한반도의 아름다운 음악과 춤을 감상할 수 있습니다.
25
+ </p>
26
+ </section>
27
+
28
+ <!-- Current Performances -->
29
+ <section class="mb-24 premium-section">
30
+ <h2 class="text-3xl font-bold text-center mb-16 font-serif text-gray-800">현재 공연</h2>
31
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
32
+ <div class="card overflow-hidden">
33
+ <div class="relative">
34
+ <img src="http://static.photos/culture/1024x576/5" alt="공연 사진" class="w-full h-56 object-cover">
35
+ <div class="absolute top-4 right-4 bg-red-700 text-white px-3 py-1 rounded-full text-sm font-bold">현재 공연중</div>
36
+ </div>
37
+ <div class="p-6">
38
+ <h3 class="text-2xl font-bold mb-2 text-gray-800">통일의 노래</h3>
39
+ <p class="text-gray-600 mb-4">남북한 예술가들이 하나된 무대에서 선보이는 대형 합동 공연</p>
40
+ <div class="flex items-center text-gray-600 mb-2">
41
+ <i data-feather="calendar" class="w-5 h-5 mr-2 text-red-700"></i>
42
+ <span>2023년 8월 15일 - 9월 30일</span>
43
+ </div>
44
+ <div class="flex items-center text-gray-600 mb-4">
45
+ <i data-feather="map-pin" class="w-5 h-5 mr-2 text-red-700"></i>
46
+ <span>서울 예술의 전당</span>
47
+ </div>
48
+ <a href="#" class="btn-primary w-full text-center">예매하기</a>
49
+ </div>
50
+ </div>
51
+ <div class="card overflow-hidden">
52
+ <div class="relative">
53
+ <img src="http://static.photos/culture/1024x576/6" alt="공연 사진" class="w-full h-56 object-cover">
54
+ <div class="absolute top-4 right-4 bg-red-700 text-white px-3 py-1 rounded-full text-sm font-bold">현재 공연중</div>
55
+ </div>
56
+ <div class="p-6">
57
+ <h3 class="text-2xl font-bold mb-2 text-gray-800">아리랑의 화음</h3>
58
+ <p class="text-gray-600 mb-4">전통 아리랑과 현대 음악의 조화로운 합창 공연</p>
59
+ <div class="flex items-center text-gray-600 mb-2">
60
+ <i data-feather="calendar" class="w-5 h-5 mr-2 text-red-700"></i>
61
+ <span>2023년 9월 1일 - 10월 15일</span>
62
+ </div>
63
+ <div class="flex items-center text-gray-600 mb-4">
64
+ <i data-feather="map-pin" class="w-5 h-5 mr-2 text-red-700"></i>
65
+ <span>부산 문화회관</span>
66
+ </div>
67
+ <a href="#" class="btn-primary w-full text-center">예매하기</a>
68
+ </div>
69
+ </div>
70
+ <div class="card overflow-hidden">
71
+ <div class="relative">
72
+ <img src="http://static.photos/culture/1024x576/7" alt="공연 사진" class="w-full h-56 object-cover">
73
+ <div class="absolute top-4 right-4 bg-red-700 text-white px-3 py-1 rounded-full text-sm font-bold">현재 공연중</div>
74
+ </div>
75
+ <div class="p-6">
76
+ <h3 class="text-2xl font-bold mb-2 text-gray-800">한반도의 춤</h3>
77
+ <p class="text-gray-600 mb-4">남북한 전통 무용과 현대 무용의 창작 무용 공연</p>
78
+ <div class="flex items-center text-gray-600 mb-2">
79
+ <i data-feather="calendar" class="w-5 h-5 mr-2 text-red-700"></i>
80
+ <span>2023년 9월 10일 - 10월 20일</span>
81
+ </div>
82
+ <div class="flex items-center text-gray-600 mb-4">
83
+ <i data-feather="map-pin" class="w-5 h-5 mr-2 text-red-700"></i>
84
+ <span>대전예술의전당</span>
85
+ </div>
86
+ <a href="#" class="btn-primary w-full text-center">예매하기</a>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </section>
91
+
92
+ <!-- Upcoming Performances -->
93
+ <section class="mb-24">
94
+ <h2 class="text-3xl font-bold text-center mb-16 font-serif text-gray-800">다가오는 공연</h2>
95
+ <div class="grid md:grid-cols-2 gap-8">
96
+ <div class="card p-8">
97
+ <div class="flex flex-col md:flex-row">
98
+ <div class="md:w-1/3 mb-6 md:mb-0">
99
+ <img src="http://static.photos/culture/320x240/8" alt="공연 포스터" class="w-full h-48 object-cover rounded-lg">
100
+ </div>
101
+ <div class="md:w-2/3 md:pl-8">
102
+ <h3 class="text-2xl font-bold mb-2 text-gray-800">평양 특별 공연</h3>
103
+ <p class="text-gray-600 mb-4">남북한민족예술단의 평양 모란봉 극장에서의 특별 공연</p>
104
+ <div class="flex items-center text-gray-600 mb-2">
105
+ <i data-feather="calendar" class="w-5 h-5 mr-2 text-red-700"></i>
106
+ <span>2023년 10월 3일</span>
107
+ </div>
108
+ <div class="flex items-center text-gray-600 mb-4">
109
+ <i data-feather="map-pin" class="w-5 h-5 mr-2 text-red-700"></i>
110
+ <span>평양 모란봉 극장</span>
111
+ </div>
112
+ <a href="#" class="btn-primary inline-block">자세히 보기</a>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ <div class="card p-8">
117
+ <div class="flex flex-col md:flex-row">
118
+ <div class="md:w-1/3 mb-6 md:mb-0">
119
+ <img src="http://static.photos/culture/320x240/9" alt="공연 포스터" class="w-full h-48 object-cover rounded-lg">
120
+ </div>
121
+ <div class="md:w-2/3 md:pl-8">
122
+ <h3 class="text-2xl font-bold mb-2 text-gray-800">뉴욕 국제 공연</h3>
123
+ <p class="text-gray-600 mb-4">유엔 본부에서의 국제 평화 공연으로 한반도의 메시지 전달</p>
124
+ <div class="flex items-center text-gray-600 mb-2">
125
+ <i data-feather="calendar" class="w-5 h-5 mr-2 text-red-700"></i>
126
+ <span>2024년 2월 20일</span>
127
+ </div>
128
+ <div class="flex items-center text-gray-600 mb-4">
129
+ <i data-feather="map-pin" class="w-5 h-5 mr-2 text-red-700"></i>
130
+ <span>뉴욕 링컨 센터</span>
131
+ </div>
132
+ <a href="#" class="btn-primary inline-block">자세히 보기</a>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </section>
138
+
139
+ <!-- Performance Programs -->
140
+ <section class="mb-24 premium-section">
141
+ <h2 class="text-3xl font-bold text-center mb-16 font-serif text-gray-800">공연 프로그램</h2>
142
+ <div class="card rounded-2xl overflow-hidden">
143
+ <div class="grid grid-cols-1 md:grid-cols-2">
144
+ <div class="p-10 bg-gradient-to-br from-red-800 to-red-900 text-white">
145
+ <h3 class="text-2xl font-bold mb-6">통일의 노래</h3>
146
+ <div class="space-y-4">
147
+ <div class="flex">
148
+ <div class="mr-4 text-red-300">1.</div>
149
+ <div>
150
+ <h4 class="font-bold">국악관현악 - 아리랑의 화음</h4>
151
+ <p class="text-red-100">남북한 전통 악기들의 화음</p>
152
+ </div>
153
+ </div>
154
+ <div class="flex">
155
+ <div class="mr-4 text-red-300">2.</div>
156
+ <div>
157
+ <h4 class="font-bold">합창 - 한반도의 노래</h4>
158
+ <p class="text-red-100">남과 북의 음악이 하나되는 창작 합창</p>
159
+ </div>
160
+ </div>
161
+ <div class="flex">
162
+ <div class="mr-4 text-red-300">3.</div>
163
+ <div>
164
+ <h4 class="font-bold">무용 - 통일의 춤</h4>
165
+ <p class="text-red-100">전통과 현대가 어우러진 창작 무용</p>
166
+ </div>
167
+ </div>
168
+ <div class="flex">
169
+ <div class="mr-4 text-red-300">4.</div>
170
+ <div>
171
+ <h4 class="font-bold">특별협연 - 평화의 메시지</h4>
172
+ <p class="text-red-100">남북 예술가들의 특별한 협연</p>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ <div class="p-10 bg-gray-50">
178
+ <h3 class="text-2xl font-bold mb-6 text-gray-800">공연 안내</h3>
179
+ <div class="space-y-6">
180
+ <div>
181
+ <h4 class="text-lg font-bold mb-2 text-gray-800">관람 시간</h4>
182
+ <p class="text-gray-600">공연시간: 19:30 ~ 21:30 (입장 19:00)</p>
183
+ <p class="text-gray-600">인터미션: 20:30 ~ 20:45</p>
184
+ </div>
185
+ <div>
186
+ <h4 class="text-lg font-bold mb-2 text-gray-800">티켓 가격</h4>
187
+ <p class="text-gray-600">VIP석: 150,000원</p>
188
+ <p class="text-gray-600">R석: 100,000원</p>
189
+ <p class="text-gray-600">S석: 70,000원</p>
190
+ </div>
191
+ <div>
192
+ <h4 class="text-lg font-bold mb-2 text-gray-800">예매 안내</h4>
193
+ <p class="text-gray-600">공연 1시간 전까지 입장 가능</p>
194
+ <p class="text-gray-600">청소년 할인 30% (학생증 지참)</p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </section>
201
+ </main>
202
+
203
+ <custom-footer></custom-footer>
204
+ <script>feather.replace();</script>
205
+ <script src="script.js"></script>
206
+ </body>
207
+ </html>