Spaces:

nkjoy
/

toxj

Running

App Files Files Community

toxj / purpose.html

nkjoy

관리자 페이지 하나 만들어줘

5bd04d0 verified 12 months ago

Raw

History Blame Contribute Delete

8.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="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">
	<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://unpkg.com/feather-icons"></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%);
	}
	</style>
	</head>
	<body class="min-h-screen gradient-bg text-white">
	<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">
	<i data-feather="home" class="mr-2"></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 font-bold">설립목적</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.html" class="hover:text-yellow-200 transition">운영진</a></li>
	<li><a href="karaoke.html" class="hover:text-yellow-200 transition">노래방</a></li>
	</ul>
	</nav>
	<button class="md:hidden">
	<i data-feather="menu"></i>
	</button>
	</div>
	</div>
	</header>

	<main class="relative z-10 py-12">
	<section class="container mx-auto px-4 mb-16">
	<div class="glass-effect max-w-4xl mx-auto p-8" data-aos="fade-up">
	<h1 class="text-4xl font-bold mb-8 text-center">설립 목적</h1>

	<div class="mb-12">
	<p class="text-xl mb-6 leading-relaxed">
	"새터민들의 쉼터"는 고향(북한)을 탈북하여 대한민국에 입국한 새터민들이 새로운 환경에서 제2의 삶을 살아가면서 사회,경제,문화적으로 어려움을 겪으면서도 정착을 해나가는 과정에서 많은 정보를 공유하고 대한민국 국민으로써 열심히 살아가기 위한 온라인 커뮤니티입니다.
	</p>
	<p class="text-xl leading-relaxed">
	"새터민들의 쉼터"는 아래의 목적으로 운영합니다.
	</p>
	</div>

	<div class="space-y-8">
	<div class="p-6 rounded-lg bg-white bg-opacity-10" data-aos="fade-right">
	<h3 class="text-2xl font-semibold mb-4 flex items-center">
	<i data-feather="users" class="mr-3 text-yellow-300"></i> 소통의 장 제공
	</h3>
	<p class="text-lg leading-relaxed">
	대한민국에 정착하는 새터민들의 상호 간 및 남한 사람들과의 소통의 장을 제공함으로서 사회정착 할 정보도 공유하고 쉼터에서 심신 안정과 고향에 대한 추억도 함께 나누며 한국에 잘 적응 할 수 있도록 하는 관심과 배려를 합니다.
	</p>
	</div>

	<div class="p-6 rounded-lg bg-white bg-opacity-10" data-aos="fade-left">
	<h3 class="text-2xl font-semibold mb-4 flex items-center">
	<i data-feather="award" class="mr-3 text-yellow-300"></i> 교육 프로그램 추진
	</h3>
	<p class="text-lg leading-relaxed">
	대한민국정착 도움이 되며 옳바른 국가관을 확립하고 민주주의 의식을 높일 수 있는 다양한 프로그램을 추진합니다.
	</p>
	</div>

	<div class="p-6 rounded-lg bg-white bg-opacity-10" data-aos="fade-right">
	<h3 class="text-2xl font-semibold mb-4 flex items-center">
	<i data-feather="target" class="mr-3 text-yellow-300"></i> 의식 변화 지향
	</h3>
	<p class="text-lg leading-relaxed">
	새터민들의 성공적 정착을 통해 그 가족들과 북한주민의 의식변화를 지향합니다.
	</p>
	</div>

	<div class="p-6 rounded-lg bg-white bg-opacity-10" data-aos="fade-left">
	<h3 class="text-2xl font-semibold mb-4 flex items-center">
	<i data-feather="heart" class="mr-3 text-yellow-300"></i> 사회 봉사 활동
	</h3>
	<p class="text-lg leading-relaxed">
	새터민들도 대한민국의 한 구성원으로서 불우이웃 돕기 및 사회에 대한 봉사활동을 하여 자아 개발을 촉구합니다.
	</p>
	</div>

	<div class="p-6 rounded-lg bg-white bg-opacity-10" data-aos="fade-up">
	<h3 class="text-2xl font-semibold mb-4 flex items-center">
	<i data-feather="globe" class="mr-3 text-yellow-300"></i> 전국적 연대
	</h3>
	<p class="text-lg leading-relaxed">
	새터민들의 쉼터는 전국각지에 거주하고 있는 3만5천명의 탈북민들과 대한민국 사람들이 사회전반에서 서로 잘 어울려 보다 성공적인 정착을 가져다주는 것을 목적으로 합니다.
	</p>
	</div>
	</div>

	<div class="mt-12 text-center">
	<p class="text-xl font-semibold">
	새터민들의 쉼터가 온라인 상의 고향집이 되도록 많은 회원분들의 협조를 부탁드립니다. 감사합니다.
	</p>
	</div>
	</div>
	</section>
	</main>

	<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">
	<i data-feather="home" class="mr-2"></i> 새터민들의 쉼터
	</h2>
	<p class="mt-2 text-sm">함께하는 새로운 시작</p>
	</div>
	<div class="flex space-x-6">
	<a href="#" class="hover:text-yellow-200 transition"><i data-feather="facebook"></i></a>
	<a href="#" class="hover:text-yellow-200 transition"><i data-feather="twitter"></i></a>
	<a href="#" class="hover:text-yellow-200 transition"><i data-feather="instagram"></i></a>
	<a href="#" class="hover:text-yellow-200 transition"><i data-feather="mail"></i></a>
	</div>
	</div>
	<div class="border-t border-gray-700 mt-8 pt-8 text-center text-sm">
	<p>© 2023 새터민들의 쉼터. All rights reserved.</p>
	</div>
	</div>
	</footer>

	<script>
	AOS.init({
	duration: 800,
	easing: 'ease-in-out',
	once: true
	});
	</script>
	<script>
	feather.replace();
	</script>
	</body>
	</html>