Hugging Face's logo

Spaces:
nkjoy
/
toxj
Running

App Files Community
toxj / team.html
nkjoy's picture
nkjoy
κ΄€λ¦¬μž νŽ˜μ΄μ§€ ν•˜λ‚˜ λ§Œλ“€μ–΄μ€˜
5bd04d0 verified
raw
history blame contribute delete
14.5 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="icon" type="image/x-icon" href="/static/favicon.ico" />
 <script src="https://cdn.tailwindcss.com"></script>
 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
 <!-- feather-icons: 쀑볡/μ˜€νƒ€ 제거, 단일 μ†ŒμŠ€λ§Œ μ‚¬μš© -->
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
 /* νŽ˜μ΄μ§€ μ „μš© μœ ν‹Έ */
 .glass-effect{
 background: rgba(255,255,255,0.15);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border-radius: 20px;
 border: 1px solid rgba(255,255,255,0.18);
 box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
 }
 .gradient-bg{ background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); }
 .sparkle-card{ position:relative; overflow:hidden; transition:all .3s ease; }
 .sparkle-card:hover{ transform: translateY(-5px); box-shadow:0 15px 30px rgba(0,0,0,.3); }
 .sparkle-card::after{
 content:"";
 position:absolute; top:-50%; left:-50%;
 width:200%; height:200%;
 background: rgba(255,255,255,0.1);
 transform: rotate(30deg);
 transition:all .3s ease;
 }
 .sparkle-card:hover::after{ left:100%; top:100%; }
 </style>
</head>
<body class="min-h-screen gradient-bg text-white">
 <!-- Header -->
 <header class="relative z-10 py-6">
 <div class="container mx-auto px-4">
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <i data-feather="home"></i>
 <h1 class="text-2xl font-bold">μƒˆν„°λ―Όλ“€μ˜ μ‰Όν„°</h1>
 </div>
 <nav class="hidden md:block">
 <ul class="flex space-x-8">
 <li><a href="index.html" class="hover:text-yellow-200 transition">μ‰Όν„° ν™ˆ</a></li>
 <li><a href="purpose.html" class="hover:text-yellow-200 transition">섀립λͺ©μ </a></li>
 <li><a href="terms.html" class="hover:text-yellow-200 transition">μ΄μš©μ•½κ΄€</a></li>
 <li><a href="charter.html" class="hover:text-yellow-200 transition">μ •κ΄€</a></li>
 <li><a href="team.php" class="hover:text-yellow-200 transition font-bold">μš΄μ˜μ§„</a></li>
 <li><a href="karaoke.html" class="hover:text-yellow-200 transition">λ…Έλž˜λ°©</a></li>
 </ul>
 </nav>
 <button id="menuBtn" class="md:hidden" aria-label="λͺ¨λ°”일 메뉴">
 <i data-feather="menu"></i>
 </button>
 </div>
<!-- λͺ¨λ°”일 λ“œλ‘­λ‹€μš΄ 메뉴 -->
 <nav id="mobileNav" class="md:hidden hidden mt-4">
 <ul class="space-y-2 glass-effect p-4 rounded-xl">
 <li><a href="index.html" class="block py-2 px-2 hover:text-yellow-200 transition">μ‰Όν„° ν™ˆ</a></li>
 <li><a href="purpose.html" class="block py-2 px-2 hover:text-yellow-200 transition">섀립λͺ©μ </a></li>
 <li><a href="terms.html" class="block py-2 px-2 hover:text-yellow-200 transition">μ΄μš©μ•½κ΄€</a></li>
 <li><a href="charter.html" class="block py-2 px-2 hover:text-yellow-200 transition">μ •κ΄€</a></li>
 <li><a href="team.php" class="block py-2 px-2 hover:text-yellow-200 transition font-bold">μš΄μ˜μ§„</a></li>
 </ul>
 </nav>
 </div>
 </header>
