Hugging Face's logo

Spaces:
nkjoy
/
harmony-unification
Running

App Files Community
harmony-unification / about.html
nkjoy's picture
nkjoy
μ†Œκ°œ νŽ˜μ΄μ§€ λ§Œλ“€μ–΄μ€˜
2675ffd verified
raw
history blame contribute delete
8 kB
 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>단체 μ†Œκ°œ - λ‚¨λΆν•œλ―Όμ‘±μ˜ˆμˆ λ‹¨</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<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">
</head>
<body class="bg-gray-50 font-sans">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-16">
<!-- About Hero Section -->
<section class="mb-24 text-center">
<h1 class="text-5xl font-bold mb-6 font-serif text-gray-800">단체 μ†Œκ°œ</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
λ‚¨λΆν•œλ―Όμ‘±μ˜ˆμˆ λ‹¨μ€ 평화와 톡일을 주제둜 남과 뢁의 μ˜ˆμˆ κ°€λ“€μ΄ ν•˜λ‚˜λœ λ¬΄λŒ€μ—μ„œ
ν•œλ°˜λ„μ˜ 아름닀움을 세계에 μ „ν•˜λŠ” 예술 λ‹¨μ²΄μž…λ‹ˆλ‹€.
</p>
</section>
<!-- History Section -->
<section class="mb-24 premium-section">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl font-bold mb-6 font-serif text-gray-800">단체 μ—°ν˜</h2>
<div class="space-y-6">
<div class="border-l-4 border-red-700 pl-6">
<h3 class="text-xl font-bold text-gray-800">2018λ…„ 창단</h3>
<p class="text-gray-600">λ‚¨λΆν•œ μ˜ˆμˆ κ°€λ“€μ˜ ν˜‘μ—…μ„ 톡해 ν‰ν™”μ˜ λ©”μ‹œμ§€λ₯Ό μ „λ‹¬ν•˜κΈ° μœ„ν•΄ 창단</p>
</div>
<div class="border-l-4 border-red-700 pl-6">
<h3 class="text-xl font-bold text-gray-800">2019λ…„ 첫 곡연</h3>
<p class="text-gray-600">μ„œμšΈμ˜ˆμˆ μ˜μ „λ‹Ήμ—μ„œ "ν†΅μΌμ˜ λ…Έλž˜" 곡연을 톡해 κ΅­λ‚΄ 첫 선을 λ³΄μž„</p>
</div>
<div class="border-l-4 border-red-700 pl-6">
<h3 class="text-xl font-bold text-gray-800">2021λ…„ ꡭ제 λ¬΄λŒ€</h3>
<p class="text-gray-600">μœ μ—” λ³ΈλΆ€μ—μ„œ 평화 곡연을 톡해 ꡭ제 μ‚¬νšŒμ— ν•œλ°˜λ„ 평화 λ©”μ‹œμ§€ 전달</p>
</div>
<div class="border-l-4 border-red-700 pl-6">
<h3 class="text-xl font-bold text-gray-800">2023λ…„ ν˜„μž¬</h3>
<p class="text-gray-600">세계 20개ꡭ 순회 곡연 및 λ¬Έν™” ꡐλ₯˜ ν”„λ‘œκ·Έλž¨ 진행 쀑</p>
</div>
</div>
</div>
<div class="card rounded-xl overflow-hidden">
<img src="http://static.photos/culture/1024x576/4" alt="단체 역사 사진" class="w-full h-96 object-cover">
</div>
</div>
</section>
<!-- Mission Section -->
<section class="mb-24">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-6 font-serif text-gray-800">사λͺ…κ³Ό λΉ„μ „</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed">
μš°λ¦¬λŠ” μ˜ˆμˆ μ„ 톡해 남과 뢁의 문화적 차이λ₯Ό κ·Ήλ³΅ν•˜κ³ , ν•˜λ‚˜λœ 민쑱정신을 μ „νŒŒν•˜λ©°
ν•œλ°˜λ„μ˜ 평화와 톡일을 ν–₯ν•œ λ©”μ‹œμ§€λ₯Ό 세계에 μ „λ‹¬ν•©λ‹ˆλ‹€.
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="card p-8 text-center">
<div class="text-red-700 mb-6 flex justify-center">
<i data-feather="target" class="w-16 h-16"></i>
</div>
<h3 class="text-2xl font-bold mb-4 text-gray-800">사λͺ…</h3>
<p class="text-gray-600">
μ˜ˆμˆ μ„ ν†΅ν•œ λ‚¨λΆν•œ λ¬Έν™” ꡐλ₯˜μ™€ 평화 λ©”μ‹œμ§€ 전달
</p>
</div>
<div class="card p-8 text-center">
<div class="text-red-700 mb-6 flex justify-center">
<i data-feather="eye" class="w-16 h-16"></i>
</div>
<h3 class="text-2xl font-bold mb-4 text-gray-800">λΉ„μ „</h3>
<p class="text-gray-600">
세계 λ¬΄λŒ€μ—μ„œ ν•œλ°˜λ„μ˜ 아름닀움을 ν‘œν˜„ν•˜λŠ” κΈ€λ‘œλ²Œ 예술 단체
</p>
</div>
<div class="card p-8 text-center">
<div class="text-red-700 mb-6 flex justify-center">
<i data-feather="heart" class="w-16 h-16"></i>
</div>
<h3 class="text-2xl font-bold mb-4 text-gray-800">κ°€μΉ˜</h3>
<p class="text-gray-600">
ν™”ν•©, μ°½μ‘°, 평화, 톡일을 μΆ”κ΅¬ν•˜λŠ” 예술적 κ°€μΉ˜ μ‹€ν˜„
</p>
</div>
</div>
</section>
<!-- Members Section -->
<section class="mb-24 premium-section">
<h2 class="text-3xl font-bold text-center mb-16 font-serif text-gray-800">μ˜ˆμˆ λ‹¨ ꡬ성</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="card text-center p-6">
<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">
<i data-feather="music" class="w-12 h-12"></i>
</div>
<h3 class="text-xl font-bold mb-2 text-gray-800">κ΄€ν˜„μ•…λ‹¨</h3>
<p class="text-gray-600">λ‚¨λΆν•œ μŒμ•…κ°€λ“€μ΄ ν•¨κ»˜ν•˜λŠ” λŒ€κ·œλͺ¨ μ˜€μΌ€μŠ€νŠΈλΌ</p>
</div>
<div class="card text-center p-6">
<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">
<i data-feather="users" class="w-12 h-12"></i>
</div>
<h3 class="text-xl font-bold mb-2 text-gray-800">합창단</h3>
<p class="text-gray-600">민속 μŒμ•…κ³Ό ν˜„λŒ€ μŒμ•…μ„ μ•„μš°λ₯΄λŠ” 100인 합창단</p>
</div>
<div class="card text-center p-6">
<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">
<i data-feather="activity" class="w-12 h-12"></i>
</div>
<h3 class="text-xl font-bold mb-2 text-gray-800">λ¬΄μš©λ‹¨</h3>
<p class="text-gray-600">전톡 무용과 ν˜„λŒ€ λ¬΄μš©μ„ κ²°ν•©ν•œ μ°½μž‘ λ¬΄μš©λ‹¨</p>
</div>
<div class="card text-center p-6">
<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">
<i data-feather="star" class="w-12 h-12"></i>
</div>
<h3 class="text-xl font-bold mb-2 text-gray-800">νŠΉλ³„μΆœμ—°</h3>
<p class="text-gray-600">각 λΆ„μ•Όμ˜ λͺ…성을 λ–¨μΉœ 남뢁 μ˜ˆμˆ κ°€λ“€μ˜ νŠΉλ³„ ν˜‘μ—°</p>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script>feather.replace();</script>
<script src="script.js"></script>
</body>
</html>