Hugging Face's logo

Spaces:
nkjoy
/
harmony-unification
Running

App Files Community
harmony-unification / performances.html
nkjoy's picture
nkjoy
κ³΅μ—°νŽ˜μ΄μ§€λ„ λ§Œλ“€μ–΄μ€˜
5b0df44 verified
raw
history blame contribute delete
12.6 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">
<!-- Performances 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>
<!-- Current Performances -->
<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-3 gap-8">
<div class="card overflow-hidden">
<div class="relative">
<img src="http://static.photos/culture/1024x576/5" alt="곡연 사진" class="w-full h-56 object-cover">
<div class="absolute top-4 right-4 bg-red-700 text-white px-3 py-1 rounded-full text-sm font-bold">ν˜„μž¬ 곡연쀑</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-2 text-gray-800">ν†΅μΌμ˜ λ…Έλž˜</h3>
<p class="text-gray-600 mb-4">λ‚¨λΆν•œ μ˜ˆμˆ κ°€λ“€μ΄ ν•˜λ‚˜λœ λ¬΄λŒ€μ—μ„œ μ„ λ³΄μ΄λŠ” λŒ€ν˜• 합동 곡연</p>
<div class="flex items-center text-gray-600 mb-2">
<i data-feather="calendar" class="w-5 h-5 mr-2 text-red-700"></i>
<span>2023λ…„ 8μ›” 15일 - 9μ›” 30일</span>
</div>
<div class="flex items-center text-gray-600 mb-4">
<i data-feather="map-pin" class="w-5 h-5 mr-2 text-red-700"></i>
<span>μ„œμšΈ 예술의 μ „λ‹Ή</span>
</div>
<a href="#" class="btn-primary w-full text-center">μ˜ˆλ§€ν•˜κΈ°</a>
</div>
</div>
<div class="card overflow-hidden">
<div class="relative">
<img src="http://static.photos/culture/1024x576/6" alt="곡연 사진" class="w-full h-56 object-cover">
<div class="absolute top-4 right-4 bg-red-700 text-white px-3 py-1 rounded-full text-sm font-bold">ν˜„μž¬ 곡연쀑</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-2 text-gray-800">μ•„λ¦¬λž‘μ˜ ν™”μŒ</h3>
<p class="text-gray-600 mb-4">전톡 μ•„λ¦¬λž‘κ³Ό ν˜„λŒ€ μŒμ•…μ˜ μ‘°ν™”λ‘œμš΄ ν•©μ°½ 곡연</p>
<div class="flex items-center text-gray-600 mb-2">
<i data-feather="calendar" class="w-5 h-5 mr-2 text-red-700"></i>
<span>2023λ…„ 9μ›” 1일 - 10μ›” 15일</span>
</div>
<div class="flex items-center text-gray-600 mb-4">
<i data-feather="map-pin" class="w-5 h-5 mr-2 text-red-700"></i>
<span>λΆ€μ‚° λ¬Έν™”νšŒκ΄€</span>
</div>
<a href="#" class="btn-primary w-full text-center">μ˜ˆλ§€ν•˜κΈ°</a>
</div>
</div>
<div class="card overflow-hidden">
<div class="relative">
<img src="http://static.photos/culture/1024x576/7" alt="곡연 사진" class="w-full h-56 object-cover">
<div class="absolute top-4 right-4 bg-red-700 text-white px-3 py-1 rounded-full text-sm font-bold">ν˜„μž¬ 곡연쀑</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-2 text-gray-800">ν•œλ°˜λ„μ˜ μΆ€</h3>
<p class="text-gray-600 mb-4">λ‚¨λΆν•œ 전톡 무용과 ν˜„λŒ€ 무용의 μ°½μž‘ 무용 곡연</p>
<div class="flex items-center text-gray-600 mb-2">
<i data-feather="calendar" class="w-5 h-5 mr-2 text-red-700"></i>
<span>2023λ…„ 9μ›” 10일 - 10μ›” 20일</span>
</div>
<div class="flex items-center text-gray-600 mb-4">
<i data-feather="map-pin" class="w-5 h-5 mr-2 text-red-700"></i>
<span>λŒ€μ „μ˜ˆμˆ μ˜μ „λ‹Ή</span>
</div>
<a href="#" class="btn-primary w-full text-center">μ˜ˆλ§€ν•˜κΈ°</a>
</div>
</div>
</div>
</section>
<!-- Upcoming Performances -->
<section class="mb-24">
<h2 class="text-3xl font-bold text-center mb-16 font-serif text-gray-800">λ‹€κ°€μ˜€λŠ” 곡연</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="card p-8">
<div class="flex flex-col md:flex-row">
<div class="md:w-1/3 mb-6 md:mb-0">
<img src="http://static.photos/culture/320x240/8" alt="곡연 ν¬μŠ€ν„°" class="w-full h-48 object-cover rounded-lg">
</div>
<div class="md:w-2/3 md:pl-8">
<h3 class="text-2xl font-bold mb-2 text-gray-800">평양 νŠΉλ³„ 곡연</h3>
<p class="text-gray-600 mb-4">λ‚¨λΆν•œλ―Όμ‘±μ˜ˆμˆ λ‹¨μ˜ 평양 λͺ¨λž€λ΄‰ κ·Ήμž₯μ—μ„œμ˜ νŠΉλ³„ 곡연</p>
<div class="flex items-center text-gray-600 mb-2">
<i data-feather="calendar" class="w-5 h-5 mr-2 text-red-700"></i>
<span>2023λ…„ 10μ›” 3일</span>
</div>
<div class="flex items-center text-gray-600 mb-4">
<i data-feather="map-pin" class="w-5 h-5 mr-2 text-red-700"></i>
<span>평양 λͺ¨λž€λ΄‰ κ·Ήμž₯</span>
</div>
<a href="#" class="btn-primary inline-block">μžμ„Ένžˆ 보기</a>
</div>
</div>
</div>
<div class="card p-8">
<div class="flex flex-col md:flex-row">
<div class="md:w-1/3 mb-6 md:mb-0">
<img src="http://static.photos/culture/320x240/9" alt="곡연 ν¬μŠ€ν„°" class="w-full h-48 object-cover rounded-lg">
</div>
<div class="md:w-2/3 md:pl-8">
<h3 class="text-2xl font-bold mb-2 text-gray-800">λ‰΄μš• ꡭ제 곡연</h3>
<p class="text-gray-600 mb-4">μœ μ—” λ³ΈλΆ€μ—μ„œμ˜ ꡭ제 평화 κ³΅μ—°μœΌλ‘œ ν•œλ°˜λ„μ˜ λ©”μ‹œμ§€ 전달</p>
<div class="flex items-center text-gray-600 mb-2">
<i data-feather="calendar" class="w-5 h-5 mr-2 text-red-700"></i>
<span>2024λ…„ 2μ›” 20일</span>
</div>
<div class="flex items-center text-gray-600 mb-4">
<i data-feather="map-pin" class="w-5 h-5 mr-2 text-red-700"></i>
<span>λ‰΄μš• 링컨 μ„Όν„°</span>
</div>
<a href="#" class="btn-primary inline-block">μžμ„Ένžˆ 보기</a>
</div>
</div>
</div>
</div>
</section>
<!-- Performance Programs -->
<section class="mb-24 premium-section">
<h2 class="text-3xl font-bold text-center mb-16 font-serif text-gray-800">곡연 ν”„λ‘œκ·Έλž¨</h2>
<div class="card rounded-2xl overflow-hidden">
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="p-10 bg-gradient-to-br from-red-800 to-red-900 text-white">
<h3 class="text-2xl font-bold mb-6">ν†΅μΌμ˜ λ…Έλž˜</h3>
<div class="space-y-4">
<div class="flex">
<div class="mr-4 text-red-300">1.</div>
<div>
<h4 class="font-bold">κ΅­μ•…κ΄€ν˜„μ•… - μ•„λ¦¬λž‘μ˜ ν™”μŒ</h4>
<p class="text-red-100">λ‚¨λΆν•œ 전톡 μ•…κΈ°λ“€μ˜ ν™”μŒ</p>
</div>
</div>
<div class="flex">
<div class="mr-4 text-red-300">2.</div>
<div>
<h4 class="font-bold">ν•©μ°½ - ν•œλ°˜λ„μ˜ λ…Έλž˜</h4>
<p class="text-red-100">남과 뢁의 μŒμ•…μ΄ ν•˜λ‚˜λ˜λŠ” μ°½μž‘ ν•©μ°½</p>
</div>
</div>
<div class="flex">
<div class="mr-4 text-red-300">3.</div>
<div>
<h4 class="font-bold">무용 - ν†΅μΌμ˜ μΆ€</h4>
<p class="text-red-100">전톡과 ν˜„λŒ€κ°€ μ–΄μš°λŸ¬μ§„ μ°½μž‘ 무용</p>
</div>
</div>
<div class="flex">
<div class="mr-4 text-red-300">4.</div>
<div>
<h4 class="font-bold">νŠΉλ³„ν˜‘μ—° - ν‰ν™”μ˜ λ©”μ‹œμ§€</h4>
<p class="text-red-100">남뢁 μ˜ˆμˆ κ°€λ“€μ˜ νŠΉλ³„ν•œ ν˜‘μ—°</p>
</div>
</div>
</div>
</div>
<div class="p-10 bg-gray-50">
<h3 class="text-2xl font-bold mb-6 text-gray-800">곡연 μ•ˆλ‚΄</h3>
<div class="space-y-6">
<div>
<h4 class="text-lg font-bold mb-2 text-gray-800">κ΄€λžŒ μ‹œκ°„</h4>
<p class="text-gray-600">κ³΅μ—°μ‹œκ°„: 19:30 ~ 21:30 (μž…μž₯ 19:00)</p>
<p class="text-gray-600">μΈν„°λ―Έμ…˜: 20:30 ~ 20:45</p>
</div>
<div>
<h4 class="text-lg font-bold mb-2 text-gray-800">ν‹°μΌ“ 가격</h4>
<p class="text-gray-600">VIP석: 150,000원</p>
<p class="text-gray-600">R석: 100,000원</p>
<p class="text-gray-600">S석: 70,000원</p>
</div>
<div>
<h4 class="text-lg font-bold mb-2 text-gray-800">예맀 μ•ˆλ‚΄</h4>
<p class="text-gray-600">곡연 1μ‹œκ°„ μ „κΉŒμ§€ μž…μž₯ κ°€λŠ₯</p>
<p class="text-gray-600">μ²­μ†Œλ…„ 할인 30% (학생증 지참)</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script>feather.replace();</script>
<script src="script.js"></script>
</body>
</html>