Spaces:

nkjoy
/

unified-art-symphony

Running

App Files Files Community

unified-art-symphony / gallery.html

nkjoy

갤러리 페이지도 멋지게 만들어줘

784ce08 verified 6 days ago

raw

history blame contribute delete

9.64 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://unpkg.com/feather-icons"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
	</style>
	</head>
	<body class="bg-gradient-to-b from-blue-50 to-purple-50 font-['Noto_Sans_KR']">
	<custom-navbar></custom-navbar>

	<main class="min-h-screen">
	<!-- Hero Section -->
	<section class="relative py-32 bg-gradient-to-r from-indigo-500 to-purple-600 text-white">
	<div class="max-w-6xl mx-auto px-4 text-center">
	<h1 class="text-5xl md:text-6xl font-bold mb-6 font-['Nanum_Myeongjo']">갤러리</h1>
	<p class="text-xl md:text-2xl max-w-3xl mx-auto">남북한민족예술단의 아름다운 순간들</p>
	</div>
	</section>

	<!-- Gallery Filter -->
	<section class="py-12 px-4">
	<div class="max-w-6xl mx-auto">
	<div class="flex flex-wrap justify-center gap-4 mb-12">
	<button class="gallery-filter-btn active" data-filter="all">전체</button>
	<button class="gallery-filter-btn" data-filter="performance">공연</button>
	<button class="gallery-filter-btn" data-filter="rehearsal">리허설</button>
	<button class="gallery-filter-btn" data-filter="behind">비하인드</button>
	<button class="gallery-filter-btn" data-filter="overseas">해외공연</button>
	</div>

	<!-- Masonry Gallery Grid -->
	<div class="gallery-grid">
	<!-- Item 1 -->
	<div class="gallery-item performance" data-category="performance">
	<img src="http://static.photos/culture/640x360/1" alt="Performance 1">
	<div class="gallery-overlay">
	<h3>아리랑 연가</h3>
	<p>2023 서울 공연</p>
	</div>
	</div>

	<!-- Item 2 -->
	<div class="gallery-item rehearsal" data-category="rehearsal">
	<img src="http://static.photos/culture/640x360/2" alt="Rehearsal 1">
	<div class="gallery-overlay">
	<h3>통일의 꿈 리허설</h3>
	<p>2023.05</p>
	</div>
	</div>

	<!-- Item 3 -->
	<div class="gallery-item overseas" data-category="overseas">
	<img src="http://static.photos/culture/640x360/3" alt="Overseas 1">
	<div class="gallery-overlay">
	<h3>뉴욕 공연</h3>
	<p>2022.10</p>
	</div>
	</div>

	<!-- Item 4 -->
	<div class="gallery-item behind" data-category="behind">
	<img src="http://static.photos/culture/640x360/4" alt="Behind 1">
	<div class="gallery-overlay">
	<h3>메이크업 준비</h3>
	<p>2023.08</p>
	</div>
	</div>

	<!-- Item 5 -->
	<div class="gallery-item performance" data-category="performance">
	<img src="http://static.photos/culture/640x360/5" alt="Performance 2">
	<div class="gallery-overlay">
	<h3>한반도의 봄</h3>
	<p>2023 부산 공연</p>
	</div>
	</div>

	<!-- Item 6 -->
	<div class="gallery-item rehearsal" data-category="rehearsal">
	<img src="http://static.photos/culture/640x360/6" alt="Rehearsal 2">
	<div class="gallery-overlay">
	<h3>새 작품 리허설</h3>
	<p>2023.09</p>
	</div>
	</div>

	<!-- Item 7 -->
	<div class="gallery-item overseas" data-category="overseas">
	<img src="http://static.photos/culture/640x360/7" alt="Overseas 2">
	<div class="gallery-overlay">
	<h3>파리 공연</h3>
	<p>2022.06</p>
	</div>
	</div>

	<!-- Item 8 -->
	<div class="gallery-item behind" data-category="behind">
	<img src="http://static.photos/culture/640x360/8" alt="Behind 2">
	<div class="gallery-overlay">
	<h3>의상 준비</h3>
	<p>2023.07</p>
	</div>
	</div>

	<!-- Item 9 -->
	<div class="gallery-item performance" data-category="performance">
	<img src="http://static.photos/culture/640x360/9" alt="Performance 3">
	<div class="gallery-overlay">
	<h3>민화무</h3>
	<p>2023 대전 공연</p>
	</div>
	</div>

	<!-- Item 10 -->
	<div class="gallery-item rehearsal" data-category="rehearsal">
	<img src="http://static.photos/culture/640x360/10" alt="Rehearsal 3">
	<div class="gallery-overlay">
	<h3>악기 연습</h3>
	<p>2023.04</p>
	</div>
	</div>

	<!-- Item 11 -->
	<div class="gallery-item overseas" data-category="overseas">
	<img src="http://static.photos/culture/640x360/11" alt="Overseas 3">
	<div class="gallery-overlay">
	<h3>베를린 공연</h3>
	<p>2021.11</p>
	</div>
	</div>

	<!-- Item 12 -->
	<div class="gallery-item behind" data-category="behind">
	<img src="http://static.photos/culture/640x360/12" alt="Behind 3">
	<div class="gallery-overlay">
	<h3>무대 설치</h3>
	<p>2023.10</p>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Call to Action -->
	<section class="py-20 bg-gradient-to-r from-indigo-500 to-purple-600 text-white text-center">
	<div class="max-w-4xl mx-auto px-4">
	<h2 class="text-3xl font-bold mb-6 font-['Nanum_Myeongjo']">더 많은 순간들을 만나보세요</h2>
	<p class="text-xl mb-8">남북한민족예술단의 다양한 활동을 SNS에서 확인하실 수 있습니다.</p>
	<div class="flex flex-wrap justify-center gap-4">
	<a href="#" class="glass-btn px-8 flex items-center gap-2">
	<i data-feather="instagram"></i> 인스타그램
	</a>
	<a href="#" class="glass-btn px-8 flex items-center gap-2">
	<i data-feather="facebook"></i> 페이스북
	</a>
	<a href="#" class="glass-btn px-8 flex items-center gap-2">
	<i data-feather="youtube"></i> 유튜브
	</a>
	</div>
	</div>
	</section>
	</main>

	<custom-footer></custom-footer>

	<script src="components/navbar.js"></script>
	<script src="components/footer.js"></script>
	<script src="script.js"></script>
	<script>
	feather.replace();

	// Gallery Filter Functionality
	document.querySelectorAll('.gallery-filter-btn').forEach(btn => {
	btn.addEventListener('click', function() {
	// Remove active class from all buttons
	document.querySelectorAll('.gallery-filter-btn').forEach(b => {
	b.classList.remove('active');
	});

	// Add active class to clicked button
	this.classList.add('active');

	const filter = this.dataset.filter;
	const galleryItems = document.querySelectorAll('.gallery-item');

	galleryItems.forEach(item => {
	if (filter === 'all' \|\| item.dataset.category === filter) {
	item.style.display = 'block';
	} else {
	item.style.display = 'none';
	}
	});
	});
	});
	</script>
	</body>
	</html>