Spaces:
Running
Running
Add 3 files
Browse files- README.md +7 -5
- index.html +664 -19
- prompts.txt +0 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: achmad-sari
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: gray
|
| 5 |
+
colorTo: yellow
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,664 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="id">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Keluarga Ahmad Sari Kebumen | Profil & Sejarah</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
+
<style>
|
| 10 |
+
.hero-pattern {
|
| 11 |
+
background-image: url('https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80');
|
| 12 |
+
background-size: cover;
|
| 13 |
+
background-position: center;
|
| 14 |
+
background-blend-mode: overlay;
|
| 15 |
+
}
|
| 16 |
+
|
| 17 |
+
.family-tree {
|
| 18 |
+
position: relative;
|
| 19 |
+
}
|
| 20 |
+
|
| 21 |
+
.generation-line {
|
| 22 |
+
position: absolute;
|
| 23 |
+
height: 2px;
|
| 24 |
+
background-color: #cbd5e0;
|
| 25 |
+
width: 100%;
|
| 26 |
+
top: 50%;
|
| 27 |
+
z-index: 0;
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
.fade-in {
|
| 31 |
+
animation: fadeIn 1.5s ease-in-out;
|
| 32 |
+
}
|
| 33 |
+
|
| 34 |
+
@keyframes fadeIn {
|
| 35 |
+
from { opacity: 0; }
|
| 36 |
+
to { opacity: 1; }
|
| 37 |
+
}
|
| 38 |
+
|
| 39 |
+
.message-card {
|
| 40 |
+
transition: all 0.3s ease;
|
| 41 |
+
}
|
| 42 |
+
|
| 43 |
+
.message-card:hover {
|
| 44 |
+
transform: translateY(-5px);
|
| 45 |
+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
| 46 |
+
}
|
| 47 |
+
</style>
|
| 48 |
+
</head>
|
| 49 |
+
<body class="bg-gray-50 font-sans">
|
| 50 |
+
<!-- Navigation -->
|
| 51 |
+
<nav class="bg-green-800 text-white shadow-lg sticky top-0 z-50">
|
| 52 |
+
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
| 53 |
+
<div class="flex items-center space-x-2">
|
| 54 |
+
<i class="fas fa-home text-xl"></i>
|
| 55 |
+
<span class="font-bold text-xl">Keluarga Ahmad Sari</span>
|
| 56 |
+
</div>
|
| 57 |
+
<div class="hidden md:flex space-x-6">
|
| 58 |
+
<a href="#home" class="hover:text-yellow-300 transition">Beranda</a>
|
| 59 |
+
<a href="#history" class="hover:text-yellow-300 transition">Sejarah</a>
|
| 60 |
+
<a href="#family" class="hover:text-yellow-300 transition">Keluarga</a>
|
| 61 |
+
<a href="#activities" class="hover:text-yellow-300 transition">Kegiatan</a>
|
| 62 |
+
<a href="#messages" class="hover:text-yellow-300 transition">Pesan Almarhum</a>
|
| 63 |
+
</div>
|
| 64 |
+
<button class="md:hidden focus:outline-none" id="menu-toggle">
|
| 65 |
+
<i class="fas fa-bars text-xl"></i>
|
| 66 |
+
</button>
|
| 67 |
+
</div>
|
| 68 |
+
<!-- Mobile Menu -->
|
| 69 |
+
<div class="md:hidden hidden bg-green-700 px-4 py-2" id="mobile-menu">
|
| 70 |
+
<div class="flex flex-col space-y-3">
|
| 71 |
+
<a href="#home" class="hover:text-yellow-300 transition">Beranda</a>
|
| 72 |
+
<a href="#history" class="hover:text-yellow-300 transition">Sejarah</a>
|
| 73 |
+
<a href="#family" class="hover:text-yellow-300 transition">Keluarga</a>
|
| 74 |
+
<a href="#activities" class="hover:text-yellow-300 transition">Kegiatan</a>
|
| 75 |
+
<a href="#messages" class="hover:text-yellow-300 transition">Pesan Almarhum</a>
|
| 76 |
+
</div>
|
| 77 |
+
</div>
|
| 78 |
+
</nav>
|
| 79 |
+
|
| 80 |
+
<!-- Hero Section -->
|
| 81 |
+
<section id="home" class="hero-pattern bg-green-900 bg-opacity-70 text-white py-20">
|
| 82 |
+
<div class="container mx-auto px-4 text-center fade-in">
|
| 83 |
+
<h1 class="text-4xl md:text-6xl font-bold mb-4">Keluarga Ahmad Sari</h1>
|
| 84 |
+
<p class="text-xl md:text-2xl mb-8">Kebumen, Jawa Tengah - Menjaga Warisan & Tradisi Keluarga</p>
|
| 85 |
+
<div class="flex justify-center space-x-4">
|
| 86 |
+
<a href="#history" class="bg-yellow-500 hover:bg-yellow-600 text-green-900 font-bold py-3 px-6 rounded-full transition duration-300">
|
| 87 |
+
<i class="fas fa-book mr-2"></i>Pelajari Sejarah
|
| 88 |
+
</a>
|
| 89 |
+
<a href="#family" class="bg-transparent hover:bg-green-800 border-2 border-white text-white font-bold py-3 px-6 rounded-full transition duration-300">
|
| 90 |
+
<i class="fas fa-users mr-2"></i>Kenali Keluarga
|
| 91 |
+
</a>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</section>
|
| 95 |
+
|
| 96 |
+
<!-- History Section -->
|
| 97 |
+
<section id="history" class="py-16 bg-white">
|
| 98 |
+
<div class="container mx-auto px-4">
|
| 99 |
+
<div class="text-center mb-12">
|
| 100 |
+
<h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">Sejarah Keluarga</h2>
|
| 101 |
+
<div class="w-24 h-1 bg-yellow-500 mx-auto"></div>
|
| 102 |
+
</div>
|
| 103 |
+
|
| 104 |
+
<div class="flex flex-col md:flex-row items-center">
|
| 105 |
+
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
|
| 106 |
+
<img src="https://images.unsplash.com/photo-1588591795089-5d71a0d82c4d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
|
| 107 |
+
alt="Kebumen Tempo Dulu"
|
| 108 |
+
class="rounded-lg shadow-xl w-full h-auto max-h-96 object-cover">
|
| 109 |
+
</div>
|
| 110 |
+
<div class="md:w-1/2">
|
| 111 |
+
<h3 class="text-2xl font-semibold text-green-700 mb-4">Asal Usul Keluarga Ahmad Sari</h3>
|
| 112 |
+
<p class="text-gray-700 mb-4">
|
| 113 |
+
Keluarga Ahmad Sari berasal dari Desa Karanganyar, Kebumen, Jawa Tengah. Ahmad Sari lahir pada tahun 1925 dan merupakan seorang pedagang batik yang sukses di wilayah Kebumen. Beliau dikenal sebagai sosok yang pekerja keras dan sangat memperhatikan pendidikan anak-anaknya.
|
| 114 |
+
</p>
|
| 115 |
+
<p class="text-gray-700 mb-4">
|
| 116 |
+
Pada masa penjajahan Belanda, Ahmad Sari aktif membantu masyarakat sekitar dengan membagikan hasil pertaniannya. Sikap dermawan ini yang kemudian menjadi ciri khas keluarga besar Ahmad Sari hingga generasi sekarang.
|
| 117 |
+
</p>
|
| 118 |
+
<p class="text-gray-700">
|
| 119 |
+
Keluarga ini menetap di Kebumen selama 4 generasi dan telah memberikan kontribusi besar bagi perkembangan ekonomi dan sosial di wilayah tersebut, terutama dalam bidang perdagangan dan pendidikan.
|
| 120 |
+
</p>
|
| 121 |
+
</div>
|
| 122 |
+
</div>
|
| 123 |
+
|
| 124 |
+
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
|
| 125 |
+
<div class="bg-green-50 p-6 rounded-lg shadow-md hover:shadow-lg transition">
|
| 126 |
+
<div class="text-green-700 text-4xl mb-4">
|
| 127 |
+
<i class="fas fa-mosque"></i>
|
| 128 |
+
</div>
|
| 129 |
+
<h4 class="font-bold text-lg mb-2">Nilai Agama</h4>
|
| 130 |
+
<p class="text-gray-700">
|
| 131 |
+
Keluarga Ahmad Sari selalu menanamkan nilai-nilai agama Islam yang kuat dalam kehidupan sehari-hari.
|
| 132 |
+
</p>
|
| 133 |
+
</div>
|
| 134 |
+
<div class="bg-green-50 p-6 rounded-lg shadow-md hover:shadow-lg transition">
|
| 135 |
+
<div class="text-green-700 text-4xl mb-4">
|
| 136 |
+
<i class="fas fa-hand-holding-heart"></i>
|
| 137 |
+
</div>
|
| 138 |
+
<h4 class="font-bold text-lg mb-2">Kedermawanan</h4>
|
| 139 |
+
<p class="text-gray-700">
|
| 140 |
+
Tradisi berbagi kepada sesama telah menjadi ciri khas keluarga sejak zaman Ahmad Sari.
|
| 141 |
+
</p>
|
| 142 |
+
</div>
|
| 143 |
+
<div class="bg-green-50 p-6 rounded-lg shadow-md hover:shadow-lg transition">
|
| 144 |
+
<div class="text-green-700 text-4xl mb-4">
|
| 145 |
+
<i class="fas fa-book-open"></i>
|
| 146 |
+
</div>
|
| 147 |
+
<h4 class="font-bold text-lg mb-2">Pendidikan</h4>
|
| 148 |
+
<p class="text-gray-700">
|
| 149 |
+
Pendidikan tinggi selalu menjadi prioritas utama dalam keluarga besar Ahmad Sari.
|
| 150 |
+
</p>
|
| 151 |
+
</div>
|
| 152 |
+
</div>
|
| 153 |
+
</div>
|
| 154 |
+
</section>
|
| 155 |
+
|
| 156 |
+
<!-- Family Data Section -->
|
| 157 |
+
<section id="family" class="py-16 bg-gray-50">
|
| 158 |
+
<div class="container mx-auto px-4">
|
| 159 |
+
<div class="text-center mb-12">
|
| 160 |
+
<h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">Pohon Keluarga</h2>
|
| 161 |
+
<div class="w-24 h-1 bg-yellow-500 mx-auto"></div>
|
| 162 |
+
</div>
|
| 163 |
+
|
| 164 |
+
<div class="family-tree relative">
|
| 165 |
+
<div class="generation-line"></div>
|
| 166 |
+
|
| 167 |
+
<!-- Generation 1 -->
|
| 168 |
+
<div class="flex justify-center mb-8 relative z-10">
|
| 169 |
+
<div class="bg-white p-4 rounded-full shadow-lg border-4 border-green-700 w-32 h-32 flex items-center justify-center">
|
| 170 |
+
<div class="text-center">
|
| 171 |
+
<p class="font-bold">Ahmad Sari</p>
|
| 172 |
+
<p class="text-sm">(1925-1998)</p>
|
| 173 |
+
</div>
|
| 174 |
+
</div>
|
| 175 |
+
</div>
|
| 176 |
+
|
| 177 |
+
<!-- Generation 2 -->
|
| 178 |
+
<div class="flex justify-around mb-8 relative z-10">
|
| 179 |
+
<div class="bg-white p-4 rounded-full shadow-lg border-4 border-green-600 w-28 h-28 flex items-center justify-center">
|
| 180 |
+
<div class="text-center">
|
| 181 |
+
<p class="font-bold">Siti Aminah</p>
|
| 182 |
+
<p class="text-xs">(1930-2005)</p>
|
| 183 |
+
</div>
|
| 184 |
+
</div>
|
| 185 |
+
<div class="bg-white p-4 rounded-full shadow-lg border-4 border-green-600 w-28 h-28 flex items-center justify-center">
|
| 186 |
+
<div class="text-center">
|
| 187 |
+
<p class="font-bold">Muhammad</p>
|
| 188 |
+
<p class="text-xs">(1950-2010)</p>
|
| 189 |
+
</div>
|
| 190 |
+
</div>
|
| 191 |
+
<div class="bg-white p-4 rounded-full shadow-lg border-4 border-green-600 w-28 h-28 flex items-center justify-center">
|
| 192 |
+
<div class="text-center">
|
| 193 |
+
<p class="font-bold">Fatimah</p>
|
| 194 |
+
<p class="text-xs">(1955-)</p>
|
| 195 |
+
</div>
|
| 196 |
+
</div>
|
| 197 |
+
</div>
|
| 198 |
+
|
| 199 |
+
<!-- Generation 3 -->
|
| 200 |
+
<div class="flex justify-around mb-8 relative z-10">
|
| 201 |
+
<div class="bg-white p-3 rounded-full shadow-lg border-4 border-green-500 w-24 h-24 flex items-center justify-center">
|
| 202 |
+
<div class="text-center">
|
| 203 |
+
<p class="font-bold text-sm">Budi</p>
|
| 204 |
+
<p class="text-xs">(1975-)</p>
|
| 205 |
+
</div>
|
| 206 |
+
</div>
|
| 207 |
+
<div class="bg-white p-3 rounded-full shadow-lg border-4 border-green-500 w-24 h-24 flex items-center justify-center">
|
| 208 |
+
<div class="text-center">
|
| 209 |
+
<p class="font-bold text-sm">Ani</p>
|
| 210 |
+
<p class="text-xs">(1978-)</p>
|
| 211 |
+
</div>
|
| 212 |
+
</div>
|
| 213 |
+
<div class="bg-white p-3 rounded-full shadow-lg border-4 border-green-500 w-24 h-24 flex items-center justify-center">
|
| 214 |
+
<div class="text-center">
|
| 215 |
+
<p class="font-bold text-sm">Rudi</p>
|
| 216 |
+
<p class="text-xs">(1980-)</p>
|
| 217 |
+
</div>
|
| 218 |
+
</div>
|
| 219 |
+
<div class="bg-white p-3 rounded-full shadow-lg border-4 border-green-500 w-24 h-24 flex items-center justify-center">
|
| 220 |
+
<div class="text-center">
|
| 221 |
+
<p class="font-bold text-sm">Dewi</p>
|
| 222 |
+
<p class="text-xs">(1982-)</p>
|
| 223 |
+
</div>
|
| 224 |
+
</div>
|
| 225 |
+
</div>
|
| 226 |
+
|
| 227 |
+
<!-- Generation 4 -->
|
| 228 |
+
<div class="flex justify-around relative z-10">
|
| 229 |
+
<div class="bg-white p-2 rounded-full shadow-lg border-4 border-green-400 w-20 h-20 flex items-center justify-center">
|
| 230 |
+
<div class="text-center">
|
| 231 |
+
<p class="font-bold text-xs">Rina</p>
|
| 232 |
+
<p class="text-2xs">(2000-)</p>
|
| 233 |
+
</div>
|
| 234 |
+
</div>
|
| 235 |
+
<div class="bg-white p-2 rounded-full shadow-lg border-4 border-green-400 w-20 h-20 flex items-center justify-center">
|
| 236 |
+
<div class="text-center">
|
| 237 |
+
<p class="font-bold text-xs">Doni</p>
|
| 238 |
+
<p class="text-2xs">(2002-)</p>
|
| 239 |
+
</div>
|
| 240 |
+
</div>
|
| 241 |
+
<div class="bg-white p-2 rounded-full shadow-lg border-4 border-green-400 w-20 h-20 flex items-center justify-center">
|
| 242 |
+
<div class="text-center">
|
| 243 |
+
<p class="font-bold text-xs">Lina</p>
|
| 244 |
+
<p class="text-2xs">(2005-)</p>
|
| 245 |
+
</div>
|
| 246 |
+
</div>
|
| 247 |
+
<div class="bg-white p-2 rounded-full shadow-lg border-4 border-green-400 w-20 h-20 flex items-center justify-center">
|
| 248 |
+
<div class="text-center">
|
| 249 |
+
<p class="font-bold text-xs">Fajar</p>
|
| 250 |
+
<p class="text-2xs">(2008-)</p>
|
| 251 |
+
</div>
|
| 252 |
+
</div>
|
| 253 |
+
<div class="bg-white p-2 rounded-full shadow-lg border-4 border-green-400 w-20 h-20 flex items-center justify-center">
|
| 254 |
+
<div class="text-center">
|
| 255 |
+
<p class="font-bold text-xs">Mira</p>
|
| 256 |
+
<p class="text-2xs">(2010-)</p>
|
| 257 |
+
</div>
|
| 258 |
+
</div>
|
| 259 |
+
</div>
|
| 260 |
+
</div>
|
| 261 |
+
|
| 262 |
+
<div class="mt-16">
|
| 263 |
+
<h3 class="text-2xl font-semibold text-green-700 mb-6 text-center">Anggota Keluarga Terkini</h3>
|
| 264 |
+
|
| 265 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
| 266 |
+
<!-- Family Member 1 -->
|
| 267 |
+
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
|
| 268 |
+
<div class="h-48 bg-green-700 flex items-center justify-center">
|
| 269 |
+
<i class="fas fa-user text-white text-6xl"></i>
|
| 270 |
+
</div>
|
| 271 |
+
<div class="p-4">
|
| 272 |
+
<h4 class="font-bold text-lg">Fatimah binti Ahmad Sari</h4>
|
| 273 |
+
<p class="text-gray-600 mb-2">Generasi Kedua (1955-)</p>
|
| 274 |
+
<p class="text-gray-700">
|
| 275 |
+
Ibu rumah tangga yang aktif dalam kegiatan sosial. Menjaga tradisi keluarga dan menjadi penghubung antar generasi.
|
| 276 |
+
</p>
|
| 277 |
+
</div>
|
| 278 |
+
</div>
|
| 279 |
+
|
| 280 |
+
<!-- Family Member 2 -->
|
| 281 |
+
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
|
| 282 |
+
<div class="h-48 bg-green-600 flex items-center justify-center">
|
| 283 |
+
<i class="fas fa-user-tie text-white text-6xl"></i>
|
| 284 |
+
</div>
|
| 285 |
+
<div class="p-4">
|
| 286 |
+
<h4 class="font-bold text-lg">Budi Santoso</h4>
|
| 287 |
+
<p class="text-gray-600 mb-2">Generasi Ketiga (1975-)</p>
|
| 288 |
+
<p class="text-gray-700">
|
| 289 |
+
Dokter di RS Kebumen. Aktif dalam kegiatan amal dan pendidikan kesehatan masyarakat.
|
| 290 |
+
</p>
|
| 291 |
+
</div>
|
| 292 |
+
</div>
|
| 293 |
+
|
| 294 |
+
<!-- Family Member 3 -->
|
| 295 |
+
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
|
| 296 |
+
<div class="h-48 bg-green-500 flex items-center justify-center">
|
| 297 |
+
<i class="fas fa-user-graduate text-white text-6xl"></i>
|
| 298 |
+
</div>
|
| 299 |
+
<div class="p-4">
|
| 300 |
+
<h4 class="font-bold text-lg">Rina Wijayanti</h4>
|
| 301 |
+
<p class="text-gray-600 mb-2">Generasi Keempat (2000-)</p>
|
| 302 |
+
<p class="text-gray-700">
|
| 303 |
+
Mahasiswa kedokteran di Universitas Gadjah Mada. Penerima beasiswa keluarga Ahmad Sari.
|
| 304 |
+
</p>
|
| 305 |
+
</div>
|
| 306 |
+
</div>
|
| 307 |
+
</div>
|
| 308 |
+
</div>
|
| 309 |
+
</div>
|
| 310 |
+
</section>
|
| 311 |
+
|
| 312 |
+
<!-- Activities Section -->
|
| 313 |
+
<section id="activities" class="py-16 bg-white">
|
| 314 |
+
<div class="container mx-auto px-4">
|
| 315 |
+
<div class="text-center mb-12">
|
| 316 |
+
<h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">Kegiatan Keluarga</h2>
|
| 317 |
+
<div class="w-24 h-1 bg-yellow-500 mx-auto"></div>
|
| 318 |
+
</div>
|
| 319 |
+
|
| 320 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
| 321 |
+
<div>
|
| 322 |
+
<h3 class="text-2xl font-semibold text-green-700 mb-4">Kegiatan Rutin</h3>
|
| 323 |
+
<div class="space-y-4">
|
| 324 |
+
<div class="flex items-start">
|
| 325 |
+
<div class="bg-green-100 p-3 rounded-full mr-4">
|
| 326 |
+
<i class="fas fa-quran text-green-700"></i>
|
| 327 |
+
</div>
|
| 328 |
+
<div>
|
| 329 |
+
<h4 class="font-bold">Pengajian Keluarga</h4>
|
| 330 |
+
<p class="text-gray-700">Setiap malam Jumat di rumah keluarga besar Ahmad Sari</p>
|
| 331 |
+
</div>
|
| 332 |
+
</div>
|
| 333 |
+
|
| 334 |
+
<div class="flex items-start">
|
| 335 |
+
<div class="bg-green-100 p-3 rounded-full mr-4">
|
| 336 |
+
<i class="fas fa-utensils text-green-700"></i>
|
| 337 |
+
</div>
|
| 338 |
+
<div>
|
| 339 |
+
<h4 class="font-bold">Reuni Keluarga</h4>
|
| 340 |
+
<p class="text-gray-700">Setiap tahun pada hari ulang tahun almarhum Ahmad Sari</p>
|
| 341 |
+
</div>
|
| 342 |
+
</div>
|
| 343 |
+
|
| 344 |
+
<div class="flex items-start">
|
| 345 |
+
<div class="bg-green-100 p-3 rounded-full mr-4">
|
| 346 |
+
<i class="fas fa-hand-holding-heart text-green-700"></i>
|
| 347 |
+
</div>
|
| 348 |
+
<div>
|
| 349 |
+
<h4 class="font-bold">Bantuan Sosial</h4>
|
| 350 |
+
<p class="text-gray-700">Distribusi sembako bulanan untuk masyarakat kurang mampu</p>
|
| 351 |
+
</div>
|
| 352 |
+
</div>
|
| 353 |
+
</div>
|
| 354 |
+
</div>
|
| 355 |
+
|
| 356 |
+
<div>
|
| 357 |
+
<h3 class="text-2xl font-semibold text-green-700 mb-4">Kegiatan Khusus</h3>
|
| 358 |
+
<div class="space-y-4">
|
| 359 |
+
<div class="flex items-start">
|
| 360 |
+
<div class="bg-green-100 p-3 rounded-full mr-4">
|
| 361 |
+
<i class="fas fa-graduation-cap text-green-700"></i>
|
| 362 |
+
</div>
|
| 363 |
+
<div>
|
| 364 |
+
<h4 class="font-bold">Beasiswa Pendidikan</h4>
|
| 365 |
+
<p class="text-gray-700">Program beasiswa untuk anggota keluarga yang berprestasi</p>
|
| 366 |
+
</div>
|
| 367 |
+
</div>
|
| 368 |
+
|
| 369 |
+
<div class="flex items-start">
|
| 370 |
+
<div class="bg-green-100 p-3 rounded-full mr-4">
|
| 371 |
+
<i class="fas fa-tree text-green-700"></i>
|
| 372 |
+
</div>
|
| 373 |
+
<div>
|
| 374 |
+
<h4 class="font-bold">Pelestarian Lingkungan</h4>
|
| 375 |
+
<p class="text-gray-700">Penanaman pohon tahunan di area keluarga dan masyarakat</p>
|
| 376 |
+
</div>
|
| 377 |
+
</div>
|
| 378 |
+
|
| 379 |
+
<div class="flex items-start">
|
| 380 |
+
<div class="bg-green-100 p-3 rounded-full mr-4">
|
| 381 |
+
<i class="fas fa-book text-green-700"></i>
|
| 382 |
+
</div>
|
| 383 |
+
<div>
|
| 384 |
+
<h4 class="font-bold">Pembuatan Buku Silsilah</h4>
|
| 385 |
+
<p class="text-gray-700">Dokumentasi sejarah keluarga untuk generasi mendatang</p>
|
| 386 |
+
</div>
|
| 387 |
+
</div>
|
| 388 |
+
</div>
|
| 389 |
+
</div>
|
| 390 |
+
</div>
|
| 391 |
+
|
| 392 |
+
<h3 class="text-2xl font-semibold text-green-700 mb-6 text-center">Galeri Kegiatan</h3>
|
| 393 |
+
|
| 394 |
+
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
| 395 |
+
<div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
|
| 396 |
+
<img src="https://images.unsplash.com/photo-1580201092675-a0a6a6caf7d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
|
| 397 |
+
alt="Pengajian Keluarga"
|
| 398 |
+
class="w-full h-48 object-cover hover:scale-105 transition duration-300">
|
| 399 |
+
</div>
|
| 400 |
+
<div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
|
| 401 |
+
<img src="https://images.unsplash.com/photo-1549060279-7e168fcee0c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
|
| 402 |
+
alt="Reuni Keluarga"
|
| 403 |
+
class="w-full h-48 object-cover hover:scale-105 transition duration-300">
|
| 404 |
+
</div>
|
| 405 |
+
<div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
|
| 406 |
+
<img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
|
| 407 |
+
alt="Bantuan Sosial"
|
| 408 |
+
class="w-full h-48 object-cover hover:scale-105 transition duration-300">
|
| 409 |
+
</div>
|
| 410 |
+
<div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
|
| 411 |
+
<img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1422&q=80"
|
| 412 |
+
alt="Beasiswa Pendidikan"
|
| 413 |
+
class="w-full h-48 object-cover hover:scale-105 transition duration-300">
|
| 414 |
+
</div>
|
| 415 |
+
</div>
|
| 416 |
+
</div>
|
| 417 |
+
</section>
|
| 418 |
+
|
| 419 |
+
<!-- Messages from the Deceased Section -->
|
| 420 |
+
<section id="messages" class="py-16 bg-gray-50">
|
| 421 |
+
<div class="container mx-auto px-4">
|
| 422 |
+
<div class="text-center mb-12">
|
| 423 |
+
<h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">Pesan-Pesan Almarhum</h2>
|
| 424 |
+
<div class="w-24 h-1 bg-yellow-500 mx-auto"></div>
|
| 425 |
+
<p class="text-gray-600 mt-4 max-w-2xl mx-auto">
|
| 426 |
+
Kumpulan nasihat dan pesan berharga dari almarhum Ahmad Sari yang terus menjadi pedoman hidup bagi keluarga besar.
|
| 427 |
+
</p>
|
| 428 |
+
</div>
|
| 429 |
+
|
| 430 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
| 431 |
+
<!-- Message 1 -->
|
| 432 |
+
<div class="message-card bg-white p-6 rounded-lg shadow-md border-l-4 border-green-600">
|
| 433 |
+
<div class="flex items-center mb-4">
|
| 434 |
+
<div class="bg-green-100 p-3 rounded-full mr-4">
|
| 435 |
+
<i class="fas fa-quote-left text-green-600"></i>
|
| 436 |
+
</div>
|
| 437 |
+
<div>
|
| 438 |
+
<h4 class="font-bold">Tentang Kejujuran</h4>
|
| 439 |
+
<p class="text-sm text-gray-500">Pesan terakhir, 1998</p>
|
| 440 |
+
</div>
|
| 441 |
+
</div>
|
| 442 |
+
<p class="text-gray-700 italic">
|
| 443 |
+
"Jagalah kejujuran dalam setiap langkah hidupmu. Harta bisa habis, tapi nama baik yang dijaga dengan kejujuran akan abadi untuk keturunanmu."
|
| 444 |
+
</p>
|
| 445 |
+
</div>
|
| 446 |
+
|
| 447 |
+
<!-- Message 2 -->
|
| 448 |
+
<div class="message-card bg-white p-6 rounded-lg shadow-md border-l-4 border-green-600">
|
| 449 |
+
<div class="flex items-center mb-4">
|
| 450 |
+
<div class="bg-green-100 p-3 rounded-full mr-4">
|
| 451 |
+
<i class="fas fa-quote-left text-green-600"></i>
|
| 452 |
+
</div>
|
| 453 |
+
<div>
|
| 454 |
+
<h4 class="font-bold">Tentang Keluarga</h4>
|
| 455 |
+
<p class="text-sm text-gray-500">Pesan tahun 1995</p>
|
| 456 |
+
</div>
|
| 457 |
+
</div>
|
| 458 |
+
<p class="text-gray-700 italic">
|
| 459 |
+
"Keluarga adalah harta yang tak ternilai. Jaga silaturahmi, saling mendukung dalam kebaikan, dan jangan pernah biarkan perselisihan merusak ikatan darah."
|
| 460 |
+
</p>
|
| 461 |
+
</div>
|
| 462 |
+
|
| 463 |
+
<!-- Message 3 -->
|
| 464 |
+
<div class="message-card bg-white p-6 rounded-lg shadow-md border-l-4 border-green-600">
|
| 465 |
+
<div class="flex items-center mb-4">
|
| 466 |
+
<div class="bg-green-100 p-3 rounded-full mr-4">
|
| 467 |
+
<i class="fas fa-quote-left text-green-600"></i>
|
| 468 |
+
</div>
|
| 469 |
+
<div>
|
| 470 |
+
<h4 class="font-bold">Tentang Pendidikan</h4>
|
| 471 |
+
<p class="text-sm text-gray-500">Pesan tahun 1980</p>
|
| 472 |
+
</div>
|
| 473 |
+
</div>
|
| 474 |
+
<p class="text-gray-700 italic">
|
| 475 |
+
"Investasi terbaik adalah pendidikan untuk anak-anakmu. Dengan ilmu, mereka akan bisa berdiri di atas kaki sendiri dan membawa nama keluarga ke tempat yang lebih terhormat."
|
| 476 |
+
</p>
|
| 477 |
+
</div>
|
| 478 |
+
|
| 479 |
+
<!-- Message 4 -->
|
| 480 |
+
<div class="message-card bg-white p-6 rounded-lg shadow-md border-l-4 border-green-600">
|
| 481 |
+
<div class="flex items-center mb-4">
|
| 482 |
+
<div class="bg-green-100 p-3 rounded-full mr-4">
|
| 483 |
+
<i class="fas fa-quote-left text-green-600"></i>
|
| 484 |
+
</div>
|
| 485 |
+
<div>
|
| 486 |
+
<h4 class="font-bold">Tentang Kedermawanan</h4>
|
| 487 |
+
<p class="text-sm text-gray-500">Pesan tahun 1975</p>
|
| 488 |
+
</div>
|
| 489 |
+
</div>
|
| 490 |
+
<p class="text-gray-700 italic">
|
| 491 |
+
"Bersyukurlah dengan apa yang kita miliki dan berbagilah dengan yang membutuhkan. Rezeki yang dibagikan akan berlipat ganda dan membawa berkah untuk seluruh keluarga."
|
| 492 |
+
</p>
|
| 493 |
+
</div>
|
| 494 |
+
|
| 495 |
+
<!-- Message 5 -->
|
| 496 |
+
<div class="message-card bg-white p-6 rounded-lg shadow-md border-l-4 border-green-600">
|
| 497 |
+
<div class="flex items-center mb-4">
|
| 498 |
+
<div class="bg-green-100 p-3 rounded-full mr-4">
|
| 499 |
+
<i class="fas fa-quote-left text-green-600"></i>
|
| 500 |
+
</div>
|
| 501 |
+
<div>
|
| 502 |
+
<h4 class="font-bold">Tentang Kerja Keras</h4>
|
| 503 |
+
<p class="text-sm text-gray-500">Pesan tahun 1960</p>
|
| 504 |
+
</div>
|
| 505 |
+
</div>
|
| 506 |
+
<p class="text-gray-700 italic">
|
| 507 |
+
"Jangan pernah mengeluh dengan pekerjaan yang halal. Kerja keras dengan niat baik akan membawa hasil yang manis, jika tidak untukmu, untuk anak cucumu kelak."
|
| 508 |
+
</p>
|
| 509 |
+
</div>
|
| 510 |
+
|
| 511 |
+
<!-- Message 6 -->
|
| 512 |
+
<div class="message-card bg-white p-6 rounded-lg shadow-md border-l-4 border-green-600">
|
| 513 |
+
<div class="flex items-center mb-4">
|
| 514 |
+
<div class="bg-green-100 p-3 rounded-full mr-4">
|
| 515 |
+
<i class="fas fa-quote-left text-green-600"></i>
|
| 516 |
+
</div>
|
| 517 |
+
<div>
|
| 518 |
+
<h4 class="font-bold">Tentang Iman</h4>
|
| 519 |
+
<p class="text-sm text-gray-500">Pesan terakhir, 1998</p>
|
| 520 |
+
</div>
|
| 521 |
+
</div>
|
| 522 |
+
<p class="text-gray-700 italic">
|
| 523 |
+
"Jangan pernah tinggalkan shalat dan ajaran agama. Itulah pondasi yang akan menjaga keluarga kita dari segala macam cobaan hidup di dunia dan akhirat."
|
| 524 |
+
</p>
|
| 525 |
+
</div>
|
| 526 |
+
</div>
|
| 527 |
+
|
| 528 |
+
<div class="mt-12 bg-green-50 p-8 rounded-lg shadow-md max-w-3xl mx-auto">
|
| 529 |
+
<h3 class="text-2xl font-semibold text-green-700 mb-4 text-center">Warisan Abadi Ahmad Sari</h3>
|
| 530 |
+
<p class="text-gray-700 mb-6 text-center">
|
| 531 |
+
"Aku tidak meninggalkan harta yang banyak untuk kalian, tapi aku berharap nilai-nilai ini akan menjadi warisan yang lebih berharga dari emas dan perak."
|
| 532 |
+
</p>
|
| 533 |
+
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
| 534 |
+
<div class="bg-white p-3 rounded text-center">
|
| 535 |
+
<i class="fas fa-hand-holding-heart text-green-600 text-2xl mb-2"></i>
|
| 536 |
+
<p class="font-medium">Kedermawanan</p>
|
| 537 |
+
</div>
|
| 538 |
+
<div class="bg-white p-3 rounded text-center">
|
| 539 |
+
<i class="fas fa-book-quran text-green-600 text-2xl mb-2"></i>
|
| 540 |
+
<p class="font-medium">Keimanan</p>
|
| 541 |
+
</div>
|
| 542 |
+
<div class="bg-white p-3 rounded text-center">
|
| 543 |
+
<i class="fas fa-user-shield text-green-600 text-2xl mb-2"></i>
|
| 544 |
+
<p class="font-medium">Kejujuran</p>
|
| 545 |
+
</div>
|
| 546 |
+
<div class="bg-white p-3 rounded text-center">
|
| 547 |
+
<i class="fas fa-graduation-cap text-green-600 text-2xl mb-2"></i>
|
| 548 |
+
<p class="font-medium">Pendidikan</p>
|
| 549 |
+
</div>
|
| 550 |
+
<div class="bg-white p-3 rounded text-center">
|
| 551 |
+
<i class="fas fa-users text-green-600 text-2xl mb-2"></i>
|
| 552 |
+
<p class="font-medium">Keluarga</p>
|
| 553 |
+
</div>
|
| 554 |
+
<div class="bg-white p-3 rounded text-center">
|
| 555 |
+
<i class="fas fa-hands-helping text-green-600 text-2xl mb-2"></i>
|
| 556 |
+
<p class="font-medium">Kerja Keras</p>
|
| 557 |
+
</div>
|
| 558 |
+
</div>
|
| 559 |
+
</div>
|
| 560 |
+
</div>
|
| 561 |
+
</section>
|
| 562 |
+
|
| 563 |
+
<!-- Footer -->
|
| 564 |
+
<footer class="bg-green-900 text-white py-8">
|
| 565 |
+
<div class="container mx-auto px-4">
|
| 566 |
+
<div class="flex flex-col md:flex-row justify-between items-center">
|
| 567 |
+
<div class="mb-6 md:mb-0">
|
| 568 |
+
<div class="flex items-center space-x-2">
|
| 569 |
+
<i class="fas fa-home text-xl"></i>
|
| 570 |
+
<span class="font-bold text-xl">Keluarga Ahmad Sari</span>
|
| 571 |
+
</div>
|
| 572 |
+
<p class="mt-2 text-green-200">Kebumen, Jawa Tengah - Indonesia</p>
|
| 573 |
+
</div>
|
| 574 |
+
|
| 575 |
+
<div class="flex space-x-6">
|
| 576 |
+
<a href="#" class="text-green-200 hover:text-white transition">
|
| 577 |
+
<i class="fab fa-facebook-f text-xl"></i>
|
| 578 |
+
</a>
|
| 579 |
+
<a href="#" class="text-green-200 hover:text-white transition">
|
| 580 |
+
<i class="fab fa-instagram text-xl"></i>
|
| 581 |
+
</a>
|
| 582 |
+
<a href="#" class="text-green-200 hover:text-white transition">
|
| 583 |
+
<i class="fab fa-whatsapp text-xl"></i>
|
| 584 |
+
</a>
|
| 585 |
+
<a href="#" class="text-green-200 hover:text-white transition">
|
| 586 |
+
<i class="fas fa-envelope text-xl"></i>
|
| 587 |
+
</a>
|
| 588 |
+
</div>
|
| 589 |
+
</div>
|
| 590 |
+
|
| 591 |
+
<div class="border-t border-green-800 mt-8 pt-6 text-center text-green-300">
|
| 592 |
+
<p>© 2023 Keluarga Ahmad Sari Kebumen. Seluruh hak cipta dilindungi.</p>
|
| 593 |
+
<p class="mt-2">Dibuat dengan penuh cinta untuk menghormati warisan keluarga.</p>
|
| 594 |
+
</div>
|
| 595 |
+
</div>
|
| 596 |
+
</footer>
|
| 597 |
+
|
| 598 |
+
<!-- Back to Top Button -->
|
| 599 |
+
<button id="back-to-top" class="fixed bottom-6 right-6 bg-green-700 text-white p-3 rounded-full shadow-lg hidden">
|
| 600 |
+
<i class="fas fa-arrow-up"></i>
|
| 601 |
+
</button>
|
| 602 |
+
|
| 603 |
+
<script>
|
| 604 |
+
// Mobile menu toggle
|
| 605 |
+
document.getElementById('menu-toggle').addEventListener('click', function() {
|
| 606 |
+
const menu = document.getElementById('mobile-menu');
|
| 607 |
+
menu.classList.toggle('hidden');
|
| 608 |
+
});
|
| 609 |
+
|
| 610 |
+
// Back to top button
|
| 611 |
+
const backToTopButton = document.getElementById('back-to-top');
|
| 612 |
+
|
| 613 |
+
window.addEventListener('scroll', function() {
|
| 614 |
+
if (window.pageYOffset > 300) {
|
| 615 |
+
backToTopButton.classList.remove('hidden');
|
| 616 |
+
} else {
|
| 617 |
+
backToTopButton.classList.add('hidden');
|
| 618 |
+
}
|
| 619 |
+
});
|
| 620 |
+
|
| 621 |
+
backToTopButton.addEventListener('click', function() {
|
| 622 |
+
window.scrollTo({ top: 0, behavior: 'smooth' });
|
| 623 |
+
});
|
| 624 |
+
|
| 625 |
+
// Smooth scrolling for anchor links
|
| 626 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 627 |
+
anchor.addEventListener('click', function (e) {
|
| 628 |
+
e.preventDefault();
|
| 629 |
+
|
| 630 |
+
const targetId = this.getAttribute('href');
|
| 631 |
+
const targetElement = document.querySelector(targetId);
|
| 632 |
+
|
| 633 |
+
if (targetElement) {
|
| 634 |
+
window.scrollTo({
|
| 635 |
+
top: targetElement.offsetTop - 80,
|
| 636 |
+
behavior: 'smooth'
|
| 637 |
+
});
|
| 638 |
+
|
| 639 |
+
// Close mobile menu if open
|
| 640 |
+
const mobileMenu = document.getElementById('mobile-menu');
|
| 641 |
+
if (!mobileMenu.classList.contains('hidden')) {
|
| 642 |
+
mobileMenu.classList.add('hidden');
|
| 643 |
+
}
|
| 644 |
+
}
|
| 645 |
+
});
|
| 646 |
+
});
|
| 647 |
+
|
| 648 |
+
// Animation on scroll
|
| 649 |
+
const fadeElements = document.querySelectorAll('.fade-in');
|
| 650 |
+
|
| 651 |
+
const observer = new IntersectionObserver((entries) => {
|
| 652 |
+
entries.forEach(entry => {
|
| 653 |
+
if (entry.isIntersecting) {
|
| 654 |
+
entry.target.classList.add('animate-fadeIn');
|
| 655 |
+
}
|
| 656 |
+
});
|
| 657 |
+
}, { threshold: 0.1 });
|
| 658 |
+
|
| 659 |
+
fadeElements.forEach(element => {
|
| 660 |
+
observer.observe(element);
|
| 661 |
+
});
|
| 662 |
+
</script>
|
| 663 |
+
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=asronsr/achmad-sari" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 664 |
+
</html>
|
prompts.txt
ADDED
|
File without changes
|