<!-- Main -->
 <main class="relative z-10 py-12">
 <section class="container mx-auto px-4 mb-16">
 <div class="glass-effect max-w-6xl mx-auto p-8 text-center" data-aos="fade-up">
 <h1 class="text-4xl font-bold mb-4">μš΄μ˜μ§„ 쑰직도</h1>
 <p class="text-xl">μƒˆν„°λ―Όλ“€μ˜ μ‰Όν„°λ₯Ό μ΄λŒμ–΄κ°€λŠ” 열정적인 μš΄μ˜μ§„μ„ μ†Œκ°œν•©λ‹ˆλ‹€</p>
 </div>
 </section>
<section class="container mx-auto px-4 mb-16">
 <h2 class="text-3xl font-bold text-center mb-12">μ‰Όν„° μš΄μ˜μ§„</h2>
<!-- λŒ€ν‘œμ§„ -->
 <div class="grid md:grid-cols-3 gap-8 mb-16">
 <div class="sparkle-card glass-effect p-6 rounded-xl text-center" data-aos="fade-up" data-aos-delay="100">
 <div class="w-32 h-32 mx-auto mb-6 rounded-full bg-white/20 flex items-center justify-center">
 <i data-feather="user" class="w-16 h-16"></i>
 </div>
 <h3 class="text-2xl font-bold mb-2">박봉선</h3>
 <p class="text-yellow-300 font-semibold mb-4">μ‰Όν„° λŒ€ν‘œ</p>
 <p class="text-gray-200">μƒˆν„°λ―Όλ“€μ˜ μ‰Όν„°λ₯Ό μ΄λŒμ–΄κ°€λŠ” 총괄 λŒ€ν‘œμž…λ‹ˆλ‹€.</p>
 </div>
<div class="sparkle-card glass-effect p-6 rounded-xl text-center" data-aos="fade-up" data-aos-delay="200">
 <div class="w-32 h-32 mx-auto mb-6 rounded-full bg-white/20 flex items-center justify-center">
 <i data-feather="users" class="w-16 h-16"></i>
 </div>
 <h3 class="text-2xl font-bold mb-2">λ°•μ •μˆ˜</h3>
 <p class="text-yellow-300 font-semibold mb-4">λΆ€νšŒμž₯</p>
 <p class="text-gray-200">μ‰Όν„°μ˜ μš΄μ˜μ„ μ§€μ›ν•˜κ³  μ‘°μœ¨ν•˜λŠ” λΆ€νšŒμž₯μž…λ‹ˆλ‹€.</p>
 </div>
<div class="sparkle-card glass-effect p-6 rounded-xl text-center" data-aos="fade-up" data-aos-delay="300">
 <div class="w-32 h-32 mx-auto mb-6 rounded-full bg-white/20 flex items-center justify-center">
 <i data-feather="users" class="w-16 h-16"></i>
 </div>
 <h3 class="text-2xl font-bold mb-2">μ΄μˆ˜ν›ˆ</h3>
 <p class="text-yellow-300 font-semibold mb-4">λΆ€νšŒμž₯</p>
 <p class="text-gray-200">μ‰Όν„°μ˜ λ°œμ „κ³Ό μš΄μ˜μ„ ν•¨κ»˜ν•˜λŠ” λΆ€νšŒμž₯μž…λ‹ˆλ‹€.</p>
 </div>
 </div>
<!-- μš΄μ˜μ§„ -->
 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
 <div class="sparkle-card glass-effect p-6 rounded-xl text-center" data-aos="fade-up" data-aos-delay="100">
 <div class="w-24 h-24 mx-auto mb-4 rounded-full bg-white/20 flex items-center justify-center">
 <i data-feather="book-open" class="w-12 h-12"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">μ‹ λͺ…μ„±</h3>
 <p class="text-yellow-300 font-semibold mb-3">μ‰Όν„° 운영 κ³ λ¬Έ</p>
 <p class="text-gray-200 text-sm">μ‰Όν„° μš΄μ˜μ— λŒ€ν•œ 전문적인 쑰언을 μ œκ³΅ν•˜λŠ” κ³ λ¬Έμž…λ‹ˆλ‹€.</p>
 </div>
