Hugging Face's logo

Spaces:
nkjoy
/
harmony-unification
Running

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

전제적으로 프리미엄 디자인으로 해줘 , 글자체도 이쁜걸로 변경부탁

Browse files
Files changed (7) hide show
  1. README.md +7 -4
  2. components/footer.js +120 -0
  3. components/hero.js +113 -0
  4. components/navbar.js +104 -0
  5. index.html +125 -18
  6. script.js +34 -0
  7. style.css +119 -17
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Harmony Unification
3
- emoji: ⚡
4
  colorFrom: purple
5
- colorTo: gray
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Harmony Unification 🎵
 
3
  colorFrom: purple
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,120 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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/hero.js"></script>
13
+ <script src="components/footer.js"></script>
14
+ <link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Serif+KR:wght@400;500;700&display=swap" rel="stylesheet">
15
+ </head>
16
+ <body class="bg-white font-sans">
17
+ <custom-navbar></custom-navbar>
18
+ <custom-hero></custom-hero>
19
+
20
+ <main class="container mx-auto px-4 py-16">
21
+ <!-- About Section -->
22
+ <section class="mb-24">
23
+ <div class="text-center mb-12">
24
+ <h2 class="text-4xl font-bold mb-4 font-serif text-gray-800">남북한민족예술단</h2>
25
+ <div class="w-24 h-1 bg-red-600 mx-auto mb-6"></div>
26
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed">
27
+ 한반도의 아름다움을 예술로 표현하는 남북한민족예술단은 평화와 통일을 노래하며
28
+ 전통과 현대가 공존하는 독창적인 공연으로 세계 무대에서 주목받고 있습니다.
29
+ </p>
30
+ </div>
31
+
32
+ <div class="grid md:grid-cols-3 gap-8">
33
+ <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition duration-300">
34
+ <div class="text-red-600 mb-4">
35
+ <i data-feather="heart" class="w-12 h-12"></i>
36
+ </div>
37
+ <h3 class="text-xl font-bold mb-3 text-gray-800">사명</h3>
38
+ <p class="text-gray-600">
39
+ 예술을 통해 남북한의 문화적 차이를 극복하고 하나된 민족정신을 전파합니다.
40
+ </p>
41
+ </div>
42
+ <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition duration-300">
43
+ <div class="text-red-600 mb-4">
44
+ <i data-feather="star" class="w-12 h-12"></i>
45
+ </div>
46
+ <h3 class="text-xl font-bold mb-3 text-gray-800">예술 철학</h3>
47
+ <p class="text-gray-600">
48
+ 전통과 현대의 조화, 남과 북의 음악적 화합을 추구하는 독보적인 예술세계.
49
+ </p>
50
+ </div>
51
+ <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition duration-300">
52
+ <div class="text-red-600 mb-4">
53
+ <i data-feather="globe" class="w-12 h-12"></i>
54
+ </div>
55
+ <h3 class="text-xl font-bold mb-3 text-gray-800">활동</h3>
56
+ <p class="text-gray-600">
57
+ 국내외 주요 무대에서의 공연 및 문화교류 프로그램을 통해 한반도의 평화 메시지를 전달합니다.
58
+ </p>
59
+ </div>
60
+ </div>
61
+ </section>
62
+
63
+ <!-- Performance Gallery -->
64
+ <section class="mb-24">
65
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">공연 갤러리</h2>
66
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
67
+ <div class="relative group overflow-hidden rounded-lg">
68
+ <img src="http://static.photos/culture/1024x576/1" alt="공연 사진" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
69
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
70
+ <h3 class="text-white text-xl font-bold">통합 관현악단</h3>
71
+ </div>
72
+ </div>
73
+ <div class="relative group overflow-hidden rounded-lg">
74
+ <img src="http://static.photos/culture/1024x576/2" alt="공연 사진" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
75
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
76
+ <h3 class="text-white text-xl font-bold">아리랑 합창</h3>
77
+ </div>
78
+ </div>
79
+ <div class="relative group overflow-hidden rounded-lg">
80
+ <img src="http://static.photos/culture/1024x576/3" alt="공연 사진" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
81
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
82
+ <h3 class="text-white text-xl font-bold">전통 무용</h3>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </section>
87
+
88
+ <!-- Schedule Section -->
89
+ <section class="mb-24">
90
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">공연 일정</h2>
91
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
92
+ <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x">
93
+ <div class="p-8">
94
+ <h3 class="text-xl font-bold mb-4 text-red-600">2023 서울 공연</h3>
95
+ <p class="text-gray-600 mb-2"><i data-feather="calendar" class="mr-2 w-4 h-4 inline"></i> 2023년 8월 15일</p>
96
+ <p class="text-gray-600 mb-4"><i data-feather="map-pin" class="mr-2 w-4 h-4 inline"></i> 서울 예술의 전당</p>
97
+ <a href="#" class="text-red-600 font-medium hover:underline">자세히 보기</a>
98
+ </div>
99
+ <div class="p-8">
100
+ <h3 class="text-xl font-bold mb-4 text-red-600">평양 합동 공연</h3>
101
+ <p class="text-gray-600 mb-2"><i data-feather="calendar" class="mr-2 w-4 h-4 inline"></i> 2023년 10월 3일</p>
102
+ <p class="text-gray-600 mb-4"><i data-feather="map-pin" class="mr-2 w-4 h-4 inline"></i> 평양 모란봉 극장</p>
103
+ <a href="#" class="text-red-600 font-medium hover:underline">자세히 보기</a>
104
+ </div>
105
+ <div class="p-8">
106
+ <h3 class="text-xl font-bold mb-4 text-red-600">뉴욕 국제 공연</h3>
107
+ <p class="text-gray-600 mb-2"><i data-feather="calendar" class="mr-2 w-4 h-4 inline"></i> 2024년 2월 20일</p>
108
+ <p class="text-gray-600 mb-4"><i data-feather="map-pin" class="mr-2 w-4 h-4 inline"></i> 링컨 센터</p>
109
+ <a href="#" class="text-red-600 font-medium hover:underline">자세히 보기</a>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </section>
114
+ </main>
115
+
116
+ <custom-footer></custom-footer>
117
+ <script>feather.replace();</script>
118
+ <script src="script.js"></script>
119
+ </body>
120
+ </html>
components/hero.js ADDED
@@ -0,0 +1,113 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ class Hero extends HTMLElement {
3
+ connectedCallback() {
4
+ this.attachShadow({ mode: 'open' });
5
+ this.shadowRoot.innerHTML = `
6
+ <style>
7
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Poppins:wght@300;400&display=swap');
8
+
9
+ .hero {
10
+ height: 100vh;
11
+ background-image: url('http://static.photos/culture/1200x630/1');
12
+ background-size: cover;
13
+ background-position: center;
14
+ display: flex;
15
+ align-items: center;
16
+ position: relative;
17
+ overflow: hidden;
18
+ }
19
+
20
+ .hero:before {
21
+ content: '';
22
+ position: absolute;
23
+ top: 0;
24
+ left: 0;
25
+ width: 100%;
26
+ height: 100%;
27
+ background: linear-gradient(135deg, rgba(139, 0, 0, 0.85) 0%, rgba(44, 62, 80, 0.7) 100%);
28
+ }
29
+
30
+ .hero-content {
31
+ position: relative;
32
+ z-index: 1;
33
+ padding: 0 2rem;
34
+ color: white;
35
+ max-width: 1200px;
36
+ margin: 0 auto;
37
+ text-align: center;
38
+ }
39
+
40
+ .title {
41
+ font-size: 4.5rem;
42
+ font-weight: 800;
43
+ margin-bottom: 1.5rem;
44
+ line-height: 1.1;
45
+ text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
46
+ letter-spacing: -0.5px;
47
+ }
48
+
49
+ .subtitle {
50
+ font-size: 1.6rem;
51
+ margin-bottom: 2.5rem;
52
+ max-width: 700px;
53
+ line-height: 1.7;
54
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
55
+ font-weight: 300;
56
+ margin-left: auto;
57
+ margin-right: auto;
58
+ }
59
+
60
+ .btn {
61
+ display: inline-block;
62
+ padding: 1rem 2.5rem;
63
+ background: linear-gradient(135deg, #8B0000 0%, #A52A2A 100%);
64
+ color: white;
65
+ border: none;
66
+ border-radius: 50px;
67
+ font-size: 1.1rem;
68
+ font-weight: 600;
69
+ text-decoration: none;
70
+ transition: all 0.4s ease;
71
+ box-shadow: 0 8px 25px rgba(139, 0, 0, 0.3);
72
+ font-family: 'Poppins', sans-serif;
73
+ letter-spacing: 0.5px;
74
+ }
75
+
76
+ .btn:hover {
77
+ transform: translateY(-5px);
78
+ box-shadow: 0 12px 30px rgba(139, 0, 0, 0.4);
79
+ color: white;
80
+ }
81
+
82
+ @media (max-width: 768px) {
83
+ .title {
84
+ font-size: 3rem;
85
+ }
86
+
87
+ .subtitle {
88
+ font-size: 1.2rem;
89
+ }
90
+ }
91
+
92
+ @media (max-width: 480px) {
93
+ .title {
94
+ font-size: 2.5rem;
95
+ }
96
+
97
+ .subtitle {
98
+ font-size: 1.1rem;
99
+ }
100
+ }
101
+ </style>
102
+ <section class="hero">
103
+ <div class="hero-content">
104
+ <h1 class="title font-serif">통일의 노래</h1>
105
+ <p class="subtitle">한반도의 아름다운 화음을 전세계에 전하는 남북한민족예술단의 열정과 비전을 만나보세요.</p>
106
+ <a href="#about" class="btn">더 알아보기</a>
107
+ </div>
108
+ </section>
109
+ `;
110
+ }
111
+ }
112
+
113
+ customElements.define('custom-hero', Hero);
components/navbar.js ADDED
@@ -0,0 +1,104 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ class Navbar extends HTMLElement {
3
+ connectedCallback() {
4
+ this.attachShadow({ mode: 'open' });
5
+ this.shadowRoot.innerHTML = `
6
+ <style>
7
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;500;600&display=swap');
8
+
9
+ nav {
10
+ background: rgba(255, 255, 255, 0.98);
11
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
12
+ position: fixed;
13
+ width: 100%;
14
+ z-index: 1000;
15
+ backdrop-filter: blur(10px);
16
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
17
+ }
18
+
19
+ .nav-container {
20
+ max-width: 1200px;
21
+ margin: 0 auto;
22
+ padding: 1.2rem 2rem;
23
+ display: flex;
24
+ justify-content: space-between;
25
+ align-items: center;
26
+ }
27
+
28
+ .logo {
29
+ font-family: 'Playfair Display', serif;
30
+ font-size: 1.8rem;
31
+ font-weight: 700;
32
+ color: #8B0000;
33
+ text-decoration: none;
34
+ letter-spacing: 0.5px;
35
+ }
36
+
37
+ .nav-links {
38
+ display: flex;
39
+ gap: 2.5rem;
40
+ }
41
+
42
+ .nav-links a {
43
+ color: #2C3E50;
44
+ text-decoration: none;
45
+ font-family: 'Poppins', sans-serif;
46
+ font-weight: 500;
47
+ font-size: 1.1rem;
48
+ transition: all 0.3s ease;
49
+ position: relative;
50
+ padding: 0.5rem 0;
51
+ }
52
+
53
+ .nav-links a:hover {
54
+ color: #8B0000;
55
+ }
56
+
57
+ .nav-links a:after {
58
+ content: '';
59
+ position: absolute;
60
+ width: 0;
61
+ height: 3px;
62
+ display: block;
63
+ margin-top: 5px;
64
+ right: 0;
65
+ background: linear-gradient(to right, #8B0000, #D4AF37);
66
+ transition: width 0.3s ease;
67
+ border-radius: 3px;
68
+ }
69
+
70
+ .nav-links a:hover:after {
71
+ width: 100%;
72
+ left: 0;
73
+ }
74
+
75
+ @media (max-width: 768px) {
76
+ .nav-links {
77
+ display: none;
78
+ }
79
+
80
+ .mobile-menu-toggle {
81
+ display: block;
82
+ color: #2C3E50;
83
+ cursor: pointer;
84
+ }
85
+ }
86
+ </style>
87
+ <nav>
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
+ `;
101
+ }
102
+ }
103
+
104
+ customElements.define('custom-navbar', Navbar);
index.html CHANGED
@@ -1,19 +1,126 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
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/hero.js"></script>
13
+ <script src="components/footer.js"></script>
14
+ <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">
15
+ </head>
16
+ <body class="bg-gray-50 font-sans">
17
+ <custom-navbar></custom-navbar>
18
+ <custom-hero></custom-hero>
19
+
20
+ <main class="container mx-auto px-4 py-16">
21
+ <!-- About Section -->
22
+ <section class="mb-24 premium-section">
23
+ <div class="text-center mb-16">
24
+ <h2 class="text-4xl font-bold mb-6 font-serif text-gray-800 section-title">남북한민족예술단</h2>
25
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed text-center">
26
+ 한반도의 아름다움을 예술로 표현하는 남북한민족예술단은 평화와 통일을 노래하며
27
+ 전통과 현대가 공존하는 독창적인 공연으로 세계 무대에서 주목받고 있습니다.
28
+ </p>
29
+ </div>
30
+
31
+ <div class="grid md:grid-cols-3 gap-8">
32
+ <div class="card p-8 text-center">
33
+ <div class="text-red-700 mb-6 flex justify-center">
34
+ <i data-feather="heart" class="w-16 h-16"></i>
35
+ </div>
36
+ <h3 class="text-2xl font-bold mb-4 text-gray-800">사명</h3>
37
+ <p class="text-gray-600">
38
+ 예술을 통해 남북한의 문화적 차이를 극복하고 하나된 민족정신을 전파합니다.
39
+ </p>
40
+ </div>
41
+ <div class="card p-8 text-center">
42
+ <div class="text-red-700 mb-6 flex justify-center">
43
+ <i data-feather="star" class="w-16 h-16"></i>
44
+ </div>
45
+ <h3 class="text-2xl font-bold mb-4 text-gray-800">예술 철학</h3>
46
+ <p class="text-gray-600">
47
+ 전통과 현대의 조화, 남과 북의 음악적 화합을 추구하는 독보적인 예술세계.
48
+ </p>
49
+ </div>
50
+ <div class="card p-8 text-center">
51
+ <div class="text-red-700 mb-6 flex justify-center">
52
+ <i data-feather="globe" class="w-16 h-16"></i>
53
+ </div>
54
+ <h3 class="text-2xl font-bold mb-4 text-gray-800">활동</h3>
55
+ <p class="text-gray-600">
56
+ 국내외 주요 무대에서의 공연 및 문화교류 프로그램을 통해 한반도의 평화 메시지를 전달합니다.
57
+ </p>
58
+ </div>
59
+ </div>
60
+ </section>
61
+
62
+ <!-- Performance Gallery -->
63
+ <section class="mb-24">
64
+ <h2 class="text-3xl font-bold text-center mb-16 text-gray-800 section-title">공연 갤러리</h2>
65
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
66
+ <div class="card group overflow-hidden rounded-xl">
67
+ <div class="relative overflow-hidden">
68
+ <img src="http://static.photos/culture/1024x576/1" alt="공연 사진" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-700">
69
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
70
+ <h3 class="text-white text-xl font-bold p-6">통합 관현악단</h3>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ <div class="card group overflow-hidden rounded-xl">
75
+ <div class="relative overflow-hidden">
76
+ <img src="http://static.photos/culture/1024x576/2" alt="공연 사진" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-700">
77
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
78
+ <h3 class="text-white text-xl font-bold p-6">아리랑 합창</h3>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ <div class="card group overflow-hidden rounded-xl">
83
+ <div class="relative overflow-hidden">
84
+ <img src="http://static.photos/culture/1024x576/3" alt="공연 사진" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-700">
85
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
86
+ <h3 class="text-white text-xl font-bold p-6">전통 무용</h3>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </section>
92
+
93
+ <!-- Schedule Section -->
94
+ <section class="mb-24 premium-section">
95
+ <h2 class="text-3xl font-bold text-center mb-16 text-gray-800 section-title">공연 일정</h2>
96
+ <div class="card rounded-2xl overflow-hidden">
97
+ <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-gray-100">
98
+ <div class="p-10 text-center">
99
+ <h3 class="text-2xl font-bold mb-4 text-red-700">2023 서울 공연</h3>
100
+ <p class="text-gray-600 mb-3 flex items-center justify-center"><i data-feather="calendar" class="mr-3 w-5 h-5 text-red-700"></i> 2023년 8월 15일</p>
101
+ <p class="text-gray-600 mb-6 flex items-center justify-center"><i data-feather="map-pin" class="mr-3 w-5 h-5 text-red-700"></i> 서울 예술의 전당</p>
102
+ <a href="#" class="btn-primary">자세히 보기</a>
103
+ </div>
104
+ <div class="p-10 text-center">
105
+ <h3 class="text-2xl font-bold mb-4 text-red-700">평양 합동 공연</h3>
106
+ <p class="text-gray-600 mb-3 flex items-center justify-center"><i data-feather="calendar" class="mr-3 w-5 h-5 text-red-700"></i> 2023년 10월 3일</p>
107
+ <p class="text-gray-600 mb-6 flex items-center justify-center"><i data-feather="map-pin" class="mr-3 w-5 h-5 text-red-700"></i> 평양 모란봉 극장</p>
108
+ <a href="#" class="btn-primary">자세히 보기</a>
109
+ </div>
110
+ <div class="p-10 text-center">
111
+ <h3 class="text-2xl font-bold mb-4 text-red-700">뉴욕 국제 공연</h3>
112
+ <p class="text-gray-600 mb-3 flex items-center justify-center"><i data-feather="calendar" class="mr-3 w-5 h-5 text-red-700"></i> 2024년 2월 20일</p>
113
+ <p class="text-gray-600 mb-6 flex items-center justify-center"><i data-feather="map-pin" class="mr-3 w-5 h-5 text-red-700"></i> 링컨 센터</p>
114
+ <a href="#" class="btn-primary">자세히 보기</a>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </section>
119
+ </main>
120
+
121
+ <custom-footer></custom-footer>
122
+ <script>feather.replace();</script>
123
+ <script src="script.js"></script>
124
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
125
+ </body>
126
  </html>
