Spaces:

nkjoy
/

anycoder-0550837d

Running

App Files Files Community

anycoder-0550837d / index.html

nkjoy

Upload folder using huggingface_hub

c01c7e0 verified 6 months ago

Raw

History Blame Contribute Delete

36.3 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>하늘예술단 \| 영혼을 울리는 예술의 향연</title>

	<!-- Google Fonts: Noto Sans KR -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

	<!-- Remix Icons -->
	<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">

	<style>
	/* --- CSS Variables & Reset --- */
	:root {
	--bg-color: #0f0f11;
	--surface-color: #1a1a1e;
	--surface-hover: #25252a;
	--primary-color: #7c4dff;
	--secondary-color: #ff4081;
	--text-main: #ffffff;
	--text-muted: #b0b0b0;
	--font-main: 'Noto Sans KR', sans-serif;
	--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	--container-width: 1200px;
	--header-height: 80px;
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	html {
	scroll-behavior: smooth;
	}

	body {
	font-family: var(--font-main);
	background-color: var(--bg-color);
	color: var(--text-main);
	line-height: 1.6;
	overflow-x: hidden;
	}

	a {
	text-decoration: none;
	color: inherit;
	transition: var(--transition);
	}

	ul {
	list-style: none;
	}

	img {
	max-width: 100%;
	display: block;
	object-fit: cover;
	}

	/* --- Utility Classes --- */
	.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 20px;
	}

	.section-title {
	font-size: 2.5rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 1rem;
	background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}

	.section-subtitle {
	text-align: center;
	color: var(--text-muted);
	margin-bottom: 4rem;
	font-size: 1.1rem;
	}

	.btn {
	display: inline-block;
	padding: 12px 30px;
	border-radius: 50px;
	font-weight: 500;
	cursor: pointer;
	border: none;
	transition: var(--transition);
	}

	.btn-primary {
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	box-shadow: 0 4px 15px rgba(124, 77, 255, 0.4);
	}

	.btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(124, 77, 255, 0.6);
	}

	.btn-outline {
	background: transparent;
	border: 2px solid white;
	color: white;
	}

	.btn-outline:hover {
	background: white;
	color: var(--bg-color);
	}

	/* --- Header --- */
	header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-height);
	background: rgba(15, 15, 17, 0.85);
	backdrop-filter: blur(10px);
	z-index: 1000;
	display: flex;
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	.nav-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	}

	.logo {
	font-size: 1.8rem;
	font-weight: 900;
	letter-spacing: -1px;
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.logo i {
	color: var(--secondary-color);
	}

	.nav-links {
	display: flex;
	gap: 40px;
	}

	.nav-links a {
	font-size: 1rem;
	font-weight: 500;
	color: var(--text-muted);
	position: relative;
	}

	.nav-links a:hover, .nav-links a.active {
	color: var(--text-main);
	}

	.nav-links a::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--secondary-color);
	transition: var(--transition);
	}

	.nav-links a:hover::after {
	width: 100%;
	}

	.anycoder-credit {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-left: 20px;
	padding-left: 20px;
	border-left: 1px solid rgba(255,255,255,0.1);
	}

	.anycoder-credit:hover {
	color: var(--primary-color);
	}

	.menu-toggle {
	display: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: var(--text-main);
	}

	/* --- Hero Section --- */
	.hero {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: url('https://picsum.photos/seed/artshero/1920/1080') no-repeat center center/cover;
	padding-top: var(--header-height);
	}

	.hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(15,15,17,0.3), var(--bg-color));
	}

	.hero-content {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 800px;
	padding: 0 20px;
	}

	.hero-title {
	font-size: 4rem;
	font-weight: 900;
	margin-bottom: 1.5rem;
	line-height: 1.2;
	opacity: 0;
	transform: translateY(30px);
	animation: fadeUp 1s ease forwards 0.5s;
	}

	.hero-desc {
	font-size: 1.25rem;
	color: #d0d0d0;
	margin-bottom: 2.5rem;
	opacity: 0;
	transform: translateY(30px);
	animation: fadeUp 1s ease forwards 0.7s;
	}

	.hero-btns {
	opacity: 0;
	transform: translateY(30px);
	animation: fadeUp 1s ease forwards 0.9s;
	}

	@keyframes fadeUp {
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	/* --- About Section --- */
	.about {
	padding: 100px 0;
	background-color: var(--bg-color);
	}

	.about-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	}

	.about-img-wrapper {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0,0,0,0.4);
	}

	.about-img-wrapper img {
	width: 100%;
	height: auto;
	transition: transform 0.5s ease;
	}

	.about-img-wrapper:hover img {
	transform: scale(1.05);
	}

	.about-text h3 {
	font-size: 2rem;
	margin-bottom: 1.5rem;
	}

	.about-text p {
	color: var(--text-muted);
	margin-bottom: 1.5rem;
	font-size: 1.05rem;
	}

	.stats {
	display: flex;
	gap: 40px;
	margin-top: 2rem;
	}

	.stat-item h4 {
	font-size: 2.5rem;
	color: var(--primary-color);
	font-weight: 700;
	}

	.stat-item span {
	color: var(--text-muted);
	font-size: 0.9rem;
	}

	/* --- Performances Section --- */
	.performances {
	padding: 100px 0;
	background-color: var(--surface-color);
	}

	.performance-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	}

	.card {
	background-color: var(--bg-color);
	border-radius: 15px;
	overflow: hidden;
	transition: var(--transition);
	border: 1px solid rgba(255,255,255,0.05);
	position: relative;
	}

	.card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(0,0,0,0.3);
	border-color: rgba(124, 77, 255, 0.3);
	}

	.card-image {
	height: 250px;
	width: 100%;
	position: relative;
	overflow: hidden;
	}

	.card-image img {
	width: 100%;
	height: 100%;
	transition: transform 0.5s ease;
	}

	.card:hover .card-image img {
	transform: scale(1.1);
	}

	.card-tag {
	position: absolute;
	top: 15px;
	right: 15px;
	background: rgba(0,0,0,0.7);
	color: white;
	padding: 5px 12px;
	border-radius: 20px;
	font-size: 0.8rem;
	backdrop-filter: blur(5px);
	}

	.card-content {
	padding: 25px;
	}

	.card-date {
	color: var(--secondary-color);
	font-size: 0.9rem;
	font-weight: 500;
	margin-bottom: 8px;
	display: block;
	}

	.card-title {
	font-size: 1.4rem;
	margin-bottom: 10px;
	font-weight: 700;
	}

	.card-desc {
	color: var(--text-muted);
	font-size: 0.95rem;
	margin-bottom: 20px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	}

	.card-link {
	color: var(--primary-color);
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 5px;
	}

	.card-link:hover {
	gap: 10px;
	}

	/* --- Members Section --- */
	.members {
	padding: 100px 0;
	}

	.members-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 40px;
	}

	.member-card {
	text-align: center;
	group: 1;
	}

	.member-img {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	margin: 0 auto 20px;
	overflow: hidden;
	border: 3px solid transparent;
	transition: var(--transition);
	position: relative;
	}

	.member-card:hover .member-img {
	border-color: var(--secondary-color);
	transform: rotate(5deg);
	}

	.member-img img {
	width: 100%;
	height: 100%;
	}

	.member-name {
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 5px;
	}

	.member-role {
	color: var(--primary-color);
	font-size: 0.9rem;
	font-weight: 500;
	}

	/* --- Gallery Section --- */
	.gallery {
	padding: 100px 0;
	background-color: var(--surface-color);
	}

	.gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 250px;
	gap: 15px;
	}

	.gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	cursor: pointer;
	}

	/* Masonry-like effect with spans */
	.gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
	.gallery-item:nth-child(4) { grid-column: span 2; }

	.gallery-item img {
	width: 100%;
	height: 100%;
	transition: transform 0.5s ease;
	}

	.gallery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: var(--transition);
	}

	.gallery-overlay i {
	font-size: 2rem;
	color: white;
	transform: scale(0);
	transition: var(--transition);
	}

	.gallery-item:hover img {
	transform: scale(1.1);
	}

	.gallery-item:hover .gallery-overlay {
	opacity: 1;
	}

	.gallery-item:hover .gallery-overlay i {
	transform: scale(1);
	}

	/* --- Contact Section --- */
	.contact {
	padding: 100px 0;
	}

	.contact-wrapper {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 60px;
	background: var(--surface-color);
	padding: 50px;
	border-radius: 20px;
	}

	.contact-info h3 {
	font-size: 1.8rem;
	margin-bottom: 20px;
	}

	.info-item {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin-bottom: 25px;
	}

	.info-item i {
	font-size: 1.5rem;
	color: var(--primary-color);
	margin-top: 3px;
	}

	.info-content h5 {
	font-size: 1.1rem;
	margin-bottom: 5px;
	}

	.info-content p {
	color: var(--text-muted);
	}

	.contact-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	}

	.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	}

	.form-group input, .form-group textarea {
	width: 100%;
	padding: 15px;
	background: var(--bg-color);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 8px;
	color: white;
	font-family: var(--font-main);
	font-size: 1rem;
	transition: var(--transition);
	}

	.form-group input:focus, .form-group textarea:focus {
	outline: none;
	border-color: var(--primary-color);
	background: #151518;
	}

	.form-group textarea {
	resize: vertical;
	height: 150px;
	}

	/* --- Footer --- */
	footer {
	background: #050506;
	padding: 60px 0 20px;
	border-top: 1px solid rgba(255,255,255,0.05);
	}

	.footer-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 40px;
	gap: 20px;
	}

	.footer-logo {
	font-size: 1.5rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
	}

	.social-links {
	display: flex;
	gap: 15px;
	}

	.social-link {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
	}

	.social-link:hover {
	background: var(--primary-color);
	transform: translateY(-3px);
	}

	.copyright {
	text-align: center;
	color: var(--text-muted);
	font-size: 0.9rem;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,0.05);
	}

	/* --- Animations --- */
	.reveal {
	opacity: 0;
	transform: translateY(50px);
	transition: all 0.8s ease;
	}

	.reveal.active {
	opacity: 1;
	transform: translateY(0);
	}

	/* --- Responsive Design --- */
	@media (max-width: 1024px) {
	.gallery-grid {
	grid-template-columns: repeat(2, 1fr);
	}
	.gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
	.gallery-item:nth-child(4) { grid-column: span 1; }
	}

	@media (max-width: 768px) {
	.nav-links, .anycoder-credit {
	display: none;
	}

	.menu-toggle {
	display: block;
	}

	.hero-title {
	font-size: 2.5rem;
	}

	.about-content {
	grid-template-columns: 1fr;
	}

	.contact-wrapper {
	grid-template-columns: 1fr;
	padding: 30px;
	}

	.form-row {
	grid-template-columns: 1fr;
	}

	/* Mobile Menu Active State */
	.nav-mobile-active {
	position: fixed;
	top: var(--header-height);
	left: 0;
	width: 100%;
	height: calc(100vh - var(--header-height));
	background: var(--bg-color);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	display: flex;
	gap: 30px;
	border-top: 1px solid rgba(255,255,255,0.1);
	}

	.nav-mobile-active a {
	font-size: 1.5rem;
	}
	}
	</style>
	</head>
	<body>

	<!-- Header -->
	<header>
	<div class="container nav-container">
	<a href="#" class="logo">
	<i class="ri-brush-2-fill"></i> 하늘예술단
	</a>
	<nav>
	<ul class="nav-links" id="navLinks">
	<li><a href="#about" class="active">소개</a></li>
	<li><a href="#performances">공연</a></li>
	<li><a href="#members">멤버</a></li>
	<li><a href="#gallery">갤러리</a></li>
	<li><a href="#contact">문의</a></li>
	</ul>
	</nav>
	<div style="display: flex; align-items: center;">
	<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-credit">Built with anycoder</a>
	<div class="menu-toggle" id="menuToggle">
	<i class="ri-menu-4-line"></i>
	</div>
	</div>
	</div>
	</header>

	<main>
	<!-- Hero Section -->
	<section class="hero" id="home">
	<div class="hero-content">
	<h1 class="hero-title">영혼을 울리는<br>예술의 향연</h1>
	<p class="hero-desc">하늘예술단은 무대 위에서 감동을 넘어 깊은 울림을 전합니다.<br>우리와 함께 특별한 순간을 만들어보세요.</p>
	<div class="hero-btns">
	<a href="#performances" class="btn btn-primary">공연 보기</a>
	<a href="#contact" class="btn btn-outline" style="margin-left: 15px;">문의하기</a>
	</div>
	</div>
	</section>

	<!-- About Section -->
	<section class="about" id="about">
	<div class="container">
	<div class="about-content reveal">
	<div class="about-img-wrapper">
	<img src="https://picsum.photos/seed/artsabout/600/700" alt="예술단 리허설 사진">
	</div>
	<div class="about-text">
	<h3>우리는 이야기를 말합니다</h3>
	<p>하늘예술단은 2010년에 설립된 예술 단체로, 전통 예술과 현대적 감각을 조화롭게 융합하여 독창적인 무대를 선보입니다. 춤, 음악, 연극을 넘나들며 관객들에게 잊지 못할 감동을 선물하는 것을 목표로 합니다.</p>
	<p>단순한 공연을 넘어, 관객과 호흡하며 함께 만들어가는 예술을 지향합니다. 우리의 무대는 끝이 나지 않습니다, 여러분의 마음속에서 계속됩니다.</p>

	<div class="stats">
	<div class="stat-item">
	<h4>14+</h4>
	<span>년의 역사</span>
	</div>
	<div class="stat-item">
	<h4>500+</h4>
	<span>공연 횟수</span>
	</div>
	<div class="stat-item">
	<h4>30+</h4>
	<span>소속 아티스트</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Performances Section -->
	<section class="performances" id="performances">
	<div class="container">
	<h2 class="section-title reveal">최신 공연 안내</h2>
	<p class="section-subtitle reveal">다가오는 하늘예술단의 특별한 무대를 만나보세요.</p>

	<div class="performance-grid">
	<!-- Card 1 -->
	<article class="card reveal">
	<div class="card-image">
	<span class="card-tag">정기 공연</span>
	<img src="https://picsum.photos/seed/artperf1/500/350" alt="공연 포스터">
	</div>
	<div class="card-content">
	<span class="card-date">2023. 11. 15 - 11. 20</span>
	<h3 class="card-title">바람의 노래</h3>
	<p class="card-desc">자연의 소리와 현대 무용이 어우러지는 실험적인 퍼포먼스. 관객은 시각과 청각의 자유를 경험하게 됩니다.</p>
	<a href="#" class="card-link">상세 보기 <i class="ri-arrow-right-line"></i></a>
	</div>
	</article>

	<!-- Card 2 -->
	<article class="card reveal">
	<div class="card-image">
	<span class="card-tag">초청 공연</span>
	<img src="https://picsum.photos/seed/artperf2/500/350" alt="공연 포스터">
	</div>
	<div class="card-content">
	<span class="card-date">2023. 12. 05</span>
	<h3 class="card-title">겨울 밤의 꿈</h3>
	<p class="card-desc">셰익스피어의 고전을 한국적 정서로 재해석한 음악극. 따뜻한 하모니가 겨울 밤을 감싸안습니다.</p>
	<a href="#" class="card-link">상세 보기 <i class="ri-arrow-right-line"></i></a>
	</div>
	</article>

	<!-- Card 3 -->
	<article class="card reveal">
	<div class="card-image">
	<span class="card-tag">특별 워크샵</span>
	<img src="https://picsum.photos/seed/artperf3/500/350" alt="공연 포스터">
	</div>
	<div class="card-content">
	<span class="card-date">2024. 01. 10</span>
	<h3 class="card-title">아티스트와의 대화</h3>
	<p class="card-desc">하늘예술단의 아티스트들과 함께하는 참여형 워크샵. 일반인도 예술가가 되어보는 시간.</p>
	<a href="#" class="card-link">상세 보기 <i class="ri-arrow-right-line"></i></a>
	</div>
	</article>
	</div>
	</div>
	</section>

	<!-- Members Section -->
	<section class="members" id="members">
	<div class="container">
	<h2 class="section-title reveal">아티스트 소개</h2>
	<p class="section-subtitle reveal">하늘예술단을 이끄는 꿈의 연주자들입니다.</p>

	<div class="members-grid">
	<div class="member-card reveal">
	<div class="member-img">
	<img src="https://picsum.photos/seed/artist1/300/300" alt="예술 총감독">
	</div>
	<h3 class="member-name">김지훈</h3>
	<p class="member-role">예술 총감독</p>
	</div>
	<div class="member-card reveal">
	<div class="member-img">
	<img src="https://picsum.photos/seed/artist2/300/300" alt="안무가">
	</div>
	<h3 class="member-name">이수아</h3>
	<p class="member-role">수석 안무가</p>
	</div>
	<div class="member-card reveal">
	<div class="member-img">
	<img src="https://picsum.photos/seed/artist3/300/300" alt="작곡가">
	</div>
	<h3 class="member-name">박민준</h3>
	<p class="member-role">작곡 및 연출</p>
	</div>
	<div class="member-card reveal">
	<div class="member-img">
	<img src="https://picsum.photos/seed/artist4/300/300" alt="주연 무용수">
	</div>
	<h3 class="member-name">최윤서</h3>
	<p class="member-role">주연 무용수</p>
	</div>
	</div>
	</div>
	</section>

	<!-- Gallery Section -->
	<section class="gallery" id="gallery">
	<div class="container">
	<h2 class="section-title reveal">하이라이트 갤러리</h2>
	<p class="section-subtitle reveal">지난 공연들의 생생한 순간들을 담았습니다.</p>

	<div class="gallery-grid">
	<div class="gallery-item reveal">
	<img src="https://picsum.photos/seed/gallery1/600/600" alt="공연 사진">
	<div class="gallery-overlay"><i class="ri-zoom-in-line"></i></div>
	</div>
	<div class="gallery-item reveal">
	<img src="https://picsum.photos/seed/gallery2/400/400" alt="공연 사진">
	<div class="gallery-overlay"><i class="ri-zoom-in-line"></i></div>
	</div>
	<div class="gallery-item reveal">
	<img src="https://picsum.photos/seed/gallery3/400/400" alt="공연 사진">
	<div class="gallery-overlay"><i class="ri-zoom-in-line"></i></div>
	</div>
	<div class="gallery-item reveal">
	<img src="https://picsum.photos/seed/gallery4/600/300" alt="공연 사진">
	<div class="gallery-overlay"><i class="ri-zoom-in-line"></i></div>
	</div>
	<div class="gallery-item reveal">
	<img src="https://picsum.photos/seed/gallery5/400/400" alt="공연 사진">
	<div class="gallery-overlay"><i class="ri-zoom-in-line"></i></div>
	</div>
	<div class="gallery-item reveal">
	<img src="https://picsum.photos/seed/gallery6/400/400" alt="공연 사진">
	<div class="gallery-overlay"><i class="ri-zoom-in-line"></i></div>
	</div>
	</div>
	</div>
	</section>

	<!-- Contact Section -->
	<section class="contact" id="contact">
	<div class="container">
	<h2 class="section-title reveal">문의하기</h2>
	<p class="section-subtitle reveal">공연 문의, 협찬 제안 등 어떤 내용이든 환영합니다.</p>

	<div class="contact-wrapper reveal">
	<div class="contact-info">
	<h3>연락처 정보</h3>
	<div class="info-item">
	<i class="ri-map-pin-line"></i>
	<div class="info-content">
	<h5>주소</h5>
	<p>서울특별시 마포구 예술의로 123<br>하늘빌딩 5층</p>
	</div>
	</div>
	<div class="info-item">
	<i class="ri-mail-send-line"></i>
	<div class="info-content">
	<h5>이메일</h5>
	<p>contact@skyarts.or.kr</p>
	</div>
	</div>
	<div class="info-item">
	<i class="ri-phone-line"></i>
	<div class="info-content">
	<h5>전화</h5>
	<p>02-1234-5678</p>
	</div>
	</div>
	<div class="info-item">
	<i class="ri-time-line"></i>
	<div class="info-content">
	<h5>운영 시간</h5>
	<p>월 - 금: 09:00 - 18:00</p>
	</div>
	</div>
	</div>

	<form class="contact-form" onsubmit="event.preventDefault(); alert('문의가 접수되었습니다. 빠른 시일 내에 답변 드리겠습니다.');">
	<div class="form-row">
	<div class="form-group">
	<input type="text" placeholder="이름" required>
	</div>
	<div class="form-group">
	<input type="email" placeholder="이메일" required>
	</div>
	</div>
	<div class="form-group">
	<input type="text" placeholder="제목" required>
	</div>
	<div class="form-group">
	<textarea placeholder="문의 내용을 입력해주세요." required></textarea>
	</div>
	<button type="submit" class="btn btn-primary" style="align-self: flex-start;">보내기</button>
	</form>
	</div>
	</div>
	</section>
	</main>

	<!-- Footer -->
	<footer>
	<div class="container">
	<div class="footer-content">
	<div class="footer-logo">
	<i class="ri-brush-2-fill"></i> 하늘예술단
	</div>
	<div class="social-links">
	<a href="#" class="social-link"><i class="ri-instagram-line"></i></a>
	<a href="#" class="social-link"><i class="ri-youtube-fill"></i></a>
	<a href="#" class="social-link"><i class="ri-facebook-fill"></i></a>
	<a href="#" class="social-link"><i class="ri-twitter-x-line"></i></a>
	</div>
	</div>
	<p class="copyright">
	© 2023 하늘예술단 Sky Arts Group. All rights reserved.
	</p>
	</div>
	</footer>

	<!-- JavaScript -->
	<script>
	// Mobile Menu Toggle
	const menuToggle = document.getElementById('menuToggle');
	const navLinks = document.getElementById('navLinks');

	menuToggle.addEventListener('click', () => {
	navLinks.classList.toggle('nav-mobile-active');

	// Toggle icon
	const icon = menuToggle.querySelector('i');
	if (navLinks.classList.contains('nav-mobile-active')) {
	icon.classList.remove('ri-menu-4-line');
	icon.classList.add('ri-close-line');
	} else {
	icon.classList.remove('ri-close-line');
	icon.classList.add('ri-menu-4-line');
	}
	});

	// Close mobile menu when a link is clicked
	document.querySelectorAll('.nav-links a').forEach(link => {
	link.addEventListener('click', () => {
	navLinks.classList.remove('nav-mobile-active');
	const icon = menuToggle.querySelector('i');
	icon.classList.remove('ri-close-line');
	icon.classList.add('ri-menu-4-line');
	});
	});

	// Scroll Animation (Intersection Observer)
	const revealElements = document.querySelectorAll('.reveal');

	const revealObserver = new IntersectionObserver((entries, observer) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	entry.target.classList.add('active');
	observer.unobserve(entry.target); // Only animate once
	}
	});
	}, {
	root: null,
	threshold: 0.15, // Trigger when 15% of element is visible
	rootMargin: "0px 0px -50px 0px"
	});

	revealElements.forEach(el => {
	revealObserver.observe(el);
	});

	// Active Nav Link on Scroll
	const sections = document.querySelectorAll('section');
	const navItems = document.querySelectorAll('.nav-links a');

	window.addEventListener('scroll', () => {
	let current = '';

	sections.forEach(section => {
	const sectionTop = section.offsetTop;
	const sectionHeight = section.clientHeight;
	if (scrollY >= (sectionTop - 150)) {
	current = section.getAttribute('id');
	}
	});

	navItems.forEach(li => {
	li.classList.remove('active');
	if (li.getAttribute('href').includes(current)) {
	li.classList.add('active');
	}
	});
	});

	// Header Background on Scroll
	const header = document.querySelector('header');
	window.addEventListener('scroll', () => {
	if (window.scrollY > 50) {
	header.style.background = 'rgba(15, 15, 17, 0.95)';
	header.style.boxShadow = '0 5px 20px rgba(0,0,0,0.5)';
	} else {
	header.style.background = 'rgba(15, 15, 17, 0.85)';
	header.style.boxShadow =