<div class="sparkle-card glass-effect p-6 rounded-xl text-center" data-aos="fade-up" data-aos-delay="150">
 <div class="w-24 h-24 mx-auto mb-4 rounded-full bg-white/20 flex items-center justify-center">
 <i data-feather="briefcase" class="w-12 h-12"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">μ΄μœ€μ„œ</h3>
 <p class="text-yellow-300 font-semibold mb-3">μ‰Όν„° 운영 이사</p>
 <p class="text-gray-200 text-sm">μ‰Όν„°μ˜ μ „λ°˜μ μΈ μš΄μ˜μ„ λ‹΄λ‹Ήν•˜λŠ” μ΄μ‚¬μž…λ‹ˆλ‹€.</p>
 </div>
<div class="sparkle-card glass-effect p-6 rounded-xl text-center" data-aos="fade-up" data-aos-delay="200">
 <div class="w-24 h-24 mx-auto mb-4 rounded-full bg-white/20 flex items-center justify-center">
 <i data-feather="eye" class="w-12 h-12"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">λ―Όμ •μ‹€</h3>
 <p class="text-yellow-300 font-semibold mb-3">μ‰Όν„° 운영 감사</p>
 <p class="text-gray-200 text-sm">μ‰Όν„°μ˜ μš΄μ˜μ„ κ°λ…ν•˜κ³  μ κ²€ν•˜λŠ” κ°μ‚¬μž…λ‹ˆλ‹€.</p>
 </div>
<div class="sparkle-card glass-effect p-6 rounded-xl text-center" data-aos="fade-up" data-aos-delay="250">
 <div class="w-24 h-24 mx-auto mb-4 rounded-full bg-white/20 flex items-center justify-center">
 <i data-feather="settings" class="w-12 h-12"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">전좩일</h3>
 <p class="text-yellow-300 font-semibold mb-3">μ‰Όν„° 사무ꡭμž₯</p>
 <p class="text-gray-200 text-sm">μ‰Όν„°μ˜ 일상적인 사무λ₯Ό μ΄κ΄„ν•˜λŠ” 사무ꡭμž₯μž…λ‹ˆλ‹€.</p>
 </div>
<div class="sparkle-card glass-effect p-6 rounded-xl text-center" data-aos="fade-up" data-aos-delay="300">
 <div class="w-24 h-24 mx-auto mb-4 rounded-full bg-white/20 flex items-center justify-center">
 <i data-feather="globe" class="w-12 h-12"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">μž₯근혁</h3>
 <p class="text-yellow-300 font-semibold mb-3">λŒ€μ™Έν˜‘λ ₯λΆ€μž₯</p>
 <p class="text-gray-200 text-sm">μ™ΈλΆ€ κΈ°κ΄€κ³Όμ˜ ν˜‘λ ₯을 λ‹΄λ‹Ήν•˜λŠ” λŒ€μ™Έν˜‘λ ₯λΆ€μž₯μž…λ‹ˆλ‹€.</p>
 </div>
<div class="sparkle-card glass-effect p-6 rounded-xl text-center" data-aos="fade-up" data-aos-delay="350">
 <div class="w-24 h-24 mx-auto mb-4 rounded-full bg-white/20 flex items-center justify-center">
 <i data-feather="heart" class="w-12 h-12"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">μ΄μ‹ μš°</h3>
 <p class="text-yellow-300 font-semibold mb-3">봉사뢀μž₯</p>
 <p class="text-gray-200 text-sm">봉사 ν™œλ™μ„ κΈ°νšν•˜κ³  μš΄μ˜ν•˜λŠ” 봉사뢀μž₯μž…λ‹ˆλ‹€.</p>
 </div>
 </div>