script.js ADDED
@@ -0,0 +1,34 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ // Initialize feather icons
3
+ document.addEventListener('DOMContentLoaded', function() {
4
+ feather.replace();
5
+
6
+ // Smooth scroll for anchor links
7
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
8
+ anchor.addEventListener('click', function (e) {
9
+ e.preventDefault();
10
+ const target = document.querySelector(this.getAttribute('href'));
11
+ if (target) {
12
+ target.scrollIntoView({
13
+ behavior: 'smooth',
14
+ block: 'start'
15
+ });
16
+ }
17
+ });
18
+ });
19
+
20
+ // Add fade-in animation to sections when they come into view
21
+ const sections = document.querySelectorAll('section');
22
+
23
+ const observer = new IntersectionObserver((entries) => {
24
+ entries.forEach(entry => {
25
+ if (entry.isIntersecting) {
26
+ entry.target.classList.add('fade-in-up');
27
+ }
28
+ });
29
+ }, { threshold: 0.1 });
30
+
31
+ sections.forEach(section => {
32
+ observer.observe(section);
33
+ });
34
+ });
style.css CHANGED
@@ -1,28 +1,130 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
 
18
  .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
28
  }
 
1
+
2
+ /* Font faces */
3
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');
4
+
5
+ /* Base styles */
6
+ :root {
7
+ --primary-color: #8B0000;
8
+ --secondary-color: #D4AF37;
9
+ --accent-color: #2C3E50;
10
+ --light-color: #F8F8F8;
11
+ --dark-color: #1A1A1A;
12
+ --transition: all 0.3s ease;
13
+ }
14
+
15
  body {
16
+ font-family: 'Poppins', sans-serif;
17
+ line-height: 1.7;
18
+ color: #333;
19
+ background-color: #FAFAFA;
20
+ }
21
+
22
+ .font-serif {
23
+ font-family: 'Playfair Display', serif;
24
+ }
25
+
26
+ h1, h2, h3, h4, h5, h6 {
27
+ font-family: 'Playfair Display', serif;
28
+ font-weight: 700;
29
+ color: var(--accent-color);
30
+ }
31
+
32
+ /* Custom animations */
33
+ @keyframes fadeIn {
34
+ from { opacity: 0; transform: translateY(20px); }
35
+ to { opacity: 1; transform: translateY(0); }
36
+ }
37
+
38
+ @keyframes fadeInUp {
39
+ from { opacity: 0; transform: translateY(30px); }
40
+ to { opacity: 1; transform: translateY(0); }
41
+ }
42
+
43
+ .fade-in {
44
+ animation: fadeIn 1s ease-out;
45
  }
