Hugging Face's logo

Spaces:
nkjoy
/
harmony-unification
Running

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

소개 페이지 만들어줘

Browse files
Files changed (2) hide show
  1. about.html +139 -0
  2. components/navbar.js +2 -2
about.html ADDED
@@ -0,0 +1,139 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <!-- About 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
+ <!-- History Section -->
29
+ <section class="mb-24 premium-section">
30
+ <div class="grid md:grid-cols-2 gap-12 items-center">
31
+ <div>
32
+ <h2 class="text-3xl font-bold mb-6 font-serif text-gray-800">단체 연혁</h2>
33
+ <div class="space-y-6">
34
+ <div class="border-l-4 border-red-700 pl-6">
35
+ <h3 class="text-xl font-bold text-gray-800">2018년 창단</h3>
36
+ <p class="text-gray-600">남북한 예술가들의 협업을 통해 평화의 메시지를 전달하기 위해 창단</p>
37
+ </div>
38
+ <div class="border-l-4 border-red-700 pl-6">
39
+ <h3 class="text-xl font-bold text-gray-800">2019년 첫 공연</h3>
40
+ <p class="text-gray-600">서울예술의전당에서 "통일의 노래" 공연을 통해 국내 첫 선을 보임</p>
41
+ </div>
42
+ <div class="border-l-4 border-red-700 pl-6">
43
+ <h3 class="text-xl font-bold text-gray-800">2021년 국제 무대</h3>
44
+ <p class="text-gray-600">유엔 본부에서 평화 공연을 통해 국제 사회에 한반도 평화 메시지 전달</p>
45
+ </div>
46
+ <div class="border-l-4 border-red-700 pl-6">
47
+ <h3 class="text-xl font-bold text-gray-800">2023년 현재</h3>
48
+ <p class="text-gray-600">세계 20개국 순회 공연 및 문화 교류 프로그램 진행 중</p>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ <div class="card rounded-xl overflow-hidden">
53
+ <img src="http://static.photos/culture/1024x576/4" alt="단체 역사 사진" class="w-full h-96 object-cover">
54
+ </div>
55
+ </div>
56
+ </section>
57
+
58
+ <!-- Mission Section -->
59
+ <section class="mb-24">
60
+ <div class="text-center mb-16">
61
+ <h2 class="text-3xl font-bold mb-6 font-serif text-gray-800">사명과 비전</h2>
62
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed">
63
+ 우리는 예술을 통해 남과 북의 문화적 차이를 극복하고, 하나된 민족정신을 전파하며
64
+ 한반도의 평화와 통일을 향한 메시지를 세계에 전달합니다.
65
+ </p>
66
+ </div>
67
+
68
+ <div class="grid md:grid-cols-3 gap-8">
69
+ <div class="card p-8 text-center">
70
+ <div class="text-red-700 mb-6 flex justify-center">
71
+ <i data-feather="target" class="w-16 h-16"></i>
72
+ </div>
73
+ <h3 class="text-2xl font-bold mb-4 text-gray-800">사명</h3>
74
+ <p class="text-gray-600">
75
+ 예술을 통한 남북한 문화 교류와 평화 메시지 전달
76
+ </p>
77
+ </div>
78
+ <div class="card p-8 text-center">
79
+ <div class="text-red-700 mb-6 flex justify-center">
80
+ <i data-feather="eye" class="w-16 h-16"></i>
81
+ </div>
82
+ <h3 class="text-2xl font-bold mb-4 text-gray-800">비전</h3>
83
+ <p class="text-gray-600">
84
+ 세계 무대에서 한반도의 아름다움을 표현하는 글로벌 예술 단체
85
+ </p>
86
+ </div>
87
+ <div class="card p-8 text-center">
88
+ <div class="text-red-700 mb-6 flex justify-center">
89
+ <i data-feather="heart" class="w-16 h-16"></i>
90
+ </div>
91
+ <h3 class="text-2xl font-bold mb-4 text-gray-800">가치</h3>
92
+ <p class="text-gray-600">
93
+ 화합, 창조, 평화, 통일을 추구하는 예술적 가치 실현
94
+ </p>
95
+ </div>
96
+ </div>
97
+ </section>
98
+
99
+ <!-- Members Section -->
100
+ <section class="mb-24 premium-section">
101
+ <h2 class="text-3xl font-bold text-center mb-16 font-serif text-gray-800">예술단 구성</h2>
102
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
103
+ <div class="card text-center p-6">
104
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-32 h-32 mx-auto mb-6 flex items-center justify-center text-gray-400">
105
+ <i data-feather="music" class="w-12 h-12"></i>
106
+ </div>
107
+ <h3 class="text-xl font-bold mb-2 text-gray-800">관현악단</h3>
108
+ <p class="text-gray-600">남북한 음악가들이 함께하는 대규모 오케스트라</p>
109
+ </div>
110
+ <div class="card text-center p-6">
111
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-32 h-32 mx-auto mb-6 flex items-center justify-center text-gray-400">
112
+ <i data-feather="users" class="w-12 h-12"></i>
113
+ </div>
114
+ <h3 class="text-xl font-bold mb-2 text-gray-800">합창단</h3>
115
+ <p class="text-gray-600">민속 음악과 현대 음악을 아우르는 100인 합창단</p>
116
+ </div>
117
+ <div class="card text-center p-6">
118
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-32 h-32 mx-auto mb-6 flex items-center justify-center text-gray-400">
119
+ <i data-feather="activity" class="w-12 h-12"></i>
120
+ </div>
121
+ <h3 class="text-xl font-bold mb-2 text-gray-800">무용단</h3>
122
+ <p class="text-gray-600">전통 무용과 현대 무용을 결합한 창작 무용단</p>
123
+ </div>
124
+ <div class="card text-center p-6">
125
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-32 h-32 mx-auto mb-6 flex items-center justify-center text-gray-400">
126
+ <i data-feather="star" class="w-12 h-12"></i>
127
+ </div>
128
+ <h3 class="text-xl font-bold mb-2 text-gray-800">특별출연</h3>
129
+ <p class="text-gray-600">각 분야의 명성을 떨친 남북 예술가들의 특별 협연</p>
130
+ </div>
131
+ </div>
132
+ </section>
133
+ </main>
134
+
135
+ <custom-footer></custom-footer>
136
+ <script>feather.replace();</script>
137
+ <script src="script.js"></script>
138
+ </body>
139
+ </html>
components/navbar.js CHANGED
@@ -88,13 +88,13 @@ class Navbar extends HTMLElement {
88
  <div class="nav-container">
89
  <a href="/" class="logo">남북한민족예술단</a>
90
  <div class="nav-links">
91
- <a href="#about">소개</a>
92
  <a href="#performances">공연</a>
93
  <a href="#schedule">일정</a>
94
  <a href="#gallery">갤러리</a>
95
  <a href="#contact">연락처</a>
96
  </div>
97
- <i data-feather="menu" class="mobile-menu-toggle hidden"></i>
98
  </div>
99
  </nav>
100
  `;
 
88
  <div class="nav-container">
89
  <a href="/" class="logo">남북한민족예술단</a>
90
  <div class="nav-links">
91
+ <a href="/about.html">소개</a>
92
  <a href="#performances">공연</a>
93
  <a href="#schedule">일정</a>
94
  <a href="#gallery">갤러리</a>
95
  <a href="#contact">연락처</a>
96
  </div>
97
+ <i data-feather="menu" class="mobile-menu-toggle hidden"></i>
98
  </div>
99
  </nav>
100
  `;