<!-- 홍보 및 총무 -->
 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
 <div class="sparkle-card glass-effect p-6 rounded-xl text-center" data-aos="fade-up" data-aos-delay="100">
 <div class="w-24 h-24 mx-auto mb-4 rounded-full bg-white/20 flex items-center justify-center">
 <i data-feather="megaphone" class="w-12 h-12"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">κΉ€μ„Έμ—°</h3>
 <p class="text-yellow-300 font-semibold mb-3">홍보뢀μž₯</p>
 <p class="text-gray-200 text-sm">μ‰Όν„°μ˜ 홍보 ν™œλ™μ„ λ‹΄λ‹Ήν•˜λŠ” 홍보뢀μž₯μž…λ‹ˆλ‹€.</p>
 </div>
<div class="sparkle-card glass-effect p-6 rounded-xl text-center" data-aos="fade-up" data-aos-delay="150">
 <div class="w-24 h-24 mx-auto mb-4 rounded-full bg-white/20 flex items-center justify-center">
 <i data-feather="code" class="w-12 h-12"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">μ‘°μ˜λ‚¨</h3>
 <p class="text-yellow-300 font-semibold mb-3">ν™λ³΄κ°œλ°œνŒ€μž₯</p>
 <p class="text-gray-200 text-sm">홍보 μ½˜ν…μΈ  κ°œλ°œμ„ λ‹΄λ‹Ήν•˜λŠ” ν™λ³΄κ°œλ°œνŒ€μž₯μž…λ‹ˆλ‹€.</p>
 </div>
<div class="sparkle-card glass-effect p-6 rounded-xl text-center" data-aos="fade-up" data-aos-delay="200">
 <div class="w-24 h-24 mx-auto mb-4 rounded-full bg-white/20 flex items-center justify-center">
 <i data-feather="file-text" class="w-12 h-12"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">이닀은</h3>
 <p class="text-yellow-300 font-semibold mb-3">μ‰Όν„° 총무</p>
 <p class="text-gray-200 text-sm">μ‰Όν„°μ˜ ν–‰μ • 및 총무 업무λ₯Ό λ‹΄λ‹Ήν•˜λŠ” μ΄λ¬΄μž…λ‹ˆλ‹€.</p>
 </div>
 </div>
 </section>
 </main>
<!-- Footer -->
 <footer class="relative z-10 py-8 mt-16 glass-effect">
 <div class="container mx-auto px-4">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="mb-6 md:mb-0">
 <h2 class="text-xl font-bold flex items-center space-x-2">
 <i data-feather="home"></i><span>μƒˆν„°λ―Όλ“€μ˜ μ‰Όν„°</span>
 </h2>
 <p class="mt-2 text-sm">ν•¨κ»˜ν•˜λŠ” μƒˆλ‘œμš΄ μ‹œμž‘</p>
 </div>
 <div class="flex space-x-6">
 <a href="#" class="hover:text-yellow-200 transition" aria-label="Facebook"><i data-feather="facebook"></i></a>
 <a href="#" class="hover:text-yellow-200 transition" aria-label="Twitter"><i data-feather="twitter"></i></a>
 <a href="#" class="hover:text-yellow-200 transition" aria-label="Instagram"><i data-feather="instagram"></i></a>
 <a href="#" class="hover:text-yellow-200 transition" aria-label="Mail"><i data-feather="mail"></i></a>
 </div>
 </div>
 <div class="border-t border-gray-700 mt-8 pt-8 text-center text-sm">
 <p>Β© 2025 μƒˆν„°λ―Όλ“€μ˜ μ‰Όν„°. All rights reserved.</p>
 </div>
 </div>
 </footer>
<!-- Scripts -->
 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
 <script>
 // AOS & feather & λͺ¨λ°”일 메뉴 ν† κΈ€
 document.addEventListener('DOMContentLoaded', function () {
 if (window.AOS) {
 AOS.init({ duration: 800, easing: 'ease-in-out', once: true });
 }
 if (window.feather) { feather.replace(); }
 const btn = document.getElementById('menuBtn');
 const nav = document.getElementById('mobileNav');
 if (btn && nav) {
 btn.addEventListener('click', () => nav.classList.toggle('hidden'));
 }
 });
 </script>
</body>
</html>