46
 
47
+ .fade-in-up {
48
+ animation: fadeInUp 1s ease-out;
 
49
  }
50
 
51
+ /* Custom components */
52
+ .hero-overlay {
53
+ background: linear-gradient(135deg, rgba(139, 0, 0, 0.85) 0%, rgba(44, 62, 80, 0.7) 100%);
54
+ }
55
+
56
+ .section-title {
57
+ position: relative;
58
+ padding-bottom: 15px;
59
+ margin-bottom: 30px;
60
+ }
61
+
62
+ .section-title:after {
63
+ content: '';
64
+ position: absolute;
65
+ bottom: 0;
66
+ left: 50%;
67
+ transform: translateX(-50%);
68
+ width: 80px;
69
+ height: 3px;
70
+ background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
71
+ border-radius: 3px;
72
  }
73
 
74
  .card {
75
+ background: #FFFFFF;
76
+ border-radius: 15px;
77
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
78
+ transition: var(--transition);
79
+ border: 1px solid rgba(0, 0, 0, 0.05);
80
+ }
81
+
82
+ .card:hover {
83
+ transform: translateY(-10px);
84
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
85
+ }
86
+
87
+ .btn-primary {
88
+ background: linear-gradient(135deg, var(--primary-color) 0%, #A52A2A 100%);
89
+ color: white;
90
+ padding: 12px 30px;
91
+ border-radius: 30px;
92
+ font-weight: 600;
93
+ text-decoration: none;
94
+ display: inline-block;
95
+ transition: var(--transition);
96
+ border: none;
97
+ cursor: pointer;
98
+ box-shadow: 0 4px 15px rgba(139, 0, 0, 0.2);
99
+ }
100
+
101
+ .btn-primary:hover {
102
+ transform: translateY(-3px);
103
+ box-shadow: 0 7px 20px rgba(139, 0, 0, 0.3);
104
+ color: white;
105
+ }
106
+
107
+ /* Responsive tweaks */
108
+ @media (min-width: 1024px) {
109
+ .hero-content {
110
+ max-width: 60%;
111
+ }
112
+ }
113
+
114
+ /* Premium section styling */
115
+ .premium-section {
116
+ background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%);
117
+ padding: 100px 0;
118
+ position: relative;
119
+ overflow: hidden;
120
  }
121
 
122
+ .premium-section:before {
123
+ content: '';
124
+ position: absolute;
125
+ top: 0;
126
+ left: 0;
127
+ width: 100%;
128
+ height: 100%;
129
+ background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjAuNSIgZmlsbD0iI0Q0QUYzNyIgZmlsbC1vcGFjaXR5PSIwLjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiLz48L3N2Zz4=');
130
  }